/* ═══════════ MUSIC FROM THE VALLEY — DESIGN TOKENS ═══════════
   Palette descends from the official identity (brand teal sampled
   from the lockup). Luxury through restraint: hairlines, grain,
   whitespace, slow motion. */
:root{
  --night:#070D12; --night-2:#0C161D;
  --ivory:#F4EEE2; --ink:#221B10;
  --gold:#C9A25C; --saffron:#E4AC53; --chinar:#C05A1E; --amber:#E2A65B;
  --brand:#104B67;
  --grad:linear-gradient(90deg,var(--saffron),var(--chinar));
  --hair:rgba(201,162,92,.2);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --ease:cubic-bezier(.77,0,.18,1);
  /* micro-interaction language (2026-07-23): out-cubic for response,
     in-out-cubic for symmetric moves; choreography keeps --ease */
  --e-out:cubic-bezier(.33,1,.68,1);--e-io:cubic-bezier(.65,0,.35,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--night);color:var(--ivory);font-family:var(--sans);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{ /* film grain, site-wide */
  content:"";position:fixed;inset:-50%;pointer-events:none;z-index:90;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,3%)}50%{transform:translate(3%,-2%)}75%{transform:translate(-3%,-3%)}100%{transform:translate(2%,2%)}}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer}
.serif{font-family:var(--serif);font-weight:400}
.eyebrow{font-size:11px;letter-spacing:.38em;text-transform:uppercase;font-weight:500;color:var(--saffron)}
.btn{display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;padding:15px 32px;border-radius:100px;border:1px solid var(--gold);color:var(--ivory);background:transparent;text-decoration:none;
  transition:background-color .2s var(--e-out),border-color .2s var(--e-out),color .2s var(--e-out),transform .16s var(--e-out)}
.btn:active{transform:scale(.97)}
.btn:hover{background:var(--gold);color:var(--night)}
.btn.fill{background:var(--gold);color:var(--night)}
.btn.fill:hover{background:var(--amber);border-color:var(--amber)}
.btn.ghost{border-color:rgba(244,238,226,.35)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
a,button{-webkit-tap-highlight-color:transparent}
.btn,.pt-cta,.pt-cta2,.menu-toggle,.sound-toggle,.menu-close,.va-notify-link,.menu-list a{touch-action:manipulation}

/* ─────────── SCENE 01 · THE FIRST IMPRESSION ─────────── */
body.locked{overflow:hidden}
.threshold{position:fixed;inset:0;z-index:80;background:var(--night);
  transition:opacity 2.4s var(--ease),visibility 2.4s}
.threshold::before{ /* under-layer while the poster jpg loads; the art itself now covers */
  content:"";position:absolute;inset:-48px;
  background:url('../assets/brand/poster-1920.jpg') center/cover no-repeat;
  filter:blur(36px) brightness(.34) saturate(.85);transform:scale(1.06)}
.threshold.passed{opacity:0;visibility:hidden}
.threshold.entered{transition:opacity 1.6s var(--ease),visibility 1.6s} /* the bookend returns a touch quicker */
.threshold.leaving{transition:none} /* departure is scroll-mapped, not timed */
.threshold.entered .gate{display:none} /* the choice was made; the returning poster is a quiet bookend */
.wall-light{ /* repurposed: a night veil that evens the bleed at any aspect
  ratio — it sits UNDER the artwork, so the poster itself is untouched */
  position:absolute;inset:0;animation:none;transform:none;left:0;top:0;width:auto;height:auto;
  background:radial-gradient(120% 100% at 50% 50%,rgba(7,13,18,.12) 46%,rgba(7,13,18,.72) 100%)}
.poster-frame{position:absolute;inset:0;display:block;line-height:0}
/* cover, per direction 2026-07-17: the poster fills every window with no side
   bars. 54% x spends narrow-window crop on the far-left snow so the painted
   lockup's flourish (ends ~88% x) clears even a 4:3 frame; 42% y spends wide-
   window crop on the bottom stones, never the birds. Maestro at 25–40% x is
   safe in both. Below 900px the portrait poster takes over. */
.poster-art{width:100%;height:100%;max-width:none;object-fit:cover;object-position:54% 42%;
  animation:breathe 12s ease-in-out infinite alternate;
  transition:filter 2.2s var(--ease),opacity 2.2s var(--ease),transform 2.2s var(--ease)}
@keyframes breathe{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.015);filter:brightness(1.04)}}
.threshold.passed .poster-art{filter:blur(16px) brightness(1.2);opacity:0;transform:scale(1.05)}
.gate{position:absolute;left:0;right:0;bottom:clamp(30px,7vh,76px);display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  opacity:0;animation:gate-in 1.2s .8s var(--ease) forwards}
@keyframes gate-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.btn.quiet{padding:16px 34px;font-size:11px;letter-spacing:.26em;color:var(--ivory);
  border:1px solid rgba(244,238,226,.22);background:rgba(7,13,18,.32);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(244,238,226,.08)}
.btn.quiet:hover{border-color:rgba(201,162,92,.65);background:rgba(12,22,29,.5);color:var(--ivory);
  transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.45), 0 0 24px rgba(201,162,92,.18)}
.btn.quiet:active{transform:translateY(0) scale(.98)}
.btn.quiet.fill{color:var(--ivory);border-color:rgba(201,162,92,.55);
  background:linear-gradient(rgba(201,162,92,.18),rgba(201,162,92,.10))}
.btn.quiet.fill:hover{border-color:var(--gold);
  background:linear-gradient(rgba(201,162,92,.30),rgba(201,162,92,.16))}
@media(max-width:900px){
  .threshold::before{background-image:url('../assets/brand/poster-mobile.jpg?v=2')}
  /* the portrait poster (2026-07-23) lives entirely ABOVE the entry
     buttons, and its centring is STRUCTURAL: the frame is a flex stage
     and the img element shrinks to exactly the drawn artwork (max
     constraints), so no engine's object-position quirk can pin it to an
     edge (seen left-flush with a dead right band on device, 2026-07-23) */
  .poster-frame{inset:0 0 150px;display:flex;align-items:center;justify-content:center;overflow:hidden}
  /* cover, per direction 2026-07-23: the artwork fills every pixel above
     the entry band. On portrait phones the crop is horizontal and small
     (3 to 7 percent a side), clear of the lockup at 8 to 92 percent;
     42 percent vertical bias protects the lockup on squat viewports. */
  .poster-art{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 42%}
  /* the film captions ride bright water on a phone: they stand on a
     quiet pane of night so the words always win (2026-07-23) */
  .cap{left:16px;right:16px;padding:18px 20px;border-radius:16px;
    background:rgba(7,13,18,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid rgba(201,162,92,.16)}
  .cap p{text-shadow:none}
  /* the bands around the poster carry a readable bleed, not dead black */
  .threshold::before{filter:blur(36px) brightness(.52) saturate(.9)}
  /* the entry pair sits tight and low: at 390px the taller stack was
     grazing the poster's COMING SOON line (caught 2026-07-23) */
  .gate{padding:0 20px;bottom:12px;gap:10px}
  .btn.quiet{padding:14px 28px}
}
/* squat viewports (keyboard open, short phones): vertical crop grows, so
   the window rises to keep the lockup whole; the title outranks the strip */
@media(max-width:900px) and (max-height:760px){
  .poster-art{object-position:50% 22%}
}

/* ─────────── SCENES 02–05 · THE OPENING FILM ─────────── */
#film{min-height:100vh;position:relative} /* min-height: the pin spacer must be free to grow the section */
.film-viewport{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--night)}
#frames,#atmos{position:absolute;inset:0;width:100%;height:100%}
#atmos{pointer-events:none}

.cap{position:absolute;left:0;right:0;bottom:12vh;text-align:center;opacity:0;padding:0 24px}
.cap p{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,2.1rem);margin-top:12px;text-shadow:0 2px 24px rgba(7,13,18,.6)}

.ring{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
  border:1px solid transparent;background:linear-gradient(var(--night),var(--night)) padding-box,var(--grad) border-box;
  opacity:0;pointer-events:none;background-clip:padding-box,border-box}

/* Scene 05a — the statement build (rises BEFORE Act 3's reveal; the line
   ends at "by" and the fire answers with the brand. Copy comes from
   direction/copy.json, never hardcoded) */
@font-face{font-family:'Neulis Sans';src:url('../assets/fonts/neulis-sans.otf') format('opentype');
  font-weight:400 700;font-display:swap}
@font-face{font-family:'Maytra';src:url('../assets/fonts/maytra.ttf') format('truetype');
  font-weight:400;font-display:swap}
.stmt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 6vw;opacity:0;pointer-events:none}
.stmt-mask{overflow:hidden}
.stmt-line{margin:0;font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(2.1rem,4.4vw,3.5rem);letter-spacing:.015em;line-height:1.35;
  text-wrap:balance;text-shadow:0 2px 30px rgba(7,13,18,.65)}
  /* sentence case straight from copy.json: only the first letter capital */
.stmt-gold{color:var(--gold)}
.stmt-br{display:block}                /* break after "created," ... */
@media(min-width:1600px){              /* ...unless the viewport allows one line */
  .stmt-br{display:none}
  .stmt-line{font-size:clamp(1.8rem,2.7vw,3.1rem)}
}

/* Scene 05b — Maestro coda */
.coda{position:absolute;inset:0;opacity:0}
/* the photograph places the maestro left of centre, so the scrim darkens
   the RIGHT and the lockup stands there: nothing is allowed to cross the
   santoor. background-position leans right on narrow viewports (where the
   image overflows) to hold that clearance. */
.coda-photo{position:absolute;inset:0;background:url('../assets/img/hero.jpg?v=2') 62% center/cover}
.coda-shade{position:absolute;inset:0;background:linear-gradient(282deg,rgba(7,13,18,.86) 14%,rgba(7,13,18,.3) 56%,rgba(7,13,18,.1))}
.coda-lockup{position:absolute;right:clamp(22px,6vw,72px);bottom:clamp(30px,9vh,84px);max-width:560px}
.coda-lockup img{width:min(420px,72vw);margin-bottom:18px}
.coda-lockup p{font-family:var(--serif);font-style:italic;font-size:clamp(1.02rem,1.7vw,1.35rem);color:var(--amber);margin-bottom:26px}
.coda-lockup .ctas{display:flex;gap:14px;flex-wrap:wrap}
.coda-lockup img,.coda-lockup p,.coda-lockup .ctas{opacity:0;transform:translateY(26px)}

/* ─────────── SCENE 06 · THE MAESTRO BEHIND THE JOURNEY ───────────
   Warm ivory chamber: charcoal ink, burnt-orange accents, ~52% words /
   ~48% portrait, a golden hairline + Chinar-leaf motif between them. */
.mslide{position:relative;color:var(--ink);
  background:radial-gradient(130% 110% at 30% 18%,#FBF7EE,#EFE6D6 78%)}
.mslide-stage{min-height:100vh;display:flex;align-items:center;gap:clamp(26px,3.4vw,58px);
  padding:clamp(64px,10vh,120px) clamp(24px,6vw,96px)}
.mslide-copy{flex:0 1 52%}
.ms-eyebrow{color:var(--chinar);font-size:11px;letter-spacing:.42em;text-transform:uppercase;margin-bottom:24px}
.mslide-headline{font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(2.6rem,5vw,4.4rem);line-height:1.05;margin-bottom:28px}
.mslide-body p{color:rgba(34,27,16,.82);font-weight:300;line-height:1.75;
  font-size:clamp(1rem,1.2vw,1.14rem);margin-bottom:16px;max-width:56ch}
.mslide-highlight{margin:28px 0 16px;color:var(--ink);font-size:12px;letter-spacing:.32em;text-transform:uppercase}
.mslide-highlight .sep{color:var(--chinar);padding:0 12px}
.mslide-supporting{color:rgba(34,27,16,.64);font-size:.95rem;line-height:1.7;max-width:52ch}
.mslide-footer{margin-top:32px;color:var(--chinar);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase}
.mslide-divider{flex:0 0 1px;align-self:stretch;margin:9vh 0;position:relative;
  background:linear-gradient(transparent,var(--hair) 18%,var(--hair) 82%,transparent)}
.mslide-divider svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:17px;height:17px;color:var(--gold);opacity:.85}
.mslide-media{flex:0 1 48%;margin:0}
.mslide-photo{width:100%;max-width:540px;height:min(80vh,760px);margin-inline:auto;
  /* the approved photograph at assets/img/maestro.jpg lights this frame;
     a warm toned ground holds the composition until it lands */
  background:url('../assets/img/maestro.jpg') center 28%/cover no-repeat,
             radial-gradient(120% 90% at 45% 30%,#E9DEC8,#D9CCB3 75%);
  border:1px solid rgba(201,162,92,.35);box-shadow:0 34px 90px rgba(34,27,16,.25)}
@media(max-width:900px){
  .mslide-stage{flex-direction:column;gap:34px;padding-top:12vh;padding-bottom:10vh}
  .mslide-copy,.mslide-media{flex:none;width:100%}
  .mslide-divider{display:none}
  .mslide-photo{height:56vh}
}

/* ─────────── SCENE 08 · CULTURAL MINIMALISM ───────────
   An almost empty ivory room. One santoor string, then the words. */
.philo{position:relative;color:var(--ink);
  background:radial-gradient(130% 110% at 68% 22%,#FBF7EE,#F0E8D9 80%)}
.philo-stage{min-height:100vh;display:flex;align-items:center;gap:clamp(26px,3.4vw,58px);
  padding:clamp(70px,11vh,130px) clamp(24px,6vw,96px)}
.philo-copy{flex:0 1 55%}
.philo-string{display:block;width:min(420px,58%);height:40px;color:var(--gold);
  margin-bottom:26px;overflow:visible}
.philo-headline{font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(2.6rem,5vw,4.4rem);line-height:1.05;margin-bottom:30px}
.philo-body p{color:rgba(34,27,16,.82);font-weight:300;line-height:1.8;
  font-size:clamp(1rem,1.2vw,1.14rem);margin-bottom:16px;max-width:54ch}
.philo-emphasis{font-family:var(--serif);color:var(--ink);
  font-size:clamp(1.5rem,2.2vw,2rem);margin-top:30px;line-height:1.3}
.philo-emphasis-sub{font-family:var(--serif);font-style:italic;color:var(--chinar);
  font-size:clamp(1.1rem,1.6vw,1.4rem);margin-top:6px}
.philo-principles{margin-top:34px;color:var(--ink);font-size:12px;letter-spacing:.34em;text-transform:uppercase}
.philo-principles .p-word{display:inline-block}
.philo-principles .sep{color:var(--chinar);padding:0 12px}
.philo-footer{margin-top:30px;color:rgba(34,27,16,.6);font-family:var(--serif);font-style:italic;
  font-size:clamp(1rem,1.3vw,1.2rem)}
.philo-media{flex:0 1 45%;margin:0}
.philo-photo{width:100%;max-width:520px;height:min(78vh,720px);margin-inline:auto;
  /* the Maestro with the santoor amid the river — assets/img/river-rs.jpg */
  background:url('../assets/img/river-rs.jpg') center 46%/cover no-repeat,
             radial-gradient(120% 90% at 45% 30%,#E9DEC8,#D9CCB3 75%);
  border:1px solid rgba(201,162,92,.35);box-shadow:0 34px 90px rgba(34,27,16,.22)}

/* ─────────── SCENE 09 · KASHMIR MADE AUDIBLE ───────────
   A visual pause: the landscape behind everything, words on an ivory veil. */
.audible{position:relative;overflow:hidden;color:var(--ink);background:#EFE6D6}
.audible-backdrop{position:absolute;inset:-12% 0;
  background:url('../assets/img/kashmir-wide.jpg') center/cover no-repeat,
             linear-gradient(160deg,#DCD2BE,#C9BCA4)}
.audible-mist{position:absolute;inset:0;pointer-events:none;opacity:.5}
/* the mist is re-aimed to where the wash is thin: m2 drifts in the clean
   crown band, m1 through the open channel between the two type fields */
.audible-mist.m1{background:radial-gradient(60% 34% at 46% 60%,rgba(244,238,226,.55),transparent 70%);
  animation:mistDrift1 46s ease-in-out infinite alternate}
.audible-mist.m2{background:radial-gradient(52% 26% at 72% 12%,rgba(244,238,226,.45),transparent 70%);
  animation:mistDrift2 64s ease-in-out infinite alternate}
@keyframes mistDrift1{from{transform:translateX(-3.5%)}to{transform:translateX(3.5%)}}
@keyframes mistDrift2{from{transform:translateX(2.5%)}to{transform:translateX(-2.5%)}}
/* z-index:3 keeps the leaf above the stage's wash; it waits below the coda
   and falls out of frame through open landscape, crossing no word */
.audible-leaf{position:absolute;top:76%;right:2%;width:20px;height:20px;color:var(--chinar);
  opacity:0;pointer-events:none;z-index:3}

/* the stage IS the grid: two type fields over the valley with a channel of
   open landscape between them, then two full-width bands beneath */
.audible-stage{position:relative;z-index:2;min-height:100vh;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:auto auto auto auto;
  column-gap:clamp(14px,1.8vw,28px);
  row-gap:clamp(24px,4.4vh,52px);
  align-content:center;
  padding:clamp(44px,6.5vh,86px) clamp(24px,6vw,96px)}

/* the wash — ivory light where the words are, never a plane. Thinnest
   behind the big serif (which needs no help), denser behind the prose
   (which does); dissolves to nothing above 13% so the crown of the
   frame is untouched photograph, edge to edge. */
.audible-stage::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(56% 62% at 4% 44%,rgba(251,247,238,.72),rgba(251,247,238,.38) 48%,rgba(251,247,238,0) 76%),
    radial-gradient(62% 70% at 90% 40%,rgba(251,247,238,.84),rgba(251,247,238,.46) 52%,rgba(251,247,238,0) 84%),
    linear-gradient(to top,rgba(251,247,238,.80),rgba(251,247,238,.46) 14%,rgba(251,247,238,.10) 30%,rgba(251,247,238,0) 42%),
    linear-gradient(rgba(251,247,238,.12),rgba(251,247,238,.12));
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 100%)}
.audible-stage > *{position:relative;z-index:1}

/* row 1 — origin left, lede right, one shared baseline.
   margin:0 zeroes .ms-eyebrow's shipped 24px so the row can't inflate. */
#ka-label{grid-column:1/span 4;grid-row:1;align-self:baseline;margin:0}
.audible-intro{grid-column:8/-1;grid-row:1;align-self:baseline;margin:0;
  color:rgba(34,27,16,.74);font-weight:300;
  font-size:clamp(.95rem,1.15vw,1.06rem);line-height:1.7;text-wrap:balance}

/* row 2 — the two fields. Headline and prose are siblings, so the row is
   as tall as the taller one: the headline's size costs nothing. */
.audible-headline{grid-column:1/span 6;grid-row:2;align-self:baseline;margin:0;
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(2.6rem,4.8vw,4.3rem);line-height:1.06;letter-spacing:-.005em;
  text-wrap:balance}
.audible-body{grid-column:8/-1;grid-row:2;align-self:baseline}
.audible-body p{margin:0 0 14px;color:rgba(34,27,16,.84);font-weight:300;line-height:1.75;
  font-size:clamp(.94rem,1.05vw,1.04rem);max-width:none}
.audible-body p:last-child{margin-bottom:0}

/* row 3 — the works as a horizontal editorial index: gap only, no rules */
.audible-albums{grid-column:1/span 9;grid-row:3;margin:0;
  display:flex;flex-wrap:wrap;align-items:baseline;
  column-gap:clamp(24px,3.4vw,54px);row-gap:6px}
.audible-albums .album{display:block;font-family:var(--serif);font-style:italic;color:var(--ink);
  font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.6;white-space:nowrap}

/* row 4 — the coda band: the cadence at left, the footer signing off flush
   right on the same baseline */
.audible-coda{grid-column:1/-1;grid-row:4;margin-top:clamp(8px,1.6vh,18px);
  display:flex;flex-wrap:wrap;align-items:baseline;
  column-gap:clamp(10px,1vw,16px);row-gap:8px}
.audible-closing{margin:0;font-family:var(--serif);color:var(--ink);
  font-size:clamp(1.35rem,2vw,1.85rem);line-height:1.3}
.audible-closing-sub{margin:0;font-family:var(--serif);font-style:italic;color:var(--chinar);
  font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:1.3}
.audible-footer{margin:0 0 0 auto;color:var(--gold-ink,#7E6229);font-weight:700;
  font-size:clamp(14px,1.15vw,17px);letter-spacing:.3em;
  text-transform:uppercase;white-space:nowrap}
@media(max-width:900px){
  .philo-stage{flex-direction:column;gap:34px;padding-top:12vh;padding-bottom:10vh}
  .philo-copy,.philo-media{flex:none;width:100%}
  .philo-photo{height:54vh}
  /* Scene 09 · one column, text above, the valley returning full strength
     beneath it through the deep foot */
  /* minmax(0,1fr): a bare 1fr floors at min-content, and the nowrap album
     and footer lines would push the column past the viewport */
  .audible-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:none;
    row-gap:clamp(16px,2.6vh,26px);align-content:start;min-height:auto;
    padding:clamp(92px,13vh,124px) clamp(22px,7vw,40px) clamp(150px,22vh,220px)}
  #ka-label,.audible-intro,.audible-headline,.audible-body,.audible-albums,.audible-coda{
    grid-column:1/-1;grid-row:auto;align-self:start}
  .audible-headline{font-size:clamp(2.05rem,8.2vw,2.9rem);margin:6px 0 4px}
  .audible-albums{flex-direction:column;row-gap:2px;margin-top:6px}
  .audible-albums .album{white-space:normal}   /* release the desktop nowrap */
  .audible-coda{flex-direction:column;align-items:flex-start;row-gap:12px}
  .audible-footer{margin-left:0;white-space:normal}
  .audible-stage::before{
    background:linear-gradient(rgba(251,247,238,.96) 0%,rgba(251,247,238,.94) 58%,
      rgba(251,247,238,.72) 74%,rgba(251,247,238,.22) 90%,rgba(251,247,238,0) 100%);
    -webkit-mask-image:none;mask-image:none}
  .audible-leaf{display:none}
}

/* ─────────── SCENES 10 + 11 · THE JOURNEY ───────────
   The map is the constant, the chapters are the variable. Night ground:
   the valley has left home and is travelling. */
.jrny{position:relative;background:var(--night);color:var(--ivory)}
.jrny-stage{position:relative;height:100vh;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;align-items:center}
/* the seam: dusk falling over the valley. The old three-stop gradient
   interpolated straight through desaturated gray and read as a muddy
   band (client, 2026-07-17); this ramp keeps every intermediate stop
   WARM (parchment, bronze, umber) and only turns toward the blue of
   night at the very end, with stops eased tight at both edges so
   neither boundary shows a line. First stop = .audible's exact ivory. */
.jrny-seam{position:absolute;top:0;left:0;right:0;height:44vh;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,
    #EFE6D6 0%, #E7DBC4 9%, #D3C2A2 20%, #B39D77 32%, #8C7857 44%,
    #665741 56%, #453B2E 67%, #2B2723 77%, #171B20 88%, #070D12 100%)}
/* the per chapter hue shift: never more than 8 percent, Kashmir palette only */
.jrny-tint{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(120% 90% at 72% 50%,var(--jr-tint,transparent),transparent 68%);
  /* background only: GSAP owns opacity; a CSS transition on it would re-smooth
     every tween frame and lag the fade behind the scrub */
  transition:background .3s var(--ease)}

/* the opening: three beats alone on the night */
.jrny-open{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 6vw;pointer-events:none}
.jr-mask{display:block;overflow:hidden}
.jr-mask > span{display:block}
.jrny-statement{font-family:var(--serif);font-style:italic;color:var(--ivory);
  font-size:clamp(1.5rem,2.6vw,2.2rem);margin:26px 0 0;opacity:.92}
.jrny-headline{font-family:var(--serif);font-weight:300;color:var(--ivory);
  font-size:clamp(2.3rem,4.6vw,4.1rem);line-height:1.08;letter-spacing:.01em;
  margin:clamp(26px,5vh,54px) 0 0;max-width:22ch;text-wrap:balance}
  /* 22ch: exactly two balanced, centred lines on desktop */
.jrny-subline{margin-top:22px;color:var(--amber);font-weight:300;
  font-size:clamp(.95rem,1.2vw,1.1rem);letter-spacing:.04em}

/* the map: pinned, persistent, the constant */
.jrny-map{position:relative;z-index:1;margin:0;height:100vh;opacity:0}
#jrnyCanvas{display:block;width:100%;height:100%}

/* the chapters: the variable, travelling up through the right half.
   overflow:hidden keeps the travelling panels inside their own column,
   so they never spill across the map */
.jrny-track{position:relative;z-index:2;height:100vh;opacity:0;overflow:hidden}
.jrny-rail{will-change:transform}
.jrny-panel{height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(24px,5vw,84px) 0 clamp(10px,2vw,26px);max-width:640px}
.jrny-n{font-family:var(--serif);color:var(--gold);opacity:.5;
  font-size:clamp(1.1rem,1.5vw,1.35rem);margin-bottom:14px}
.jrny-city{color:var(--chinar);font-size:11px;letter-spacing:.42em;text-transform:uppercase;margin-bottom:16px}
.jrny-title{font-family:var(--serif);font-weight:300;color:var(--ivory);
  font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.12;margin-bottom:24px}
.jrny-title .jr-mask{padding-bottom:.06em}
.jrny-narr{font-family:var(--serif);font-style:italic;color:rgba(244,238,226,.78);
  font-size:clamp(1.02rem,1.4vw,1.28rem);line-height:1.75;max-width:44ch}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Scene 12 · the pause and the movement ── the statement over the map */
.jrny-pause{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 6vw 12vh;
  pointer-events:none;opacity:0}
.jp-beat{font-family:var(--serif);font-weight:300;color:var(--ivory);
  font-size:clamp(2.1rem,4.3vw,3.9rem);line-height:1.15;margin:0 0 12px}
/* the second beat is the one that must land: gold, and a shade heavier */
#jp-b2{color:var(--gold);font-weight:500}
.jp-phil{font-family:var(--serif);font-style:italic;color:var(--ivory);
  font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.6;max-width:38ch;margin:30px 0 0}
.jp-phil span{opacity:.15}                 /* each phrase brightens as scroll passes over it */
.jp-micro{color:rgba(244,238,226,.62);font-weight:300;
  font-size:clamp(.9rem,1.1vw,1rem);line-height:1.7;max-width:46ch;margin:34px 0 0}

/* mobile (revised 2026-07-23: the subject must be IN frame): the photo
   zooms and anchors low-left so the maestro stands in the upper two
   thirds; the scrim turns to solid night across the text zone, which
   begins below his lap so nothing crosses the santoor. */
@media(max-width:900px){
  .coda-photo{background-size:auto 135%;background-position:31% 84%}
  .coda-lockup img{width:min(190px,50vw)}
  .coda-shade{background:linear-gradient(rgba(7,13,18,.16),rgba(7,13,18,.4) 46%,rgba(7,13,18,.94) 76%)}
  .coda-lockup{right:auto;left:clamp(22px,6vw,72px);max-width:none;
    width:calc(100% - 2*clamp(22px,6vw,72px))}
}

@media(max-width:900px){
  /* map above at reduced height, chapters travelling beneath it */
  .jrny-stage{grid-template-columns:1fr;grid-template-rows:38vh 62vh;align-items:stretch}
  .jrny-map{height:38vh}
  .jrny-track{height:62vh}
  .jrny-panel{height:62vh;padding:0 clamp(22px,7vw,40px);max-width:none;justify-content:center}
  .jrny-headline{max-width:14ch}
  .jrny-narr{max-width:none}
}

/* reduced motion: no pin, everything already arrived, chapters a ruled list,
   the statement visible in document order over the fully drawn map */
@media(prefers-reduced-motion:reduce){
  .jrny-seam{display:none}                 /* the scrub never runs to fade it */
  .jrny-stage{height:auto;grid-template-columns:1fr;display:block}
  .jrny-open{position:relative;inset:auto;padding:14vh 6vw 6vh}
  .jrny-map{height:70vh;opacity:1}
  .jrny-track{height:auto;opacity:1;overflow:visible;padding:0 6vw 12vh}
  .jrny-rail{transform:none!important}
  .jrny-panel{height:auto;max-width:none;padding:clamp(30px,5vh,54px) 0;
    border-top:1px solid var(--hair)}
  .jrny-pause{position:relative;inset:auto;opacity:1;padding:10vh 6vw}
  .jp-phil span{opacity:1}
}

/* ═══════════ SCENE 13 · THE HORIZON — THE ATLAS PLATE ═══════════
   Night and gold (direction 2026-07-17): the journey's dark carries
   straight through, so the pin releases onto the same night with no
   seam. The plate becomes a celestial atlas: gold engraving on dark,
   hairline rules in low gold, letterpress ivory type, extravagant air. */
/* the horizon rises OVER the journey stage's exit: the held statement
   frame hands off without a viewport of empty night (2026-07-23) */
.hz{position:relative;z-index:2;margin-top:-22vh;background:var(--night);color:var(--ivory);
  --gold-ink:#7E6229;                  /* kept for reference; unused on night */
  --hair:rgba(201,162,92,.22);         /* scoped: every hairline in this scene turns low gold */
  padding:clamp(64px,10vh,120px) 6vw 0;overflow:hidden}
/* the same quiet contour texture the ivory chapters carry, in gold at night */
.hz::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 90% at 50% 0%,rgba(201,162,92,.05),transparent 55%)}
.hz-rule{max-width:1360px;margin:0 auto;border-top:1px solid var(--hair)}

/* header: asymmetric, editorial, generous air above the plate */
.hz-head{max-width:1360px;margin:clamp(90px,16vh,170px) auto clamp(80px,12vh,140px)}
.hz-eyebrow{color:var(--saffron);font-size:11px;font-weight:500;letter-spacing:.32em;
  text-transform:uppercase;margin-bottom:28px}
.hz-headline{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(2.75rem,5.2vw,4.75rem);line-height:1.08;letter-spacing:-.005em;
  max-width:23ch;text-wrap:balance;margin:0}  /* breaks at the full stop: one sentence per line */

/* the plate: framed by a double rule like a printed atlas page */
.hz-pinwrap{max-width:1360px;margin:0 auto}
.hz-stage{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(26px,4vh,44px);padding:clamp(20px,3vh,40px) 0}
/* the plate never pushes its key below the fold: width also yields to the
   viewport's height (SVG aspect ~2.45, ~300px reserved for key + air) */
.hz-plate{position:relative;margin:0 auto;
  width:min(1140px,100%,calc((100vh - 300px)*2.45));
  padding:clamp(14px,1.6vw,22px);background:rgba(244,238,226,.015);
  border:1px solid var(--hair);outline:1px solid rgba(201,162,92,.14);outline-offset:-12px}
.hz-svg{display:block}
.hz-svg svg{display:block;width:100%;height:auto}
/* the finished plate keeps one living point of warmth: Kashmir's halo
   breathes on a slow lamplight cycle, nothing else moves */
.hz-halo{animation:hzBreath 5.6s var(--ease) infinite alternate}
@keyframes hzBreath{from{opacity:.82}to{opacity:1}}

/* the plate key: five legend columns that wait at low ink and wake,
   one by one, the moment their region gilds on the plate above */
.hz-key{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(18px,2.4vw,34px);margin:0 auto;padding:0;
  width:min(1140px,100%,calc((100vh - 300px)*2.45))}  /* stays flush with the plate */
.hz-k{border-left:1px solid var(--hair);padding-left:clamp(12px,1.4vw,20px);
  opacity:.35;transform:translateY(6px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hz-k.lit{opacity:1;transform:none}
.hz-k-n{font-family:var(--serif);color:var(--gold);font-size:1.05rem;display:block;margin-bottom:10px}
.hz-k-name{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.25;margin:0 0 8px}
.hz-k-line{color:rgba(244,238,226,.62);font-weight:300;font-size:clamp(.78rem,.85vw,.85rem);
  line-height:1.65;margin:0;max-width:26ch}

/* the two chapters: a page of daylight, then a band of night. Chapter One
   keeps the ivory folio, its engraved valley breathing on a slow parallax;
   Chapter Two turns the lights off and sets ivory type over the world at
   night. Each support line closes on a drawn gold underline. */
.hz-ch1{max-width:1360px;margin:clamp(70px,10vh,130px) auto 0;
  display:grid;grid-template-columns:5fr 6fr;column-gap:clamp(48px,6vw,110px);align-items:center}
.hz-ch-art{position:relative;margin:0;overflow:hidden;background:var(--night);
  border:1px solid var(--hair);padding:clamp(10px,1.2vw,16px);max-width:440px;justify-self:end}
.hz-ch-art img{display:block;width:100%;height:auto;aspect-ratio:896/1200;
  will-change:transform}   /* height reserved: the lazy load must not shift trigger positions */
.hz-ch2{position:relative;margin:clamp(140px,22vh,220px) -6vw 0;
  padding:clamp(130px,22vh,240px) 6vw;background:var(--night);overflow:hidden}
.hz-ch2-bg{position:absolute;inset:-14% 0;margin:0;pointer-events:none}
.hz-ch2-bg img{width:100%;height:100%;object-fit:cover;opacity:.8;will-change:transform}
.hz-ch2 .hz-ch-copy{position:relative;max-width:620px;margin:0 auto;text-align:center}
.hz-ch2 .hz-ch-label{color:var(--saffron)}
.hz-ch2 .hz-ch-title{color:var(--ivory)}
.hz-ch2 .hz-ch-line{color:rgba(244,238,226,.8);margin-left:auto;margin-right:auto}
.hz-ch2 .hz-ch-support{color:rgba(244,238,226,.92);margin-left:auto;margin-right:auto}
.hz-ch-label{color:var(--saffron);font-size:11px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;margin-bottom:22px}
.hz-ch-title{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(2rem,3.2vw,2.9rem);line-height:1.12;margin:0 0 20px}
.hz-ch-line{color:rgba(244,238,226,.72);font-weight:300;font-size:clamp(.95rem,1.1vw,1.02rem);
  line-height:1.75;margin:0 0 16px;max-width:44ch}
.hz-ch-support{font-family:var(--serif);font-style:italic;color:rgba(244,238,226,.86);
  font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.65;margin:0;max-width:40ch}
/* the highlight: a gold underline that draws itself beneath the phrase
   that matters (presentation only, the copy is untouched) */
.hz-em{background-image:linear-gradient(transparent 84%,rgba(228,172,83,.9) 85%,
  rgba(228,172,83,.9) 91%,transparent 92%);
  background-repeat:no-repeat;background-size:0% 100%}
.hz-ch2 .hz-em{background-image:linear-gradient(transparent 84%,rgba(228,172,83,.9) 85%,
  rgba(228,172,83,.9) 91%,transparent 92%)}
@media(max-width:1100px){
}

/* the album: a breath of daylight inside the night chapter — the pale
   watercolour valley under an ivory pool, ink type at full legibility
   (client 2026-07-17: the engraved grooves fought the words). */
.hz-album{position:relative;margin:clamp(90px,13vh,150px) -6vw 0;
  padding:clamp(130px,20vh,230px) 6vw;background:#F2EBDC;
  text-align:center;overflow:hidden}
.hz-al-bg{position:absolute;inset:-12% 0;margin:0;pointer-events:none}
.hz-al-bg img{width:100%;height:100%;object-fit:cover;opacity:.5;will-change:transform}
/* an ivory pool under the copy so the type never fights the painting */
.hz-al-bg::after{content:'';position:absolute;inset:0;
  background:radial-gradient(58% 58% at 50% 47%,rgba(244,238,226,.88),rgba(244,238,226,.3) 78%)}
.hz-al-copy{position:relative;max-width:560px;margin:0 auto}
.hz-album .hz-eyebrow{color:var(--chinar);margin-bottom:22px}
.hz-al-line{font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:clamp(1.9rem,3vw,2.5rem);line-height:1.2;margin:0 0 18px;text-wrap:balance}
.hz-al-support{color:rgba(34,27,16,.85);font-weight:400;font-size:clamp(1rem,1.1vw,1.05rem);
  line-height:1.75;margin:0 0 30px}
.hz-wave{display:block;width:min(340px,80%);height:64px;margin:0 auto 30px}
.hz-tag{display:inline-block;padding:14px 26px;border:1px solid rgba(126,98,41,.45);border-radius:999px;
  color:var(--gold-ink);font-size:clamp(13px,1vw,14.5px);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase}

/* the closing frame: the maestro alone in the vast river, three lines of
   ivory print held over the water */
.hz-close{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;margin:clamp(40px,7vh,84px) -6vw 0;
  padding:0 6vw;overflow:hidden;background:var(--night)}
.hz-close-bg{position:absolute;inset:-10% 0;margin:0;pointer-events:none}
.hz-close-bg img{width:100%;height:100%;object-fit:cover;opacity:.9;will-change:transform}
.hz-close-photo::before{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(64% 54% at 50% 56%,rgba(7,13,18,.52),rgba(7,13,18,.18) 68%,rgba(7,13,18,.05))}
.hz-close-lines{position:relative;z-index:2;font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(2rem,4vw,3.5rem);line-height:1.28;max-width:22ch;text-wrap:balance;margin:0;
  text-shadow:0 2px 36px rgba(7,13,18,.8)}
.hz-mask{display:block;overflow:hidden;padding-bottom:.08em}
.hz-mask > span{display:block}

@media(max-width:900px){
  .hz{padding-left:7vw;padding-right:7vw}
  /* no pin here: the plate holds sticky while the key scrolls beneath,
     each region gilding as its entry crosses the centre of the screen */
  .hz-stage{min-height:0;display:block}
  .hz-plate{position:sticky;top:8vh;z-index:1;background:var(--night);width:100%}
  .hz-key{grid-template-columns:1fr;gap:0;margin-top:26px;width:100%}
  .hz-k{border-left:0;border-top:1px solid var(--hair);padding:22px 0 26px;transform:none}
  .hz-k-line{max-width:none}
  .hz-ch1{grid-template-columns:1fr;row-gap:34px;margin-top:110px}
  .hz-ch-art{max-width:300px;justify-self:center}
  .hz-ch2{margin-left:-7vw;margin-right:-7vw;padding:110px 7vw;margin-top:110px}
  .hz-album{margin-left:-7vw;margin-right:-7vw;padding:110px 7vw}
  .hz-close{margin-left:-7vw;margin-right:-7vw;padding:0 7vw}
  .hz-close{min-height:70vh}
}

@media(prefers-reduced-motion:reduce){
  /* the page arrives printed: plate fully inked, key at full ink,
     Kashmir's halo still, every line already resolved */
  .hz-halo{animation:none}
  .hz-k{opacity:1;transform:none;transition:none}
  .hz-plate{position:static}
  .hz-mask > span{transform:none!important}
  .hz-em{background-size:100% 100%}          /* highlights already drawn */
}

/* ═══════════ SCENES 14 + 15 · THE AUDIENCE JOURNEY / WHY ASSOCIATE ═══
   Ivory editorial chapters that are never empty: a topographic contour
   texture (gold at four percent) fills the ground so whitespace reads
   as atmosphere, and every layer carries a single weight hand drawn
   line illustration that draws itself on scroll, then holds with one
   subtle idle motion. Light is gold; matter is chinar. */
.aj,.as,.dv{position:relative;background:var(--ivory);color:var(--ink);
  --gold-ink:#7E6229;overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%23C9A25C' stroke-opacity='.04'%3E%3Cpath d='M170 40 C 250 26, 330 70, 350 150 C 368 226, 300 300, 210 306 C 120 312, 50 260, 46 176 C 42 100, 96 52, 170 40 Z'/%3E%3Cpath d='M172 78 C 232 68, 296 100, 310 158 C 322 214, 272 264, 204 268 C 138 272, 88 234, 86 176 C 84 120, 118 86, 172 78 Z'/%3E%3Cpath d='M176 116 C 218 110, 258 130, 266 166 C 272 198, 240 226, 196 228 C 152 230, 124 206, 124 172 C 124 140, 142 120, 176 116 Z'/%3E%3Cpath d='M414 316 C 462 308, 502 336, 508 378 C 514 420, 478 452, 432 454 C 386 456, 352 428, 354 388 C 356 350, 372 322, 414 316 Z'/%3E%3Cpath d='M418 348 C 450 342, 476 360, 480 388 C 484 416, 460 436, 430 437 C 400 438, 380 420, 382 394 C 384 370, 392 352, 418 348 Z'/%3E%3Cpath d='M60 396 C 96 388, 130 406, 136 436 C 142 464, 116 486, 82 488 C 48 490, 24 470, 26 442 C 28 416, 34 402, 60 396 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:520px 520px}

/* the santoor string strung across the seam, drawn as the chapter opens */
.aj{padding:0 6vw clamp(90px,14vh,160px)}
.aj-string{display:block;width:100%;height:12px;overflow:visible;margin-top:clamp(28px,4vh,48px)}
.aj-string path{fill:none;stroke:rgba(201,162,92,.7);stroke-width:1.2}

/* the opening: a page of night. The maestro among the chinars carries the
   reframe, ivory type rising over the photograph on a slow parallax */
.aj-open{position:relative;margin:0 -6vw;padding:clamp(120px,20vh,220px) 6vw;
  background:var(--night);overflow:hidden;text-align:center}
.aj-open-bg{position:absolute;inset:-12% 0;margin:0;pointer-events:none}
.aj-open-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;
  opacity:.62;will-change:transform}
.aj-open::after{content:'';position:absolute;inset:0;
  background:linear-gradient(rgba(7,13,18,.55),rgba(7,13,18,.2) 40%,rgba(7,13,18,.62))}
.aj-open-copy{position:relative;z-index:1;max-width:1180px;margin:0 auto}
.aj-open .hz-eyebrow{color:var(--saffron);margin-bottom:34px}
.aj-beat{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(2.1rem,4vw,3.5rem);line-height:1.16;margin:0 0 6px;text-wrap:balance;
  text-shadow:0 2px 34px rgba(7,13,18,.7)}
.aj-promise{font-family:var(--serif);font-style:italic;color:rgba(244,238,226,.88);
  font-size:clamp(1.15rem,1.8vw,1.55rem);line-height:1.6;max-width:46ch;
  margin:clamp(40px,6vh,70px) auto 0;text-wrap:balance;text-shadow:0 2px 24px rgba(7,13,18,.7)}

/* the six layers: a photograph carries each, the drawn motif reduced to a
   small accent above the number; copy and image alternate sides */
.aj-layer{display:grid;grid-template-columns:6fr 5fr;column-gap:clamp(40px,6vw,110px);
  align-items:center;min-height:clamp(440px,66vh,620px);max-width:1180px;margin:0 auto;
  padding:clamp(40px,7vh,80px) 0}
.aj-layer:nth-child(even) .aj-copy{order:2}
.aj-n{font-family:var(--serif);color:var(--gold-ink);font-size:1.05rem;margin-bottom:14px}
.aj-title{font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.15;margin:0 0 18px}
.aj-narr{color:rgba(34,27,16,.72);font-weight:300;font-size:clamp(.98rem,1.15vw,1.06rem);
  line-height:1.78;margin:0;max-width:46ch}
.aj-svg{width:clamp(96px,9vw,130px);height:auto;overflow:visible;display:block;
  margin-bottom:22px;opacity:.9}
/* the photograph, mounted like a plate: outer hairline, an inner ivory
   rule sitting on the image (the atlas frame language), cover crop; the
   slight over-scale gives GSAP parallax room inside the mount */
.aj-photo,.as-portrait{position:relative;margin:0;overflow:hidden;border:1px solid var(--hair)}
.aj-photo::after,.as-portrait::after{content:'';position:absolute;inset:0;z-index:1;
  outline:1px solid rgba(244,238,226,.4);outline-offset:-12px;pointer-events:none}
.aj-photo img,.as-portrait img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transform:scale(1.1);will-change:transform}
.ar-34{aspect-ratio:3/4;width:min(420px,100%);justify-self:center}
.ar-45{aspect-ratio:4/5;width:min(440px,100%);justify-self:center}
.ar-32{aspect-ratio:3/2;width:min(560px,100%);justify-self:center}

/* layer 03: the page becomes the moonlight it describes */
.aj-layer-night{grid-template-columns:1fr;margin:clamp(40px,7vh,80px) -6vw;max-width:none;
  padding:clamp(110px,18vh,200px) 6vw;background:var(--night);position:relative;overflow:hidden;
  text-align:center;justify-items:center}
.aj-night-bg{position:absolute;inset:-10% 0;margin:0;pointer-events:none}
.aj-night-bg img{width:100%;height:100%;object-fit:cover;opacity:.68;will-change:transform}
.aj-layer-night::after{content:'';position:absolute;inset:0;
  background:linear-gradient(rgba(7,13,18,.5),rgba(7,13,18,.15) 45%,rgba(7,13,18,.55))}
.aj-layer-night .aj-copy{position:relative;z-index:1;max-width:640px}
.aj-layer-night .aj-svg{margin-left:auto;margin-right:auto}
.aj-layer-night .aj-n{color:var(--saffron)}
.aj-layer-night .aj-title{color:var(--ivory)}
.aj-layer-night .aj-narr{color:rgba(244,238,226,.82);margin-left:auto;margin-right:auto}
.aj-svg path{fill:none;stroke:rgba(192,90,30,.75);stroke-width:1;stroke-linecap:round}
.aj-svg .aj-idle-breath path,.aj-svg .aj-idle-steam path{stroke:rgba(201,162,92,.9)}
.aj-idle-drift{animation:ajDrift 9s var(--ease) infinite alternate}
.aj-idle-breath{animation:ajBreath 3s ease-in-out infinite alternate}
.aj-idle-steam{animation:ajSteam 4s ease-in-out infinite alternate}
.aj-vib{transform-box:fill-box;transform-origin:center;animation:ajVib 3s ease-in-out infinite}
@keyframes ajDrift{from{transform:translateX(-6px)}to{transform:translateX(6px)}}
@keyframes ajBreath{from{opacity:.68}to{opacity:1}}
@keyframes ajSteam{from{transform:translateY(0);opacity:.8}to{transform:translateY(-6px);opacity:1}}
@keyframes ajVib{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.35)}}

/* the rhythm timeline: the evening as a composition beside the engraved
   santoor that plays it. One line through seven words, a waveform between
   Music and Reflection; the line never crosses the instrument's column. */
.aj-rhythm{max-width:1180px;margin:clamp(110px,16vh,180px) auto 0;position:relative;
  display:grid;grid-template-columns:5fr 6fr;column-gap:clamp(48px,6vw,110px);align-items:center}
.aj-rhythm::before{content:'';position:absolute;inset:-8% -4%;pointer-events:none;
  background:radial-gradient(52% 60% at 30% 50%,rgba(228,172,83,.07),transparent 70%)}
.aj-rh-art{justify-self:end;width:min(440px,100%)}
.aj-rh-right{position:relative}
.aj-rh-rows{position:relative}
.aj-rh-line{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:6px;height:100%;overflow:visible}
.aj-rh-line path{fill:none;stroke:rgba(201,162,92,.9);stroke-width:1.4;stroke-linecap:round}
.aj-rh-line circle{fill:var(--ivory);stroke:rgba(126,98,41,.9);stroke-width:1}
.aj-rh-line .halo{fill:none;stroke:rgba(201,162,92,.35);stroke-width:.75}
.aj-rh-line .rip{fill:none;stroke:rgba(192,90,30,.6)}
.aj-rh-row{display:grid;grid-template-columns:1fr 1fr;height:104px;align-items:center}
.aj-rh-word{font-size:14px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(34,27,16,.32);transition:color .8s var(--ease),letter-spacing .8s var(--ease)}
.aj-rh-word.lit{letter-spacing:.4em}
.aj-rh-row.l .aj-rh-word{grid-column:1;justify-self:end;padding-right:34px}
.aj-rh-row.r .aj-rh-word{grid-column:2;justify-self:start;padding-left:34px}
.aj-rh-word.lit{color:#A34A18}  /* chinar darkened to 5.7:1 on ivory for 12px type */
.aj-rh-micro{font-family:var(--serif);font-style:italic;color:rgba(34,27,16,.62);
  font-size:clamp(1rem,1.3vw,1.15rem);text-align:center;margin:54px 0 0}

/* ── Scene 15 · the invitation: the argument beside the artist ── */
.as{padding:clamp(90px,13vh,150px) 6vw 0}
.as-lead{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:7fr 5fr;
  column-gap:clamp(48px,6vw,110px);align-items:center}
.as-lead-copy{text-align:left}
.as-headline{font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:clamp(2.1rem,3.6vw,3.2rem);line-height:1.12;margin:0;
  max-width:20ch;text-wrap:balance}
.as-portrait{justify-self:end;width:min(460px,100%)}
.as-reframe{margin:clamp(44px,7vh,80px) 0 0}
.as-strike{position:relative;display:inline-block;font-family:var(--serif);
  color:rgba(34,27,16,.45);font-size:clamp(1.25rem,2vw,1.7rem);margin:0}
.as-strike s{text-decoration:none}  /* the semantics for AT; the drawn gold line is the visual */
.as-strike-line{position:absolute;left:-2%;top:55%;width:104%;height:8px;overflow:visible}
.as-strike-line path{fill:none;stroke:rgba(158,122,54,.95);stroke-width:1.6;stroke-linecap:round}
.as-reframe-line{font-family:var(--serif);font-style:italic;color:var(--ink);
  font-size:clamp(1.6rem,2.7vw,2.3rem);line-height:1.3;margin:26px 0 0;text-wrap:balance}
.as-philosophy{color:rgba(34,27,16,.74);font-weight:300;font-size:clamp(1rem,1.2vw,1.1rem);
  line-height:1.8;max-width:52ch;margin:clamp(44px,7vh,76px) 0 0}
.as-bridge{font-family:var(--serif);font-style:italic;color:rgba(34,27,16,.8);
  font-size:clamp(1.1rem,1.5vw,1.35rem);margin:clamp(30px,4.5vh,52px) 0 0;max-width:40ch}

/* milestones: the journey's route line continues through four glowing
   nodes on a band of night, the way it first crossed the India map */
.as-miles{position:relative;margin:clamp(90px,13vh,150px) -6vw 0;
  padding:clamp(80px,12vh,140px) 6vw;background:var(--night);overflow:visible}
.as-miles::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 45%,rgba(228,172,83,.08),transparent 72%)}
.as-m-line{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:6px;height:100%;overflow:visible;filter:drop-shadow(0 0 7px rgba(228,172,83,.5))}
.as-m-line path{fill:none;stroke:rgba(228,172,83,.9);stroke-width:1.3;stroke-linecap:round}
.as-m-line circle{fill:#0B1218;stroke:rgba(228,172,83,.95);stroke-width:1}
.as-m-line .rip{fill:none;stroke:rgba(228,172,83,.7)}
.as-m{position:relative;display:grid;grid-template-columns:1fr 1fr;height:170px;align-items:center;
  max-width:760px;margin:0 auto;opacity:.3;transition:opacity .9s var(--ease)}
.as-m.lit{opacity:1}
.as-m > div{grid-column:1;justify-self:end;text-align:right;padding-right:48px}
.as-m:nth-child(even) > div{grid-column:2;justify-self:start;text-align:left;padding-left:48px}
.as-m-num{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(2.7rem,5vw,4.3rem);line-height:1;text-shadow:0 2px 26px rgba(7,13,18,.6)}
.as-m-unit{font-size:clamp(1.3rem,2vw,1.8rem);margin-left:6px}
.as-m-label{color:var(--saffron);font-size:11px;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;margin-top:12px}
.as-m-words{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.3;max-width:14ch}

/* the association modes: five ruled lines reading beside the strings.
   The rules live in their own column and never cross the santoor. */
.as-modeswrap{max-width:1180px;margin:clamp(100px,14vh,170px) auto 0;
  display:grid;grid-template-columns:6fr 5fr;column-gap:clamp(48px,6vw,110px);align-items:center}
.as-modes{list-style:none;margin:0;padding:0}
.as-modes li{position:relative;padding:30px 2px;display:grid;
  grid-template-columns:auto 1fr;column-gap:22px;align-items:baseline}
.as-mode-n{font-family:var(--serif);color:var(--gold-ink);font-size:1rem}
.as-mode-text{font-family:var(--serif);color:var(--ink);font-size:clamp(1.35rem,2vw,1.8rem)}
.as-mode-rule{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair);
  transform:scaleX(0);transform-origin:left}
.as-modes-art{justify-self:end;width:min(420px,100%)}
/* the frame holds the official poster at its native 4:5: centred, uncropped */
.as-modes-art img{object-position:50% 50%}
/* the last word, spoken to an empty stage: the santoor alone in one pool
   of light. Type over the image; no drawn line touches the instrument. */
.as-close{position:relative;min-height:92vh;margin:clamp(90px,14vh,160px) -6vw 0;
  padding:0 6vw;background:var(--night);overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center}
.as-close-bg{position:absolute;inset:-10% 0;margin:0;pointer-events:none}
.as-close-bg img{width:100%;height:100%;object-fit:cover;opacity:.88;will-change:transform}
.as-close::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(7,13,18,.42),rgba(7,13,18,.08) 42%,rgba(7,13,18,.5))}
.as-close-line{position:relative;z-index:2;font-family:var(--serif);font-style:italic;color:var(--ivory);
  font-size:clamp(1.7rem,3vw,2.7rem);line-height:1.4;max-width:30ch;text-wrap:balance;margin:0;
  text-shadow:0 2px 34px rgba(7,13,18,.85);transform:translateY(-16vh)}

@media(max-width:900px){
  .aj-open{margin:0 -7vw;padding:110px 7vw}
  .aj-layer{grid-template-columns:1fr;row-gap:22px;min-height:0;padding:48px 0}
  .aj-layer .aj-copy{order:2}
  .aj-layer .aj-photo{order:1}
  .ar-34,.ar-45{width:min(330px,88%)}
  .ar-32{width:100%}
  .aj-layer-night{margin-left:-7vw;margin-right:-7vw;padding:96px 7vw}
  .aj-svg{width:96px;margin-bottom:16px}
  .aj-rhythm{grid-template-columns:1fr;row-gap:40px}
  .aj-rh-art{justify-self:center;width:min(300px,84%)}
  .aj-rh-row{height:96px}
  .as-lead{grid-template-columns:1fr;row-gap:44px}
  .as-portrait{justify-self:center;width:min(360px,92%)}
  .as-modeswrap{grid-template-columns:1fr;row-gap:40px}
  .as-modes-art{justify-self:center;width:min(300px,84%)}
  .as-miles{margin-left:-7vw;margin-right:-7vw;padding:70px 7vw}
  .as-close{margin-left:-7vw;margin-right:-7vw;padding:80px 7vw;min-height:70vh}
  .as-close-line{transform:translateY(-8vh)}
  .as-m{height:150px}
  .as-m > div{padding-right:30px}
  .as-m:nth-child(even) > div{padding-left:30px}
}

@media(prefers-reduced-motion:reduce){
  /* the chapters arrive fully drawn and still */
  .aj-idle-drift,.aj-idle-breath,.aj-idle-steam,.aj-vib{animation:none}
  .aj-rh-word{transition:none}
  .as-m{opacity:1;transition:none}
}

/* opening title moment — the lockup over the misty valley */
.film-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(400px,56vw);pointer-events:none;
  filter:drop-shadow(0 6px 30px rgba(7,13,18,.35))}

/* site chrome — persistent brand (top left) + sound toggle (top right).
   Both sit under the threshold (z 70 < 80) so they surface with entry. */
.site-brand{position:fixed;top:clamp(14px,2.4vh,26px);left:clamp(16px,2.4vw,30px);z-index:70;
  opacity:0;pointer-events:none;transition:opacity .8s var(--ease)}
.site-brand.on{opacity:1;pointer-events:auto}
.site-brand img{width:clamp(46px,4.5vw,66px);display:block;
  filter:drop-shadow(0 2px 14px rgba(244,238,226,.3))}
.kalaluha-brand{position:fixed;top:clamp(14px,2.4vh,26px);right:clamp(16px,2.4vw,30px);z-index:70;
  opacity:0;pointer-events:none;transition:opacity .8s var(--ease)}
.kalaluha-brand.on{opacity:1}
.kalaluha-brand img{width:clamp(66px,6.6vw,96px);display:block;
  filter:drop-shadow(0 2px 12px rgba(7,13,18,.45))}
/* ── the menu: a glass button mirroring the sound toggle, and a page of
   night listing the chapters. Fixed throughout: no layout impact. ── */
.menu-toggle{position:fixed;bottom:clamp(16px,3vh,30px);left:clamp(16px,2.4vw,30px);z-index:70;
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:1px solid rgba(244,238,226,.25);background:rgba(7,13,18,.32);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  opacity:0;pointer-events:none;
  transition:opacity .6s var(--ease),border-color .2s var(--e-out),background-color .2s var(--e-out),transform .16s var(--e-out)}
.menu-toggle.on{opacity:1;pointer-events:auto}
.menu-toggle:hover{border-color:rgba(201,162,92,.6);background:rgba(12,22,29,.5)}
.menu-toggle:active{transform:scale(.94)}
.mt-bars{display:flex;flex-direction:column;gap:5px}
.mt-bars span{display:block;width:16px;height:1px;background:var(--ivory)}
.menu-overlay{position:fixed;inset:0;z-index:96;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:56px 24px;
  background:rgba(7,13,18,.965);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.menu-overlay.open{opacity:1;visibility:visible}
.menu-close{position:absolute;top:clamp(16px,3vh,28px);right:clamp(16px,2.4vw,30px);
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(244,238,226,.25);background:rgba(7,13,18,.32)}
.menu-close span{position:absolute;left:50%;top:50%;width:16px;height:1px;background:var(--ivory)}
.menu-close span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.menu-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
.menu-close{transition:border-color .2s var(--e-out),transform .16s var(--e-out)}
.menu-close:hover{border-color:rgba(201,162,92,.6)}
.menu-close:active{transform:scale(.94)}
.menu-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,auto));gap:6px clamp(48px,7vw,110px);
  max-height:72vh;overflow-y:auto;scrollbar-width:none}
.menu-list::-webkit-scrollbar{display:none}
.menu-list a{font-family:'Neulis Sans',var(--sans);font-weight:400;color:var(--ivory);
  text-decoration:none;letter-spacing:.02em;
  font-size:clamp(1.05rem,2.3vh,1.35rem);line-height:1.9;transition:color .18s var(--e-out)}
.menu-list a:hover{color:var(--gold)}
.menu-n{color:var(--gold);font-size:.68em;margin-right:14px;letter-spacing:.08em}
.menu-list li{opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.menu-overlay.open .menu-list li{opacity:1;transform:none;transition-delay:calc(var(--i)*.028s)}
.menu-contact{margin:30px 0 0;font-size:12px;letter-spacing:.18em}
.menu-contact a{color:rgba(244,238,226,.6);text-decoration:none;border-bottom:1px solid rgba(201,162,92,.3)}
.menu-contact a:hover{color:var(--ivory)}
body.menu-lock{overflow:hidden}
@media(max-width:900px){
  .menu-list{grid-template-columns:1fr;gap:2px 0;max-height:76vh}
  .menu-list a{font-size:clamp(1.05rem,2.2vh,1.3rem);line-height:1.72}
}
@media(prefers-reduced-motion:reduce){
  .menu-list li{transition:none;opacity:1;transform:none}
}
.sound-toggle{position:fixed;bottom:clamp(16px,3vh,30px);right:clamp(16px,2.4vw,30px);z-index:70;
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ivory);border:1px solid rgba(244,238,226,.25);background:rgba(7,13,18,.32);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  transition:border-color .2s var(--e-out),background-color .2s var(--e-out),transform .16s var(--e-out)}
.sound-toggle:hover{border-color:rgba(201,162,92,.6);background:rgba(12,22,29,.5)}
.sound-toggle:active{transform:scale(.94)}
.sound-toggle svg{width:19px;height:19px;display:block}
.sound-toggle .st-off{display:none}
.sound-toggle.muted .st-on{display:none}
.sound-toggle.muted .st-off{display:block}

/* tuning-peg progress rail */
.rail{position:absolute;right:clamp(14px,2.4vw,30px);top:50%;height:34vh;transform:translateY(-50%);width:2px}
.rail-line{position:absolute;inset:0;width:1px;left:0;background:linear-gradient(transparent,var(--hair) 12%,var(--hair) 88%,transparent)}
.rail-peg{position:absolute;left:-4px;top:0;width:9px;height:9px;border-radius:50%;background:var(--saffron);box-shadow:0 0 12px rgba(228,172,83,.7);transition:transform .3s}
.hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);opacity:0;transition:opacity .8s}
.hint i{display:block;width:1px;height:42px;background:linear-gradient(var(--gold),transparent);animation:cue 2.2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* chapter placeholder */
.tocome{min-height:70vh;display:flex;flex-direction:column;gap:28px;align-items:center;justify-content:center;text-align:center;
  border-top:1px solid var(--hair);padding:80px 24px;
  background:radial-gradient(120% 100% at 50% 32%,#FBF7EE,#EFE6D6 72%)} /* gallery-ivory panel for the colored lockup */
.tocome-lockup{width:min(520px,72vw);height:auto;
  animation:breathe 12s ease-in-out infinite alternate} /* same slow breath as the poster */
.tocome h2{font-size:clamp(1.5rem,2.8vw,2.3rem);color:#1D4A5C;font-weight:400}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .gate{opacity:1}
  .cap,.coda,.coda-lockup img,.coda-lockup p,.coda-lockup .ctas{opacity:1!important;transform:none!important}
}

/* ═══════════ SCENES 16 + 17 · PATRONAGE / THE DIGITAL VALLEY ═══════════
   THE GRID LAW: one twelve column grid in a 1280px wrapper, 32px gutters.
   Every text block starts on a grid line; eyebrow, headline and body in a
   block share one left edge exactly; body measures at most 62ch; vertical
   rhythm on the 8px scale (eyebrow>headline 24, headline>body 32, layers
   96 minimum). Headlines carry a max-width so no line ends on one word. */
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;
  max-width:1280px;margin-inline:auto;width:100%;padding-inline:32px}

/* ── Scene 16 · the patronage: a chapter of night under one pin ── */
.pt{position:relative;background:var(--night)}
.pt-stage{position:relative;height:100vh;overflow:hidden}
.pt-video{position:absolute;inset:0;opacity:.35}
.ptv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1.2s linear}
.ptv.on{opacity:1}
.pt-shade{position:absolute;inset:0;opacity:.6;
  background:linear-gradient(rgba(7,13,18,.9),rgba(7,13,18,.55) 45%,rgba(7,13,18,.9))}
.pt-open{position:absolute;inset:0;z-index:2;display:flex;align-items:center;pointer-events:none}
.pt-block{grid-column:2 / span 9}
.pt-eyebrow{color:var(--saffron);margin-bottom:24px}
.pt-beat{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(2.2rem,4.2vw,3.8rem);line-height:1.14;margin:0;max-width:19ch;
  text-shadow:0 2px 30px rgba(7,13,18,.7)}
.pt-beat + .pt-beat{margin-top:8px}

/* the patron wall: nine panels on one travelling track */
.pt-wall{position:absolute;inset:0;z-index:3;display:flex;align-items:center;
  opacity:0;pointer-events:none}
.pt-track{display:flex;align-items:center;gap:9vw;
  padding-inline:calc(50vw - min(30vw,280px));will-change:transform}
.pt-panel{position:relative;flex:0 0 auto;width:min(60vw,560px);opacity:.55}
.pt-num{position:absolute;left:-6vw;top:50%;transform:translateY(-50%);z-index:0;
  font-family:var(--serif);font-size:18vw;line-height:1;color:transparent;
  -webkit-text-stroke:1px var(--saffron);opacity:.06;pointer-events:none;will-change:transform}
.pt-illu{position:relative;z-index:1;width:clamp(150px,15vw,210px);height:auto;overflow:visible;
  display:block;margin-bottom:32px;will-change:transform}
.pt-illu path{fill:none;stroke:rgba(228,172,83,.85);stroke-width:1;
  stroke-linecap:round;stroke-linejoin:round}
.pt-copy{position:relative;z-index:2}
.pt-name{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(1.9rem,3vw,2.7rem);line-height:1.12;margin:0 0 24px;max-width:16ch}
.pt-line{font-family:var(--serif);font-style:italic;color:rgba(244,238,226,.82);
  font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.65;margin:0;max-width:44ch}

/* the closing: one line and the only ask on the page */
.pt-close{position:absolute;inset:0;z-index:4;display:flex;align-items:center;
  padding-bottom:10vh;opacity:0;pointer-events:none}
.pt-close-block{grid-column:2 / span 10}
.pt-close-line{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(2rem,3.8vw,3.4rem);line-height:1.25;margin:0;max-width:24ch;
  text-shadow:0 2px 30px rgba(7,13,18,.7)}
.pt-cta-row{margin-top:96px;display:flex;flex-wrap:wrap;align-items:center;gap:44px}
.pt-cta{display:inline-block;padding:16px 34px;border:1px solid rgba(228,172,83,.55);
  border-radius:999px;color:var(--ivory);font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  transition:background-color .2s var(--e-out),border-color .2s var(--e-out),transform .16s var(--e-out)}
.pt-cta:active{transform:scale(.97)}
.pt-cta:hover{background:rgba(228,172,83,.16)}
.pt-cta2{color:var(--saffron);font-family:var(--serif);font-style:italic;
  font-size:1.1rem;text-decoration:none;border-bottom:1px solid rgba(228,172,83,.35);
  padding-bottom:2px;transition:color .2s var(--e-out),border-color .2s var(--e-out)}
.pt-cta2:active{opacity:.75}

/* ── Scene 17 · the digital valley: the ecosystem on ivory ── */
.dv{padding:clamp(96px,13vh,152px) 0 0}
.dv-block{grid-column:2 / span 8}
.dv-block .hz-eyebrow{margin-bottom:24px}
.dv-headline{font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:clamp(2.1rem,3.6vw,3.2rem);line-height:1.14;margin:0 0 32px;max-width:24ch}
  /* 24ch: never a one-word last line */
.dv-body{color:rgba(34,27,16,.74);font-weight:300;font-size:clamp(1rem,1.2vw,1.1rem);
  line-height:1.8;margin:0;max-width:62ch}

/* the film: three layers, three speeds */
.dv-film{position:relative;height:90vh;margin:96px 0 0;overflow:hidden;background:var(--night)}
.dv-film-bg{position:absolute;inset:0;margin:0}
.dv-film-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;
  transform:scale(1.06);transform-origin:50% 24%;will-change:transform}
.dv-film-shade{position:absolute;inset:0;
  background:linear-gradient(rgba(7,13,18,.5),rgba(7,13,18,.16) 45%,rgba(7,13,18,.55))}
.dv-film-ui{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:24px;will-change:transform;transition:opacity .6s var(--ease)}
.dv-film-ui.off{opacity:0;pointer-events:none}
.dv-play{width:72px;height:72px;background:none;border:0;padding:0;cursor:pointer}
.dv-play svg{width:72px;height:72px;overflow:visible;display:block}
.dv-play circle{stroke:rgba(228,172,83,.9);stroke-width:1;fill:none;
  transform-box:fill-box;transform-origin:center;animation:dvBreath 4s ease-in-out infinite}
.dv-play path{stroke:rgba(244,238,226,.95);stroke-width:1;fill:none}
@keyframes dvBreath{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.07);opacity:1}}
.dv-cue{font-family:var(--serif);font-style:italic;color:rgba(244,238,226,.92);
  font-size:1.15rem;margin:0;text-shadow:0 2px 22px rgba(7,13,18,.7)}
.dv-frame{position:absolute;inset:0;z-index:4;opacity:0;transition:opacity .6s var(--ease)}
.dv-frame.on{opacity:1}
.dv-frame iframe{width:100%;height:100%;border:0;display:block}
.dv-close-x[hidden]{display:none}
.dv-close-x{position:absolute;top:22px;right:22px;z-index:5;width:40px;height:40px;
  background:rgba(7,13,18,.55);border:1px solid var(--hair);border-radius:999px;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.dv-close-x svg{width:14px;height:14px}
.dv-close-x path{stroke:var(--ivory);stroke-width:1.4;fill:none}

/* continue listening: words before icons */
.dv-listen{padding:96px 0 clamp(120px,16vh,190px)}
.dv-listen-block{grid-column:2 / span 10}
.dv-listen-rule{height:1px;background:var(--hair);transform:scaleX(0);
  transform-origin:left;margin-bottom:32px}
.dv-listen-row{display:flex;flex-wrap:wrap;align-items:baseline;
  column-gap:clamp(28px,3.4vw,54px);row-gap:14px}
.dv-listen-label{font-family:var(--serif);font-style:italic;color:rgba(34,27,16,.8);
  font-size:clamp(1.15rem,1.5vw,1.4rem)}
.dv-listen-label .arr{font-style:normal;color:var(--gold-ink)}
.dv-link{position:relative;color:var(--ink);text-decoration:none;
  font-size:clamp(1rem,1.15vw,1.1rem);letter-spacing:.04em;display:inline-flex;
  align-items:center;gap:8px;border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease)}
.dv-link:hover{border-bottom-color:var(--hair)}
.dv-link svg{width:16px;height:16px;opacity:0;transition:opacity .35s var(--ease)}
.dv-link:hover svg{opacity:1}
.dv-link svg path,.dv-link svg circle,.dv-link svg rect{fill:none;
  stroke:var(--gold-ink);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.dv-micro{font-family:var(--serif);font-style:italic;color:rgba(34,27,16,.62);
  font-size:1.02rem;margin:32px 0 0}
.dv-leaf{position:absolute;top:3%;left:58%;width:56px;height:56px;z-index:1;
  pointer-events:none;will-change:transform}
.dv-leaf path{fill:none;stroke:rgba(192,90,30,.5);stroke-width:1}

@media(max-width:900px){
  .grid12{padding-inline:22px;column-gap:20px}
  .pt-block,.pt-close-block,.dv-block,.dv-listen-block{grid-column:1 / -1}
  .pt-stage{height:auto;overflow:visible;padding:96px 0}
  /* the parents must be LIT on mobile: desktop's pinned timeline owns
     their opacity, but that timeline never runs below 900px, so at 0 they
     were invisible blocks holding space (the CSR-to-Property blank,
     2026-07-23) with untappable CTAs */
  .pt-open,.pt-close{position:relative;inset:auto;pointer-events:auto;opacity:1}
  .pt-wall{position:relative;inset:auto;opacity:1;margin-top:96px}
  .pt-track{display:block;padding-inline:0}
  .pt-panel{width:auto;margin:0 0 96px;padding:0 22px}
  .pt-num{left:auto;right:0;font-size:34vw}
  .pt-close{margin-top:24px}
  .pt-cta-row{margin-top:56px;gap:26px}
  .dv-film{height:72vh;margin-top:64px}
  .dv-film-bg img{object-position:64% 24%}   /* the maestro sits right of the
     source's centre; the window follows him so he stands centred on a phone */
  .dv-listen{padding:64px 0 110px}
}

@media(prefers-reduced-motion:reduce){
  .ptv{transition:none}
  .pt-wall{position:relative;inset:auto;opacity:1;margin:64px 0}
  .pt-track{display:block;padding-inline:0}
  .pt-panel{width:auto;margin:0 auto 96px;opacity:1;max-width:640px}
  .pt-open,.pt-close{position:relative;inset:auto;opacity:1;pointer-events:auto}
  .pt-stage{height:auto;overflow:visible;padding:96px 0}
  .dv-play circle{animation:none}
  .dv-film-bg img{transform:none}
  .dv-listen-rule{transform:scaleX(1)}
}

/* ═══════════ SCENE 16B · THE STRUCTURE OF PATRONAGE ═══════════
   The deck rendered as cinema: seven blocks of night under the grid law,
   an oversized stroke numeral drifting behind each unpinned block. */
/* the structure chapter rises over the patronage wall's exit, beneath
   its held closing frame (2026-07-23) */
.sb{position:relative;z-index:2;margin-top:-32vh;background:var(--night);color:var(--ivory);overflow:hidden}
.sb-block{position:relative;padding:clamp(110px,16vh,190px) 0}
.sb-orn{position:absolute;right:4vw;top:10%;z-index:0;font-family:var(--serif);
  font-size:26vw;line-height:1;color:transparent;-webkit-text-stroke:1px var(--saffron);
  opacity:.05;pointer-events:none;will-change:transform}
.sb-head{grid-column:2 / span 8;position:relative;z-index:1}
.sb-eyebrow{color:var(--saffron);margin-bottom:24px}
.sb-headline{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(2rem,3.4vw,3rem);line-height:1.14;margin:0;max-width:22ch}
.sb-body{color:rgba(244,238,226,.72);font-weight:300;font-size:clamp(1rem,1.2vw,1.1rem);
  line-height:1.8;margin:32px 0 0;max-width:62ch}

/* block 1: five ruled rows, rules drawing left to right */
.sb-rows{list-style:none;grid-column:2 / span 10;margin:96px 0 0;padding:0;
  position:relative;z-index:1}
.sb-rows li{position:relative;padding:30px 2px;display:grid;
  grid-template-columns:minmax(220px,3fr) 7fr;column-gap:32px;align-items:baseline}
.sb-row-t{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(1.3rem,1.9vw,1.7rem);margin:0}
.sb-row-l{color:rgba(244,238,226,.68);font-weight:300;
  font-size:clamp(.95rem,1.1vw,1.02rem);line-height:1.7;margin:0;max-width:62ch}
.sb-rule{position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(201,162,92,.35);transform:scaleX(0);transform-origin:left}

/* block 2: the room */
.sb-segs{list-style:none;grid-column:2 / span 10;margin:96px 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;column-gap:32px;position:relative;z-index:1}
.sb-segs li{padding:22px 2px;border-bottom:1px solid rgba(201,162,92,.22);
  font-family:var(--serif);color:rgba(244,238,226,.9);
  font-size:clamp(1.1rem,1.5vw,1.35rem)}
.sb-promise{grid-column:2 / span 10;margin-top:96px;position:relative;z-index:1;
  padding:40px clamp(24px,3vw,48px);text-align:center}
.sb-promise::before,.sb-promise::after{content:'';position:absolute;left:0;right:0;
  height:1px;background:rgba(201,162,92,.35);transform:scaleX(0);transform-origin:center}
.sb-promise::before{top:0}
.sb-promise::after{bottom:0}
.sb-promise.drawn::before,.sb-promise.drawn::after{transform:scaleX(1);
  transition:transform 1.4s var(--ease)}
.sb-promise p{font-family:var(--serif);font-style:italic;color:rgba(244,238,226,.88);
  font-size:clamp(1.2rem,1.8vw,1.6rem);line-height:1.5;margin:0}
.sb-scale{grid-column:2 / span 10;margin:96px 0 0;text-align:center;position:relative;z-index:1;
  font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.5}
.sb-scale .n{color:var(--saffron);will-change:filter}

/* block 3: the reach ledger (pinned). Redesigned 2026-07-17: the old
   scattered constellation read as clutter on both breakpoints; the six
   sources now sit in a ruled three-column ledger under the total — the
   same print language as the plate key and the 12-column law. */
.sb-reach{position:relative;background:var(--night)}
.sb-reach-stage{position:relative;height:100vh;overflow:hidden;display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(40px,7vh,72px);padding:0 6vw}
.sb-reach-stage::before{content:'';position:absolute;inset:0;
  background:radial-gradient(52% 42% at 50% 32%,rgba(228,172,83,.09),transparent 70%)}
.sb-total{position:relative;z-index:2;text-align:center;max-width:min(720px,80vw)}
.sb-total-num{font-family:'Neulis Sans',var(--sans);font-weight:500;color:var(--ivory);
  font-size:clamp(3rem,6.4vw,5.5rem);line-height:1.05;will-change:filter}
.sb-total-num.shimmer{background:linear-gradient(100deg,var(--ivory) 30%,var(--saffron) 50%,var(--ivory) 70%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sbShimmer 1.6s var(--ease) 1}
@keyframes sbShimmer{from{background-position:120% 0}to{background-position:-60% 0}}
.sb-total-label{margin-top:20px;color:var(--saffron);font-family:'Neulis Sans',var(--sans);font-size:12px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase}
/* the ledger: one hairline shelf, six ruled cells, gold numerals */
.sb-sats{position:relative;z-index:1;display:grid;
  grid-template-columns:repeat(3,1fr);column-gap:32px;row-gap:clamp(32px,5vh,48px);
  width:min(1080px,100%);border-top:1px solid rgba(201,162,92,.22);
  padding-top:clamp(28px,4.5vh,46px)}
.sb-sat{position:relative;opacity:0;will-change:transform,opacity;
  border-left:1px solid rgba(201,162,92,.22);padding-left:clamp(14px,1.4vw,20px)}
.sb-sat-n{display:block;font-family:'Neulis Sans',var(--sans);color:var(--gold);
  font-size:.95rem;margin-bottom:10px}
.sb-sat-t{color:rgba(244,238,226,.62);font-family:'Neulis Sans',var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;margin:0 0 10px}
.sb-sat-v{font-family:'Neulis Sans',var(--sans);font-weight:500;color:var(--ivory);
  font-size:clamp(1.2rem,1.7vw,1.6rem);margin:0}

/* block 4: the 120 day arc (pinned) */
.sb-arc{position:relative}
.sb-arc-stage{position:relative;height:100vh;overflow:hidden;display:flex;
  flex-direction:column;justify-content:center;gap:64px}
.sb-arc-head{padding-top:0}
.sb-arc-line{font-family:var(--serif);font-style:italic;color:rgba(244,238,226,.8);
  font-size:clamp(1.05rem,1.5vw,1.35rem);margin:24px 0 0;max-width:52ch}
.sb-arc-rail{position:relative;height:44vh;min-height:300px}
.sb-arc-goldline{position:absolute;left:0;top:34%;height:1.5px;width:100%;
  background:linear-gradient(90deg,rgba(228,172,83,.95),rgba(228,172,83,.55));
  transform:scaleX(0);transform-origin:left;
  filter:drop-shadow(0 0 6px rgba(228,172,83,.5))}
.sb-arc-stations{position:absolute;inset:0}
.sb-station{position:absolute;top:34%;width:min(240px,17vw);opacity:.25;
  transform:translateX(-50%)}
.sb-st-dot{position:absolute;top:0;left:0;width:9px;height:9px;border-radius:50%;
  transform:translate(-50%,-50%);background:#0B1218;border:1px solid rgba(228,172,83,.95)}
.sb-st-num{position:absolute;left:-.4em;top:-15vh;font-family:var(--serif);font-size:10vw;
  line-height:1;color:transparent;-webkit-text-stroke:1px var(--saffron);opacity:.12;
  pointer-events:none;will-change:transform}
.sb-st-t{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(1.15rem,1.6vw,1.45rem);margin:26px 0 12px}
.sb-st-l{color:rgba(244,238,226,.68);font-weight:300;
  font-size:clamp(.85rem,.95vw,.95rem);line-height:1.65;margin:0}

/* block 5: the seven ownable tiers */
.sb-tierlist{list-style:none;grid-column:2 / span 10;margin:96px 0 0;padding:0;
  position:relative;z-index:1}
.sb-tier{position:relative;border-top:1px solid rgba(201,162,92,.25);cursor:pointer}
.sb-tier:last-child{border-bottom:1px solid rgba(201,162,92,.25)}
.sb-tier-head{display:grid;grid-template-columns:64px 1fr auto;column-gap:32px;
  align-items:baseline;padding:34px 2px}
.sb-tier-n{font-family:var(--serif);font-size:1.15rem;color:transparent;
  -webkit-text-stroke:1px rgba(228,172,83,.75)}
.sb-tier.open .sb-tier-n,.sb-tier:hover .sb-tier-n{
  background:linear-gradient(120deg,var(--saffron),var(--chinar));
  -webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0;color:transparent}
.sb-tier-t{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(1.5rem,2.4vw,2.1rem);margin:0}
.sb-tier-o{font-family:var(--serif);font-style:italic;color:rgba(244,238,226,.62);
  font-size:clamp(.95rem,1.2vw,1.1rem);margin:0;text-align:right}
.sb-tier-body{height:0;overflow:hidden;transition:height .7s var(--ease)}
.sb-tier.open .sb-tier-body{height:var(--tierBodyH,340px)}
.sb-tier-inner{display:grid;grid-template-columns:7fr 3fr auto;column-gap:32px;
  align-items:center;padding:0 2px 34px 96px}
.sb-tier-d{list-style:none;margin:0;padding:0}
.sb-tier-d li{position:relative;color:rgba(244,238,226,.75);font-weight:300;
  font-size:clamp(.92rem,1.05vw,1rem);line-height:1.6;padding:5px 0 5px 20px}
.sb-tier-d li::before{content:'';position:absolute;left:0;top:.95em;width:9px;height:1px;
  background:var(--saffron)}
.sb-tier-strip{height:88px;overflow:hidden;border:1px solid rgba(201,162,92,.25)}
.sb-tier-strip img{width:100%;height:100%;object-fit:cover;opacity:.85}
.sb-tier-pill{position:relative;display:inline-block;padding:13px 26px;
  border:1px solid rgba(228,172,83,.55);border-radius:999px;color:var(--ivory);
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;will-change:transform;
  transition:background .4s var(--ease)}
.sb-tier-pill:hover{background:rgba(228,172,83,.15)}

/* block 6: six quiet cards, two counter-parallax columns */
.sb-cards{grid-column:2 / span 10;margin-top:96px;display:grid;
  grid-template-columns:1fr 1fr;column-gap:32px;position:relative;z-index:1}
.sb-col{display:flex;flex-direction:column;gap:32px;will-change:transform}
.sb-card{border-top:1px solid rgba(201,162,92,.3);padding:26px 2px 8px}
.sb-card-t{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(1.25rem,1.8vw,1.6rem);margin:0 0 12px}
.sb-card-l{color:rgba(244,238,226,.68);font-weight:300;
  font-size:clamp(.95rem,1.05vw,1rem);line-height:1.7;margin:0;max-width:62ch}

/* block 7: first movers and the ask */
.sb-movers-inner{grid-column:2 / span 9;position:relative;z-index:1}
.sb-movers-line{font-family:var(--serif);font-style:italic;color:rgba(244,238,226,.9);
  font-size:clamp(1.3rem,2.1vw,1.85rem);line-height:1.55;margin:0;max-width:34ch}
.sb-cta-row{margin-top:96px;display:flex;flex-wrap:wrap;align-items:center;gap:44px}
.sb-micro{margin:96px 0 0;color:rgba(244,238,226,.5);font-size:12px;
  letter-spacing:.14em;font-weight:300}

@media(max-width:900px){
  .sb-head,.sb-rows,.sb-segs,.sb-promise,.sb-scale,.sb-tierlist,.sb-cards,.sb-movers-inner{grid-column:1 / -1}
  .sb-rows li{grid-template-columns:1fr;row-gap:8px}
  .sb-segs{grid-template-columns:1fr}
  .sb-reach-stage{height:auto;min-height:0;padding:110px 22px;flex-direction:column;gap:44px}
  .sb-sats{grid-template-columns:1fr 1fr;column-gap:22px}
  .sb-sat{opacity:1}
  .sb-arc-stage{height:auto;gap:44px;padding:110px 0}
  .sb-arc-rail{height:auto;min-height:0;padding-left:22px}
  .sb-arc-goldline{left:26px;right:auto;top:0;bottom:0;width:1.5px;height:100%;
    transform:scaleY(0);transform-origin:top;
    background:linear-gradient(rgba(228,172,83,.95),rgba(228,172,83,.55))}
  .sb-arc-stations{position:relative;inset:auto;display:flex;flex-direction:column;gap:56px;
    padding-left:34px}
  .sb-station{position:relative;top:auto;width:auto;transform:none}
  .sb-st-dot{left:-34px;top:8px;transform:translate(-50%,0)}
  .sb-st-num{position:absolute;left:auto;right:0;top:-10px;font-size:22vw}
  .sb-tier-head{grid-template-columns:44px 1fr;row-gap:6px}
  .sb-tier-o{grid-column:2;text-align:left}
  .sb-tier-inner{grid-template-columns:1fr;row-gap:22px;padding-left:44px}
  .sb-cards{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .sb-rule{transform:scaleX(1)}
  .sb-promise::before,.sb-promise::after{transform:scaleX(1)}
  .sb-arc-goldline{transform:scaleX(1) scaleY(1)}
  .sb-station,.sb-sat{opacity:1}
  .sb-reach-stage,.sb-arc-stage{height:auto;padding:110px 0}
  .sb-tier .sb-tier-body{height:auto;max-height:none}
  .sb-total-num{filter:none}
}

/* ═══════════ SCENES 18 + 19 + 20 · INVITATION / VAULT / FINAL FRAME ═ */

/* shared form language: transparent inputs, gold underlines, eyebrow labels */
.fld{margin:24px 0 0;text-align:left}
.fld-label{display:block;color:var(--saffron);font-size:10px;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;margin-bottom:8px}
.fld-input{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(201,162,92,.5);
  color:inherit;font-family:var(--serif);font-size:1.1rem;padding:8px 2px;outline:none;
  transition:border-color .4s var(--ease)}
.fld-input:focus{border-bottom-color:var(--saffron)}
.fld.err .fld-input{border-bottom-color:var(--chinar)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}


/* ── Scene 19 · the vault ── */
.va{position:relative;background:var(--night);color:var(--ivory);overflow:hidden;
  padding:clamp(110px,15vh,180px) 0}
.va-head{grid-column:2 / span 8}
.va-eyebrow{color:var(--saffron);margin-bottom:24px}
.va-headline{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(2.2rem,3.8vw,3.4rem);line-height:1.12;margin:0 0 32px;max-width:20ch}
.va-statement{font-family:var(--serif);font-style:italic;color:rgba(244,238,226,.85);
  font-size:clamp(1.15rem,1.7vw,1.5rem);margin:0 0 32px}
.va-body{color:rgba(244,238,226,.7);font-weight:300;font-size:clamp(1rem,1.15vw,1.08rem);
  line-height:1.8;margin:0;max-width:62ch}
.va-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:32px;
  max-width:1280px;margin:96px auto 0;padding-inline:32px}
.va-col{display:flex;flex-direction:column;gap:32px;will-change:transform}
.va-tile{position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid rgba(201,162,92,.25)}
.va-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);will-change:transform;transition:transform .8s var(--ease)}
.va-tile.sealed img{opacity:.85}
.va-tile.sealed::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(7,13,18,.14),rgba(7,13,18,.42))}
.va-tile:hover img{transform:scale(1)}
.va-label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px;
  background:linear-gradient(transparent,rgba(7,13,18,.82));will-change:transform}
.va-label-t{font-family:var(--serif);font-weight:500;color:rgba(244,238,226,.85);
  font-size:clamp(1.15rem,1.5vw,1.4rem);margin:0;transition:color .5s var(--ease)}
.va-label-l{font-family:var(--serif);font-style:italic;color:rgba(244,238,226,.6);
  font-size:.98rem;margin:6px 0 0;transition:color .5s var(--ease)}
.va-tile:hover .va-label-t{color:var(--ivory)}
.va-tile:hover .va-label-l{color:rgba(244,238,226,.85)}
.va-seal{position:absolute;top:50%;left:50%;z-index:2;width:72px;height:72px;
  transform:translate(-50%,-62%)}
.va-seal circle{fill:none;stroke:rgba(228,172,83,.9);stroke-width:1}
.va-seal path{fill:none;stroke:rgba(228,172,83,.9);stroke-width:1;stroke-linecap:round}
.va-micro{position:absolute;left:0;right:0;bottom:74px;z-index:2;text-align:center;
  font-family:var(--serif);font-style:italic;color:rgba(244,238,226,.55);
  font-size:.9rem;margin:0}
.va-cta{grid-column:2 / span 9;margin-top:120px;position:relative}
/* the forms float over what follows instead of reserving room in the flow:
   the document height cannot change (frozen positions), and no envelope of
   blank space is needed to guarantee it */
.va-form,.va-success{position:absolute;top:calc(100% + 14px);left:0;z-index:6;
  width:min(520px,100%)}
.va-form{background:rgba(7,13,18,.97);border:1px solid rgba(201,162,92,.28);
  border-radius:16px;padding:26px 22px}
.va-success{background:rgba(7,13,18,.97);border:1px solid rgba(201,162,92,.28);
  border-radius:16px;padding:20px 22px}
.va-cta-line{font-family:var(--serif);color:rgba(244,238,226,.85);
  font-size:clamp(1.1rem,1.5vw,1.3rem);margin:0 0 16px;max-width:62ch}
.va-cta-micro{font-family:var(--serif);font-style:italic;color:rgba(244,238,226,.6);
  font-size:1rem;margin:0 0 40px}
.va-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:36px}
.va-pill{cursor:pointer;background:none}
.va-notify-link{cursor:pointer;background:none;border-bottom-color:rgba(228,172,83,.35)}
.va-form{max-width:520px;overflow:hidden;max-height:0;transition:max-height .5s var(--ease)}
.va-form.open{max-height:520px}
.va-form .pt-cta{margin-top:36px;cursor:pointer;background:none}
.va-success{font-family:var(--serif);font-style:italic;color:var(--saffron);
  font-size:1.15rem;margin:36px 0 0}
.va-contact{margin-top:96px;color:rgba(244,238,226,.7);font-size:.95rem;line-height:2}
.va-contact a{color:rgba(244,238,226,.85);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease)}
.va-contact a:hover{border-bottom-color:var(--saffron)}
.va-closing{grid-column:2 / span 9;margin:120px 0 0;font-family:var(--serif);
  font-style:italic;color:rgba(244,238,226,.8);font-size:clamp(1.15rem,1.6vw,1.4rem)}

/* ── Scene 20 · the final frame ── */
.fin{position:relative;background:#000;color:var(--ivory)}
.fin-stage{position:relative;height:100vh;overflow:hidden}
#finCanvas{position:absolute;inset:0;width:100%;height:100%}
.fin-msg{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:0 8vw;opacity:0;pointer-events:none}
/* the seq frame itself stays LIT: its lines each rise from 0 on the
   timeline, and a parent held at 0 would black them all out (shipped
   bug 2026-07-17: the five closing beats never appeared in real scroll) */
.fin-seq{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:0 8vw;pointer-events:none}
.fin-msg p{font-family:var(--serif);font-weight:400;color:var(--ivory);
  font-size:clamp(1.6rem,2.8vw,2.5rem);line-height:1.55;max-width:34ch;margin:0}
.fin-seq-line{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;opacity:0;font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(2rem,4vw,3.6rem)}
.fin-seq-lockup{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0}
.fin-seq-lockup img{width:min(420px,70vw);display:block}
/* the gloam: two warm pools so the closing frame is never bare black */
.fin-glow{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(46% 40% at 50% 54%,rgba(228,172,83,.11),transparent 70%),
             radial-gradient(120% 80% at 50% 118%,rgba(192,90,30,.09),transparent 62%)}
.fin-ctas{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(36px,6vh,56px);opacity:0;pointer-events:none;
  padding:0 6vw 10vh}   /* the cluster rides slightly high: the pathways rise beneath it */
.fin-crest{width:min(210px,42vw);display:block;opacity:.92}
.fin-cta-row{display:flex;gap:44px;flex-wrap:wrap;justify-content:center}
.fin-ctas.live{pointer-events:auto}
/* the pathways OVERLAP the stage's lower third: the empty black under the
   invitations never gets screen time, and the black-to-night gradient
   dissolves the seam that used to cut across the exit (client 2026-07-23) */
.fin-paths{position:relative;z-index:2;margin-top:-36vh;
  background:linear-gradient(180deg,#000 0%,var(--night) 46%);
  padding:clamp(110px,15vh,180px) 0 clamp(64px,9vh,100px)}
.fin-path{grid-column:2 / span 5;position:relative}
.fin-path + .fin-path{grid-column:7 / span 5}
.fin-path .hz-eyebrow{color:var(--saffron);margin-bottom:24px}
.fin-path-t{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(1.5rem,2.3vw,2rem);margin:0 0 32px}
.fin-path ul{list-style:none;margin:0;padding:0}
.fin-path li{position:relative;padding:15px 2px;color:rgba(244,238,226,.78);
  font-weight:300;font-size:clamp(.98rem,1.1vw,1.05rem);
  transition:transform .4s var(--ease)}
.fin-path li{transition:transform .22s var(--e-out)}
.fin-path li:hover{transform:translateX(4px)}
.fin-rule{position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(201,162,92,.28);transform:scaleX(0);transform-origin:left;
  transition:background .4s var(--ease)}
.fin-path li:hover .fin-rule{background:rgba(228,172,83,.7)}
.fin-outlive{grid-column:2 / span 10;margin:84px 0 0;font-family:var(--serif);
  font-style:italic;color:rgba(244,238,226,.62);font-size:clamp(1rem,1.3vw,1.2rem);
  line-height:1.7;max-width:62ch}

/* ── about and contact: the journey in one paragraph, a note that
   reaches the valley. Night, ruled in low gold, below every pin. ── */
.ctc{position:relative;background:var(--night);padding:clamp(100px,14vh,160px) 0 clamp(80px,11vh,130px);
  border-top:1px solid rgba(201,162,92,.14)}
.ctc-about{grid-column:2 / span 5}
.ctc-eyebrow{color:var(--saffron)}
.ctc-headline{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.2;margin:0 0 22px;text-wrap:balance}
.ctc-body{color:rgba(244,238,226,.78);font-weight:300;font-size:clamp(.98rem,1.1vw,1.05rem);
  line-height:1.8;margin:0 0 26px;max-width:62ch}
.ctc-mail{margin:0;font-size:.98rem}
.ctc-mail a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(201,162,92,.4)}
.ctc-mail a:hover{border-bottom-color:var(--gold)}
.ctc-phone{color:rgba(244,238,226,.6)}
.ctc-form{grid-column:8 / span 4}
.ctc-write{font-family:var(--serif);font-style:italic;color:rgba(244,238,226,.85);
  font-size:clamp(1.1rem,1.4vw,1.3rem);margin:0}
.ctc-msg{resize:none;line-height:1.6}
.ctc-send{margin-top:34px;cursor:pointer;background:none}
.ctc-success{color:var(--saffron);font-family:var(--serif);font-style:italic;margin:22px 0 0}
@media(max-width:900px){
  .ctc-about,.ctc-form{grid-column:1 / -1}
  .ctc-form{margin-top:56px}
}

/* ── the footer ── */
.ftr{background:var(--night);padding:0 0 44px}
.ftr-contact{grid-column:2 / span 10;text-align:center;color:rgba(244,238,226,.7);
  font-size:.95rem;line-height:2;padding:64px 0 40px}
.ftr-contact a{color:rgba(244,238,226,.85);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .2s var(--e-out)}
.ftr-contact a:hover{border-bottom-color:var(--saffron)}
.ftr-credit{grid-column:2 / span 10;border-top:1px solid rgba(201,162,92,.15);
  padding-top:24px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:8px 24px;font-size:11px;letter-spacing:.08em;color:rgba(244,238,226,.45);
  font-family:var(--sans)}
.ftr-credit a{color:rgba(244,238,226,.45);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.ftr-credit a:hover{color:rgba(244,238,226,.8);border-bottom-color:var(--gold)}
.ftr-credit .dot{color:var(--gold)}

@media(max-width:900px){
  .va-grid{grid-template-columns:1fr 1fr;column-gap:20px;padding-inline:22px}
  .va-col:nth-child(3){display:contents}
  .fin-path{grid-column:1 / -1}
  .fin-path + .fin-path{grid-column:1 / -1;margin-top:64px}
  .fin-ctas{gap:28px}
  .fin-paths{padding:72px 0 48px}
  .fin-outlive{margin-top:48px}
  .fin-rule{transform:scaleX(1)}
  .fin-cta-row{flex-direction:column;gap:22px}
  .ftr-credit{flex-direction:column;align-items:center;gap:10px;text-align:center}
}

@media(prefers-reduced-motion:reduce){
  .va-tile img{transform:scale(1)}
  .va-form{max-height:none}
  .fin-stage{height:auto}
  #finCanvas{display:none}
  .fin-msg,.fin-seq,.fin-ctas{position:relative;inset:auto;opacity:1;pointer-events:auto;
    padding:44px 6vw}
  .fin-seq-line,.fin-seq-lockup{position:relative;inset:auto;opacity:1;padding:22px 0}
  .fin-rule{transform:scaleX(1)}
}