/* ============================================================
   TFP · pages.css — page-specific sections.
   core.css must load first. Mobile-first; one min-width:900px block
   and one reduced-motion block at the bottom, same as core.
   ============================================================ */

/* ------------------------------------------------------------
   HERO — the monogram constellation
   ------------------------------------------------------------ */
/* The hero is laid out from the TOP, not centred, so the band between the
   nav and the first line of copy is a real, predictable size — that band is
   where the monogram constellation lives. Centring the content made the gap
   a leftover, which on a phone was about 60px and far too small for a mark. */
#hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-start;overflow:hidden}
#hero-glow{position:absolute;inset:0;z-index:0;
  background:radial-gradient(70% 55% at 50% 112%,rgba(140,85,53,.42),transparent 66%),
             radial-gradient(42% 32% at 84% 6%,rgba(232,192,138,.09),transparent 60%)}
#hero-floor{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 62%);
          mask-image:linear-gradient(180deg,transparent,#000 62%)}
#hero-floor img{width:100%;height:100%;object-fit:cover;object-position:50% 100%;filter:saturate(.7) brightness(.62)}
#stars{position:absolute;inset:0;z-index:2}
#hero .wrap{position:relative;z-index:4;text-align:center;
  padding-top:calc(var(--nav-h) + 25svh);padding-bottom:108px}
.hero-est{margin-bottom:30px}
#hero h1{max-width:14ch;margin-inline:auto;font-size:clamp(2.9rem,12.2vw,7.4rem)}
.hero-tag{margin-top:30px;max-width:46ch;margin-inline:auto}
.hero-ctas{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.hero-foot{position:absolute;bottom:22px;left:0;right:0;z-index:4;display:flex;justify-content:space-between;
  gap:14px;padding-inline:28px;font-size:.6rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--t-faint)}
.hero-foot b{color:var(--brass);font-weight:600}

/* Poster kicker — one of Anton's three permitted homes */
.hero-kicker{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:22px;
  font-family:var(--font-p);font-size:clamp(.72rem,2.6vw,.9rem);letter-spacing:.06em;
  text-transform:uppercase;color:var(--t-faint);
}
.hero-kicker span{display:flex;align-items:center;gap:12px}
.hero-kicker span::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--copper);opacity:.7}
.hero-kicker span:last-child::after{display:none}

/* ------------------------------------------------------------
   RIBBON
   ------------------------------------------------------------ */
#ribbon{overflow:hidden;background:var(--brass);color:var(--void);transform:rotate(-1.6deg);
  margin-block:-14px;position:relative;z-index:5}
#ribbon .rt{display:flex;gap:44px;width:max-content;padding-block:15px;animation:rib 30s linear infinite}
#ribbon span{font-family:var(--font-d);font-style:italic;font-weight:400;font-size:1rem;
  white-space:nowrap;display:flex;align-items:center;gap:44px}
#ribbon span::after{content:'♡';font-size:.7rem;font-style:normal}
@keyframes rib{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------
   TRUST BAR
   ------------------------------------------------------------ */
#trust{padding-block:9svh}
/* The dividers are a 1px grid GAP showing the container's colour through,
   not a border on each cell. Per-cell borders cannot line up once the cells
   have unequal heights, and they leave a stub hanging off the last row. */
.trust-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.trust-cell{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:12px;text-align:center;padding:28px 12px;background:var(--void)}
.trust-cell p{font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-mute);line-height:1.5}

/* ------------------------------------------------------------
   TWO HALVES — flooring and property, given equal billing
   ------------------------------------------------------------ */
#halves{padding-block:12svh;position:relative;overflow:hidden}
.halves-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:44px}
.half{
  position:relative;border-radius:28px;overflow:hidden;isolation:isolate;
  min-height:clamp(400px,64svh,560px);display:flex;flex-direction:column;justify-content:flex-end;
  padding:32px 28px;border:1px solid var(--line);
  transition:transform .6s var(--ease),border-color .5s ease;
}
.half:hover{transform:translateY(-6px);border-color:var(--line-warm)}
.half > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:saturate(.78) contrast(1.06) brightness(.72);transition:transform 1.1s var(--ease)}
.half:hover > img{transform:scale(1.045)}
.half::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,7,6,.42) 0%,rgba(8,7,6,.5) 42%,rgba(8,7,6,.94) 100%)}
.half h3{font-size:clamp(2rem,7.5vw,2.8rem);font-weight:300}
.half p{margin-top:14px;max-width:38ch}
.half-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.half-list li{list-style:none;font-size:.68rem;font-weight:600;letter-spacing:.08em;
  border:1px solid rgba(245,239,231,.2);border-radius:100px;padding:7px 14px;color:var(--t-body)}
.half .cta-arrow{margin-top:24px}
.half-num{position:absolute;top:26px;right:28px;font-family:var(--font-d);font-style:italic;
  font-weight:200;font-size:2.4rem;color:var(--brass);opacity:.85}

/* ------------------------------------------------------------
   COLOUR JOURNEY — the day we arrive
   ------------------------------------------------------------ */
#journey{position:relative}
.j-scene{min-height:92svh;display:flex;align-items:center;position:relative;overflow:hidden}
.j-inner{position:relative;z-index:2}
.j-scene h2{max-width:16ch}
.j-scene p{margin-top:24px;max-width:46ch}
.j-fig{margin-top:34px;max-width:520px}
.j-time{position:absolute;right:-.06em;top:50%;transform:translateY(-50%);z-index:1}
.j-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;
  font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t-faint)}
.j-meta b{color:var(--copper);font-weight:600}

/* ------------------------------------------------------------
   HORIZONTAL SERVICES RAIL
   ------------------------------------------------------------ */
#hwrap{position:relative}
#hsticky{position:sticky;top:0;height:100svh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.h-head{padding:0 26px 34px}
#htrack{display:flex;gap:22px;padding-inline:26px;will-change:transform}
.h-card{
  flex:0 0 min(78vw,400px);border-radius:30px;padding:34px 30px;min-height:54svh;
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden;
}
/* No backdrop-filter here. The reference blurs five cards inside a
   translating track, which is the single most likely 60fps offender on a
   mid-range Android in that whole build. A gradient buys the same depth. */
.h-card::before{content:'';position:absolute;top:-40%;right:-30%;width:80%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(208,138,99,.16),transparent 70%)}
.h-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;position:relative}
.h-num{font-family:var(--font-d);font-style:italic;font-weight:200;font-size:2.6rem;color:var(--brass);line-height:1}
.h-icon{width:54px;height:54px;flex:none;opacity:.9}
.h-card h3{margin-top:20px;position:relative}
.h-card p{font-size:.86rem;line-height:1.75;position:relative}
.h-card .cta-arrow{position:relative}
#hprog{height:1.5px;background:rgba(255,255,255,.12);margin:32px 26px 0;position:relative}
#hprog i{position:absolute;inset:0;background:var(--copper);transform:scaleX(0);transform-origin:left}

/* ------------------------------------------------------------
   THE FLOOR SCENE (§7.16)
   ------------------------------------------------------------ */
#fwrap{position:relative}
/* Sized in dvh, not svh. On iPad Safari the toolbar collapses as you
   scroll and the real viewport grows past the "small" viewport height,
   so a 100svh frame left a dead black band under the floor. dvh tracks
   the true visible height. svh stays as the fallback for browsers that
   predate it. */
#fsticky{position:sticky;top:0;height:100svh;height:100dvh;overflow:hidden;background:var(--void)}
#fcanvas{position:absolute;inset:0;width:100%;height:100%}
/* The still frame shows by DEFAULT and is removed once WebGL is actually
   drawing. The other way round left a black rectangle on every device that
   could not run the scene, including anyone opening the folder from
   file://, where Chrome blocks the bundle outright. */
#ffallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 65%;opacity:0;transition:opacity .5s ease;pointer-events:none}
/* The still is a landscape frame whose lit floor lives in the lower half.
   A portrait cover-crop centred on 65% showed mostly the void above it,
   which is why a phone that fell back saw a black screen with a sliver of
   timber at the bottom. Weight the crop to the floor. */
@media (max-aspect-ratio:5/6){ #ffallback{object-position:50% 88%} }
#ffallback.on{opacity:1}
#fsticky.static{position:static;height:auto;min-height:70svh}
/* The scrim that keeps the type legible over the floor.
   Two linear ramps stacked with different end points put a visible knee
   across the frame at whichever one landed first, and on a phone that
   knee sat right under the decor name and read as a hard horizon. This
   is one eased ramp with enough stops to approximate a smoothstep, plus
   a wide corner vignette that never terminates inside the picture. */
.f-veil{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(150% 96% at 50% 0%,rgba(8,7,6,.55),rgba(8,7,6,0) 64%),
    linear-gradient(180deg,
      rgba(8,7,6,.97) 0%,  rgba(8,7,6,.94) 11%, rgba(8,7,6,.84) 19%,
      rgba(8,7,6,.66) 26%, rgba(8,7,6,.45) 33%, rgba(8,7,6,.26) 40%,
      rgba(8,7,6,.12) 47%, rgba(8,7,6,.03) 54%, rgba(8,7,6,0)   61%,
      rgba(8,7,6,0)   76%, rgba(8,7,6,.16) 85%, rgba(8,7,6,.40) 94%,
      rgba(8,7,6,.60) 100%)}
.f-ui{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--nav-h) + 26px) 26px 32px;pointer-events:none}
.f-ui a,.f-ui button{pointer-events:auto}
.f-name{position:relative;overflow:hidden;font-size:clamp(2.1rem,8vw,3.6rem);height:1.3em;margin-top:4px}
.f-name b{position:absolute;inset:0;font-family:var(--font-d);font-weight:300;font-size:1em;
  letter-spacing:-.025em;color:#fff;line-height:1.3;white-space:nowrap;
  transition:transform .55s var(--ease-o),opacity .35s ease}
.f-name b.out{transform:translateY(-115%);opacity:0}
.f-name b.in{transform:translateY(115%);opacity:0}
/* The spec orphans "plank" onto its own line on a narrow screen, and the
   SKU directly below already carries the detail. */
@media (max-width:560px){ .f-spec{display:none} }
.f-sku{font-size:.62rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);margin-top:12px}
.f-link{display:inline-flex;margin-top:20px}
.f-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.f-prog{flex:1;min-width:130px;height:1.5px;background:rgba(255,255,255,.14);position:relative;margin-bottom:9px}
.f-prog i{position:absolute;inset:0;background:var(--copper);transform:scaleX(0);transform-origin:left}
.f-dots{display:flex;gap:8px}
.f-dots button{width:26px;height:2px;background:rgba(255,255,255,.18);transition:background .3s ease}
.f-dots button[aria-current="true"]{background:var(--brass)}

/* ------------------------------------------------------------
   MOTORISED BLINDS — the third set piece. A window in the dark,
   the day behind the glass, and a fabric blind that rides the
   scroll down and back up. Pure DOM and CSS, no WebGL. The blind
   position is written by scenes.js as a translateY on .b-fabric;
   everything else keys off custom property --be (blind extension,
   0 open to 1 closed) set on #bsticky by the same code.
   ------------------------------------------------------------ */
#bwrap{position:relative;height:380svh;background:var(--void)}
#bsticky{position:sticky;top:0;height:100svh;height:100dvh;overflow:hidden;background:var(--void);
  display:flex;align-items:center;justify-content:center}
/* Warm lamps that come on as the blind closes. Painted as two corner
   glows so the room reads lit rather than tinted. */
.b-lamp{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s linear;
  background:
    radial-gradient(52% 44% at 8% 96%, rgba(208,138,99,.30), transparent 70%),
    radial-gradient(46% 38% at 96% 88%, rgba(232,192,138,.16), transparent 70%)}
.b-window{position:relative;width:min(86vw,500px);height:min(56dvh,600px);min-height:340px;
  margin-bottom:16dvh}
/* Daylight spilling out of the window into the room. Fades as the
   fabric covers the glass. */
.b-glow{position:absolute;inset:-16%;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 42%, rgba(190,214,224,.20), transparent 70%);
  transition:opacity .2s linear}
.b-aperture{position:absolute;inset:0;overflow:hidden;border-radius:5px;background:#0d0c0a;
  box-shadow:inset 0 0 0 1px rgba(232,192,138,.16), 0 30px 80px rgba(0,0,0,.55)}
.b-view{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
/* The fabric. A charcoal sunscreen weave built from repeating
   gradients, with the bottom rail as its ::after. Sits fully above
   the aperture at translateY(-100%) and fully closed at 0. */
.b-fabric{position:absolute;left:-1px;right:-1px;top:0;height:101%;will-change:transform;
  transform:translateY(-88%);
  background-color:#292421;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.030) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.055) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,0) 14%, rgba(0,0,0,0) 84%, rgba(0,0,0,.20));
  box-shadow:0 10px 24px rgba(0,0,0,.45)}
.b-fabric::after{content:'';position:absolute;left:-3px;right:-3px;bottom:-3px;height:13px;border-radius:3px;
  background:linear-gradient(180deg,#4a423a,#221d19);
  box-shadow:0 5px 12px rgba(0,0,0,.55)}
/* Headbox, outer architrave and sill. */
.b-head{position:absolute;top:-13px;left:-7px;right:-7px;height:17px;border-radius:4px;z-index:2;
  background:linear-gradient(180deg,#3a332c,#171411);
  box-shadow:0 4px 10px rgba(0,0,0,.5)}
.b-window::before{content:'';position:absolute;inset:-11px;border:1px solid rgba(232,192,138,.13);
  border-radius:10px;pointer-events:none}
.b-sill{position:absolute;left:-18px;right:-18px;bottom:-13px;height:10px;border-radius:3px;
  background:linear-gradient(180deg,#2b241f,#141110);
  box-shadow:0 8px 20px rgba(0,0,0,.5)}
/* Legibility veil, same idea as the floor scene's. The window can sit
   behind the copy on a short screen and the text stays readable. */
.b-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,7,6,.88) 0%, rgba(8,7,6,.40) 9%, rgba(8,7,6,0) 18%,
    rgba(8,7,6,0) 46%, rgba(8,7,6,.28) 62%, rgba(8,7,6,.78) 80%,
    rgba(8,7,6,.95) 100%)}
/* The overlay UI, same skeleton as the floor scene. The bottom padding
   clears the phone action bar, which overlays the last ~90px. */
.b-ui{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--nav-h) + 26px) 26px 108px;pointer-events:none}
.b-ui a,.b-ui button{pointer-events:auto}
.b-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:18px}
.b-copy-stack{position:relative;max-width:34ch}
.b-copy{position:absolute;left:0;right:0;bottom:calc(100% + 14px);opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .45s var(--ease-o);pointer-events:none}
#bsticky.bs-1 .b-copy[data-b="1"],
#bsticky.bs-2 .b-copy[data-b="2"],
#bsticky.bs-3 .b-copy[data-b="3"]{opacity:1;transform:none}
.b-name b{font-family:var(--font-d);font-weight:300;font-style:italic;letter-spacing:-.02em;
  color:#fff;font-size:clamp(1.5rem,5.4vw,2.2rem);line-height:1.15;display:block}
.b-line{margin-top:10px;font-size:.86rem;line-height:1.55;color:var(--mist)}
.b-link{display:inline-flex}
/* The remote. Three buttons, and the active one lights while the
   blind is travelling in that direction. */
.b-side{display:flex;flex-direction:column;align-items:center;gap:14px;flex:0 0 auto}
.b-remote{display:flex;flex-direction:column;gap:7px;padding:10px 8px;border-radius:999px;
  border:1px solid rgba(232,192,138,.22);background:rgba(13,11,10,.6)}
.br-btn{width:26px;height:26px;border-radius:50%;position:relative;cursor:pointer;
  background:none;padding:0;-webkit-tap-highlight-color:transparent;
  border:1px solid rgba(255,255,255,.14);
  transition:border-color .3s ease,box-shadow .3s ease,transform .15s ease}
.br-btn:hover{border-color:rgba(232,192,138,.55)}
.br-btn:active{transform:scale(.88)}
.br-btn:focus-visible{outline:1px solid var(--copper);outline-offset:2px}
.br-btn::before{content:'';position:absolute;inset:0;margin:auto;width:8px;height:8px;
  background:rgba(255,255,255,.4);transition:background .3s ease;
  clip-path:polygon(50% 12%, 92% 82%, 8% 82%)}
.br-stop::before{clip-path:none;width:7px;height:7px;border-radius:1.5px}
.br-dn::before{transform:rotate(180deg)}
#bsticky.b-going-dn .br-dn,#bsticky.b-going-up .br-up,#bsticky.b-still .br-stop{
  border-color:var(--copper);box-shadow:0 0 14px rgba(208,138,99,.35)}
#bsticky.b-going-dn .br-dn::before,#bsticky.b-going-up .br-up::before{background:var(--copper)}
#bsticky.b-still .br-stop::before{background:var(--copper)}
.b-pct{text-align:center;color:var(--brass)}
.b-pct b{font-family:var(--font-d);font-weight:300;font-size:1.5rem;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.b-pct small{display:block;font-size:.55rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mist);margin-top:2px}
/* Reduced motion, and any browser where the JS never ran, gets a calm
   static frame with the blind part way down. */
#bsticky.b-static{position:static}
#bwrap.b-static-wrap{height:auto;min-height:100svh}
@media (max-width:600px){
  .b-window{width:min(88vw,440px);height:min(46dvh,500px);min-height:280px;margin-bottom:21dvh}
  .b-ui{padding:calc(var(--nav-h) + 20px) 22px 104px}
  .b-copy-stack{max-width:30ch}
  .b-pct b{font-size:1.3rem}
}
/* Short phones. Less window, more air, or the copy lands on the glass. */
@media (max-width:600px) and (max-height:700px){
  .b-window{height:40dvh;min-height:240px;margin-bottom:25dvh}
  .b-line{font-size:.8rem}
}
@media (min-width:900px){
  .b-window{margin-bottom:0;margin-left:24vw;width:min(40vw,560px);height:min(64dvh,660px)}
  .b-ui{padding:calc(var(--nav-h) + 30px) min(6vw,72px) 44px}
  .b-foot{align-items:flex-end}
  .b-copy-stack{max-width:40ch}
  .b-copy{bottom:calc(100% + 18px)}
}

/* ------------------------------------------------------------
   THE LIST THAT NEVER GETS DONE — property maintenance set piece.
   Flooring gets the floor scene; this is its equal, not a footnote.
   ------------------------------------------------------------ */
#lwrap{position:relative;background:var(--abyss)}
/* No overflow:hidden and no forced height — on a narrow screen this
   content is simply taller than the viewport, and clipping it lost the
   heading. Sticky only engages at >=900px, set in the desktop block. */
#lsticky{position:relative;display:flex;align-items:center;
  padding-block:12svh;min-height:auto}
.l-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 78% 40%,rgba(140,85,53,.3),transparent 70%)}
.l-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:34px;width:100%}
.l-list{list-style:none;display:grid;gap:2px}
.l-item{
  position:relative;
  display:flex;align-items:flex-start;gap:16px;padding:15px 0 15px 0;
  border-bottom:1px solid var(--line);
  opacity:.44;transform:translateX(-8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.l-item.done{opacity:1;transform:none}
/* The item about to be ticked. Without it the undone half of the list is a
   flat grey wall with no focal point, which is what made this section read
   as blank on a phone. */
.l-item.now{opacity:.92;transform:none}
.l-item::before{
  content:"";position:absolute;left:-14px;top:16px;bottom:16px;width:2px;
  background:var(--copper);transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--ease-o);
}
.l-item.now::before{transform:scaleY(1)}
.l-tick{width:26px;height:26px;flex:none;margin-top:1px}
.l-tick circle{stroke:rgba(245,239,231,.22)}
.l-tick path{stroke:var(--copper);stroke-dasharray:34;stroke-dashoffset:34;
  transition:stroke-dashoffset .5s var(--ease-o)}
.l-item.done .l-tick circle{stroke:var(--copper)}
.l-item.done .l-tick path{stroke-dashoffset:0}
.l-text{flex:1}
.l-text b{display:block;font-family:var(--font-d);font-weight:400;font-size:1.15rem;color:var(--t-hi);line-height:1.25}
.l-text span{display:block;font-size:.8rem;font-weight:300;line-height:1.6;color:var(--t-mute);margin-top:4px}
.list-count{font-family:var(--font-d);font-style:italic;font-weight:200;font-size:clamp(3rem,12vw,5rem);
  color:var(--brass);line-height:1;font-variant-numeric:tabular-nums}
.list-count small{font-style:normal;font-family:var(--font-b);font-size:.6rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--t-faint);display:block;margin-top:10px}

/* The running meter. Solid rather than backdrop-filtered on purpose: this
   is sticky through a long scroll on a phone, and a live blur here is the
   single most expensive thing that could be on screen at that moment. */
.l-meter{display:none}
@media (max-width:899px){
  #lsticky{padding-block:11svh 6svh}
  .l-grid{gap:24px}
  .l-grid > div > .list-count{display:none}   /* the meter carries it instead */
  .l-grid > div > .btn{margin-top:22px!important}

  .l-meter{
    display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num bar" "num lab";
    align-items:center;column-gap:15px;row-gap:4px;
    position:sticky;top:calc(var(--nav-h) + 8px);z-index:5;
    padding:9px 20px 10px;border-radius:100px;
    background:linear-gradient(150deg,#241811,#17110D);
    border:1px solid rgba(232,192,138,.22);
    /* A tight, dark falloff under the pill so rows travelling behind it fade
       out instead of being chopped off at a hard edge. */
    box-shadow:0 12px 22px -8px rgba(11,8,6,.96),0 22px 44px -20px rgba(0,0,0,.9),
               inset 0 1px 0 rgba(255,255,255,.05);
    transition:opacity .25s ease;
  }
  /* The nav banner clears out when you scroll down, which is exactly when
     you are working through this list. The meter follows it up into the
     vacated band so it sits close to the top edge and covers as little of a
     row as it can, then drops back when the banner returns. */
  /* No nav-following lift. Chasing the hiding banner made the pill jump
     at the exact scroll position where it unsticks, which read as a
     glitch. It holds one calm offset instead. */
  /* Once the list is complete the meter has said what it came to say. It
     holds the finished number for a beat, then bows out so the last rows are
     not read through a bar. Scrolling back up brings it straight back. */
  .l-meter.is-full{opacity:0;transition:opacity .5s ease 1s}
  .l-meter-num{grid-area:num;display:flex;align-items:baseline;gap:5px;
    font-family:var(--font-d);font-variant-numeric:tabular-nums;line-height:1}
  .l-meter-num b{font-style:italic;font-weight:200;font-size:1.85rem;color:var(--brass)}
  .l-meter-num i{font-style:normal;font-weight:300;font-size:.85rem;color:var(--t-faint)}
  .l-meter-bar{grid-area:bar;height:2px;background:rgba(245,239,231,.12);
    border-radius:2px;overflow:hidden;align-self:end;margin-bottom:3px}
  .l-meter-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--copper),var(--brass));
    transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-o)}
  .l-meter-lab{grid-area:lab;font-size:.56rem;font-weight:700;letter-spacing:.24em;
    text-transform:uppercase;color:var(--t-faint);align-self:start}

  .l-item{padding-left:14px;gap:13px}
  .l-item::before{left:0}
  .l-text b{font-size:1.08rem}
}

/* ------------------------------------------------------------
   THE TAILORED PROMISE — the site inverts to cream here
   ------------------------------------------------------------ */
#promise{background:var(--cream);color:var(--ink);padding-block:17svh;position:relative;overflow:hidden}
#promise .chapter{color:var(--ember)}
#promise .chapter::before{background:var(--ember)}
#promise h2{color:var(--ink)}
#promise h2 em{color:var(--ember)}
#promise p{color:#4A423B}
.promise-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:46px}
.promise-item{display:flex;align-items:flex-start;gap:16px;padding:20px 0;border-bottom:1px solid rgba(20,16,13,.1)}
.promise-item:last-child{border-bottom:none}
.promise-item svg{width:34px;height:34px;flex:none}
.promise-item svg circle{stroke:var(--ember);opacity:.35}
.promise-item svg path{stroke:var(--ember)}
.promise-item b{display:block;font-family:var(--font-d);font-weight:400;font-size:1.3rem;color:var(--ink);line-height:1.2}
.promise-item span{display:block;font-size:.86rem;font-weight:300;line-height:1.7;color:#5A5148;margin-top:5px}
.promise-seal{
  position:relative;margin-top:40px;border-radius:24px;padding:32px 22px 30px;text-align:center;
  background:linear-gradient(150deg,#1C1410,#2B1D14);color:var(--cream);
  border:1px solid rgba(208,138,99,.35);overflow:hidden;
}
/* a soft copper pool behind the badges so the card has depth, not dead air */
.promise-seal::before{content:'';position:absolute;left:50%;bottom:-30%;width:130%;aspect-ratio:2/1;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(208,138,99,.14),transparent 70%)}
.promise-seal .script{position:relative;color:var(--copper-soft)}
.promise-seal p{position:relative;color:rgba(245,239,231,.82);margin-top:10px}
.promise-badges{position:relative;display:grid;grid-template-columns:repeat(2,max-content);
  justify-content:center;gap:14px 18px;margin-top:26px}
@media (min-width:560px){ .promise-badges{grid-template-columns:repeat(4,max-content)} }
/* Four small seals in ONE row on a phone. At 130px they wrapped into a
   loose 2x2 with the parallax drifting them into the card's padding,
   which left the bottom of the card as empty brown air. Parallax stays a
   desktop pleasure. */
.promise-badges .badge{width:min(25vw,116px);height:auto}
@media (max-width:899px){ .promise-badges .badge{transform:none!important} }

/* ------------------------------------------------------------
   NUMBERS
   ------------------------------------------------------------ */
#numbers{padding-block:12svh}
.num-grid{display:grid;grid-template-columns:1fr;gap:0;margin-top:38px}
.num-row{position:relative;padding:22px 0 20px;border-bottom:1px solid var(--line)}
/* The numeral is the whole show. It sits alone on its line at display
   size with its unit in brass, and the label reads beneath it. The old
   layout strung a number and a far-flung right-aligned label across one
   baseline, which read as a spreadsheet. */
.num-row b{display:block;font-family:var(--font-d);font-weight:300;
  font-size:clamp(3.4rem,15vw,6.2rem);
  letter-spacing:-.03em;color:var(--t-hi);font-variant-numeric:tabular-nums;line-height:.95}
/* The label rule below used to be `.num-row span`, which ALSO matched the
   odometer's inner <span data-count> inside the <b> — so the digits
   rendered at label size while the star and plus beside them stayed at
   display size. Scoped to the direct child, and the inner span pinned to
   inherit, so it can never happen again. */
.num-row b span{font-size:inherit}
.num-row b i{font-style:italic;font-weight:200;color:var(--brass);font-size:.55em;
  margin-left:2px;vertical-align:baseline}
.num-row > span{display:block;margin-top:10px;font-size:.74rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(245,239,231,.78);text-align:left;line-height:1.6}
.num-row > span br{display:none}

/* ------------------------------------------------------------
   CINEMA RAIL + DRAG COMPARE
   ------------------------------------------------------------ */
.cinema{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:40px 26px 20px;margin-inline:-26px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cinema::-webkit-scrollbar{display:none}
.cin-card{scroll-snap-align:center;flex:0 0 86%;max-width:460px}
.cin-frame{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:1.34;
  box-shadow:0 40px 100px rgba(0,0,0,.5);border:1px solid var(--line-warm);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;background:var(--slate)}
.cin-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.06) brightness(.88)}
.ba-clip{position:absolute;top:0;bottom:0;right:0;overflow:hidden;width:50%}
.ba-clip > div{position:absolute;top:0;right:0;height:100%}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--brass);z-index:5}
.ba-handle::after{content:'⇔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;background:var(--brass);border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:1.05rem;color:var(--void);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.ba-input{position:absolute;inset:0;z-index:6;opacity:0;width:100%;height:100%;cursor:ew-resize;margin:0}
.ba-input:focus-visible + .ba-handle::after{outline:2px solid var(--copper-soft);outline-offset:3px}
.ba-tag{position:absolute;top:14px;font-size:.56rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;background:rgba(8,7,6,.82);color:var(--cream);padding:7px 12px;
  border-radius:100px;z-index:7;pointer-events:none}
.ba-tag-a{right:14px;color:var(--brass)}
.ba-tag-b{left:14px}
.cin-cap{margin-top:15px;font-size:.78rem;font-weight:300;color:var(--t-mute);line-height:1.65;padding-inline:6px}
.cin-cap b{color:var(--t-body);font-weight:600}

/* ------------------------------------------------------------
   REVIEWS
   ------------------------------------------------------------ */
#reviews{padding-block:11svh;text-align:center;position:relative;overflow:hidden;background:var(--abyss)}
/* an enormous ghost quotation mark anchors the composition */
#reviews .wrap::before{content:'\201C';position:absolute;left:50%;top:34px;
  transform:translateX(-50%);font-family:var(--font-d);font-weight:300;
  font-size:clamp(11rem,42vw,17rem);line-height:1;color:var(--copper);opacity:.08;pointer-events:none}
#rev-stage{position:relative;min-height:clamp(230px,32svh,300px);display:flex;align-items:center;justify-content:center;
  touch-action:pan-y}
.rev-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;opacity:0;transform:translateY(16px);pointer-events:none;padding-inline:16px;
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rev-slide.on{opacity:1;transform:none}
.rev-slide q{font-family:var(--font-d);font-weight:300;font-style:italic;
  font-size:clamp(1.55rem,6.4vw,2.5rem);line-height:1.34;color:var(--cream);max-width:20ch;quotes:none}
.rev-slide .who{display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
/* a short copper rule ties the name to the quote, like a signature line */
.rev-slide .who::before{content:'';width:30px;height:1px;background:var(--copper);opacity:.6}
/* Real gold, not house brass. Gradient-filled with a warm bloom, sized
   to be the section's second voice after the quote itself. */
.stars-big{letter-spacing:9px;font-size:1.7rem;margin-bottom:6px;position:relative;
  filter:drop-shadow(0 0 14px rgba(244,180,0,.35))}
.stars-big i{font-style:normal;display:inline-block;opacity:0;transform:scale(.4);
  background:linear-gradient(180deg,#F9DD94 8%,#EDBB55 55%,#C98F2D 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:opacity .4s var(--ease),transform .5s var(--ease-o)}
.stars-big.on i{opacity:1;transform:none}
/* The Google badge. A quiet pill with the full-colour G, gold stars and
   the rating, linking to the reviews themselves. The one place on the
   site a foreign brand's colours are allowed in, because that is exactly
   what makes the endorsement read as real. */
.rev-google{position:relative;display:inline-flex;align-items:center;gap:12px;
  margin-top:22px;padding:11px 20px 11px 15px;border-radius:100px;
  background:rgba(255,255,255,.045);border:1px solid rgba(245,239,231,.14);
  transition:border-color .3s ease,background .3s ease}
.rev-google:hover{border-color:rgba(232,192,138,.5);background:rgba(255,255,255,.07)}
.rev-google .g-mark{width:22px;height:22px;flex:none}
.rev-google .rg-t{display:flex;align-items:baseline;gap:9px;line-height:1}
.rev-google .rg-t b{font-size:.8rem;font-weight:600;color:var(--cream);letter-spacing:.01em}
.rev-google .rg-sub{font-size:.72rem;color:var(--mist)}
.rev-google .rg-stars{font-size:.8rem;letter-spacing:2px;
  background:linear-gradient(180deg,#F9DD94,#EDBB55 60%,#C98F2D);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rev-google .rg-t i{font-style:normal;font-family:var(--font-d);font-size:.92rem;
  font-weight:400;color:var(--brass)}
.rev-dots{display:flex;gap:9px;justify-content:center;margin-top:20px}
.rev-dots button{width:34px;height:3px;border-radius:2px;background:rgba(255,255,255,.14);
  transition:background .3s ease;position:relative}
/* generous tap target around a slim dot */
.rev-dots button::after{content:'';position:absolute;inset:-14px -6px}
.rev-dots button[aria-current="true"]{background:var(--brass)}

/* ------------------------------------------------------------
   RESERVE — concentric rings
   ------------------------------------------------------------ */
#reserve{padding-block:16svh;position:relative;overflow:hidden;text-align:center}
#reserve h2{font-size:clamp(2.6rem,11vw,6rem);line-height:1;letter-spacing:-.025em}
#reserve .r-sub{margin-top:20px;color:var(--t-mute)}
#reserve .btn{margin-top:36px}
.r-ring{position:absolute;border:1px solid rgba(208,138,99,.12);border-radius:50%;pointer-events:none;
  left:50%;top:50%;aspect-ratio:1;transform:translate(-50%,-50%)}
.r-ring.spin{border-style:dashed;border-color:rgba(232,192,138,.09)}

/* ------------------------------------------------------------
   VISIT / FIND US
   ------------------------------------------------------------ */
#visit{padding-block:12svh;border-top:1px solid var(--line)}
.visit-cols{display:grid;grid-template-columns:1fr;gap:16px;margin-top:38px}
.vc b{font-family:var(--font-d);font-weight:400;font-size:1.3rem;color:var(--t-hi);display:block}
.vc p{margin-top:10px;font-size:.86rem;line-height:1.75}
.vc table{width:100%;margin-top:14px;border-collapse:collapse}
.vc td{padding:5px 0;font-size:.82rem;color:var(--t-body);border-bottom:1px solid var(--line)}
.vc td:last-child{text-align:right;font-weight:600;color:var(--t-hi)}
.area-list{display:flex;flex-wrap:wrap;gap:0;margin-top:18px}
.area-list li{list-style:none;font-size:.8rem;color:var(--t-body);padding:9px 0;
  border-bottom:1px solid var(--line);flex:1 1 46%;min-width:130px}
.area-list li::before{content:'';display:inline-block;width:10px;height:1px;background:var(--copper);
  vertical-align:middle;margin-right:9px}

/* ------------------------------------------------------------
   INNER PAGE HERO
   ------------------------------------------------------------ */
.page-hero{position:relative;min-height:78svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.page-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:saturate(.8) contrast(1.06) brightness(.7)}
.page-hero.is-floor > img{object-position:50% 80%}
.page-hero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(110% 80% at 50% 30%,transparent 24%,rgba(8,7,6,.6) 100%),
             linear-gradient(180deg,rgba(8,7,6,.86) 0%,rgba(8,7,6,.34) 40%,rgba(8,7,6,.96) 100%)}
.page-hero .wrap{padding-block:calc(var(--nav-h) + 70px) 66px;position:relative;z-index:2}
.page-hero h1{font-size:clamp(2.6rem,11vw,6rem);max-width:15ch}
.page-hero p{margin-top:22px;max-width:48ch}
.page-hero .btn{margin-top:30px}
.crumbs{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px;
  font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t-faint)}
.crumbs a:hover{color:var(--copper)}
.crumbs span{opacity:.5}

/* ------------------------------------------------------------
   EXPANDING SERVICE CARDS
   ------------------------------------------------------------ */
.exp-list{display:grid;gap:12px;margin-top:40px}
.exp{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.025);
  transition:border-color .35s ease,background .35s ease}
.exp[data-open="true"]{border-color:var(--line-warm);background:rgba(255,255,255,.045)}
.exp-head{width:100%;display:flex;align-items:center;gap:18px;padding:24px 24px;text-align:left}
.exp-head .numeral{font-size:1.7rem;flex:none}
.exp-head h3{flex:1;font-size:clamp(1.3rem,5vw,1.75rem);font-weight:400}
.exp-plus{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);flex:none;
  display:grid;place-items:center;transition:transform .45s var(--ease),border-color .3s ease,background .3s ease}
.exp-plus::before{content:'+';font-size:1.1rem;color:var(--copper);line-height:1}
.exp[data-open="true"] .exp-plus{transform:rotate(135deg);background:var(--copper);border-color:var(--copper)}
.exp[data-open="true"] .exp-plus::before{color:var(--void)}
.exp-body{height:0;overflow:hidden;transition:height .5s var(--ease)}
.exp-inner{padding:0 24px 28px;display:grid;gap:18px}
.exp-inner p{max-width:62ch}
.exp-tags{display:flex;flex-wrap:wrap;gap:8px}
.exp-tags li{list-style:none;font-size:.68rem;font-weight:600;letter-spacing:.06em;color:var(--t-body);
  border:1px solid var(--line);border-radius:100px;padding:7px 13px}

/* ------------------------------------------------------------
   STICKY PROCESS STEPPER
   ------------------------------------------------------------ */
.process{position:relative;margin-top:48px}
.process::before{content:'';position:absolute;left:19px;top:12px;bottom:12px;width:1px;background:var(--line)}
.process-rail{position:absolute;left:19px;top:12px;width:1px;background:var(--copper);
  transform-origin:top;transform:scaleY(0);height:calc(100% - 24px)}
.step{position:relative;padding:0 0 44px 58px}
.step:last-child{padding-bottom:0}
.step-dot{position:absolute;left:11px;top:6px;width:17px;height:17px;border-radius:50%;
  background:var(--void);border:1px solid var(--line);transition:border-color .4s ease,background .4s ease}
.step.on .step-dot{border-color:var(--copper);background:var(--copper);box-shadow:0 0 0 6px rgba(208,138,99,.14)}
.step-n{font-family:var(--font-p);font-size:.72rem;letter-spacing:.14em;color:var(--brass);
  text-transform:uppercase;display:block;margin-bottom:9px}
.step h3{font-size:clamp(1.4rem,5.5vw,1.95rem);font-weight:400}
.step p{margin-top:11px;max-width:58ch}

/* ------------------------------------------------------------
   LINE-ICON SERVICE GRID
   ------------------------------------------------------------ */
.icon-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:44px}
.icon-card{border:1px solid var(--line);border-radius:22px;padding:28px 26px;background:rgba(255,255,255,.025);
  transition:border-color .35s ease,transform .5s var(--ease)}
.icon-card:hover{border-color:var(--line-warm);transform:translateY(-4px)}
.icon-card svg{width:44px;height:44px;margin-bottom:18px}
.icon-card svg path,.icon-card svg circle,.icon-card svg rect,.icon-card svg line,.icon-card svg polyline{
  stroke:var(--copper);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.icon-card h3{font-size:1.35rem;font-weight:400}
.icon-card p{margin-top:10px;font-size:.86rem;line-height:1.75}
.icon-card ul{margin-top:16px;display:grid;gap:7px}
.icon-card li{list-style:none;font-size:.8rem;color:var(--t-mute);padding-left:16px;position:relative}
.icon-card li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--copper)}

/* ------------------------------------------------------------
   CHECKLIST (end-of-lease)
   ------------------------------------------------------------ */
.checklist{display:grid;gap:0;margin-top:34px;max-width:640px}
.checklist li{list-style:none;display:flex;align-items:flex-start;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--line);font-size:.9rem;font-weight:300;color:var(--t-body);line-height:1.6}
.checklist svg{width:20px;height:20px;flex:none;margin-top:2px}
.checklist svg path{stroke:var(--copper);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------
   PRODUCTS — catalogue
   ------------------------------------------------------------ */
#cat-hero{position:relative;overflow:hidden;padding-block:calc(var(--nav-h) + 70px) 60px;isolation:isolate}
#cat-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:saturate(.76) contrast(1.06) brightness(.5)}
#cat-hero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,7,6,.82),rgba(8,7,6,.6) 40%,var(--void) 100%)}

.pills{position:sticky;top:var(--nav-h);z-index:60;background:rgba(8,7,6,.86);backdrop-filter:blur(16px);
  border-block:1px solid var(--line);margin-top:10px}
.pills-inner{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:12px 26px;position:relative}
.pills-inner::-webkit-scrollbar{display:none}
.pill{flex:none;border-radius:100px;padding:10px 20px;font-size:.78rem;font-weight:600;
  color:var(--t-mute);border:1px solid transparent;transition:color .3s ease,border-color .3s ease;white-space:nowrap}
.pill[aria-selected="true"]{color:var(--void)}
.pill-ind{position:absolute;top:12px;height:38px;border-radius:100px;background:var(--copper);
  z-index:-1;transition:transform .45s var(--ease),width .45s var(--ease);left:0}

/* ------------------------------------------------------------
   RANGES STRIP — one card per range above the decor grid
   ------------------------------------------------------------ */
.ranges{display:flex;gap:12px;overflow-x:auto;padding:14px 26px 22px;margin:0 -26px 6px;
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ranges::-webkit-scrollbar{display:none}
.rg-card{flex:0 0 200px;scroll-snap-align:start;text-align:left;
  background:var(--slate);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:border-color .3s ease,transform .35s var(--ease),box-shadow .35s var(--ease)}
.rg-card:hover{transform:translateY(-3px);border-color:rgba(208,138,99,.4)}
.rg-card[aria-pressed="true"]{border-color:var(--copper);box-shadow:0 0 0 1px var(--copper),0 18px 40px -22px rgba(208,138,99,.5)}
.rg-img{display:block;aspect-ratio:10/7;background:#221b16;overflow:hidden}
.rg-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.rg-card:hover .rg-img img{transform:scale(1.05)}
.rg-body{display:block;padding:12px 14px 14px}
.rg-cat{display:block;font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--t-faint)}
.rg-name{display:block;font-family:var(--font-d);font-weight:400;font-size:1.12rem;color:var(--t-hi);margin-top:4px;line-height:1.15}
.rg-count{display:block;font-size:.72rem;color:var(--t-mute);margin-top:4px}
.rg-runout{display:inline-block;margin-top:7px;padding:3px 8px;border-radius:999px;
  font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);border:1px solid rgba(232,192,138,.35);background:rgba(232,192,138,.07)}
@media (min-width:900px){
  .ranges{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}
  .rg-card{flex:0 0 calc(20% - 10px)}
}
@media (min-width:1200px){ .rg-card{flex:0 0 calc(16.66% - 10px)} }

.refine{display:grid;gap:20px;margin-top:30px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.refine-group b{display:block;font-size:.62rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--t-faint);margin-bottom:11px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);border-radius:100px;padding:8px 15px;font-size:.76rem;
  font-weight:500;color:var(--t-body);transition:all .25s ease;display:inline-flex;align-items:center;gap:8px}
.chip:hover{border-color:var(--line-warm)}
.chip[aria-pressed="true"]{border-color:var(--copper);background:rgba(208,138,99,.14);color:var(--copper-soft)}
.chip i{width:13px;height:13px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.35)}
.refine-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:24px;font-size:.78rem;color:var(--t-mute)}
.refine-bar b{color:var(--t-hi);font-weight:600}

.grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:30px}
.p-tile{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);
  background:var(--slate);display:block;transition:border-color .35s ease,transform .5s var(--ease)}
.p-tile:hover{border-color:var(--copper);transform:translateY(-4px)}
.p-swatch{position:relative;aspect-ratio:1.25;overflow:hidden;background:var(--slate)}
.p-swatch img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.p-tile:hover .p-swatch img{transform:scale(1.06)}
.p-room{position:absolute;right:12px;bottom:12px;width:72px;aspect-ratio:1.3;border-radius:10px;
  overflow:hidden;border:1px solid rgba(255,255,255,.24);opacity:0;transform:translateY(6px);
  transition:opacity .4s ease,transform .4s var(--ease);box-shadow:0 8px 20px rgba(0,0,0,.5)}
.p-tile:hover .p-room{opacity:1;transform:none}
.p-room img{width:100%;height:100%;object-fit:cover}
.p-body{padding:18px 20px 20px}
.p-range{font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.p-name{font-family:var(--font-d);font-weight:400;font-size:1.4rem;color:var(--t-hi);margin-top:6px;line-height:1.15}
.p-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--line)}
.p-tone{display:flex;align-items:center;gap:8px;font-size:.68rem;color:var(--t-mute)}
.p-tone i{width:12px;height:12px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.3)}
.p-price{font-size:.72rem;font-weight:600;color:var(--copper)}
.p-flag{position:absolute;top:12px;left:12px;z-index:2;font-size:.54rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;background:rgba(8,7,6,.84);color:var(--brass);
  padding:6px 11px;border-radius:100px;border:1px solid rgba(232,192,138,.3)}
.p-compare{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border-radius:50%;
  background:rgba(8,7,6,.78);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;
  font-size:.9rem;color:var(--cream);transition:all .25s ease}
.p-compare[aria-pressed="true"]{background:var(--copper);border-color:var(--copper);color:var(--void)}
.empty{padding:70px 0;text-align:center}
.empty p{margin-top:12px}

#tray{position:fixed;left:0;right:0;bottom:0;z-index:520;background:rgba(22,18,15,.96);
  backdrop-filter:blur(18px);border-top:1px solid var(--line-warm);
  transform:translateY(110%);transition:transform .45s var(--ease);
  padding:14px 20px calc(14px + var(--safe-b))}
#tray.up{transform:none}
.tray-inner{max-width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tray-items{display:flex;gap:9px;flex:1;min-width:0;flex-wrap:wrap}
.tray-chip{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;padding:6px 10px}
.tray-chip img{width:30px;height:30px;border-radius:7px;object-fit:cover}
.tray-chip span{font-size:.72rem;color:var(--t-body);white-space:nowrap}
.tray-chip button{color:var(--t-faint);font-size:.85rem;line-height:1}

/* ------------------------------------------------------------
   PRODUCT DETAIL
   ------------------------------------------------------------ */
.pd{display:grid;grid-template-columns:1fr;gap:34px;padding-top:calc(var(--nav-h) + 40px)}

/* ------------------------------------------------------------
   ABOUT THIS FLOOR — the blurb under the swatch and specs.
   Spans the full pd grid at every width. The benefits column reads as
   a quiet ledger next to the prose rather than another chip row.
   ------------------------------------------------------------ */
.pd-about{display:grid;grid-template-columns:1fr;gap:40px;
  margin-top:34px;padding-top:48px;border-top:1px solid var(--line)}
.pd-about h2{font-size:clamp(1.5rem,4.2vw,2.1rem);margin-top:14px}
.pd-about h3{font-family:var(--font-d);font-weight:400;font-size:1.06rem;
  color:var(--t-hi);margin-top:30px}
.pd-about p{font-size:.9rem;font-weight:300;line-height:1.8;color:var(--t-body);
  margin-top:12px;max-width:58ch}
.pd-about .chapter{margin-bottom:2px}
.pd-benefits{list-style:none;margin-top:20px;display:grid;gap:2px}
.pd-benefits li{padding:15px 0;border-bottom:1px solid var(--line)}
.pd-benefits li:last-child{border-bottom:none}
.pd-benefits b{display:block;font-family:var(--font-d);font-weight:400;
  font-size:1.02rem;color:var(--t-hi);line-height:1.3}
.pd-benefits span{display:block;font-size:.8rem;font-weight:300;line-height:1.65;
  color:var(--t-mute);margin-top:4px}
.pd-view{position:relative}
.pd-modes{display:flex;gap:7px;margin-bottom:16px}
.pd-mode{border:1px solid var(--line);border-radius:100px;padding:9px 17px;font-size:.74rem;
  font-weight:600;color:var(--t-mute);transition:all .25s ease}
.pd-mode[aria-selected="true"]{background:var(--copper);border-color:var(--copper);color:var(--void)}
.pd-stage{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line-warm);
  box-shadow:0 30px 80px rgba(0,0,0,.5);background:var(--slate);aspect-ratio:1.12}
.pd-pane{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s ease}
.pd-pane.on{opacity:1;pointer-events:auto}
.pd-pane img{width:100%;height:100%;object-fit:cover}
/* swatch magnifier */
#pd-lens{position:absolute;width:150px;height:150px;border-radius:50%;border:2px solid var(--brass);
  box-shadow:0 12px 34px rgba(0,0,0,.55);pointer-events:none;opacity:0;transition:opacity .25s ease;
  background-repeat:no-repeat;z-index:4}
#pd-lens.on{opacity:1}
/* room preview — swatch masked onto the floor plane */
.pd-room{position:absolute;inset:0}
.pd-room > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pd-floor{position:absolute;inset:0;background-size:26% auto;background-repeat:repeat;
  mix-blend-mode:multiply;opacity:.94}
.pd-floor-lit{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 45%);
  mix-blend-mode:soft-light}
.pd-rooms{display:flex;gap:8px;position:absolute;left:14px;bottom:14px;z-index:5}
.pd-rooms button{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(8,7,6,.74);border:1px solid rgba(255,255,255,.16);color:var(--cream);
  padding:8px 13px;border-radius:100px;transition:all .25s ease}
.pd-rooms button[aria-pressed="true"]{background:var(--brass);color:var(--void);border-color:var(--brass)}
/* plank at scale */
.pd-plank{position:absolute;inset:0;display:grid;place-items:center;padding:8%}
.pd-plank-board{width:100%;aspect-ratio:.1485;border-radius:5px;overflow:hidden;position:relative;
  box-shadow:0 18px 44px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08);max-height:78%}
.pd-plank-board img{width:100%;height:100%;object-fit:cover}
.pd-plank-board::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.42) 0%,transparent 5%,transparent 95%,rgba(0,0,0,.42) 100%),
             linear-gradient(180deg,rgba(255,255,255,.16) 0%,transparent 3%)}
.pd-dim{position:absolute;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}

.pd-info h1{font-size:clamp(2.4rem,10vw,4rem);margin-top:8px}
.pd-tagline{margin-top:16px;max-width:44ch}
.pd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pd-chips li{list-style:none;font-size:.7rem;font-weight:600;color:var(--t-body);
  border:1px solid var(--line-warm);border-radius:100px;padding:8px 14px}
.spec{width:100%;border-collapse:collapse;margin-top:28px}
.spec th,.spec td{text-align:left;padding:12px 0;border-bottom:1px solid var(--line);font-size:.84rem}
.spec th{font-weight:500;color:var(--t-mute);width:46%}
.spec td{color:var(--t-hi);font-weight:500;text-align:right}
.spec tr.diff th,.spec tr.diff td{color:var(--copper)}
.calc{border:1px solid var(--line-warm);border-radius:20px;padding:22px;margin-top:28px;background:rgba(255,255,255,.025)}
.calc label{display:block;font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--t-faint);margin-bottom:10px}
.calc-row{display:flex;gap:10px;align-items:center}
.calc input{flex:1;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;color:var(--t-hi);font-size:1rem;outline:none;min-width:0}
.calc input:focus{border-color:var(--copper)}
.calc-out{margin-top:16px;font-size:.9rem;color:var(--t-body);line-height:1.7}
.calc-out b{font-family:var(--font-d);font-size:1.7rem;color:var(--brass);font-weight:400;
  display:block;margin-bottom:2px}
.pd-ctas{display:grid;gap:11px;margin-top:28px}
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:22px 26px;
  margin-inline:-26px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail a{flex:0 0 138px;scroll-snap-align:start}
.rail .r-sw{aspect-ratio:1;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--slate)}
.rail .r-sw img{width:100%;height:100%;object-fit:cover}
.rail b{display:block;font-family:var(--font-d);font-weight:400;font-size:.95rem;color:var(--t-hi);margin-top:9px}
.rail span{font-size:.64rem;color:var(--t-faint)}
#pd-bar{position:fixed;left:0;right:0;bottom:0;z-index:510;background:rgba(22,18,15,.96);
  backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:11px 20px calc(11px + var(--safe-b));
  transform:translateY(130%);transition:transform .4s var(--ease);display:flex;align-items:center;gap:14px}
#pd-bar.up{transform:none}
#pd-bar img{width:40px;height:40px;border-radius:10px;object-fit:cover}
#pd-bar .pdb-t{flex:1;min-width:0}
#pd-bar b{display:block;font-family:var(--font-d);font-weight:400;font-size:1rem;color:var(--t-hi);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pd-bar span{font-size:.62rem;color:var(--t-faint)}

/* ------------------------------------------------------------
   GALLERY
   ------------------------------------------------------------ */
.g-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:30px}
.g-item{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  background:var(--slate);cursor:pointer;display:block;width:100%;text-align:left}
.g-frame{position:relative;aspect-ratio:1.3;overflow:hidden}
.g-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 74%;
  filter:saturate(.8) contrast(1.06) brightness(.82);transition:transform .8s var(--ease),filter .5s ease}
.g-item:hover .g-frame img{transform:scale(1.05);filter:saturate(.9) contrast(1.06) brightness(.95)}
.g-cap{padding:15px 18px 17px}
.g-cap b{display:block;font-family:var(--font-d);font-weight:400;font-size:1.15rem;color:var(--t-hi)}
.g-cap span{display:block;font-size:.7rem;color:var(--t-faint);margin-top:5px;letter-spacing:.06em}
.g-badge{position:absolute;top:12px;left:12px;font-size:.54rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;background:rgba(8,7,6,.82);color:var(--brass);padding:6px 11px;border-radius:100px}

#lightbox{position:fixed;inset:0;z-index:880;background:rgba(4,3,3,.97);display:none;
  align-items:center;justify-content:center;flex-direction:column;padding:20px}
#lightbox.open{display:flex}
#lb-stage{position:relative;max-width:min(1100px,94vw);max-height:74svh;width:100%;
  display:flex;align-items:center;justify-content:center}
#lb-stage img{max-width:100%;max-height:74svh;object-fit:contain;border-radius:12px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;
  color:var(--cream);font-size:1.2rem;transition:background .25s ease}
.lb-nav:hover{background:rgba(208,138,99,.28)}
.lb-prev{left:-6px}.lb-next{right:-6px}
#lb-close{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:var(--cream)}
#lb-cap{margin-top:22px;text-align:center;max-width:60ch}
#lb-cap b{font-family:var(--font-d);font-weight:400;font-size:1.3rem;color:var(--t-hi);display:block}
#lb-cap span{font-size:.78rem;color:var(--t-mute);display:block;margin-top:7px}
#lb-cap a{margin-top:16px;display:inline-flex}
#lb-count{position:absolute;top:24px;left:24px;font-size:.66rem;font-weight:700;letter-spacing:.2em;color:var(--t-faint)}

/* ------------------------------------------------------------
   CONTACT + FAQ
   ------------------------------------------------------------ */
.contact-grid{display:grid;grid-template-columns:1fr;gap:26px;margin-top:34px}
.contact-card{border:1px solid var(--line-warm);border-radius:26px;padding:30px 26px;background:rgba(255,255,255,.03)}
.contact-card dl{display:grid;gap:18px;margin-top:22px}
.contact-card dt{font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--t-faint)}
.contact-card dd{margin-top:5px;font-size:1.05rem;color:var(--t-hi)}
.contact-card dd a:hover{color:var(--copper)}

.faq{margin-top:44px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:flex-start;gap:16px;padding:22px 0;text-align:left}
.faq-q h3{flex:1;font-family:var(--font-d);font-weight:400;font-size:clamp(1.05rem,4vw,1.3rem);
  color:var(--t-hi);line-height:1.35;letter-spacing:-.005em}
.faq-q i{width:26px;height:26px;flex:none;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-style:normal;color:var(--copper);font-size:.9rem;
  transition:transform .4s var(--ease),background .3s ease,color .3s ease;margin-top:2px}
.faq-item[data-open="true"] .faq-q i{transform:rotate(135deg);background:var(--copper);color:var(--void)}
.faq-a{height:0;overflow:hidden;transition:height .45s var(--ease)}
.faq-a > div{padding-bottom:24px;max-width:66ch}
.faq-a p + p{margin-top:14px}

/* ------------------------------------------------------------
   QUOTE WIZARD
   ------------------------------------------------------------ */
.wiz{background:var(--cream);color:var(--ink);border-radius:26px;padding:26px 24px}
.wiz-steps{display:flex;border-bottom:1px solid #E2DACC;margin-bottom:4px}
.wiz-step{flex:1;text-align:center;padding:13px 4px;font-size:.6rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#8C8175;border-bottom:2.5px solid transparent}
.wiz-step.on{color:var(--ember);border-bottom-color:var(--ember)}
.wiz-pane{display:none;padding-top:22px}
.wiz-pane.on{display:block}
.wiz-pane .wiz-h{color:var(--ink);font-size:1.5rem;font-weight:400;letter-spacing:-.01em}
.wiz-pane > p{color:#5A5148;font-size:.86rem;margin-top:8px}
.wiz-label{font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#8C8175;margin:22px 0 10px}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.opt-card{border:1.5px solid #E2DACC;border-radius:15px;padding:14px 13px;text-align:left;
  font-size:.8rem;font-weight:600;color:#3B342E;transition:all .2s ease;display:flex;gap:11px;align-items:flex-start}
.opt-card svg{width:22px;height:22px;flex:none;margin-top:1px}
.opt-card svg path,.opt-card svg circle,.opt-card svg rect,.opt-card svg line{
  stroke:var(--ember);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.opt-card small{display:block;font-weight:500;color:#8C8175;font-size:.66rem;margin-top:3px;line-height:1.45}
.opt-card[aria-pressed="true"]{border-color:var(--ember);background:#F2E4D8}
.wiz-chips{display:flex;flex-wrap:wrap;gap:8px}
.wiz-chip{border:1.5px solid #E2DACC;border-radius:100px;padding:9px 15px;font-size:.78rem;
  font-weight:600;color:#3B342E;transition:all .2s ease}
.wiz-chip[aria-pressed="true"]{border-color:var(--ember);background:#F2E4D8;color:var(--ember)}
.wiz-field{margin-bottom:13px}
.wiz-field label{display:block;font-size:.7rem;font-weight:600;color:#3B342E;margin-bottom:6px}
.wiz-input{width:100%;border:1.5px solid #E2DACC;border-radius:14px;padding:14px 16px;font-size:.94rem;
  background:#fff;color:var(--ink);outline:none}
.wiz-input:focus{border-color:var(--ember)}
.wiz-input[aria-invalid="true"]{border-color:#B33D22}
.wiz-err{display:block;font-size:.72rem;color:#B33D22;margin-top:6px;font-weight:500}
.wiz-range{display:flex;gap:12px;align-items:center}
.wiz-range input[type=range]{flex:1;accent-color:var(--ember)}
.wiz-range input[type=number]{width:96px;flex:none}
.wiz-nav{display:flex;gap:10px;margin-top:24px}
.wiz-btn{flex:1;border-radius:100px;min-height:54px;font-weight:600;font-size:.92rem;
  background:var(--clay);color:#fff;transition:opacity .25s ease}
.wiz-back{flex:0 0 auto;padding-inline:24px;background:transparent;border:1.5px solid #E2DACC;color:#3B342E}
.wiz-summary{background:#fff;border-radius:16px;padding:18px;margin-top:16px;font-size:.86rem;
  color:#4A423B;line-height:1.9;text-align:left}
.wiz-summary b{color:var(--ink)}
.wiz-check{display:flex;gap:11px;align-items:flex-start;font-size:.8rem;color:#4A423B;line-height:1.6;margin-top:6px}
.wiz-check input{margin-top:3px;accent-color:var(--ember);width:17px;height:17px;flex:none}
.wiz-done{text-align:center;padding:12px 0}
.big-tick{width:76px;height:76px;border-radius:50%;background:#F2E4D8;color:var(--ember);
  display:grid;place-items:center;font-size:2rem;margin:0 auto 16px}
.wiz-note{font-size:.68rem;color:#8C8175;margin-top:12px;text-align:center;line-height:1.6}

/* ------------------------------------------------------------
   ABOUT
   ------------------------------------------------------------ */
.story{max-width:68ch;margin-inline:auto}
.story p + p{margin-top:22px}
.story .script{display:block;margin:36px 0;text-align:center;color:var(--copper)}
.pull{border-left:2px solid var(--copper);padding-left:26px;margin:38px 0}
.pull p{font-family:var(--font-d);font-style:italic;font-weight:300;font-size:clamp(1.3rem,5vw,1.8rem);
  line-height:1.45;color:var(--cream)}
.break-out{margin:44px 0}
.team{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
.member{border:1px solid var(--line);border-radius:22px;padding:24px 20px;background:rgba(255,255,255,.025);
  text-align:center;transition:border-color .35s ease,transform .5s var(--ease)}
.member:hover{border-color:var(--line-warm);transform:translateY(-4px)}
.member .av{width:74px;height:74px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  background:linear-gradient(150deg,#2A1D15,#4A2E1B);border:1px solid var(--line-warm);
  font-family:var(--font-d);font-style:italic;font-weight:300;font-size:1.7rem;color:var(--brass)}
.member b{display:block;font-family:var(--font-d);font-weight:400;font-size:1.25rem;color:var(--t-hi)}
.member em{display:block;font-family:var(--font-d);font-style:italic;font-size:.82rem;color:var(--copper);margin-top:5px}
.member p{font-size:.8rem;line-height:1.65;margin-top:11px}
.badge-blocks{display:grid;gap:18px;margin-top:44px}
.badge-block{display:flex;gap:22px;align-items:flex-start;padding:24px 0;border-bottom:1px solid var(--line)}
.badge-block img{width:96px;flex:none}
.badge-block h3{font-size:1.3rem;font-weight:400}
.badge-block p{margin-top:9px;font-size:.86rem;line-height:1.75}

/* ------------------------------------------------------------
   404
   ------------------------------------------------------------ */
#nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding:calc(var(--nav-h) + 40px) 26px 60px}
#nf h1{font-size:clamp(4rem,22vw,11rem);line-height:.9}
#nf .script{margin-top:18px}
#nf .btn{margin-top:32px}
.nf-dog{width:min(320px,74vw);margin:0 auto 24px;border-radius:50%;overflow:hidden;
  border:1px solid var(--line-warm);box-shadow:0 30px 80px rgba(0,0,0,.55);aspect-ratio:1}
.nf-dog img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.82) brightness(.9)}

/* ------------------------------------------------------------
   LEGAL PAGES
   ------------------------------------------------------------ */
.legal{padding-top:calc(var(--nav-h) + 60px);padding-bottom:12svh}
.legal h2{font-size:clamp(1.5rem,6vw,2.1rem);margin-top:44px}
.legal h3{font-size:1.2rem;margin-top:28px}
.legal p,.legal li{font-size:.9rem;line-height:1.85;color:var(--t-body);max-width:70ch}
.legal p + p{margin-top:14px}
.legal ul{margin-top:14px;padding-left:20px;display:grid;gap:9px}
.legal li{list-style:none;position:relative}
.legal li::before{content:'';position:absolute;left:-20px;top:.72em;width:9px;height:1px;background:var(--copper)}

/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */
@media (min-width:900px){
  .trust-row{grid-template-columns:repeat(6,1fr)}

  .halves-grid{grid-template-columns:1fr 1fr;gap:22px}
  .half{padding:40px 36px}

  #hero .wrap{padding-top:calc(var(--nav-h) + 21svh);padding-bottom:120px}
  .j-scene h2{max-width:18ch}
  .j-fig{max-width:560px}

  .h-card{flex:0 0 400px}
  .h-head{padding:0 38px 34px}
  #htrack{padding-inline:38px;gap:26px}
  #hprog{margin-inline:38px}

  #lsticky{position:sticky;top:0;min-height:100svh;min-height:100dvh;overflow:hidden;padding-block:0}
  .l-grid{grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}

  .promise-grid{grid-template-columns:1fr 1fr;gap:0 44px}
  .promise-seal{padding:44px 40px}

  .num-grid{grid-template-columns:repeat(4,1fr);gap:0 44px;margin-top:56px}
  .num-row{border-bottom:none;border-left:1px solid var(--line);padding:6px 0 6px 26px}
  .num-row b{font-size:clamp(3.2rem,4.6vw,4.6rem)}
  .num-row > span br{display:block}

  .cinema{padding-inline:38px;margin-inline:-38px}
  .cin-card{flex:0 0 min(46%,460px)}

  .visit-cols{grid-template-columns:1fr 1fr}

  .exp-head{padding:28px 34px}
  .exp-inner{padding:0 34px 32px}

  .icon-grid{grid-template-columns:1fr 1fr 1fr}

  .grid{grid-template-columns:1fr 1fr 1fr;gap:20px}
  .refine{grid-template-columns:repeat(3,1fr);gap:30px}

  .pd{grid-template-columns:1.05fr .95fr;gap:52px}
  .pd-about{grid-template-columns:1.2fr .8fr;gap:64px;margin-top:40px;padding-top:56px}
  .pd-view{position:sticky;top:calc(var(--nav-h) + 26px);align-self:start}
  .pd-ctas{grid-template-columns:1fr 1fr}
  .rail{padding-inline:38px;margin-inline:-38px}

  .g-grid{grid-template-columns:1fr 1fr 1fr;gap:18px}
  .g-item.wide{grid-column:span 2}

  .contact-grid{grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
  .contact-card{position:sticky;top:calc(var(--nav-h) + 26px)}
  .wiz{padding:34px 32px}

  .team{grid-template-columns:repeat(3,1fr);gap:18px}
  .badge-block img{width:120px}

  .page-hero .wrap{padding-block:calc(var(--nav-h) + 90px) 80px}
  .pills{top:var(--nav-h)}
}
@media (min-width:560px) and (max-width:899px){
  .trust-row{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1200px){
  .team{grid-template-columns:repeat(6,1fr)}
  .member{padding:20px 12px}
  .member .av{width:60px;height:60px;font-size:1.35rem}
  .member b{font-size:1.05rem}
  .member p{display:none}
}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  #ribbon .rt{animation:none;transform:none}
  .l-item{opacity:1;transform:none}
  .l-item .l-tick path{stroke-dashoffset:0}
  .l-item .l-tick circle{stroke:var(--copper)}
  .stars-big i{opacity:1;transform:none}
  .rev-slide{position:relative;opacity:1;transform:none;pointer-events:auto}
  .rev-slide + .rev-slide{margin-top:40px}
  #rev-stage{flex-direction:column;min-height:0}
  .rev-dots{display:none}
  #hsticky,#fsticky,#lsticky{position:static;height:auto;min-height:0;overflow:visible}
  #hwrap,#fwrap,#lwrap,#bwrap{height:auto!important}
  #bsticky{position:static;height:100svh;height:100dvh}
  .b-fabric{transform:translateY(-55%)}
  .b-copy[data-b="1"]{opacity:1;transform:none}
  #htrack{flex-wrap:wrap;transform:none!important;justify-content:center}
  .h-card{flex:1 1 300px;min-height:0}
  #fcanvas{display:none}
  #ffallback{opacity:1;position:relative;height:60svh}
  .process-rail{transform:scaleY(1)}
  .step .step-dot{border-color:var(--copper);background:var(--copper)}
}

/* ------------------------------------------------------------
   COMPARE MODAL — .spec inverted for the cream sheet
   ------------------------------------------------------------ */
#compare-body .spec th,#compare-body .spec td{border-bottom-color:rgba(20,16,13,.12)}
#compare-body .spec th{color:#8C8175}
#compare-body .spec td{color:var(--ink)}
#compare-body .spec thead td{text-align:center;padding-bottom:16px}
#compare-body .spec tr.diff th,#compare-body .spec tr.diff td{color:var(--ember);font-weight:600}
#compare-body .fine{border-color:rgba(20,16,13,.14);color:#5A5148;max-width:none}
#compare-body .fine b{color:var(--ink)}