:root {
        --ink: #f5efe6;
        --muted: #c9beb1;
        --accent: #b86f58;
        --accent-rgb: 184, 111, 88;
        --accent-shadow-rgb: 112, 61, 50;
        --bg: #101214;
        --button-ink: #180f0e;
        --oak-light: #d98a70;
        --clay: #7f5446;
        --mineral: #8aa6ad;
        --plaster: #ede5db;
        --font:
          "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI",
          sans-serif;
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
        color-scheme: dark;
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: var(--font);
        -webkit-font-smoothing: antialiased;
      }
      section[id] {
        scroll-margin-top: 76px;
      }
      #main-content:focus {
        outline: none;
      }
      .skip-link {
        position: fixed;
        z-index: 100;
        top: 10px;
        left: 12px;
        padding: 11px 15px;
        border-radius: 10px;
        color: var(--button-ink);
        background: var(--oak-light);
        font-size: 14px;
        font-weight: 800;
        text-decoration: none;
        transform: translateY(-150%);
        transition: transform 0.16s ease;
      }
      .skip-link:focus {
        transform: translateY(0);
      }
      :where(a, button, input, select, textarea, summary):focus-visible {
        outline: 3px solid var(--oak-light);
        outline-offset: 3px;
      }
      em {
        color: inherit;
        font-style: normal;
      }

      /* ---- Scroll-scrubbed scenes ---- */
      .hero {
        position: relative;
        height: 280vh; /* scroll distance that drives the build */
      }
      /* First scroll stage: the hardwood floor that flies in. */
      .floor {
        position: relative;
        height: 240vh;
      }
      .hero__sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
        background: var(--bg);
      }
      .hero__canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
      }
      /* Scrims for text legibility */
      .hero__sticky::before {
        content: "";
        position: absolute;
        inset: 0;
        /* Dark dusk scene -> soft dark scrims at top/bottom for legibility. */
        background: linear-gradient(
          to bottom,
          rgba(8, 9, 10, 0.5) 0%,
          rgba(8, 9, 10, 0) 28%,
          rgba(8, 9, 10, 0) 58%,
          rgba(8, 9, 10, 0.74) 100%
        );
        pointer-events: none;
        z-index: 2;
      }

      .hero__overlay {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: clamp(24px, 6vw, 96px);
        pointer-events: none;
      }
      .hero__eyebrow {
        font-size: clamp(11px, 1.1vw, 14px);
        letter-spacing: 0.32em;
        text-transform: uppercase;
        color: var(--accent);
        margin: 0 0 18px;
        font-weight: 700;
      }
      .hero__title {
        font-size: clamp(40px, 7vw, 104px);
        line-height: 0.98;
        font-weight: 800;
        letter-spacing: 0;
        margin: 0;
        max-width: 16ch;
        color: var(--ink);
        text-shadow:
          0 2px 8px rgba(0, 0, 0, 0.6),
          0 2px 40px rgba(0, 0, 0, 0.5);
      }
      .hero__sub {
        font-size: clamp(15px, 1.6vw, 21px);
        color: var(--muted);
        margin: 22px 0 0;
        max-width: 42ch;
        line-height: 1.5;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
      }

      /* The intro block fades out as the build starts; the outro fades in. */
      .hero__block {
        transition: opacity 0.25s linear;
      }
      .hero__outro {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: clamp(24px, 6vw, 96px);
        opacity: 0;
      }
      .hero__cta {
        pointer-events: auto;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        align-self: flex-start;
        margin-top: 30px;
        padding: 15px 28px;
        border-radius: 999px;
        background: var(--accent);
        color: var(--button-ink);
        font-weight: 800;
        font-size: 16px;
        text-decoration: none;
        box-shadow: 0 14px 40px rgba(var(--accent-shadow-rgb), 0.35);
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease;
      }
      .hero__cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 50px rgba(var(--accent-shadow-rgb), 0.5);
      }

      .hero__scrollhint {
        position: absolute;
        bottom: 28px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 4;
        color: var(--muted);
        font-size: 12px;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        transition: opacity 0.3s linear;
      }
      .hero__scrollhint span {
        width: 1px;
        height: 34px;
        background: linear-gradient(var(--muted), transparent);
        animation: drop 1.6s ease-in-out infinite;
      }
      @keyframes drop {
        0%,
        100% {
          transform: scaleY(0.4);
          transform-origin: top;
          opacity: 0.4;
        }
        50% {
          transform: scaleY(1);
          opacity: 1;
        }
      }

      /* Loading bar */
      .loader {
        position: absolute;
        inset: 0;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        background: var(--bg);
        transition:
          opacity 0.5s ease,
          visibility 0s linear 0.5s;
      }
      .loader.is-done {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
      }
      .scene-fallback {
        position: absolute;
        z-index: 4;
        right: clamp(18px, 3vw, 40px);
        bottom: clamp(18px, 3vw, 40px);
        max-width: 34ch;
        margin: 0;
        padding: 12px 15px;
        border: 1px solid rgba(var(--accent-rgb), 0.48);
        border-radius: 12px;
        color: var(--ink);
        background: rgba(12, 13, 15, 0.9);
        font-size: 13px;
        line-height: 1.45;
      }
      .loader__bar {
        width: min(280px, 60vw);
        height: 3px;
        background: rgba(239, 228, 212, 0.12);
        border-radius: 3px;
        overflow: hidden;
      }
      .loader__fill {
        height: 100%;
        width: 0%;
        background: var(--accent);
        transition: width 0.15s linear;
      }
      .loader__label {
        font-size: 12px;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: var(--muted);
      }

      /* ---- Below-the-fold page content (proves it's a real hero) ---- */
      .section {
        max-width: 1100px;
        margin: 0 auto;
        padding: clamp(70px, 12vh, 160px) clamp(24px, 6vw, 64px);
      }
      .section h2 {
        font-size: clamp(28px, 4vw, 48px);
        margin: 0 0 18px;
        letter-spacing: -0.01em;
      }
      .section p {
        color: var(--muted);
        font-size: clamp(16px, 1.5vw, 19px);
        line-height: 1.7;
        max-width: 60ch;
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 28px;
        margin-top: 48px;
      }
      .card {
        border: 1px solid rgba(239, 228, 212, 0.08);
        border-radius: 16px;
        padding: 28px;
        background: rgba(239, 228, 212, 0.025);
      }
      .card h3 {
        margin: 0 0 10px;
        font-size: 18px;
      }
      .card p {
        font-size: 15px;
        margin: 0;
      }
      footer {
        padding: 40px;
        text-align: center;
        color: var(--muted);
        font-size: 13px;
        border-top: 1px solid rgba(239, 228, 212, 0.08);
      }

      @media (prefers-reduced-motion: reduce) {
        .hero__scrollhint span {
          animation: none;
        }
      }

      @media (max-width: 860px) {
        .loader {
          display: none;
        }
        .hero {
          height: 190svh;
        }
        .floor {
          height: 170svh;
        }
        .hero__sticky {
          position: sticky;
          height: 100svh;
          background:
            linear-gradient(
              to bottom,
              rgba(8, 9, 10, 0.18),
              rgba(8, 9, 10, 0.76)
            ),
            image-set(
              url("../assets/responsive/deck-composite-boards-800.webp") type("image/webp"),
              url("../assets/deck-composite-boards.jpg") type("image/jpeg")
            )
            center / cover;
        }
        .floor .hero__sticky {
          background:
            linear-gradient(
              to bottom,
              rgba(8, 9, 10, 0.16),
              rgba(8, 9, 10, 0.78)
            ),
            image-set(
              url("../assets/responsive/during-install-bruce-800.webp") type("image/webp"),
              url("../assets/during-install-bruce.jpg") type("image/jpeg")
            )
            center / cover;
        }
        .hero__canvas {
          opacity: 0;
          transition: opacity 0.35s ease;
        }
        .scene-hero-ready #heroCanvas,
        .scene-floor-ready #floorCanvas {
          opacity: 1;
        }
        .hero__overlay {
          min-height: 100svh;
        }
        .hero__scrollhint {
          display: none;
        }
        .hero__title {
          font-size: clamp(36px, 14vw, 58px);
          line-height: 1.02;
        }
        .hero__sub {
          font-size: 16px;
        }
      }

      /* ============================================================
         Real work — the render hands off to actual RI installs.
         Display face: Fraunces (craft/heritage), not Inter/Roboto.
         ============================================================ */
      :root {
        --display: "Fraunces", Georgia, "Times New Roman", serif;
        --accent-soft: var(--oak-light);
      }

      /* Real-work masthead: conversion first, craft storytelling second. */
      .masthead {
        position: relative;
        min-height: 100svh;
        display: grid;
        align-items: center;
        padding: clamp(104px, 12vh, 150px) 0 clamp(60px, 8vh, 100px);
        overflow: hidden;
        background:
          radial-gradient(70% 70% at 10% 18%, rgba(var(--accent-rgb), 0.16), transparent 68%),
          linear-gradient(145deg, #0d1012 0%, #14191b 58%, #0d1012 100%);
        border-bottom: 1px solid rgba(239, 228, 212, 0.08);
      }
      .masthead::after {
        content: "";
        position: absolute;
        inset: auto -8% -38% 48%;
        height: 70%;
        background: radial-gradient(circle, rgba(138, 166, 173, 0.12), transparent 70%);
        pointer-events: none;
      }
      .masthead__scene-link {
        position: absolute;
        z-index: 2;
        bottom: 22px;
        left: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-decoration: none;
        text-transform: uppercase;
        transform: translateX(-50%);
      }
      .masthead__scene-link i {
        width: 1px;
        height: 24px;
        background: linear-gradient(var(--accent-soft), transparent);
        transform-origin: top;
        animation: drop 1.6s ease-in-out infinite;
      }
      .masthead__scene-link:hover,
      .masthead__scene-link:focus-visible {
        color: var(--ink);
      }
      .masthead__inner {
        position: relative;
        z-index: 1;
        width: min(1180px, calc(100% - 48px));
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.88fr);
        gap: clamp(40px, 7vw, 100px);
        align-items: center;
      }
      .masthead__eyebrow {
        margin: 0 0 18px;
        color: var(--accent-soft);
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
      }
      .masthead h1 {
        max-width: 12ch;
        margin: 0;
        font-family: var(--display);
        font-size: clamp(46px, 5.7vw, 78px);
        font-weight: 650;
        line-height: 0.98;
        letter-spacing: -0.025em;
      }
      .masthead__lead {
        max-width: 48ch;
        margin: 24px 0 0;
        color: var(--muted);
        font-size: clamp(17px, 1.45vw, 20px);
        line-height: 1.6;
      }
      .masthead__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px;
        margin-top: 30px;
      }
      .btn-action--large {
        min-height: 50px;
        padding: 14px 24px;
        font-size: 16px;
      }
      .masthead__call {
        min-height: 50px;
        display: inline-flex;
        align-items: center;
        padding: 13px 20px;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        color: var(--ink);
        font-weight: 750;
        text-decoration: none;
        background: rgba(239, 228, 212, 0.035);
      }
      .masthead__call:hover {
        border-color: rgba(var(--accent-rgb), 0.75);
      }
      .masthead__price-card {
        display: grid;
        gap: 5px;
        max-width: 470px;
        margin-top: 22px;
        padding: 15px 17px;
        border: 1px solid rgba(var(--accent-rgb), 0.48);
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(239, 228, 212, 0.045));
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
      }
      .masthead__price-kicker {
        color: var(--accent-soft);
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
      .masthead__price-card strong {
        color: var(--ink);
        font-size: 17px;
        line-height: 1.25;
      }
      .masthead__price-card > span:last-child {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
      }
      .project-choice {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        align-items: center;
        margin-top: 28px;
      }
      .project-choice > span {
        flex-basis: 100%;
        margin-right: 3px;
        color: var(--muted);
        font-size: 14px;
      }
      .project-choice a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 9px 15px;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        color: var(--ink);
        background: rgba(239, 228, 212, 0.045);
        font-size: 14px;
        font-weight: 650;
        text-decoration: none;
        transition: border-color 0.18s ease, background 0.18s ease;
      }
      .project-choice a:hover,
      .project-choice a:focus-visible {
        border-color: var(--accent);
        background: rgba(var(--accent-rgb), 0.14);
      }
      .masthead__trust {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 20px;
        padding: 0;
        margin: 30px 0 0;
        color: var(--muted);
        font-size: 13px;
      }
      .masthead__trust li::before {
        content: "✓";
        color: var(--accent-soft);
        margin-right: 7px;
        font-weight: 800;
      }
      .masthead__mobile-text,
      .masthead__trust--mobile {
        display: none;
      }
      .masthead__media {
        position: relative;
        min-height: min(66vw, 660px);
      }
      .masthead__media figure {
        position: absolute;
        margin: 0;
        overflow: hidden;
        border: 1px solid rgba(239, 228, 212, 0.16);
        border-radius: 20px;
        background: #171a1c;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.46);
      }
      .masthead__media img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
      .masthead__media figcaption {
        position: absolute;
        inset: auto 12px 12px 12px;
        padding: 9px 12px;
        border: 1px solid rgba(239, 228, 212, 0.15);
        border-radius: 999px;
        color: var(--ink);
        background: rgba(8, 9, 10, 0.76);
        backdrop-filter: blur(8px);
        font-size: 12px;
        font-weight: 650;
        text-align: center;
      }
      .masthead__floor {
        inset: 0 15% 8% 0;
      }
      .masthead__floor img {
        object-position: 76% center;
        transform: scale(1.45) translateX(-10%);
        transform-origin: center;
      }
      .masthead__detail {
        width: 43%;
        height: 48%;
        right: 0;
        bottom: 0;
        transform: translateY(2%);
      }
      .masthead__detail img {
        object-position: center 78%;
        transform: scale(1.22) translateY(-5%);
        transform-origin: center;
      }
      /* Third board exists for the desktop board-row hero only. */
      .masthead__finish {
        display: none;
      }

      @media (min-width: 921px) {
        /* Over the photo boards the transparent header reads as a defect,
           so the home desktop gets the frosted "stuck" bar from the start. */
        .home-page .sitehdr {
          background: rgba(12, 13, 15, 0.88);
          backdrop-filter: saturate(140%) blur(10px);
          border-bottom-color: var(--line);
        }
        .home-page .brand__logo {
          width: 188px;
        }
        /* Board-row hero: the layout lays the floor. Copy is the first
           board, then three photo boards telling one job's arc —
           in progress, the detail work, finished. Wall to wall, no card. */
        .home-page .masthead {
          min-height: max(640px, 100svh);
          align-items: stretch;
          padding: 0;
          border-bottom: 1px solid rgba(239, 228, 212, 0.14);
        }
        .home-page .masthead::after {
          display: none;
        }
        .home-page .masthead__inner {
          width: 100%;
          min-height: inherit;
          margin: 0;
          grid-template-columns: clamp(440px, 37vw, 660px) minmax(0, 1fr);
          gap: 0;
          align-items: stretch;
        }
        .home-page .masthead__copy {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 118px clamp(40px, 4.4vw, 84px) 56px;
          border-right: 1px solid rgba(239, 228, 212, 0.14);
          background:
            radial-gradient(90% 60% at 8% 96%, rgba(var(--accent-rgb), 0.14), transparent 70%),
            linear-gradient(162deg, #15181a 0%, #101214 52%, #0d1013 100%);
          animation: board-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
        }
        .home-page .masthead h1 {
          max-width: none;
          font-size: clamp(50px, 4.4vw, 82px);
          line-height: 0.96;
        }
        .home-page .masthead__lead {
          max-width: 44ch;
          margin-top: 20px;
          font-size: clamp(17px, 1.25vw, 19px);
        }
        .home-page .masthead__actions {
          margin-top: 28px;
        }
        .home-page .masthead__desktop-hide {
          display: none;
        }
        .home-page .project-choice {
          gap: 8px;
          margin-top: 20px;
        }
        .home-page .project-choice > span {
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 0.06em;
          text-transform: uppercase;
        }
        .home-page .project-choice a {
          min-height: 40px;
          padding: 8px 13px;
          font-size: 13px;
        }
        .home-page .masthead__trust {
          margin-top: 22px;
          padding-top: 16px;
          border-top: 1px solid var(--line);
        }
        .home-page .masthead__media {
          min-height: inherit;
          display: grid;
          grid-template-columns: 1.45fr 1fr 1fr;
        }
        .home-page .masthead__media figure {
          position: relative;
          inset: auto;
          width: auto;
          height: auto;
          min-height: 0;
          border: 0;
          border-radius: 0;
          box-shadow: none;
          transform: none;
          animation: board-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
        }
        .home-page .masthead__media figure + figure {
          border-left: 1px solid rgba(239, 228, 212, 0.14);
        }
        .home-page .masthead__floor {
          animation-delay: 0.1s;
        }
        .home-page .masthead__detail {
          display: block;
          animation-delay: 0.2s;
        }
        .home-page .masthead__finish {
          display: block;
          animation-delay: 0.3s;
        }
        .home-page .masthead__media img {
          position: absolute;
          inset: 0;
          transform: none;
          transition: filter 0.6s ease;
        }
        .home-page .masthead__floor img {
          object-position: 78% center;
        }
        .home-page .masthead__detail img {
          object-position: center 88%;
        }
        .home-page .masthead__finish img {
          object-position: 30% 68%;
        }
        .home-page .masthead__media figure:hover img {
          filter: brightness(1.08);
        }
        .home-page .masthead__media figcaption {
          position: absolute;
          inset: auto 0 0 0;
          padding: 44px 16px 14px;
          border: 0;
          border-radius: 0;
          color: var(--ink);
          background: linear-gradient(transparent, rgba(8, 9, 10, 0.74));
          backdrop-filter: none;
          font-family: var(--font-mono);
          font-size: 10px;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          text-align: left;
        }
        .home-page .masthead__scene-link {
          display: none;
        }
        @keyframes board-in {
          from {
            opacity: 0;
            transform: translateY(18px);
          }
          to {
            opacity: 1;
            transform: none;
          }
        }
        @media (prefers-reduced-motion: reduce) {
          .home-page .masthead__copy,
          .home-page .masthead__media figure {
            animation: none;
          }
        }
      }

      @media (max-width: 920px) {
        .masthead__desktop-text {
          display: none;
        }
        .masthead__mobile-text {
          display: inline;
        }
        .masthead__trust.masthead__trust--desktop {
          display: none;
        }
        .masthead__trust.masthead__trust--mobile {
          display: flex;
        }
        .masthead {
          min-height: auto;
        }
        .masthead__inner {
          grid-template-columns: 1fr;
        }
        .masthead__media {
          min-height: 600px;
        }
      }

      @media (max-width: 767px) {
        .masthead {
          min-height: 100svh;
          align-items: start;
          padding: 94px 24px calc(100px + env(safe-area-inset-bottom));
          background:
            url("../assets/featured/white-oak-room-progress-960.webp") 100% center / cover no-repeat,
            #0d1012;
        }
        .masthead::after { display: none; }
        .masthead__inner { display: block; width: 100%; }
        .masthead__copy { max-width: 31rem; }
        .masthead__eyebrow {
          max-width: 100%;
          margin-bottom: 14px;
          width: fit-content;
          white-space: nowrap;
          padding: 6px 8px;
          border: 1px solid rgba(23, 26, 28, 0.13);
          border-radius: 8px;
          color: #171a1c;
          background: rgba(245, 239, 230, 0.74);
          backdrop-filter: blur(8px);
          font-size: 10px;
          font-weight: 850;
          line-height: 1.45;
          letter-spacing: 0.16em;
        }
        .masthead h1 {
          font-size: clamp(42px, 13.2vw, 58px);
          max-width: 10.5ch;
          text-wrap: balance;
        }
        .masthead__lead {
          max-width: 31ch;
          margin-top: 18px;
          color: #171a1c;
          font-size: 16px;
          font-weight: 750;
          line-height: 1.5;
        }
        .masthead__actions {
          margin-top: 24px;
          align-items: stretch;
        }
        .masthead__call { display: none; }
        .masthead__actions > * {
          justify-content: center;
          flex: 1 1 100%;
        }
        .masthead__media {
          display: none;
        }
        .masthead__trust {
          display: flex;
          gap: 6px 14px;
          margin-top: 18px;
          width: fit-content;
          padding: 9px 11px;
          border: 1px solid rgba(23, 26, 28, 0.13);
          border-radius: 10px;
          color: #171a1c;
          background: rgba(245, 239, 230, 0.76);
          backdrop-filter: blur(8px);
          font-size: 11px;
        }
        .masthead__trust li {
          font-weight: 750;
        }
        .masthead__trust li:last-child { display: none; }
        .masthead__trust li::before { margin-right: 5px; }
        .project-choice { display: none; }
        .masthead__price-card {
          display: flex;
          align-items: center;
          gap: 9px;
          max-width: 34ch;
          margin-top: 16px;
          padding: 11px 13px;
          border-radius: 12px;
          background: rgba(16, 21, 23, 0.66);
          backdrop-filter: blur(10px);
        }
        .masthead__price-kicker { display: none; }
        .masthead__price-card strong {
          font-size: 14px;
          line-height: 1.3;
        }
        .masthead__price-card > span:last-child {
          display: none;
        }
        .masthead__scene-link {
          display: none;
        }
        .callbar a {
          padding-inline: 10px;
          font-size: 14px;
          white-space: nowrap;
        }
      }

      .work {
        position: relative;
        background: #111416;
        padding: clamp(80px, 14vh, 180px) 0 clamp(60px, 10vh, 140px);
        overflow: hidden;
      }
      /* Atmosphere: shop-warm copper and muted green, not a flat fill. */
      .work::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            120% 80% at 78% -10%,
            rgba(var(--accent-rgb), 0.16),
            transparent 55%
          ),
          radial-gradient(
            90% 70% at -10% 110%,
            rgba(134, 166, 157, 0.13),
            transparent 60%
          );
        pointer-events: none;
      }
      .work::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.04;
        pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
      }
      .work__inner {
        position: relative;
        z-index: 1;
        width: min(1180px, calc(100% - 48px));
        max-width: none;
        margin: 0 auto;
      }
      .work__kicker {
        font-size: clamp(11px, 1.1vw, 13px);
        letter-spacing: 0.34em;
        text-transform: uppercase;
        color: var(--accent);
        font-weight: 700;
        margin: 0 0 16px;
      }
      .work__head {
        font-family: var(--display);
        font-weight: 800;
        font-size: clamp(38px, 6.4vw, 92px);
        line-height: 0.96;
        letter-spacing: 0;
        margin: 0;
        max-width: 16ch;
      }
      .work__lead {
        color: var(--muted);
        font-size: clamp(16px, 1.6vw, 20px);
        line-height: 1.65;
        max-width: 52ch;
        margin: 26px 0 0;
      }

      /* Reveal-on-scroll (one orchestrated, staggered entrance) */
      .reveal {
        opacity: 1;
        transform: none;
        transition:
          opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
      }
      .reveal.in {
        opacity: 1;
        transform: none;
      }

      /* Centerpiece: the real "build", subfloor → finished in one frame. */
      .feature {
        display: grid;
        grid-template-columns: 1.55fr 1fr;
        gap: clamp(24px, 4vw, 56px);
        align-items: end;
        margin-top: clamp(54px, 8vh, 110px);
      }
      .feature__media {
        position: relative;
        border-radius: 18px;
        overflow: hidden;
        box-shadow:
          0 40px 90px rgba(0, 0, 0, 0.55),
          0 0 0 1px rgba(239, 228, 212, 0.06);
      }
      .feature__media img {
        display: block;
        width: 100%;
        height: clamp(320px, 52vh, 620px);
        object-fit: cover;
        transform: scale(1.02);
        transition: transform 1.1s ease;
      }
      .feature__media:hover img {
        transform: scale(1.06);
      }
      .feature__tag {
        position: absolute;
        left: 18px;
        bottom: 16px;
        background: rgba(16, 18, 20, 0.76);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(var(--accent-rgb), 0.32);
        color: var(--ink);
        font-size: 13px;
        letter-spacing: 0.04em;
        padding: 8px 14px;
        border-radius: 999px;
      }
      .feature__note {
        padding-bottom: 8px;
      }
      .feature__note h3 {
        font-family: var(--display);
        font-weight: 600;
        font-size: clamp(22px, 2.4vw, 32px);
        line-height: 1.15;
        margin: 0 0 14px;
      }
      .feature__note p {
        color: var(--muted);
        font-size: clamp(15px, 1.4vw, 17px);
        line-height: 1.7;
        margin: 0;
      }

      /* Hammer clip — real movement proof before the still-photo stages. */
      .craft-clip {
        display: grid;
        grid-template-columns: minmax(220px, 0.78fr) 1.22fr;
        gap: clamp(24px, 4vw, 56px);
        align-items: center;
        margin-top: clamp(58px, 9vh, 120px);
        padding: clamp(16px, 2.4vw, 28px);
        border: 1px solid rgba(239, 228, 212, 0.11);
        border-radius: 18px;
        background:
          linear-gradient(135deg, rgba(237, 229, 219, 0.045), rgba(138, 166, 173, 0.06)),
          rgba(16, 18, 20, 0.78);
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
      }
      .craft-clip__media {
        margin: 0;
        overflow: hidden;
        border-radius: 14px;
        border: 1px solid rgba(239, 228, 212, 0.12);
        aspect-ratio: 9 / 16;
        background: var(--bg-3);
      }
      .craft-clip__media video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .craft-clip__copy h3 {
        font-family: var(--display);
        font-size: clamp(28px, 4vw, 56px);
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0;
        max-width: 14ch;
        margin: 0 0 18px;
      }
      .craft-clip__copy p:not(.work__kicker) {
        color: var(--muted);
        font-size: clamp(16px, 1.5vw, 19px);
        line-height: 1.65;
        max-width: 42ch;
        margin: 0;
      }

      /* Three independent project snapshots, never presented as one room's sequence. */
      .journey {
        margin-top: clamp(70px, 11vh, 150px);
      }
      .journey__h {
        font-family: var(--display);
        font-weight: 600;
        font-size: clamp(24px, 3vw, 40px);
        margin: 0 0 8px;
        letter-spacing: -0.01em;
      }
      .journey__sub {
        color: var(--muted);
        margin: 0 0 36px;
        font-size: clamp(15px, 1.4vw, 18px);
      }
      .stages {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(14px, 2vw, 26px);
      }
      .stage {
        position: relative;
        border-radius: 14px;
        overflow: hidden;
        background: #171b1e;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
      }
      /* Diagonal flow: lift the middle (During) stage. */
      .stage--mid {
        transform: translateY(-28px);
      }
      .stage--after img {
        object-position: center 68%;
      }
      .stage img {
        display: block;
        width: 100%;
        height: clamp(220px, 30vh, 360px);
        object-fit: cover;
        transition: transform 0.9s ease;
      }
      .stage:hover img {
        transform: scale(1.05);
      }
      .stage__label {
        position: absolute;
        top: 14px;
        left: 14px;
        font-family: var(--display);
        font-weight: 500;
        font-size: 15px;
        color: var(--button-ink);
        background: var(--accent-soft);
        padding: 4px 13px;
        border-radius: 999px;
      }
      .stage__cap {
        padding: 14px 16px 18px;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.5;
      }

      /* Finished-work gallery — asymmetric, overlapping. */
      .gallery {
        margin-top: clamp(70px, 11vh, 150px);
      }
      .gallery__grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: clamp(150px, 19vh, 220px);
        gap: clamp(12px, 1.6vw, 20px);
      }
      .shot {
        position: relative;
        overflow: hidden;
        border-radius: 14px;
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
      }
      .shot img,
      .shot video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.9s ease;
      }
      .shot:hover img,
      .shot:hover video {
        transform: scale(1.06);
      }
      .shot figcaption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 30px 16px 14px;
        font-size: 13.5px;
        color: var(--ink);
        background: linear-gradient(transparent, rgba(8, 9, 10, 0.8));
        opacity: 0;
        transform: translateY(8px);
        transition:
          opacity 0.35s ease,
          transform 0.35s ease;
      }
      .shot:hover figcaption {
        opacity: 1;
        transform: none;
      }
      .shot--a {
        grid-column: span 4;
        grid-row: span 2;
      }
      .shot--b {
        grid-column: span 2;
        grid-row: span 2;
      }
      .shot--c {
        grid-column: span 3;
        grid-row: span 2;
      }
      .shot--d {
        grid-column: span 3;
        grid-row: span 2;
      }
      .shot--e {
        grid-column: span 2;
        grid-row: span 2;
      }
      .shot--f {
        grid-column: span 4;
        grid-row: span 2;
      }
      .shot--video {
        grid-row: span 3;
      }

      @media (max-width: 760px) {
        .feature,
        .craft-clip,
        .stages,
        .gallery__grid {
          grid-template-columns: 1fr;
        }
        .craft-clip {
          padding: 14px;
        }
        .craft-clip__media {
          aspect-ratio: 4 / 5;
        }
        .gallery__grid {
          grid-auto-rows: auto;
        }
        .stage--mid {
          transform: none;
        }
        .shot--a,
        .shot--b,
        .shot--c,
        .shot--d {
          grid-column: 1 / -1;
          grid-row: auto;
        }
        .shot--e,
        .shot--f {
          grid-column: 1 / -1;
          grid-row: auto;
        }
        .shot {
          height: clamp(220px, 38vh, 320px);
        }
        .shot--video {
          grid-row: auto;
          height: clamp(380px, 70vh, 560px);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .reveal {
          opacity: 1;
          transform: none;
          transition: none;
        }
      }

      /* Caption-complete site cut of the social advertising reel. */
      .proof-reel {
        position: relative;
        padding: clamp(72px, 10vw, 132px) 0;
        background:
          radial-gradient(80% 100% at 100% 10%, rgba(var(--accent-rgb), 0.13), transparent 65%),
          #0d1012;
        border-top: 1px solid rgba(239, 228, 212, 0.08);
        border-bottom: 1px solid rgba(239, 228, 212, 0.08);
      }
      .proof-reel__inner {
        width: min(1180px, calc(100% - 48px));
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
        gap: clamp(32px, 6vw, 78px);
        align-items: center;
      }
      .proof-reel__copy h2 {
        margin: 0;
        font-family: var(--display);
        font-size: clamp(34px, 4vw, 56px);
        font-weight: 650;
        line-height: 1.02;
      }
      .proof-reel__copy > p:not(.work__kicker) {
        margin: 22px 0 26px;
        color: var(--muted);
        font-size: 17px;
        line-height: 1.65;
      }
      .proof-reel__media {
        position: relative;
        margin: 0;
        overflow: hidden;
        aspect-ratio: 16 / 9;
        border: 1px solid rgba(239, 228, 212, 0.14);
        border-radius: 18px;
        background: #090b0c;
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
      }
      .proof-reel__media video {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
      .proof-reel__media figcaption {
        position: absolute;
        inset: auto 14px 14px 14px;
        padding: 9px 13px;
        border-radius: 999px;
        background: rgba(8, 9, 10, 0.74);
        color: var(--ink);
        font-size: 12px;
        text-align: center;
        backdrop-filter: blur(7px);
      }
      @media (max-width: 820px) {
        .proof-reel__inner {
          grid-template-columns: 1fr;
        }
      }

      /* Additional user-supplied project photos, cropped before delivery. */
      .project-gallery {
        padding: clamp(76px, 10vw, 132px) 0;
        background: #111416;
        border-bottom: 1px solid rgba(239, 228, 212, 0.08);
      }
      .project-gallery__inner {
        width: min(1180px, calc(100% - 48px));
        margin: 0 auto;
      }
      .project-gallery__head {
        max-width: 720px;
        margin-bottom: clamp(32px, 5vw, 58px);
      }
      .project-gallery__head h2 {
        margin: 0;
        font-family: var(--display);
        font-size: clamp(36px, 4.8vw, 64px);
        font-weight: 650;
        line-height: 1;
      }
      .project-gallery__head > p:not(.work__kicker) {
        max-width: 58ch;
        margin: 20px 0 0;
        color: var(--muted);
        font-size: 17px;
        line-height: 1.65;
      }
      .project-gallery__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(12px, 1.7vw, 20px);
      }
      .project-gallery__item {
        position: relative;
        margin: 0;
        overflow: hidden;
        aspect-ratio: 3 / 4;
        border: 1px solid rgba(239, 228, 212, 0.13);
        border-radius: 15px;
        background: #0b0d0e;
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
      }
      .project-gallery__item--wide {
        grid-column: span 2;
        aspect-ratio: 3 / 2;
      }
      .project-gallery__item--final {
        grid-column: 2 / span 2;
        aspect-ratio: 3 / 2;
      }
      .project-gallery__item img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform 0.7s ease;
      }
      .project-gallery__item:hover img {
        transform: scale(1.035);
      }
      .project-gallery__item figcaption {
        position: absolute;
        inset: auto 0 0;
        padding: 34px 15px 14px;
        color: var(--ink);
        background: linear-gradient(transparent, rgba(8, 9, 10, 0.84));
        font-size: 13px;
        font-weight: 700;
      }
      @media (max-width: 820px) {
        .project-gallery__grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .project-gallery__item--final {
          grid-column: span 2;
        }
      }
      @media (max-width: 560px) {
        .project-gallery__grid {
          grid-template-columns: 1fr;
        }
        .project-gallery__item,
        .project-gallery__item--wide,
        .project-gallery__item--final {
          grid-column: auto;
          aspect-ratio: 3 / 4;
        }
      }

      /* ============================================================
         Funnel — the bottom-of-funnel quote capture.
         ============================================================ */
      .funnel {
        position: relative;
        scroll-margin-top: 78px;
        background:
          radial-gradient(
            120% 90% at 85% -10%,
            rgba(var(--accent-rgb), 0.14),
            transparent 55%
          ),
          linear-gradient(180deg, #121619, var(--bg));
        padding: clamp(72px, 12vh, 150px) 0;
        overflow: hidden;
        border-top: 1px solid rgba(239, 228, 212, 0.07);
      }
      .funnel__inner {
        position: relative;
        z-index: 1;
        width: min(1180px, calc(100% - 48px));
        max-width: none;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(28px, 5vw, 72px);
        align-items: start;
      }
      .funnel__pitch .work__kicker {
        margin-bottom: 14px;
      }
      .funnel__h {
        font-family: var(--display);
        font-weight: 800;
        font-size: clamp(34px, 5vw, 68px);
        line-height: 0.98;
        letter-spacing: 0;
        margin: 0;
      }
      .funnel__p {
        color: var(--muted);
        font-size: clamp(16px, 1.5vw, 19px);
        line-height: 1.65;
        max-width: 46ch;
        margin: 22px 0 28px;
      }
      .funnel__trust {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        gap: 12px;
      }
      .funnel__trust li {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--ink);
        font-size: 15px;
      }
      .funnel__trust svg {
        flex: none;
        width: 20px;
        height: 20px;
        color: var(--accent);
      }

      /* The form card */
      .quote-card {
        position: relative;
        background: rgba(239, 228, 212, 0.055);
        border: 1px solid rgba(239, 228, 212, 0.12);
        border-radius: 20px;
        padding: clamp(24px, 3vw, 38px);
        box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
      }
      .quote-card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
      }
      .quote-card__eyebrow {
        font-family: var(--display);
        font-weight: 600;
        font-size: clamp(20px, 2.2vw, 27px);
        margin: 0 0 4px;
      }
      .quote-card__hint {
        color: var(--muted);
        font-size: 14px;
        margin: 0 0 6px;
      }
      .quote-card__required {
        margin: 0 0 20px;
        color: var(--accent-soft);
        font-size: 13px;
      }
      .quote-card__value {
        display: grid;
        gap: 3px;
        margin: 0 0 20px;
        padding: 12px 14px;
        border: 1px solid rgba(var(--accent-rgb), 0.38);
        border-radius: 12px;
        background: rgba(var(--accent-rgb), 0.12);
      }
      .quote-card__value strong {
        color: var(--ink);
        font-size: 14px;
      }
      .quote-card__value span {
        color: var(--muted);
        font-size: 12px;
      }
      .field {
        margin-bottom: 14px;
      }
      .field.row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }
      .field label {
        display: block;
        font-size: 12px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 6px;
      }
      .field label span {
        color: rgba(201, 190, 177, 0.7);
        text-transform: none;
        letter-spacing: 0;
      }
      .field input,
      .field select,
      .field textarea {
        width: 100%;
        background: rgba(8, 9, 10, 0.64);
        border: 1px solid rgba(239, 228, 212, 0.13);
        border-radius: 11px;
        color: var(--ink);
        font-family: var(--font);
        font-size: 15px;
        padding: 12px 14px;
        transition:
          border-color 0.18s ease,
          box-shadow 0.18s ease;
      }
      .field textarea {
        resize: vertical;
        min-height: 84px;
      }
      .field input:focus,
      .field select:focus,
      .field textarea:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
      }
      .field input:user-invalid,
      .field select:user-invalid,
      .field textarea:user-invalid {
        border-color: #d98a70;
      }
      .field select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9bfae' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        padding-right: 36px;
      }
      .quote-submit {
        width: 100%;
        margin-top: 6px;
        border: none;
        cursor: pointer;
        padding: 16px 24px;
        border-radius: 999px;
        background: var(--accent);
        color: var(--button-ink);
        font-family: var(--font);
        font-weight: 800;
        font-size: 16px;
        box-shadow: 0 14px 40px rgba(var(--accent-shadow-rgb), 0.35);
        transition:
          transform 0.18s ease,
          box-shadow 0.18s ease;
      }
      .quote-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 50px rgba(var(--accent-shadow-rgb), 0.5);
      }
      .quote-submit:disabled {
        cursor: wait;
        opacity: 0.72;
        transform: none;
        box-shadow: none;
      }
      .quote-call {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        color: var(--ink);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
      }
      .quote-call:hover {
        color: var(--accent-soft);
      }
      .quote-status {
        min-height: 18px;
        margin: 6px 0 0;
        color: var(--accent-soft);
        font-size: 14px;
        line-height: 1.45;
        text-align: center;
      }
      .quote-status.is-error {
        color: #f2a58c;
      }
      .quote-fineprint {
        margin: 14px 0 0;
        font-size: 12.5px;
        color: var(--muted);
        text-align: center;
      }
      /* Success state */
      .quote-success {
        display: none;
        text-align: center;
        padding: 18px 6px;
      }
      .quote-card.is-sent .quote-form {
        display: none;
      }
      .quote-card.is-sent .quote-success {
        display: block;
      }
      .quote-success__mark {
        width: 64px;
        height: 64px;
        margin: 4px auto 18px;
        border-radius: 50%;
        background: rgba(var(--accent-rgb), 0.16);
        border: 1px solid rgba(var(--accent-rgb), 0.42);
        display: grid;
        place-items: center;
        color: var(--accent);
      }
      .quote-success h3 {
        font-family: var(--display);
        font-weight: 600;
        font-size: 26px;
        margin: 0 0 10px;
      }
      .quote-success p {
        color: var(--muted);
        font-size: 15px;
        line-height: 1.6;
        margin: 0 auto;
        max-width: 34ch;
      }

      @media (max-width: 820px) {
        .funnel__inner {
          grid-template-columns: 1fr;
        }
      }
      /* ============================================================
         Cook Flooring & Tile — modern build-out (header, services,
         tile, service area, about, reviews, FAQ, sticky call bar).
         Charcoal workshop identity with clay action accents and slate tile notes.
         ============================================================ */
      :root {
        --bg-2: #15191b;
        --bg-3: #1d2325;
        --line: rgba(239, 228, 212, 0.11);
        --line-strong: rgba(239, 228, 212, 0.2);
        --slate: var(--mineral);
        --copper-deep: var(--clay);
        --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
      }
      body {
        font-family: var(--font-body);
      }
      .wrap {
        width: min(1180px, 100% - 48px);
        margin-inline: auto;
      }
      /* Spec-tag motif: cut-list / tape-measure vernacular */
      .spec {
        font-family: var(--font-mono);
        font-size: 12px;
        letter-spacing: 0.04em;
        color: var(--accent);
        text-transform: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      .spec::before {
        content: "";
        width: 16px;
        height: 1px;
        background: currentColor;
        opacity: 0.7;
      }
      .eyebrow2 {
        font-family: var(--font-mono);
        font-size: 12px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--accent);
        margin: 0 0 18px;
      }

      /* ---- Sticky site header ---- */
      .sitehdr {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 14px clamp(16px, 4vw, 40px);
        background: linear-gradient(to bottom, rgba(8, 9, 10, 0.62), rgba(8, 9, 10, 0));
        transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
        border-bottom: 1px solid transparent;
      }
      .sitehdr.is-stuck {
        background: rgba(12, 13, 15, 0.88);
        backdrop-filter: saturate(140%) blur(10px);
        border-bottom-color: var(--line);
      }
      .brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        text-decoration: none;
        color: var(--ink);
        flex: 0 0 auto;
      }
      .brand__logo {
        display: block;
        width: 220px;
        height: auto;
      }
      .brand__mark {
        display: grid;
        gap: 3px;
        width: 22px;
      }
      .brand__mark i {
        height: 3px;
        border-radius: 2px;
        display: block;
      }
      .brand__mark i:nth-child(1) { background: var(--accent); }
      .brand__mark i:nth-child(2) { background: var(--copper-deep); }
      .brand__mark i:nth-child(3) { background: var(--slate); }
      .brand__name {
        font-family: "Fraunces", serif;
        font-weight: 600;
        font-size: 18px;
        letter-spacing: -0.01em;
      }
      .sitenav {
        display: flex;
        align-items: center;
        gap: clamp(16px, 1.8vw, 26px);
        min-width: 0;
      }
      .sitenav a {
        color: var(--muted);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: color 0.2s ease;
      }
      .sitenav a:hover { color: var(--ink); }
      .sitehdr__phone {
        color: var(--ink) !important;
        font-weight: 800 !important;
        padding: 9px 14px;
        border: 1px solid rgba(239, 228, 212, 0.28);
        border-radius: 999px;
        background: rgba(12, 13, 15, 0.34);
      }
      .sitehdr__phone:hover {
        border-color: rgba(var(--accent-rgb), 0.72);
        background: rgba(var(--accent-rgb), 0.14);
      }
      .btn-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        gap: 8px;
        background: var(--accent);
        color: var(--button-ink);
        font-weight: 700;
        font-size: 14px;
        text-decoration: none;
        padding: 11px 18px;
        border-radius: 999px;
        border: 0;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
      }
      .btn-action:hover {
        transform: translateY(-1px);
        background: var(--oak-light);
        box-shadow: 0 10px 28px rgba(var(--accent-shadow-rgb), 0.3);
      }
      .btn-action--dark {
        justify-self: center;
        background: var(--bg);
        color: var(--ink);
      }
      .section-quote {
        width: min(920px, 100%);
        scroll-margin-top: 92px;
        margin: clamp(38px, 6vw, 72px) auto;
        padding: clamp(20px, 3vw, 30px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        border: 1px solid rgba(var(--accent-rgb), 0.3);
        border-radius: 18px;
        background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(255, 255, 255, 0.025));
      }
      .section-quote p {
        max-width: 560px;
        margin: 0;
        color: var(--muted);
        font-size: clamp(15px, 1.6vw, 18px);
        line-height: 1.55;
      }
      .section-quote strong { color: var(--ink); }
      .section-quote .btn-action {
        flex: 0 0 auto;
        min-height: 48px;
        text-align: center;
      }
      .section-quote--center { margin-bottom: 0; }
      @media (max-width: 700px) {
        .section-quote {
          align-items: stretch;
          flex-direction: column;
          gap: 16px;
          margin: 34px auto;
          padding: 20px;
        }
        .section-quote .btn-action { width: 100%; }
        .section-quote--center { margin-bottom: 0; }
      }
      .sitehdr .sitenav .nav-hide-sm { display: inline; }

      @media (max-width: 1040px) {
        .sitehdr .sitenav .nav-hide-sm { display: none; }
      }

      /* ---- Generic dark content section ---- */
      .block {
        position: relative;
        padding: clamp(72px, 11vw, 132px) 0;
        background: var(--bg);
      }
      .block--raised { background: var(--bg-2); }
      .block__head {
        max-width: 720px;
        margin-bottom: clamp(36px, 6vw, 64px);
      }
      .block__h {
        font-family: "Fraunces", serif;
        font-weight: 600;
        font-size: clamp(30px, 4.4vw, 52px);
        line-height: 1.04;
        letter-spacing: 0;
        margin: 0 0 18px;
      }
      .block__lead {
        color: var(--muted);
        font-size: clamp(16px, 1.5vw, 19px);
        line-height: 1.6;
        margin: 0;
      }

      /* ---- Services ---- */
      .svc-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
      }
      .svc {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 28px 26px 26px;
        background: var(--bg-3);
        border: 1px solid var(--line);
        border-radius: 16px;
        overflow: hidden;
        transition: transform 0.2s ease, border-color 0.2s ease;
      }
      .svc::after {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
        background: linear-gradient(90deg, var(--slate), var(--accent));
        opacity: 0.85;
      }
      .svc--featured {
        background:
          radial-gradient(circle at 85% 8%, rgba(var(--accent-rgb), 0.2), transparent 42%),
          linear-gradient(145deg, #202326, #171a1c);
        border-color: rgba(var(--accent-rgb), 0.48);
        box-shadow: 0 22px 54px rgba(0, 0, 0, 0.24);
      }
      .svc--featured::before {
        content: "Hardwood specialty";
        display: inline-flex;
        padding: 5px 9px;
        border: 1px solid rgba(var(--accent-rgb), 0.44);
        border-radius: 999px;
        color: var(--accent-soft);
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        align-self: flex-start;
      }
      .svc--estimate {
        display: grid;
        place-content: center;
        text-align: center;
        background:
          radial-gradient(circle at 20% 15%, rgba(134, 166, 157, 0.24), transparent 38%),
          linear-gradient(135deg, #20282a, #25262a);
        border-color: rgba(var(--accent-rgb), 0.44);
      }
      .svc--estimate .svc__h {
        margin: 0 0 6px;
        color: var(--ink);
      }
      .svc--estimate .svc__p {
        color: var(--muted);
        margin: 0 0 16px;
      }
      .svc:hover { transform: translateY(-4px); border-color: var(--line-strong); }
      .svc__h {
        font-family: "Fraunces", serif;
        font-size: 22px;
        font-weight: 600;
        margin: 14px 0 8px;
      }
      .svc__p {
        color: var(--muted);
        font-size: 15px;
        line-height: 1.55;
        margin: 0 0 16px;
      }
      .svc .spec { margin-top: auto; }
      .svc__ico { color: var(--accent); width: 30px; height: 30px; }
      .svc__more {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        margin-top: 6px;
        color: var(--ink);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        border-bottom: 1px solid rgba(var(--accent-rgb), 0.7);
        align-self: flex-start;
      }
      .svc__more:hover { color: var(--accent); }

      /* ---- Service landing pages ---- */
      .service-page .sitehdr {
        position: sticky;
        background: rgba(12, 13, 15, 0.96);
        border-bottom-color: var(--line);
      }
      .service-main {
        padding-top: 0;
      }
      .service-hero {
        padding: clamp(36px, 4vw, 44px) 0 clamp(38px, 7vw, 72px);
        background:
          linear-gradient(180deg, rgba(16, 18, 20, 0.98), rgba(21, 25, 27, 0.94)),
          var(--bg);
      }
      .service-hero__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
        gap: clamp(28px, 5vw, 64px);
        align-items: center;
      }
      .service-hero h1 {
        font-family: "Fraunces", serif;
        font-size: clamp(36px, 6vw, 68px);
        line-height: 1.02;
        letter-spacing: 0;
        margin: 0 0 18px;
      }
      .service-hero p {
        color: var(--muted);
        font-size: clamp(16px, 1.8vw, 20px);
        line-height: 1.6;
        margin: 0;
      }
      .service-photo {
        overflow: hidden;
        border-radius: 10px;
        border: 1px solid var(--line);
        background: var(--bg-3);
      }
      .service-photo img {
        width: 100%;
        height: 100%;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        display: block;
      }
      .service-photo--right-crop img {
        object-position: 78% center;
        transform: scale(1.45) translateX(-10%);
        transform-origin: center;
      }
      .service-content {
        padding: clamp(48px, 8vw, 88px) 0;
      }
      .service-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.5fr);
        gap: clamp(28px, 5vw, 64px);
        align-items: start;
      }
      .service-list {
        display: grid;
        gap: 12px;
        padding: 0;
        margin: 24px 0 0;
        list-style: none;
      }
      .service-list li {
        color: var(--ink);
        line-height: 1.55;
        padding-left: 22px;
        position: relative;
      }
      .service-list li::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--accent);
        position: absolute;
        left: 0;
        top: 0.68em;
      }
      .service-card {
        padding: 24px;
        border-radius: 10px;
        border: 1px solid var(--line);
        background: var(--bg-3);
      }
      .service-card p {
        color: var(--muted);
        line-height: 1.6;
        margin: 0 0 18px;
      }
      .service-proof,
      .service-faq,
      .service-related {
        padding: clamp(48px, 8vw, 88px) 0;
        border-top: 1px solid var(--line);
      }
      .service-proof { background: var(--bg-2); }
      .service-proof__head {
        max-width: 760px;
        margin-bottom: 28px;
      }
      .service-proof__head p,
      .service-faq__intro {
        color: var(--muted);
        font-size: 17px;
        line-height: 1.65;
      }
      .service-proof__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }
      .service-proof__item {
        margin: 0;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--bg-3);
      }
      .service-proof__item img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
      }
      .service-proof__item figcaption {
        min-height: 72px;
        padding: 15px 16px;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.5;
      }
      .service-faq__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-top: 28px;
      }
      .service-faq__item {
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--bg-3);
      }
      .service-faq__item h3 {
        margin: 0 0 10px;
        font-size: 18px;
      }
      .service-faq__item p {
        margin: 0;
        color: var(--muted);
        line-height: 1.6;
      }
      .service-related__links {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 24px;
      }
      .service-related__links a {
        padding: 12px 16px;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--ink);
        text-decoration: none;
        background: var(--bg-3);
      }
      .service-related__links a:hover,
      .service-related__links a:focus-visible {
        color: var(--accent);
        border-color: rgba(var(--accent-rgb), 0.7);
      }
      .service-links {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 28px;
      }
      .service-page .btn-action,
      .service-related__links a {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
      }
      .service-footer {
        padding: 32px 0;
        color: var(--muted);
        border-top: 1px solid var(--line);
      }
      .service-footer a {
        color: var(--accent);
        text-decoration: none;
      }

      @media (max-width: 760px) {
        .service-proof__grid,
        .service-faq__list { grid-template-columns: 1fr; }
        .service-proof__item figcaption { min-height: auto; }
      }

      /* ---- Decks ---- */
      .decks {
        background:
          linear-gradient(180deg, rgba(18, 20, 22, 0.96), rgba(16, 18, 20, 1)),
          var(--bg);
      }
      .deck-grid {
        display: grid;
        grid-template-columns: 0.95fr 1.05fr;
        gap: clamp(30px, 5vw, 70px);
        align-items: center;
      }
      .deck__list {
        display: grid;
        gap: 12px;
        margin: 24px 0 0;
        padding: 0;
        list-style: none;
      }
      .deck__list li {
        display: flex;
        gap: 12px;
        color: var(--ink);
        font-size: 15.5px;
        line-height: 1.5;
      }
      .deck__list li::before {
        content: "";
        width: 8px;
        height: 8px;
        margin-top: 8px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.12);
        flex: none;
      }
      .deck__cta { margin: 28px 0 0; }
      .deck-proof {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }
      .deck-proof figure {
        position: relative;
        margin: 0;
        min-height: 0;
        aspect-ratio: 3 / 4;
        overflow: hidden;
        border-radius: 16px;
        border: 1px solid rgba(239, 228, 212, 0.15);
        background: var(--bg-3);
        box-shadow: 0 22px 54px rgba(0, 0, 0, 0.28);
      }
      .deck-proof img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
      .deck-proof figcaption {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 10px 12px;
        border-radius: 10px;
        background: rgba(12, 13, 15, 0.82);
        color: var(--ink);
        font-size: 13px;
        font-weight: 700;
      }
      .deck-progress {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 14px;
        margin-top: clamp(18px, 3vw, 30px);
      }
      .deck-progress figure {
        position: relative;
        margin: 0;
        min-height: 0;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        border-radius: 14px;
        border: 1px solid rgba(239, 228, 212, 0.14);
        background: var(--bg-3);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
      }
      .deck-progress img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .deck-progress figcaption {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 9px 11px;
        border-radius: 9px;
        background: rgba(12, 13, 15, 0.82);
        color: var(--ink);
        font-size: 12.5px;
        font-weight: 700;
      }

      /* ---- Bathroom tile (sea-glass accent) ---- */
      .tile { background: linear-gradient(180deg, #12171a, #101214); }
      .tile .eyebrow2,
      .tile .spec { color: var(--slate); }
      .tile .spec::before { background: var(--slate); }
      .tilewrap {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: clamp(28px, 5vw, 64px);
        align-items: center;
      }
      .tilegrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }
      .tilegrid--before-after {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }
      .tilecell {
        aspect-ratio: 1;
        border-radius: 10px;
        border: 1px solid rgba(127, 166, 168, 0.22);
        background-size: cover;
        background-position: center;
        position: relative;
        overflow: hidden;
      }
      .tilegrid--before-after .tilecell {
        aspect-ratio: 3 / 4;
      }
      .tilecell--bath-before {
        background-image: image-set(
          url("../assets/responsive/bathroom-before-real-800.webp") type("image/webp"),
          url("../assets/bathroom-before-real.jpg") type("image/jpeg")
        );
      }
      .tilecell--bath-after {
        background-image: image-set(
          url("../assets/responsive/bathroom-after-real-800.webp") type("image/webp"),
          url("../assets/bathroom-after-real.jpg") type("image/jpeg")
        );
      }
      .tilecell__label {
        position: absolute;
        left: 12px;
        bottom: 12px;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        background: rgba(12, 13, 15, 0.8);
        color: var(--ink);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.1em;
        padding: 7px 10px;
        text-transform: uppercase;
      }
      .tilecell.is-wide { grid-column: span 2; aspect-ratio: 2.1; }
      .tile__list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
      .tile__list li {
        display: flex;
        gap: 12px;
        color: var(--ink);
        font-size: 15.5px;
        line-height: 1.5;
      }
      .tile__list svg { color: var(--slate); width: 20px; height: 20px; flex: none; margin-top: 2px; }

      /* ---- Service area ---- */
      .service-boundaries {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        margin: 0 0 34px;
      }
      .service-boundary {
        min-height: 156px;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--bg-3);
      }
      .service-boundary__label {
        display: block;
        margin-bottom: 10px;
        color: var(--accent);
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .service-boundary h3 {
        margin: 0 0 8px;
        font-family: "Fraunces", serif;
        font-size: 21px;
        font-weight: 600;
      }
      .service-boundary p {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.55;
      }
      .area-towns__label {
        margin: 0;
        color: var(--ink);
        font-size: 14px;
        font-weight: 700;
      }
      .towns {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 14px;
      }
      .town {
        font-size: 14px;
        color: var(--ink);
        background: var(--bg-3);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 8px 15px;
        font-weight: 500;
      }
      .town--more { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.42); }

      /* ---- About (father & son) ---- */
      .about-grid {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: clamp(28px, 5vw, 60px);
        align-items: center;
      }
      .about-fig {
        margin: 0;
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid var(--line);
        aspect-ratio: 4 / 3;
      }
      .about-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .about p { color: var(--muted); font-size: 16.5px; line-height: 1.65; }
      .about p strong { color: var(--ink); font-weight: 600; }

      /* ---- Reviews ---- */
      .reviews-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 18px;
      }
      .review {
        padding: 26px 24px;
        background: var(--bg-3);
        border: 1px solid var(--line);
        border-radius: 16px;
      }
      .review__stars {
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(var(--accent-rgb), 0.42);
        border-radius: 999px;
        color: var(--accent);
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        padding: 5px 9px;
        text-transform: uppercase;
      }
      .review__q {
        font-family: "Fraunces", serif;
        font-size: 18px;
        line-height: 1.5;
        margin: 12px 0 16px;
        color: var(--ink);
      }
      .review__who { color: var(--faint, #9b907f); font-size: 13.5px; }
      .review__who b { color: var(--muted); font-weight: 600; }

      /* ---- FAQ ---- */
      #faq .block__head {
        margin-inline: auto;
        text-align: center;
      }
      .faq-list {
        max-width: 820px;
        margin-inline: auto;
      }
      .faq-item {
        border-bottom: 1px solid var(--line);
      }
      .faq-item > summary {
        list-style: none;
        cursor: pointer;
        padding: 22px 44px 22px 0;
        position: relative;
        font-family: "Fraunces", serif;
        font-size: clamp(17px, 2vw, 21px);
        font-weight: 600;
        color: var(--ink);
      }
      .faq-item > summary::-webkit-details-marker { display: none; }
      .faq-item > summary::after {
        content: "+";
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        font-family: var(--font-body);
        font-size: 26px;
        font-weight: 400;
        color: var(--accent);
        transition: transform 0.2s ease;
      }
      .faq-item[open] > summary::after { content: "–"; }
      .faq-item__a {
        color: var(--muted);
        font-size: 16px;
        line-height: 1.65;
        padding: 0 44px 24px 0;
        margin: 0;
      }

      /* ---- Sticky mobile call/estimate bar ---- */
      .callbar {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 50;
        display: none;
        gap: 10px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(12, 13, 15, 0.93);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--line);
      }
      .callbar a {
        flex: 1;
        text-align: center;
        padding: 13px;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 700;
        font-size: 15px;
      }
      .callbar__call { color: var(--ink); border: 1px solid var(--line-strong); }
      .callbar__quote {
        background: var(--accent);
        color: var(--button-ink);
        box-shadow: 0 8px 24px rgba(var(--accent-shadow-rgb), 0.3);
      }

      @media (max-width: 860px) {
        .sitehdr,
        .sitehdr.is-stuck {
          background: var(--bg);
          backdrop-filter: none;
          border-bottom-color: var(--line);
        }
        .service-hero__grid,
        .service-layout {
          grid-template-columns: 1fr;
        }
        .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .service-main {
          padding-top: 22px;
        }
        .tilewrap, .about-grid, .deck-grid { grid-template-columns: 1fr; }
        .deck-proof { grid-template-columns: 1fr; }
        .deck-proof figure { aspect-ratio: 4 / 3; }
        .deck-progress { grid-template-columns: 1fr; }
        .deck-progress figure { aspect-ratio: 4 / 3; }
        .sitehdr .sitenav .nav-hide-sm { display: none; }
        .sitehdr__phone { display: none; }
        .callbar { display: flex; }
        body { padding-bottom: 82px; }
        .brand__logo { width: 175px; }
        .sitehdr .btn-action { min-height: 44px; }
        .field input,
        .field select,
        .field textarea { min-height: 46px; }
        footer a { display: inline-flex; min-height: 44px; align-items: center; }
        .reveal {
          opacity: 1;
          transform: none;
          transition: none;
        }
      }
      @media (max-width: 560px) {
        .svc-grid,
        .service-boundaries { grid-template-columns: 1fr; }
        .service-boundary { min-height: 0; }
        .field.row { grid-template-columns: 1fr; }
      }
      @media (max-width: 360px) {
        .sitehdr { padding-inline: 12px; }
        .brand { gap: 8px; }
        .brand__logo { width: 150px; }
        .brand__mark { width: 18px; }
        .brand__name { font-size: 16px; }
        .sitehdr .btn-action {
          padding-inline: 13px;
          font-size: 13px;
          white-space: nowrap;
        }
        .callbar { gap: 8px; padding-inline: 10px; }
        .callbar a { font-size: 13px; }
      }
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after {
          scroll-behavior: auto !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
        .hero,
        .floor {
          height: auto;
        }
        .hero__sticky {
          position: relative;
          height: auto;
          min-height: min(760px, 100svh);
        }
        .hero__overlay {
          position: relative;
          min-height: min(760px, 100svh);
        }
        .hero__canvas,
        .loader,
        .hero__scrollhint {
          display: none;
        }
        .hero .hero__sticky {
          background:
            linear-gradient(to bottom, rgba(8, 9, 10, 0.3), rgba(8, 9, 10, 0.82)),
            url("../assets/responsive/deck-composite-boards-1200.webp") center / cover;
        }
        .floor .hero__sticky {
          background:
            linear-gradient(to bottom, rgba(8, 9, 10, 0.28), rgba(8, 9, 10, 0.82)),
            url("../assets/responsive/during-install-bruce-1200.webp") center / cover;
        }
      }

/* AGENT_TARGET: gallery-lightbox — lightbox overlay styles */
#gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 1rem;
}
#gallery-lightbox[hidden] { display: none; }
.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
}
.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(960px, 92vw);
  max-height: 90vh;
  margin: 0;
}
.lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
}
.lightbox__caption {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  margin-top: 0.75rem;
  text-align: center;
}
.gallery__grid figure:focus-visible {
  outline: 3px solid var(--accent, #d97706);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  #gallery-lightbox { animation: lightbox-in 0.18s ease both; }
  @keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
}