/* ============================================================
   SABLE RIDGE
   Palette sampled from the footage: espresso dusk, warm sand, the
   bronze of the balconies and the amber in the windows, with the
   lagoon's indigo kept for the water and the sky. Every token is
   clear of green: hue outside 70 to 170 degrees on all of them.

   Two grounds alternate down the page. Espresso carries the film and
   the night; ivory carries the plans and the people. The Didone is
   the voice; the mono is the surveyor's pencil.
   ============================================================ */

:root{
  --canvas:#14110f;
  --canvas-deep:#0d0b09;
  --panel:#1d1815;
  --accent:#e8d6ba;
  --accent-hover:#f5e9d6;
  --accent-muted:rgba(232,214,186,.22);
  --ember:#d9a15f;                     /* the footage's own warm light: italics and one glow */
  --text-primary:#f6efe4;
  --text-secondary:rgba(246,239,228,.66);
  --text-faint:rgba(246,239,228,.42);
  --glass-bg:rgba(20,17,15,.46);
  --glass-line:rgba(232,214,186,.16);

  /* the ivory ground */
  --cream:#f3ede2;
  --cream-deep:#e9e1d2;
  --cream-card:#fbf8f1;
  --ink:#1a1512;
  --ink-2:rgba(26,21,18,.7);
  --ink-3:rgba(26,21,18,.48);
  --ink-line:rgba(26,21,18,.14);
  --gilt:#8f6a3d;                      /* the bronze, darkened to read on ivory */

  --d:'Bodoni Moda','Bodoni 72','Didot',Georgia,'Times New Roman',serif;
  --b:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --m:'DM Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --gutter:clamp(20px,4.6vw,72px);
  --maxw:1280px;
  --r:18px;                            /* the frame radius on every photograph */
  --r-s:12px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --tshadow:0 1px 2px rgba(10,8,6,.95),0 3px 12px rgba(10,8,6,.78),0 10px 44px rgba(10,8,6,.8);
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font:300 clamp(15px,1.02vw,17px)/1.68 var(--b);
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}

img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button,input,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip{
  position:fixed;top:-100px;left:var(--gutter);z-index:200;
  background:var(--accent);color:#0d0b09;padding:12px 18px;border-radius:999px;
  font:500 11px/1 var(--m);letter-spacing:.18em;text-transform:uppercase;
  transition:top .28s var(--ease);
}
.skip:focus{top:16px}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sec--cream :focus-visible{outline-color:var(--ink)}

/* ------------------------- type scale ------------------------- */
.d1{font:400 clamp(3rem,6.6vw,6.5rem)/.98 var(--d);letter-spacing:-.015em;margin:0}
.d2{font:400 clamp(2.3rem,4.4vw,4.2rem)/1.04 var(--d);letter-spacing:-.012em;margin:0}
.d3{font:400 clamp(1.7rem,2.5vw,2.45rem)/1.12 var(--d);letter-spacing:-.006em;margin:0}
.d4{font:400 clamp(1.32rem,1.65vw,1.6rem)/1.22 var(--d);letter-spacing:0;margin:0}

/* the italic accent word: the footage's warm light, spoken once per headline */
.acc{font-style:italic;font-weight:400;color:var(--ember)}
.sec--cream .acc{color:var(--gilt)}

.kicker{
  font:500 clamp(9.5px,.72vw,11px)/1 var(--m);
  letter-spacing:.26em;text-transform:uppercase;color:var(--text-faint);margin:0 0 1.5em;
}
/* the architect's dash before a section label */
.sec .kicker::before{
  content:"";display:inline-block;width:28px;height:1px;background:currentColor;
  margin-right:14px;vertical-align:middle;opacity:.7;
}
.lede{
  font-size:clamp(1.02rem,1.2vw,1.18rem);line-height:1.62;color:var(--text-secondary);
  max-width:56ch;margin:1.6em 0 0;
}

/* the signature: a hairline running through a headline */
.jointed{position:relative}
.jointed::after{
  content:"";position:absolute;left:0;top:calc(50% - .5px);width:var(--jw,0%);height:1px;
  background:var(--accent-muted);pointer-events:none;
  transition:width 1.5s var(--ease-out);
}
.sec--cream .jointed::after{background:var(--ink-line)}
.reveal.in .jointed::after,.jointed.in::after{--jw:100%}

/* the section seam, drawn on scroll */
.seam{position:absolute;left:0;right:0;bottom:0;width:100%;height:1px;overflow:visible}
.seam line{
  stroke:var(--accent-muted);stroke-width:1;
  stroke-dasharray:1200;stroke-dashoffset:1200;
  transition:stroke-dashoffset 1.9s var(--ease-out);
}
.sec--cream .seam line{stroke:var(--ink-line)}
.seam.in line{stroke-dashoffset:0}

/* --------------------- buttons --------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font:500 clamp(10px,.76vw,11.5px)/1 var(--m);letter-spacing:.2em;text-transform:uppercase;
  padding:1.2em 2.1em;border:1px solid var(--accent-muted);border-radius:999px;
  background:transparent;color:var(--accent);cursor:pointer;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
  text-shadow:none;
}
.btn:hover{border-color:var(--accent);background:rgba(232,214,186,.08);color:var(--accent-hover)}
.btn:active{transform:translateY(1px)}
.btn--solid{background:var(--accent);color:#0d0b09;border-color:var(--accent)}
.btn--solid:hover{background:var(--accent-hover);color:#0d0b09}
.btn--ghost{padding:1em 1.5em}
.btn--block{width:100%;margin-top:.6em}
.sec--cream .btn{border-color:var(--ink-line);color:var(--ink)}
.sec--cream .btn:hover{border-color:var(--ink);background:rgba(26,21,18,.05);color:var(--ink)}
.sec--cream .btn--solid{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.sec--cream .btn--solid:hover{background:#2a221c;color:#fff}

/* the round call to action, the one that floats on the film strip */
.orb{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  width:clamp(118px,11vw,148px);height:clamp(118px,11vw,148px);border-radius:50%;
  border:1px solid rgba(217,161,95,.55);color:var(--text-primary);
  background:rgba(10,8,6,.42);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font:500 10px/1.55 var(--m);letter-spacing:.2em;text-transform:uppercase;
  box-shadow:0 0 0 0 rgba(217,161,95,.0),0 18px 50px rgba(10,8,6,.5);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease),border-color .6s var(--ease),background .6s var(--ease);
}
.orb:hover{transform:scale(1.05);border-color:var(--ember);background:rgba(217,161,95,.14);box-shadow:0 0 0 10px rgba(217,161,95,.08),0 18px 50px rgba(10,8,6,.5)}

.chip{
  background:rgba(10,8,6,.55);border:1px solid var(--glass-line);border-radius:10px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  text-shadow:0 1px 3px rgba(10,8,6,.85);
}

/* the photograph frame: rounded, inset, with a caption strip */
.frame{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:var(--panel)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame--px img{height:118%;transform:translate3d(0,calc(var(--py,.5)*-15.25%),0);will-change:transform}
.frame__cap{
  position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:16px;
  padding:clamp(14px,1.6vw,22px) clamp(18px,2.2vw,30px);
  font:500 10px/1 var(--m);letter-spacing:.2em;text-transform:uppercase;color:rgba(246,239,228,.8);
  background:linear-gradient(180deg,rgba(10,8,6,0),rgba(10,8,6,.62));
}

/* =================== the fixed environment layer =================== */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--canvas-deep)}
.env__grade{
  position:absolute;inset:-12%;
  background:
    radial-gradient(60% 45% at 22% 18%,rgba(60,70,120,.30),transparent 62%),
    radial-gradient(55% 48% at 82% 76%,rgba(70,44,34,.34),transparent 64%),
    radial-gradient(75% 60% at 50% 110%,rgba(217,161,95,.055),transparent 70%);
  animation:drift 84s var(--ease) -20s infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(-1.6%,-1%,0) scale(1.03)}
  100%{transform:translate3d(1.8%,1.4%,0) scale(1.07)}
}
.env__grain{
  position:absolute;inset:0;opacity:.30;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.env__motes i{
  position:absolute;left:var(--mx);top:var(--my);width:2px;height:2px;border-radius:50%;
  background:var(--accent);opacity:.20;
  animation:mote 92s linear var(--md) infinite;
}
@keyframes mote{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:.22}
  88%{opacity:.16}
  100%{transform:translate3d(38px,-120px,0);opacity:0}
}

/* ============================== nav ============================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
  padding:clamp(14px,1.7vw,22px) var(--gutter);
  background:linear-gradient(180deg,rgba(10,8,6,.72),rgba(10,8,6,0));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border-bottom:1px solid transparent;
  transition:background .6s var(--ease),padding .6s var(--ease),border-color .6s var(--ease);
}
/* once the film is behind us the bar closes up, so it reads on limestone too */
body.past-hero .nav{
  padding-top:clamp(10px,1.2vw,14px);padding-bottom:clamp(10px,1.2vw,14px);
  background:rgba(10,8,6,.86);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--glass-line);
}
.nav__mark{display:flex;align-items:center;gap:11px;color:var(--text-primary);flex:0 0 auto}
.nav__mark svg{width:26px;height:26px;opacity:.9}
.nav__wordmark{font:400 clamp(17px,1.32vw,21px)/1 var(--d);letter-spacing:.1em;text-transform:uppercase}
.nav__links{display:flex;gap:clamp(14px,1.9vw,30px);list-style:none;margin:0;padding:0;margin-left:auto}
.nav__links a{
  font:500 10.5px/1 var(--m);letter-spacing:.17em;text-transform:uppercase;
  color:var(--text-secondary);padding:6px 0;position:relative;
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);
  transition:width .45s var(--ease-out);
}
.nav__links a:hover{color:var(--text-primary)}
.nav__links a:hover::after{width:100%}
.nav__cta{flex:0 0 auto}
@media (max-width:900px){
  .nav__links{display:none}
  .nav__cta{margin-left:auto}
}

/* ============================== hero ============================== */
.hero{position:relative;height:1300vh;z-index:1}
.stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:var(--canvas-deep);
}

.poster,#hero-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background-size:cover;background-position:50% 50%;
}
/* the poster is the first paint everywhere, film or not */
.poster{background-image:url("hero-poster.jpg")}
/* the frame sequence is drawn cover-fit onto this canvas by app.js */
#hero-canvas{
  opacity:0;transition:opacity .9s var(--ease);
  will-change:transform;transform:translateZ(0);
}
.stage.video-ready #hero-canvas{opacity:1}
.stage.video-ready .poster{opacity:0;transition:opacity .9s var(--ease) .1s}
.stage.video-failed #hero-canvas{display:none}

/* global base scrim: no frame is ever raw behind the page */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,8,6,0) 34%,rgba(10,8,6,.62) 100%);
}

/* loading ring */
.loadring{
  position:absolute;left:50%;bottom:clamp(64px,9vh,104px);transform:translateX(-50%);
  width:44px;height:44px;color:var(--accent);opacity:.9;
  transition:opacity .5s var(--ease);
}
.loadring svg{width:100%;height:100%}
.loadring circle{transition:stroke-dashoffset .22s linear}
.stage.video-ready .loadring{opacity:0;pointer-events:none}

/* the chevron shown when the video never arrives */
.loadcue{
  position:absolute;left:50%;bottom:clamp(64px,9vh,104px);transform:translateX(-50%);
  width:22px;height:34px;color:var(--accent);opacity:.7;
}

/* progress rail */
.rail{
  position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);
  display:flex;align-items:flex-start;gap:14px;pointer-events:none;
}
.rail__track{position:relative;display:block;width:1px;height:clamp(150px,24vh,260px);background:rgba(232,214,186,.20)}
.rail__fill{position:absolute;left:0;top:0;width:1px;height:var(--fill,0%);background:var(--accent);display:block}
.rail__label{
  font:500 10.5px/1 var(--m);letter-spacing:.06em;font-variant-numeric:tabular-nums;
  color:var(--accent);padding:5px 7px;border-radius:6px;
  transform:translateY(var(--labely,0px));
}

/* scroll cue */
.cue{
  position:absolute;left:calc(var(--gutter) + 1px);bottom:26px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  opacity:var(--cue,1);transition:opacity .5s var(--ease);pointer-events:none;
}
.cue__word{
  font:500 9.5px/1 var(--m);letter-spacing:.28em;text-transform:uppercase;color:var(--text-secondary);
  writing-mode:vertical-rl;transform:rotate(180deg);
}
.cue__line{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--accent),transparent)}

/* ------------------------- caption bands ------------------------- */
.bands{position:absolute;inset:0;pointer-events:none}

.band{
  position:absolute;inset:0;
  display:grid;align-content:center;
  padding:0 var(--gutter);
  opacity:0;
  text-shadow:var(--tshadow);
}
.band .btn{text-shadow:none}
.band a{pointer-events:auto}

/* two-sided per-band scrim for the centre-weighted footage.
   the centre lane is left completely alone so the subject stays bright. */
/* --sa is the band's peak scrim alpha, tuned per band against its OWN worst
   frame by the audit in review/selftest.mjs, never against the average. */
.band--split::before,.band--part::before{
  content:"";position:absolute;left:-4%;top:-4%;width:56%;height:108%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 76% 60% at 42% 50%,
    rgba(10,8,6,var(--sa,.66)) 0%,
    rgba(10,8,6,calc(var(--sa,.66)*.66)) 46%,
    rgba(10,8,6,0) 78%);
}
.band--split::after,.band--part::after{
  content:"";position:absolute;right:-4%;top:-4%;width:56%;height:108%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 76% 60% at 58% 50%,
    rgba(10,8,6,var(--sa,.66)) 0%,
    rgba(10,8,6,calc(var(--sa,.66)*.66)) 46%,
    rgba(10,8,6,0) 78%);
}
/* the settle band converges, so one upper-centred ellipse instead */
.band--settle::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 84% 68% at 50% 44%,
    rgba(10,8,6,var(--sa,.72)) 0%,
    rgba(10,8,6,calc(var(--sa,.72)*.66)) 48%,
    rgba(10,8,6,0) 80%);
}

.band--split{grid-template-columns:1fr minmax(120px,22vw) 1fr;align-items:center;gap:0}
/* ch caps go on the TEXT elements, never the container: a ch resolves against
   the font the element inherits, and the container inherits the body face. */
.band__col{position:relative;z-index:2}
.band .d1{max-width:11ch}
.band .d2{max-width:15ch}
.band .d3{max-width:19ch}
.band__col--r .d1,.band__col--r .d2,.band__col--r .d3{margin-left:auto}
.band__col--l{grid-column:1;justify-self:start;padding-left:56px}   /* clears the 45px progress rail and its chip, which share the gutter */
.band__col--r{grid-column:3;justify-self:end;text-align:right}
.band__sub{
  font:400 clamp(.92rem,1.05vw,1.08rem)/1.5 var(--b);color:var(--text-secondary);
  margin:1.1em 0 0;max-width:34ch;
}
.band__col--r .band__sub{margin-left:auto}
.band .d3.acc{font-size:clamp(2.2rem,3.6vw,3.6rem)}

.band--part{grid-template-columns:1fr minmax(120px,22vw) 1fr;align-items:center}
.band--part .part-l{grid-column:1;justify-self:end;text-align:right;position:relative;z-index:2}
.band--part .part-r{grid-column:3;justify-self:start;position:relative;z-index:2}

.band--settle{justify-items:center;text-align:center;align-content:center}
.band--settle > *{position:relative;z-index:2}
.band--settle .d1{max-width:16ch}
.band__sub--settle{
  font:400 clamp(.95rem,1.1vw,1.12rem)/1.5 var(--b);color:var(--text-secondary);
  margin:1.3em 0 0;opacity:var(--ks,0);transform:translateY(calc((1 - var(--ks,0))*12px));
}
.band__cta{margin:2.1em 0 0;opacity:var(--kb,0);transform:translateY(calc((1 - var(--kb,0))*14px))}

/* ------------------- entrance choreography -------------------
   transform and opacity only, scrubbed off the band's --k,
   fully reversible. band one gets a one-time load ramp in JS. */

.split .w{display:inline-block;white-space:pre}
.split .c{display:inline-block;will-change:transform,opacity}

/* (b) grid snap-align: characters slide into place in reading order,
       the way cut stone is set into a course */
[data-entrance="grid"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)));
}

/* (g) approach-from-depth: the line grows toward the camera */
[data-entrance="depth"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:scale(calc(.84 + .16*var(--kc)));
}

/* (h) halves parting: the headline parts like the revolving door */
[data-entrance="part"] .part-l,[data-entrance="part"] .part-r{
  --kc:clamp(0,var(--k,0)*2.2,1);
  opacity:var(--kc);
}
[data-entrance="part"] .part-l{transform:translateX(calc((1 - var(--kc))*72px))}
[data-entrance="part"] .part-r{transform:translateX(calc((1 - var(--kc))*-72px))}

/* (i) weave: characters alternate from above and below,
       the way courses lock together */
[data-entrance="weave"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*var(--jy,0px)));
}

/* invented for this build: drift-up, echoing the climb */
[data-entrance="lift"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*26px));
}

/* (e) word-by-word rise into a staged settle */
[data-entrance="settle"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px));
}

/* ---------------------- the static hero ---------------------- */
.statichero{
  position:absolute;inset:0;display:none;align-items:flex-end;
  padding:0 var(--gutter) clamp(56px,10vh,96px);
}
.statichero__inner{position:relative;z-index:2;max-width:min(600px,92%);text-shadow:var(--tshadow)}
.statichero__inner .d1{max-width:13ch}
.statichero__sub{
  font-size:clamp(.95rem,3.4vw,1.06rem);line-height:1.56;color:var(--text-secondary);
  margin:1.2em 0 2em;max-width:36ch;
}
.statichero .btn{text-shadow:none}

/* ---- the five static-hero gates. these five strings are mirrored
        (whitespace-normalised) in app.js. ---- */
@media (max-width:720px){
  .hero{height:100vh;height:100svh}
  .bands,.rail,.cue,.loadring{display:none}
  .statichero{display:flex}
}
@media (orientation:portrait) and (max-width:1024px){
  .hero{height:100vh;height:100svh}
  .bands,.rail,.cue,.loadring{display:none}
  .statichero{display:flex}
}
@media (orientation:portrait) and (pointer:coarse){
  .hero{height:100vh;height:100svh}
  .bands,.rail,.cue,.loadring{display:none}
  .statichero{display:flex}
}
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px){
  .hero{height:100vh;height:100svh}
  .bands,.rail,.cue,.loadring{display:none}
  .statichero{display:flex}
}
@media (prefers-reduced-motion:reduce){
  .hero{height:100vh;height:100svh}
  .bands,.rail,.cue,.loadring{display:none}
  .statichero{display:flex}
}

/* the mobile scrub, armed by JS only when the light encode ships */
body.m-scrub .hero{height:730vh}
body.m-scrub .bands{display:block}
body.m-scrub .statichero{display:none}
body.m-scrub .rail{display:flex}
body.m-scrub .loadring{display:block}
body.m-scrub .cue{display:flex}
body.m-scrub .band--split,body.m-scrub .band--part{grid-template-columns:1fr;justify-items:start;text-align:left}
body.m-scrub .band__col--r{grid-column:1;justify-self:start;text-align:left}
body.m-scrub .band__col--r .band__sub{margin-left:0}
body.m-scrub .band--part .part-l,body.m-scrub .band--part .part-r{grid-column:1;justify-self:start;text-align:left}
/* every phone band sits in the left lane, so all of it clears the rail chip */
body.m-scrub .band__col,body.m-scrub .band--part .part-l,body.m-scrub .band--part .part-r{padding-left:56px}
body.m-scrub .band--split::before,body.m-scrub .band--part::before{width:108%;left:-4%}
body.m-scrub .band--split::after,body.m-scrub .band--part::after{display:none}
/* the portrait crop puts far more frame under the radial, so the settle
   scrim comes back down or the whole shot goes hazy */
body.m-scrub .band--settle::before{--sa:.60;background:radial-gradient(ellipse 96% 46% at 50% 40%,
  rgba(10,8,6,var(--sa)) 0%,rgba(10,8,6,calc(var(--sa)*.62)) 50%,rgba(10,8,6,0) 82%)}
body.m-scrub .band-hide-m{display:none !important}

/* shallow desktop windows keep the scrub but lose the small overlays */
@media (max-height:560px) and (pointer:fine){
  .rail,.cue{display:none}
}

/* ============================ sections ============================ */
.sec{position:relative;z-index:1;padding:clamp(88px,12vh,164px) 0;background:transparent}
.sec--cream{background:var(--cream);color:var(--ink)}
.sec--cream .kicker{color:var(--ink-3)}
.sec--cream .lede{color:var(--ink-2)}
.wrap{width:min(var(--maxw),100% - var(--gutter)*2);margin-inline:auto;position:relative}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ---- 6.1 statement: the limestone opening ---- */
.sec--statement{padding-top:clamp(96px,14vh,190px);text-align:center}
.sec--statement .wrap{max-width:960px}
.sec--statement .kicker::before{display:none}
.sec--statement .d1{margin-inline:auto;max-width:15ch}
.sec--statement .lede{margin-inline:auto;text-align:center;max-width:52ch}
.statement__frame{
  width:min(1180px,100% - var(--gutter)*2);margin:clamp(52px,8vh,100px) auto 0;
  aspect-ratio:16/9;
}
.trio{
  list-style:none;margin:clamp(52px,8vh,100px) auto 0;padding:0;
  width:min(var(--maxw),100% - var(--gutter)*2);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);
  text-align:center;
}
.trio__rule{display:block;width:44px;height:1px;background:var(--gilt);margin:0 auto 22px;opacity:.8}
.trio h3{margin:0 0 .35em}
.trio p{margin:0;font-size:.95rem;color:var(--ink-2)}
.trio li:nth-child(2){transition-delay:90ms}
.trio li:nth-child(3){transition-delay:180ms}
.trio li.in{transition-delay:0s}
@media (max-width:720px){
  .trio{grid-template-columns:1fr;gap:34px}
  .statement__frame{aspect-ratio:4/5;width:100%;border-radius:0}
}
@media (max-width:520px){
  .frame__cap span+span{display:none}   /* one caption on a narrow frame */
}

/* ---- the film strip: the footage, as a wall of frames ---- */
.sec--marquee{padding:clamp(80px,12vh,140px) 0;overflow:hidden;min-height:min(92vh,820px);display:flex;align-items:center}
.marquee{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;pointer-events:none}
.marquee__track{
  display:flex;gap:clamp(14px,1.6vw,22px);width:max-content;
  animation:strip 84s linear infinite;animation-play-state:paused;will-change:transform;
}
.sec--marquee.in-view .marquee__track{animation-play-state:running}
.marquee__track img{
  height:clamp(260px,58vh,600px);width:auto;border-radius:var(--r-s);
  filter:brightness(.66) saturate(1.05);
}
@keyframes strip{to{transform:translate3d(-50%,0,0)}}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:18%;z-index:1;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--canvas),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--canvas),transparent)}
.marquee__over{position:relative;z-index:2;text-align:center;width:100%;padding:0 var(--gutter)}
.marquee__over .d1{
  font-size:clamp(3.2rem,8.6vw,8.6rem);max-width:12ch;margin-inline:auto;color:var(--cream);
  text-shadow:0 2px 6px rgba(10,8,6,.6),0 12px 60px rgba(10,8,6,.7);
}
.marquee__over .orb{margin-top:clamp(28px,4vh,44px)}

/* ---- 6.3 the collection: four cards on ivory ---- */
.collection__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(40px,6vh,72px)}
.collection__head .lede{margin-top:0}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,32px)}
.card{display:flex;flex-direction:column;gap:.55em}
.card__media{margin:0 0 .6em;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-s);background:var(--cream-deep)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.card:hover .card__media img{transform:scale(1.04)}
.card__where{margin:0;font:500 10px/1 var(--m);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.card h3{margin:0}
.card p:not(.card__where){margin:0;font-size:.95rem;color:var(--ink-2);line-height:1.6}
.more{display:inline-flex;align-items:center;gap:.6em;margin-top:.4em;font:500 10px/1 var(--m);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.more span{transition:transform .4s var(--ease-out)}
.more:hover span{transform:translateX(4px)}
.more--light{color:var(--accent)}
.card:nth-child(2){transition-delay:80ms}.card:nth-child(3){transition-delay:160ms}.card:nth-child(4){transition-delay:240ms}
.card.in{transition-delay:0s}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.collection__head{grid-template-columns:1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

/* ---- 6.5 location: the aerial, full-bleed, the copy on the dark left ---- */
.sec--location{padding:0;min-height:min(100vh,900px);display:flex;align-items:center;overflow:hidden}
.location__bg{position:absolute;left:0;top:0;width:100%;height:118%;object-fit:cover;transform:translate3d(0,calc(var(--py,.5)*-15.25%),0);will-change:transform;filter:brightness(.72)}
.sec--location::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,8,6,.88) 0%,rgba(10,8,6,.62) 42%,rgba(10,8,6,.1) 78%),linear-gradient(180deg,rgba(10,8,6,.3),rgba(10,8,6,.55))}
.location__copy{position:relative;z-index:2;padding:clamp(96px,14vh,180px) 0;max-width:min(680px,100%);margin-left:var(--gutter);margin-right:auto}
.location__copy .d1{max-width:12ch}
.location__trio{list-style:none;margin:clamp(40px,6vh,64px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:clamp(24px,3vw,48px)}
.location__trio li{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;min-width:200px}
.location__trio svg{grid-row:1/3;width:44px;height:44px;padding:11px;border:1px solid var(--accent-muted);border-radius:50%;color:var(--accent)}
.location__trio b{font:400 clamp(1.1rem,1.3vw,1.3rem)/1.2 var(--d);color:var(--text-primary)}
.location__trio span{font:500 9.5px/1.4 var(--m);letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.location__trio li:nth-child(2){transition-delay:90ms}.location__trio li:nth-child(3){transition-delay:180ms}.location__trio li.in{transition-delay:0s}

/* ---- 6.6 residences: two photographs, a panel, four tabs ---- */
.res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(36px,5vh,64px)}
.res__media{display:grid;gap:clamp(14px,1.6vw,22px)}
.res__photo{aspect-ratio:16/10}
.res__photo--b{aspect-ratio:16/9;width:80%}
.res__photo img{transition:opacity .35s var(--ease)}
.res__photo.is-swapping img{opacity:0}
.res__panel{transition:opacity .3s var(--ease),transform .3s var(--ease)}
.res__panel.is-swapping{opacity:0;transform:translateY(6px)}
.res__rows{margin:clamp(22px,3vh,32px) 0 0;padding:0}
.res__rows div{display:flex;justify-content:space-between;gap:24px;padding:.9em 0;border-top:1px solid var(--ink-line)}
.res__rows div:last-child{border-bottom:1px solid var(--ink-line)}
.res__rows dt{font:500 10px/1.6 var(--m);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.res__rows dd{margin:0;text-align:right;color:var(--ink);font-size:.95rem}
.res__feats{list-style:none;margin:clamp(20px,3vh,28px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.res__feats li{font:500 10px/1.4 var(--m);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding:1em 1.1em;border:1px solid var(--ink-line);border-radius:var(--r-s);background:var(--cream-card)}
.res__cta{margin:clamp(24px,3vh,32px) 0 0}
.res__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px,6vh,72px);border:1px solid var(--ink-line);border-radius:var(--r-s);overflow:hidden}
.res__tabs button{appearance:none;background:transparent;border:0;border-right:1px solid var(--ink-line);text-align:left;padding:1.1em 1.3em;cursor:pointer;display:grid;gap:.45em;transition:background .35s var(--ease)}
.res__tabs button:last-child{border-right:0}
.res__tabs b{font:400 clamp(1rem,1.15vw,1.15rem)/1.2 var(--d);color:var(--ink)}
.res__tabs span{font:500 9.5px/1.4 var(--m);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.res__tabs button:hover{background:var(--cream-deep)}
.res__tabs button[aria-selected="true"]{background:var(--ink)}
.res__tabs button[aria-selected="true"] b{color:var(--cream)}
.res__tabs button[aria-selected="true"] span{color:rgba(243,237,226,.6)}
@media (max-width:900px){
  .res{grid-template-columns:1fr}
  .res__tabs{grid-template-columns:1fr 1fr}
  .res__tabs button{border-right:0;border-top:1px solid var(--ink-line)}
  .res__tabs button:nth-child(-n+2){border-top:0}
  .res__tabs button:nth-child(odd){border-right:1px solid var(--ink-line)}
}
@media (max-width:520px){.res__feats{grid-template-columns:1fr}}

/* ---- 6.7 the build: the stone sets itself.
        a CSS 3D massing model of Sable Ridge, built by app.js from a small
        spec, assembled course by course off the scroll, lit as it lands,
        turned by the cursor. no library, so it works from a double-click. ---- */
.sec--build{padding:0;height:340vh;position:relative;background:transparent}
.build__stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:
    radial-gradient(70% 55% at 62% 78%,rgba(217,161,95,.10),transparent 70%),
    radial-gradient(60% 40% at 62% 46%,rgba(60,70,120,.28),transparent 70%),
    linear-gradient(180deg,#0d0b09 0%,#1a1512 46%,#232a44 62%,#14110f 100%);
}
.build__stage::after{ /* vignette */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 55% 55%,transparent 55%,rgba(10,8,6,.55) 100%);
}
.build__scene{position:absolute;inset:0;perspective:1400px;perspective-origin:50% 44%;--s:1;--rx:-30deg;--ry:-34deg}
.build__world{
  position:absolute;left:58%;top:64%;width:0;height:0;
  transform-style:preserve-3d;transform:scale(calc(var(--s)*var(--zoom,1))) rotateX(var(--rx)) rotateY(var(--ry));
  will-change:transform;
}
.build__world *{transform-style:preserve-3d}
.build__world .face,.build__world .face::after,.build__world .face::before,.build__world .j{transform-style:flat}

/* ground: the plaza, the quay wall, the water. the plaza's shadows are set by app.js */
.plane{position:absolute;left:0;top:0;opacity:var(--po,0);transition:opacity .6s var(--ease)}
.plane--plaza{
  width:880px;height:560px;margin:-280px 0 0 -440px;transform:rotateX(90deg);
  background-color:#b3a68f;
  background-image:
    repeating-linear-gradient(90deg,rgba(26,21,18,.10) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(0deg,rgba(26,21,18,.10) 0 1px,transparent 1px 40px),
    var(--shadows,none),
    radial-gradient(40% 36% at 52% 58%,rgba(217,161,95,calc(.40*var(--lit,0))),transparent 72%),
    linear-gradient(180deg,#a49781 0%,#bcae95 55%,#a69a83 100%);
}
.plane--water{
  width:1500px;height:760px;margin:-380px 0 0 -750px;transform:translateZ(660px) rotateX(90deg);
  opacity:calc(var(--po,0)*.62);
  background:
    repeating-linear-gradient(0deg,rgba(232,214,186,.06) 0 1px,transparent 1px 13px),
    radial-gradient(50% 60% at 50% 0%,rgba(217,161,95,calc(.24*var(--lit,0))),transparent 70%),
    linear-gradient(180deg,#2b3a5c 0%,#1b2440 45%,#14110f 100%);
  animation:ripple 2.8s linear infinite;
}
@keyframes ripple{to{background-position:0 13px,0 0,0 0}}
.plane--wall{
  width:880px;height:16px;margin:0 0 0 -440px;transform:translate3d(0,-16px,280px);
  background:linear-gradient(180deg,#d9d0bb,#b5a98f);
}
.plane--wall-top{
  width:880px;height:22px;margin:-11px 0 0 -440px;transform:translate3d(0,-16px,269px) rotateX(90deg);
  background:#e4dcc8;
}
.plane--horizon{ /* the far shore: a strip of distant lights behind the model */
  width:2400px;height:120px;margin:-120px 0 0 -1200px;transform:translateZ(-900px);
  background:
    radial-gradient(2px 2px at 12% 78%,rgba(217,161,95,.9),transparent 60%),radial-gradient(2px 2px at 21% 84%,rgba(232,214,186,.8),transparent 60%),
    radial-gradient(2px 2px at 33% 72%,rgba(217,161,95,.8),transparent 60%),radial-gradient(3px 3px at 41% 88%,rgba(232,214,186,.7),transparent 60%),
    radial-gradient(2px 2px at 48% 80%,rgba(217,161,95,.9),transparent 60%),radial-gradient(2px 2px at 57% 90%,rgba(232,214,186,.8),transparent 60%),
    radial-gradient(3px 3px at 64% 76%,rgba(217,161,95,.8),transparent 60%),radial-gradient(2px 2px at 73% 86%,rgba(232,214,186,.7),transparent 60%),
    radial-gradient(2px 2px at 81% 79%,rgba(217,161,95,.9),transparent 60%),radial-gradient(2px 2px at 90% 88%,rgba(232,214,186,.8),transparent 60%),
    linear-gradient(180deg,transparent 0%,rgba(70,44,34,.35) 70%,rgba(70,44,34,.6) 100%);
  opacity:calc(var(--po,0)*.9);
}

/* courses: four sides and a top, each with an unlit face, a lit glazing layer and a joint hairline */
.course{position:absolute;left:0;top:0;width:0;height:0;opacity:var(--o,0)}
.face{position:absolute;left:0;top:0;backface-visibility:hidden;overflow:hidden;box-shadow:inset 0 -34px 34px -26px rgba(26,21,18,.45)}
.face--t{box-shadow:inset 0 0 0 1px rgba(26,21,18,.08)}
.face::after{
  content:"";position:absolute;inset:var(--it,0) 0 var(--ib,0) 0;opacity:var(--lit,0);
  background:linear-gradient(0deg,rgba(217,161,95,.95) 0%,rgba(217,161,95,.55) 45%,rgba(217,161,95,.22) 100%);
  -webkit-mask-image:var(--win,none),linear-gradient(90deg,#000 calc(var(--lw,1)*125% - 25%),transparent calc(var(--lw,1)*125%));
  -webkit-mask-composite:source-in;
  mask-image:var(--win,none),linear-gradient(90deg,#000 calc(var(--lw,1)*125% - 25%),transparent calc(var(--lw,1)*125%));
  mask-composite:intersect;
}
.face::before{ /* a whisper of the stone's own tone, so no two courses are identical */
  content:"";position:absolute;inset:0;background:rgba(246,239,228,var(--tone,0));pointer-events:none;
}
.face--t::after,.face--t::before{display:none}
.j{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(232,214,186,.8);opacity:var(--jl,0)}
.face--t .j{display:none}
.k-glass .course-glow{
  position:absolute;left:0;top:0;width:0;height:0;
}

/* the reflection in the water: a mirrored copy under the ground, desktop only */
.mirror{position:absolute;left:0;top:0;width:0;height:0;transform:scaleY(-1);opacity:.75}
.mirror .face{backface-visibility:visible;box-shadow:none;filter:brightness(.75)}
@media (max-width:900px){.mirror{display:none}}

/* labels that ride on the model and always face the viewer */
.anchor{position:absolute;left:0;top:0;width:0;height:0}
.tag{
  position:absolute;left:0;bottom:0;transform:rotateY(calc(var(--ry)*-1)) rotateX(calc(var(--rx)*-1)) translate(-50%,-44px);
  transform-style:flat;white-space:nowrap;text-align:center;opacity:var(--to,0);
  font:500 10px/1 var(--m);letter-spacing:.2em;text-transform:uppercase;color:rgba(246,239,228,.72);
  text-shadow:0 1px 2px rgba(10,8,6,.8),0 6px 20px rgba(10,8,6,.6);
}
.tag b{display:block;font:400 clamp(1.4rem,1.7vw,1.7rem)/1 var(--d);letter-spacing:0;text-transform:none;color:var(--text-primary);margin:0 0 .35em}
.tag::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:44px;background:linear-gradient(180deg,rgba(232,214,186,.75),transparent)}
/* a callout hung to the right of its anchor, for a block whose roof is taken */
.tag--r{bottom:auto;top:0;transform:rotateY(calc(var(--ry)*-1)) rotateX(calc(var(--rx)*-1)) translate(18px,-50%);text-align:left}
.tag--r::after{left:-18px;top:50%;width:18px;height:1px;background:linear-gradient(90deg,transparent,rgba(232,214,186,.75))}
.tag--l{bottom:auto;top:0;left:auto;right:0;transform:rotateY(calc(var(--ry)*-1)) rotateX(calc(var(--rx)*-1)) translate(-18px,-50%);text-align:right}
.tag--l::after{left:auto;right:-18px;top:50%;width:18px;height:1px;background:linear-gradient(270deg,transparent,rgba(232,214,186,.75))}

/* copy over the scene */
.build__copy{
  position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);z-index:2;
  max-width:min(440px,40vw);padding:28px 32px 28px 0;
  text-shadow:0 1px 2px rgba(10,8,6,.6),0 8px 30px rgba(10,8,6,.5);
}
.build__copy::before{
  content:"";position:absolute;inset:-60px -120px -60px calc(var(--gutter)*-1);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 66% 60% at 32% 50%,rgba(10,8,6,.86),transparent 72%);
}
.build__copy .lede{max-width:40ch}
.build__spec{list-style:none;margin:clamp(24px,3.4vh,40px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.build__spec li{
  font:500 10px/1 var(--m);letter-spacing:.18em;text-transform:uppercase;
  padding:.9em 1.2em;border:1px solid var(--glass-line);border-radius:999px;color:var(--text-faint);
  opacity:.4;transform:translateY(6px);
  transition:opacity .55s var(--ease),transform .55s var(--ease-out),color .55s var(--ease),border-color .55s var(--ease);
}
.build__spec.is-done li{opacity:1;transform:none;color:var(--accent);border-color:var(--accent-muted)}
.build__spec.is-done li:nth-child(1){transition-delay:0ms}
.build__spec.is-done li:nth-child(2){transition-delay:110ms}
.build__spec.is-done li:nth-child(3){transition-delay:220ms}
.build__spec.is-done li:nth-child(4){transition-delay:330ms}
.build__hint{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin:clamp(22px,3vh,34px) 0 0;
  font:400 10px/1.4 var(--m);letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary);
  opacity:var(--ho,1);transition:opacity .6s var(--ease);
}
.build__hint span::before{content:"";display:inline-block;width:18px;height:1px;background:currentColor;margin-right:10px;vertical-align:middle;opacity:.7}

@media (max-width:1100px){.build__scene{--s:.78}.build__world{left:60%}}
@media (max-width:900px){
  .sec--build{height:280vh}
  .build__scene{--s:.6}.build__world{left:50%;top:72%}
  .build__copy{top:auto;bottom:clamp(24px,5vh,48px);transform:none;max-width:min(520px,100% - var(--gutter)*2)}
  .build__copy::before{inset:-30px calc(var(--gutter)*-1) -40px calc(var(--gutter)*-1);background:linear-gradient(180deg,transparent,rgba(10,8,6,.9) 40%)}
  .build__hint span:last-child{display:none}
}
@media (max-width:520px){.build__scene{--s:.42}.build__world{top:62%}.build__copy .lede{font-size:.98rem}}

/* ---- 6.7 the three panels: each one pins, the next slides over it ---- */
.sec--stack{padding:0}
.stack__head{padding:clamp(88px,12vh,164px) 0 clamp(40px,6vh,72px);text-align:center}
.stack__head .d1{max-width:16ch;margin-inline:auto}
.stack{position:relative}
.stack__panel{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--canvas-deep)}
.stack__panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62)}
.stack__panel::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 55%,rgba(10,8,6,.15),rgba(10,8,6,.7) 100%)}
.stack__copy{position:relative;z-index:1;max-width:min(640px,100% - var(--gutter)*2);padding:0 var(--gutter)}
.stack__copy .d2{margin-bottom:.5em}
.stack__copy p{margin:0;font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.7;color:var(--text-secondary)}
.stack__panel+.stack__panel{box-shadow:0 -40px 80px rgba(10,8,6,.55)}

/* ---- 6.8 finish: four columns and a headline over them ---- */
.sec--finish{padding:0;min-height:min(100vh,860px);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--canvas-deep)}
.finish{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);padding:0 var(--gutter)}
.finish__col{margin:0;overflow:hidden;border-radius:var(--r-s);position:relative;transform:translate3d(0,calc((var(--py,.5) - .5)*(var(--fo,0)*16px - 24px)),0);will-change:transform}
.finish__col img{width:100%;height:100%;object-fit:cover;filter:brightness(.6) saturate(1.05)}
.finish__over{position:relative;z-index:1;text-align:center;padding:clamp(120px,18vh,220px) var(--gutter);color:var(--cream)}
.finish__over .kicker{color:rgba(243,237,226,.72)}
.finish__over .d1{font-size:clamp(3rem,7.4vw,7.4rem);text-shadow:0 2px 6px rgba(10,8,6,.6),0 12px 60px rgba(10,8,6,.7);max-width:12ch;margin-inline:auto}
.finish__over .lede{color:rgba(243,237,226,.82);margin-inline:auto;text-align:center;text-shadow:0 1px 3px rgba(10,8,6,.7)}
@media (max-width:720px){.finish{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- 6.9 journal: three posts on the dark ground ---- */
.journal__head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(36px,5vh,64px)}
.posts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
.post__media{margin:0 0 1em;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-s);background:var(--panel)}
.post__media img{width:100%;height:100%;object-fit:cover;filter:brightness(.9);transition:transform 1.2s var(--ease-out)}
.post:hover .post__media img{transform:scale(1.04)}
.post__meta{display:flex;gap:18px;margin:0 0 .6em;font:500 9.5px/1 var(--m);letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint)}
.post h3{margin:0;max-width:22ch}
.post:nth-child(2){transition-delay:80ms}.post:nth-child(3){transition-delay:160ms}.post.in{transition-delay:0s}
@media (max-width:860px){.posts{grid-template-columns:1fr}.journal__head{flex-direction:column;align-items:flex-start}}

/* ---- 6.10 enquire: the copy and the card ---- */
.enquire{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(30px,5vw,80px);align-items:start}
.enquire__copy .d1{max-width:12ch}
.enquire__form,.enquire__thanks{
  background:var(--cream-card);border:1px solid var(--ink-line);border-radius:var(--r);
  padding:clamp(24px,3.4vw,44px);box-shadow:0 40px 90px -50px rgba(26,21,18,.45);
}
.enquire__hint{margin:0 0 1.2em;font:italic 400 clamp(1.3rem,1.8vw,1.7rem)/1.3 var(--d);color:var(--ink)}
.field{display:block;margin-bottom:clamp(16px,2vw,22px)}
.field span{display:block;font:500 10px/1 var(--m);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.9em}
.field input,.field select{
  width:100%;background:#fff;border:1px solid var(--ink-line);border-radius:10px;
  padding:.95em 1.1em;font:300 .96rem/1.3 var(--b);color:var(--ink);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.field input::placeholder{color:rgba(26,21,18,.36)}
.field input:hover,.field select:hover{border-color:rgba(26,21,18,.3)}
.field input:focus,.field select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(26,21,18,.08)}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a1512' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1em center;padding-right:2.6em}
.enquire__note{margin:0 0 1.2em;font-size:.82rem;line-height:1.6;color:var(--ink-3)}
.form__err{margin:0 0 1em;font:400 .88rem/1.4 var(--b);color:var(--gilt)}
.enquire__thanks p{color:var(--ink-2)}
@media (max-width:860px){.enquire{grid-template-columns:1fr}}

/* ============================= footer ============================= */
.foot{position:relative;z-index:1;border-top:1px solid var(--glass-line);padding:0 0 clamp(36px,5vh,56px)}
.foot__strip{height:clamp(220px,34vh,380px);overflow:hidden;position:relative}
.foot__strip img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;filter:brightness(.55)}
.foot__strip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,15,.15),var(--canvas) 100%)}
.foot .wrap{padding-top:clamp(40px,6vh,72px)}
.foot__top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.8fr);gap:clamp(28px,4vw,64px);align-items:start;margin-bottom:clamp(36px,5vh,56px)}
.foot__brand{display:grid;gap:10px;justify-items:start}
.foot__mark svg{width:26px;height:26px;opacity:.85}
.foot__word{font:400 clamp(20px,1.6vw,26px)/1 var(--d);letter-spacing:.1em;text-transform:uppercase;margin:0}
.foot__sign{font:italic 400 clamp(1.3rem,2vw,1.9rem)/1.2 var(--d);color:var(--text-faint);margin:.2em 0 0}
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.foot__cols div{display:grid;gap:.75em;align-content:start}
.foot__h{margin:0 0 .4em;font:500 9.5px/1 var(--m);letter-spacing:.22em;text-transform:uppercase;color:var(--text-faint)}
.foot__cols a,.foot__cols span{font:300 .92rem/1.4 var(--b);color:var(--text-secondary);text-decoration:none}
.foot__cols a:hover{color:var(--accent)}
.foot__note{margin:0;padding-top:clamp(24px,3vh,36px);border-top:1px solid var(--glass-line);font-size:.85rem;line-height:1.7;color:var(--text-faint);max-width:72ch}
@media (max-width:860px){.foot__top{grid-template-columns:1fr}.foot__cols{grid-template-columns:1fr 1fr}}

/* ===================== coarse pointer targets ===================== */
@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav__links a{min-height:44px;display:inline-flex;align-items:center}
  .foot__cols a{min-height:44px;display:inline-flex;align-items:center}
  .res__tabs button{min-height:44px}
}

/* ======================== reduced motion ======================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  .reveal{opacity:1;transform:none}
  .seam line{stroke-dashoffset:0}
  .jointed::after{width:100%}
  .build__spec li{opacity:1;transform:none;color:var(--accent);border-color:var(--accent-muted)}
  .plane--water{animation:none}
  .env__grade,.env__motes i{animation:none}
  .card,.post,.location__trio li{transition-delay:0s !important}
  .marquee__track{animation:none;transform:none}
  .frame--px img,.location__bg{height:100%;transform:none}
  .finish__col{transform:none}
}

/* pause every animation off-screen and on hidden tabs */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}