/* =========================================================================
   CHALET — Alpine Villa Atelier
   Palette: deep forest / moss / lichen / bone / lit-window amber
   ========================================================================= */

:root{
  /* ---- Deep Frost -------------------------------------------------------
     Near-black grounds carrying a cyan-green bias, so the neutrals belong to
     the accent rather than sitting under it. Ice does the talking; ember is
     spent only where we want a click. */
  --ground:#05090A;
  --surface:#0B1214;
  --raised:#121C1E;
  --sunk:#1B2C2E;

  --ice:#9DB8B4;
  --ice-dim:#6F8A87;
  --ember:#C0703A;
  --ember-deep:#9C5628;

  --text:#E6E9E7;
  --muted:rgba(230,233,231,.60);
  --hair:rgba(157,184,180,.17);
  --hair-soft:rgba(157,184,180,.10);

  /* aliases kept so component rules read in their own vocabulary */
  --ink:var(--ground);
  --ink-2:var(--surface);
  --ink-3:var(--raised);
  --moss:var(--sunk);
  --lichen:var(--ice);
  --stone:var(--ice-dim);
  --bone:var(--text);
  --amber:var(--ember);
  --amber-deep:var(--ember-deep);
  --fg:var(--text);

  --display:'Rule Dash','Bodoni Moda','Didot','Times New Roman',serif;
  --body:'Manrope','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --serif:'Bodoni Moda','Didot',Georgia,serif;

  --shell:min(1120px, 100% - 13vw);
  --gut:max(24px,5vw);
  --r:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:76px;
  --hud-h:74px;   /* the stage read-out sits in this band; beats keep clear of it */

  /* every stock photo passes through the same grade so the set reads as one shoot */
  --grade:saturate(.5) contrast(1.08) brightness(.86);
  --grade-hover:saturate(.78) contrast(1.03) brightness(.98);
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html,body{ margin:0; }
body{
  background:var(--ground);
  color:var(--fg);
  font-family:var(--body);
  font-weight:300;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; height:100vh; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--amber); color:var(--ink); }

.shell{ width:var(--shell); margin-inline:auto; }
section[id]{ scroll-margin-top:calc(var(--nav-h) + 18px); }

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--lichen); margin:0 0 32px;
}
.eyebrow--light{ color:rgba(255,255,255,.78); }
.h2{
  font-family:var(--display); font-weight:800; letter-spacing:.002em; line-height:.98;
  font-size:clamp(1.65rem,2.9vw,2.55rem); margin:0 0 clamp(54px,7vw,104px); max-width:20ch;
}
.h2--sm{ font-size:clamp(1.4rem,2.2vw,1.95rem); }
.rule{ display:block; width:100%; height:1px; background:rgba(241,237,228,.28); margin:22px 0 24px; }

/* ---------- buttons ---------- */
.btn{
  --bg:transparent; --bd:rgba(241,237,228,.42); --tx:var(--bone);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 30px; border-radius:999px; border:1px solid var(--bd); background:var(--bg); color:var(--tx);
  font-family:var(--body); font-size:.86rem; font-weight:500; letter-spacing:.03em; cursor:pointer;
  overflow:hidden; isolation:isolate; transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn span{ position:relative; z-index:2; }
.btn::after{
  content:''; position:absolute; inset:0; z-index:1; background:var(--bone);
  transform:translateY(101%); border-radius:inherit; transition:transform .5s var(--ease-out);
}
.btn:hover::after{ transform:translateY(0); }
.btn:hover{ color:var(--ink); border-color:var(--bone); }
.btn--solid{ --bg:var(--bone); --bd:var(--bone); --tx:var(--ink); }
.btn--solid::after{ background:var(--amber); }
.btn--solid:hover{ color:var(--ink); }
.btn--sm{ padding:11px 22px; font-size:.8rem; }
.btn--block{ width:100%; }

.link-more{
  display:inline-flex; align-items:center; gap:14px; font-family:var(--mono);
  font-size:11px; letter-spacing:.24em; padding:4px 0; position:relative;
}
.link-more i{ width:34px; height:1px; background:currentColor; transition:width .45s var(--ease-out); }
.link-more:hover i{ width:56px; }
.link-more::before{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:currentColor;
  transition:width .5s var(--ease-out);
}
.link-more:hover::before{ width:calc(100% - 46px); }

/* ---------- glass ---------- */
.glass{
  background:linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.05) 46%, rgba(255,255,255,.09));
  backdrop-filter:blur(22px) saturate(1.25);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid rgba(255,255,255,.20);
  border-radius:var(--r);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.22);
}
.glass--soft{
  background:linear-gradient(160deg, rgba(8,14,16,.42), rgba(8,14,16,.20));
  border-color:rgba(255,255,255,.16);
}

/* =========================================================================
   SCROLL PROGRESS + LOADER
   ========================================================================= */
.scroll-rail{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120; background:rgba(255,255,255,.07); }
.scroll-rail span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--lichen),var(--amber)); }

.loader{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:grid; place-items:center; transition:opacity .8s var(--ease), visibility .8s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ width:min(420px,80vw); text-align:center; }
.loader__mark svg{ width:64px; height:44px; margin:0 auto 26px; fill:none; stroke:var(--lichen); stroke-width:2.2; stroke-linejoin:round; }
.loader__mark path{ stroke-dasharray:120; stroke-dashoffset:120; animation:draw 1.6s var(--ease-out) forwards; }
.loader__mark .lm-body{ animation-delay:.25s; }
.loader__mark .lm-door{ animation-delay:.5s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.loader__label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; color:var(--muted); margin:0 0 18px; }
.loader__bar{ height:2px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:0; background:var(--amber); transition:width .3s linear; }
.loader__pct{ font-family:var(--mono); font-size:11px; color:var(--lichen); margin:14px 0 0; letter-spacing:.1em; }
.loader__hint{ display:block; font-size:10px; letter-spacing:.24em; color:rgba(241,237,228,.34); margin-top:8px; text-transform:uppercase; }

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center; gap:24px; padding:0 max(22px,4.5vw);
  transition:transform .55s var(--ease), background .5s var(--ease), backdrop-filter .5s;
}
.nav.is-stuck{
  background:linear-gradient(180deg, rgba(11,20,16,.86), rgba(11,20,16,.55));
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav.is-hidden{ transform:translateY(-104%); }
.nav__logo{ display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:800; letter-spacing:.14em; font-size:.95rem; }
.nav__logomark{ width:26px; height:18px; fill:none; stroke:var(--amber); stroke-width:2.6; stroke-linejoin:round; }
.nav__links{ display:flex; gap:30px; margin-left:auto; }
.nav__links a{
  font-size:.85rem; color:rgba(241,237,228,.76); position:relative; padding:6px 0;
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:2px; height:1px; width:0; background:var(--amber);
  transition:width .45s var(--ease-out);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ width:100%; }
.nav__right{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.nav__links + .nav__right{ margin-left:0; }
.searchpill{
  display:flex; align-items:center; gap:9px; padding:9px 18px; border-radius:999px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:background .4s var(--ease), border-color .4s var(--ease), width .4s var(--ease);
}
.searchpill:focus-within{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.34); }
.searchpill svg{ width:15px; height:15px; fill:none; stroke:rgba(241,237,228,.75); stroke-width:1.7; stroke-linecap:round; flex:none; }
.searchpill input{ background:none; border:0; outline:0; width:150px; font-size:.82rem; }
.searchpill input::placeholder{ color:rgba(241,237,228,.42); }
.nav__burger{ display:none; width:42px; height:42px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:none; cursor:pointer; }
.nav__burger i{ display:block; width:16px; height:1.5px; background:var(--bone); margin:3px auto; transition:transform .4s var(--ease); }
.nav__burger[aria-expanded="true"] i:first-child{ transform:translateY(4.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child{ transform:translateY(-4.5px) rotate(-45deg); }

.drawer{
  position:fixed; inset:var(--nav-h) 0 auto 0; z-index:99; display:grid; gap:4px; padding:22px max(22px,4.5vw) 34px;
  background:rgba(11,20,16,.96); backdrop-filter:blur(20px);
  transform:translateY(-120%); transition:transform .6s var(--ease-out); border-bottom:1px solid rgba(255,255,255,.08);
}
.drawer.is-open{ transform:translateY(0); }
.drawer a{ font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:.008em; padding:8px 0; }

/* =========================================================================
   01 · THE STAGE — one scrubbed sequence behind the whole page
   Fixed to the viewport, driven by page scroll. [data-film] sections are
   transparent and let it through; every other section is opaque and covers it,
   so the villa has moved on each time the backdrop returns.
   ========================================================================= */
.stage{ position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--ground); }
/* Two acts share the stage: the drawing resolving, then the build itself.
   They cross-fade behind the Materials section, which is opaque, so the cut is
   never seen. */
.stage__canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  filter:saturate(.46) contrast(1.06); opacity:0;
}
.stage__canvas.is-on{ opacity:1; }
.stage__fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.no-canvas .stage__canvas{ display:none; }
.no-canvas .stage__fallback{ opacity:1; }

/* The clip opens on white drafting paper and ends on a night exterior, so the
   wash is driven from scroll: heavy at the start to sink the paper into the
   page, nearly gone by the time the villa is lit. */
.stage__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,9,10,.74) 0%, rgba(5,9,10,.26) 38%, transparent 60%),
    linear-gradient(180deg, rgba(5,9,10,.80) 0%, rgba(5,9,10,.10) 22%, rgba(5,9,10,.14) 60%, rgba(5,9,10,.82) 100%),
    radial-gradient(130% 90% at 62% 38%, transparent 34%, rgba(5,9,10,.44) 100%);
}
.stage__scrim::after{
  content:''; position:absolute; inset:0;
  background:var(--ground); opacity:var(--wash,.55);
}
.stage__grain{
  position:absolute; inset:-40%; pointer-events:none; opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* every section rides above the stage; only the story beats are see-through */
main{ position:relative; z-index:1; }
main > section{ position:relative; z-index:1; background:var(--ground); }
main > section[data-film]{ background:transparent; }
.foot{ position:relative; z-index:1; }

/* --- the story beats ------------------------------------------------------ */
.chapter{ min-height:100svh; position:relative; display:flex; }

/* The title and the panel used to be two absolutely positioned blocks, which
   collided on any short or wide viewport. They are in normal flow now, inside
   the same measure as the rest of the page. */
.chapter--hero{
  min-height:100svh; align-items:center;
  padding:calc(var(--nav-h) + 7vh) 0 calc(var(--hud-h) + 6vh);
}
.hero__inner{ display:flex; flex-direction:column; gap:clamp(48px,9vh,116px); }
.hero__type{ pointer-events:none; }
.hero__title{ margin:0; font-family:var(--display); font-weight:800; line-height:.86; letter-spacing:-.005em; }
.hero__line{ display:block; }
.hero__line--2{ display:flex; align-items:baseline; gap:.14em; flex-wrap:nowrap; }
.hero__word{ display:inline-block; font-size:clamp(2rem,5.6vw,4.6rem); will-change:transform; }
.hero__word--blend{ color:#fff; mix-blend-mode:overlay; opacity:.96; }
.hero__script{
  font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ember);
  font-size:clamp(.92rem,1.9vw,1.6rem); letter-spacing:.06em; line-height:1;
  text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.hero__word--solid{ color:#fff; text-shadow:0 10px 60px rgba(0,0,0,.5); }

.hero__vertical{
  position:absolute; right:calc(var(--gut) - 6px); top:50%; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:rgba(230,233,231,.52); margin:0; z-index:3;
}
.hero__panel{
  width:min(410px, 100%); padding:30px 32px 32px;
  background:linear-gradient(150deg, rgba(6,12,13,.46), rgba(6,12,13,.24) 46%, rgba(6,12,13,.42));
  border-color:rgba(157,184,180,.24);
}
.hero__panel .eyebrow{ color:rgba(230,233,231,.80); }
.hero__panel h2{
  font-family:var(--display); font-weight:600; letter-spacing:.008em; line-height:1.16;
  font-size:clamp(1.1rem,1.5vw,1.35rem); margin:0 0 14px;
}
.hero__panel-copy{ font-size:.9rem; color:rgba(230,233,231,.76); margin:0 0 22px; }

.chapter--manifesto{ align-items:center; padding:13vh 0 calc(var(--hud-h) + 7vh); }
.chapter--manifesto .shell{ width:var(--shell); }
.chapter--about{ align-items:center; padding:14vh 0 calc(var(--hud-h) + 10vh); }
.reel__shell{ display:flex; justify-content:flex-end; }

/* --- the read-out ---------------------------------------------------------
   It is chrome, like the nav — fixed above the sections rather than behind
   them. Underneath it was showing through every translucent panel it passed. */
.stage__hud{
  position:fixed; left:0; right:0; bottom:0; padding:0 var(--gut) 26px; z-index:50;
  pointer-events:none; opacity:0; transition:opacity .55s var(--ease);
}
.stage__hud::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:190%;
  background:linear-gradient(180deg, transparent, rgba(5,9,10,.72) 62%, rgba(5,9,10,.9));
  z-index:-1;
}
.stage__hud.is-on{ opacity:1; }
.hero__stagelabel{ display:flex; align-items:baseline; gap:14px; font-family:var(--mono); margin-bottom:14px; }
.hero__stagename{ font-size:12px; letter-spacing:.34em; color:var(--ember); }
.hero__rail{ height:1px; background:rgba(157,184,180,.24); position:relative; overflow:hidden; }
.hero__rail span{ position:absolute; inset:0 auto 0 0; width:0; background:var(--ember); }
.hero__cue{
  position:absolute; right:var(--gut); bottom:28px; display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.28em; color:rgba(230,233,231,.62);
  transition:opacity .5s var(--ease);
}
.hero__cue i{ display:block; width:1px; height:34px; background:rgba(157,184,180,.34); position:relative; overflow:hidden; }
.hero__cue i::after{ content:''; position:absolute; left:0; width:1px; height:12px; background:var(--ember); animation:cue 2s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:translateY(-14px);opacity:0 } 30%{opacity:1} 100%{ transform:translateY(34px);opacity:0 } }
.hero__cue.is-gone{ opacity:0; }

/* =========================================================================
   02 · TICKER (scroll-velocity driven — never auto-plays)
   ========================================================================= */
.ticker{
  border-block:1px solid rgba(241,237,228,.12); background:var(--ink-2);
  overflow:hidden; padding:26px 0;
}
.ticker__row{ display:flex; width:max-content; will-change:transform; }
.ticker__row span{
  font-family:var(--display); font-weight:800; font-size:clamp(.95rem,1.8vw,1.4rem);
  letter-spacing:.008em; white-space:nowrap; padding-right:.3em; color:rgba(241,237,228,.22);
}
.ticker__row i{ color:var(--amber); font-style:normal; padding:0 .5em; font-size:.5em; vertical-align:middle; }

/* =========================================================================
   03 · MANIFESTO
   ========================================================================= */

.manifesto__text{
  font-family:var(--display); font-weight:600; letter-spacing:.004em; line-height:1.22;
  font-size:clamp(.94rem,1.5vw,1.32rem); margin:0 0 clamp(44px,5.5vw,74px); max-width:32ch;
  text-wrap:balance;
}
.manifesto__text{ text-shadow:0 4px 34px rgba(5,9,10,.92), 0 1px 3px rgba(5,9,10,.7); }
.manifesto__meta .v,.manifesto__meta .k,
.faq summary,.faq details p,.faq__note,
.cta__copy > p,.cta__list b,.cta__list span,.cta__title,
.chapter--manifesto .eyebrow,.faq .eyebrow,.cta .eyebrow,.quotes .eyebrow,.valleys .eyebrow,
.valleys .h2,.pin b,.pin i{ text-shadow:0 2px 22px rgba(5,9,10,.9); }
.manifesto__text em{ font-style:italic; font-weight:600; color:var(--ember); }
.manifesto__meta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:26px; border-top:1px solid var(--hair); padding-top:28px; }
.manifesto__meta .k{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; color:var(--lichen); margin-bottom:8px; text-transform:uppercase; }
.manifesto__meta .v{ font-size:.95rem; color:rgba(230,233,231,.86); }

/* =========================================================================
   04 · ABOUT / GLASS PANEL
   ========================================================================= */
.about__frame{ width:min(600px,100%); padding:clamp(28px,3.6vw,48px); }
.about__title{ font-family:var(--display); font-weight:700; letter-spacing:0; line-height:1.02; font-size:clamp(1.45rem,2.4vw,2.05rem); margin:0; text-wrap:balance; }
.about__frame p{ font-size:.95rem; color:rgba(230,233,231,.78); margin:0 0 16px; max-width:46ch; }
.about__actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:28px; }
.about__note{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:rgba(230,233,231,.5); text-transform:uppercase; }

/* =========================================================================
   05 · STATS
   ========================================================================= */
/* a beat, not a slot: give the sequence room to read behind the numbers */
.stats{ border-block:1px solid var(--hair);
  padding:clamp(84px,9vw,132px) 0 calc(var(--hud-h) + clamp(40px,5vw,72px));
  min-height:72svh; display:flex; align-items:center; }
.stats .shell{ width:var(--shell); }
.stat__num{ text-shadow:0 6px 40px rgba(5,9,10,.85); }
.stat__k{ text-shadow:0 2px 18px rgba(5,9,10,.9); }
.stats__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(30px,4vw,56px); }
.stat__num{
  display:block; font-family:var(--display); font-weight:800; letter-spacing:-.005em;
  font-size:clamp(1.8rem,3vw,2.6rem); line-height:1; color:var(--bone);
}
.stat__k{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--lichen); margin-top:14px; }

/* =========================================================================
   06 · PROCESS — STICKY STACK
   ========================================================================= */
.process{ padding:clamp(140px,17vw,230px) 0 0; }
.process__head{ margin-bottom:clamp(50px,6vw,80px); }
.stack{ position:relative; padding-bottom:22vh; }
.stack__card{
  position:sticky; top:calc(var(--nav-h) + 3vh + (var(--i,0) * 14px));
  width:var(--shell); margin-inline:auto; margin-bottom:38px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:0;
  background:var(--ink-3); border:1px solid rgba(241,237,228,.12); border-radius:var(--r);
  overflow:hidden; box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
  transform-origin:top center; will-change:transform, opacity;
}
.stack__media{ position:relative; min-height:clamp(280px,42vh,460px); overflow:hidden; }
.stack__media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.42) contrast(1.08) brightness(.56); }
.stack__media::before{ content:''; position:absolute; inset:0; z-index:1; background:var(--sunk); mix-blend-mode:color; opacity:.42; }
.vcard--next .vcard__img::after{ opacity:0; }
.stack__media::after{ content:''; position:absolute; inset:0; z-index:2; background:linear-gradient(90deg, transparent 52%, var(--raised) 100%); }
.stack__body{ padding:clamp(28px,3.4vw,54px); display:flex; flex-direction:column; justify-content:center; }
.stack__body h3{ font-family:var(--display); font-weight:800; letter-spacing:.002em; font-size:clamp(1.18rem,1.75vw,1.55rem); margin:0 0 18px; line-height:1.14; }
.stack__body p{ color:rgba(241,237,228,.76); font-size:.96rem; margin:0 0 22px; max-width:44ch; }
.stack__body ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; border-top:1px solid rgba(241,237,228,.14); padding-top:20px; }
.stack__body li{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--lichen); display:flex; gap:11px; }
.stack__body li::before{ content:'—'; color:rgba(241,237,228,.35); }

/* =========================================================================
   07 · HORIZONTAL GALLERY
   ========================================================================= */
.hgal{ position:relative; background:var(--ink-2); }
.hgal__track{ height:400vh; }
.hgal__stage{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center;
  overflow:hidden; padding:calc(var(--nav-h) + 20px) 0 40px;
}
.hgal__head{ width:var(--shell); margin:0 auto 26px; display:flex; justify-content:space-between; align-items:baseline; gap:20px; }
.hgal__hint{ font-family:var(--mono); font-size:10px; letter-spacing:.26em; color:rgba(241,237,228,.4); margin:0; }
.hgal__rowwrap{ overflow:hidden; }
.hgal__row{ display:flex; gap:24px; padding-left:max(22px,4.5vw); width:max-content; will-change:transform; }
.vcard{ position:relative; width:clamp(240px,26vw,340px); flex:none; }
.vcard--wide{ width:clamp(300px,38vw,520px); }
.vcard__img{ position:relative; overflow:hidden; border-radius:18px; height:clamp(250px,44vh,430px); background:var(--ink-3); }
.vcard__img::after,.mat__img::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--moss); mix-blend-mode:color; opacity:.2;
  transition:opacity .6s var(--ease);
}
.vcard:hover .vcard__img::after,.mat:hover .mat__img::after{ opacity:.07; }
.vcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out), filter .6s var(--ease); filter:var(--grade); }
.vcard:hover .vcard__img img{ transform:scale(1.06); filter:var(--grade-hover); }
.vcard__meta{ padding:18px 2px 0; }
.vcard__meta h3{ font-family:var(--display); font-weight:700; font-size:1.15rem; letter-spacing:.008em; margin:0 0 6px; }
.vcard__meta span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--lichen); }
.vcard--next .vcard__img{ border:1px dashed rgba(241,237,228,.32); }
.vcard--next .vcard__img img{ filter:grayscale(.35) brightness(.75); }
.vcard--next .btn{ margin-top:16px; }
.hgal__rail{ width:var(--shell); margin:32px auto 0; height:1.5px; background:rgba(241,237,228,.16); position:relative; }
.hgal__rail span{ position:absolute; inset:0 auto 0 0; width:8%; background:var(--amber); }

/* =========================================================================
   08 · MATERIALS
   ========================================================================= */
.materials{ padding:clamp(140px,17vw,230px) 0; }
.mat__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(24px,3vw,44px); }
.mat__img{ position:relative; overflow:hidden; border-radius:18px; aspect-ratio:4/5; margin-bottom:24px; background:var(--ink-3); }
.mat__img img{ width:100%; height:112%; object-fit:cover; filter:var(--grade); transition:transform 1.1s var(--ease-out), filter .6s var(--ease); }
.mat:hover .mat__img img{ transform:scale(1.05); filter:var(--grade-hover); }
.mat h3{ font-family:var(--display); font-weight:700; letter-spacing:.004em; font-size:1.18rem; margin:0 0 14px; }
.mat p{ color:rgba(241,237,228,.72); font-size:.94rem; margin:0; max-width:38ch; }

/* =========================================================================
   09 · SPLIT / INTERIOR
   ========================================================================= */
.split{ padding:clamp(110px,13vw,180px) 0 clamp(140px,16vw,220px); background:var(--ink-2); border-block:1px solid rgba(241,237,228,.1); }
.split__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:start; }
.split__media{ position:sticky; top:calc(var(--nav-h) + 5vh); }
.split__frame{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; }
.split__frame img{ width:100%; height:112%; object-fit:cover; filter:saturate(.72) contrast(1.05) brightness(.82); }

/* --- the hearth: warm light inside, snow falling outside ------------------
   Both layers are ambient rather than autoplaying media — the ember canvas
   and the snow canvas only run while the section is on screen, and neither
   runs at all under prefers-reduced-motion. */
.split--hearth{ position:relative; overflow:hidden; }
.split__snow{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.split__snow canvas{ width:100%; height:100%; display:block; opacity:.62; }
.split--hearth .shell{ position:relative; z-index:1; }

.split__glow{
  position:absolute; inset:0; pointer-events:none; z-index:2; mix-blend-mode:screen;
  background:radial-gradient(58% 44% at 42% 74%, rgba(224,138,58,.46), rgba(224,138,58,.14) 46%, transparent 72%);
  animation:hearth 7.5s ease-in-out infinite;
}
@keyframes hearth{
  0%,100%{ opacity:.72; transform:scale(1); }
  38%    { opacity:1;   transform:scale(1.045); }
  64%    { opacity:.84; transform:scale(1.015); }
}
.split__embers{ position:absolute; inset:0; z-index:3; pointer-events:none; width:100%; height:100%; }
.split__tag{ z-index:4; }
.split__tag{
  position:absolute; left:18px; bottom:18px; padding:11px 18px; border-radius:999px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; display:flex; align-items:center; gap:9px;
}
.split__tag .dot{ width:7px; height:7px; border-radius:50%; background:#E08A3A; box-shadow:0 0 0 4px rgba(224,138,58,.24); animation:hearth 7.5s ease-in-out infinite; }
.feat{ display:flex; gap:24px; padding:32px 0; border-top:1px solid rgba(241,237,228,.14); }
.feat::before{ content:''; flex:none; width:22px; height:1px; background:var(--amber); margin-top:14px; }
.feat h3{ font-family:var(--display); font-weight:700; font-size:1.12rem; letter-spacing:.008em; margin:0 0 10px; }
.feat p{ margin:0; color:rgba(241,237,228,.72); font-size:.93rem; }

/* =========================================================================
   10 · VALLEYS / RIDGE
   ========================================================================= */
.valleys{ padding:clamp(140px,16vw,215px) 0 calc(var(--hud-h) + clamp(40px,5vw,70px)); overflow:hidden; }
.ridge{ position:relative; margin-top:clamp(24px,3vw,44px); }
.valleys .h2{ margin-bottom:clamp(20px,2.5vw,34px); }
/* preserveAspectRatio="none" means viewBox coordinates map linearly onto the
   box, so a peak at (x,y) and a pin at (x/1200, y/320) always land together. */
.ridge svg{ display:block; width:100%; height:clamp(260px,32vw,380px); }
.ridge__far{ fill:rgba(27,44,46,.42); }
.ridge__near{ fill:rgba(11,18,20,.92); }
.ridge__line{ fill:none; stroke:var(--lichen); stroke-width:1.5; stroke-linejoin:round; }

.pins{ position:absolute; inset:0; list-style:none; margin:0; padding:0; }
/* the reveal below sets `transform:none`, which would wipe out this
   positioning transform — so the group is revealed and .pin__in is animated */
ul.pins[data-reveal],
ul.pins[data-reveal].is-in{ opacity:1; transform:none; clip-path:none; }
.pin{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-100%); text-align:center; width:max-content;
}
.pin__in{
  display:block; opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.pins.is-in .pin__in{ opacity:1; transform:none; }
.pin b{ display:block; font-family:var(--display); font-weight:700; font-size:.88rem; letter-spacing:.01em; }
.pin i{ display:block; font-family:var(--mono); font-style:normal; font-size:10px; letter-spacing:.16em; color:var(--lichen); margin-top:5px; }
/* leader from the label down to the dot sitting on the summit */
.pin s{ display:block; width:1px; height:14px; margin:9px auto 0; background:rgba(241,237,228,.34); }
/* `.pin span` would also match .pin__in, which is a span — scope it to the dot */
.pin__in > span{
  display:block; width:8px; height:8px; margin:0 auto -4px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 0 4px rgba(232,181,99,.16);
}

/* =========================================================================
   11 · QUOTES
   ========================================================================= */
.quotes{ padding:clamp(150px,17vw,230px) 0 calc(var(--hud-h) + clamp(80px,9vw,140px)); }
/* the owners' words sit on the film; the cards carry their own ground */
.quotes .quote{ backdrop-filter:blur(16px); background:rgba(11,18,20,.55); border-color:var(--hair); }
.quotes__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,2.4vw,32px); }
.quote{ margin:0; padding:clamp(32px,3.4vw,46px); border:1px solid rgba(241,237,228,.14); border-radius:var(--r); background:var(--ink-2); }
.quote blockquote{ margin:0 0 26px; font-family:var(--display); font-weight:500; letter-spacing:.006em; font-size:clamp(1rem,1.35vw,1.17rem); line-height:1.44; }
.quote figcaption b{ display:block; font-size:.9rem; font-weight:600; }
.quote figcaption span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--lichen); }

/* =========================================================================
   12 · COLLECTIONS
   ========================================================================= */
.plans{ padding:clamp(110px,13vw,180px) 0 clamp(140px,16vw,220px); background:var(--ink-2); border-top:1px solid rgba(241,237,228,.1); }
.plans__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,2.4vw,30px); align-items:stretch; }
.plan{ padding:clamp(28px,3vw,42px); position:relative; display:flex; flex-direction:column; height:100%; }
.plan--featured{ border-color:rgba(232,181,99,.5); box-shadow:0 40px 90px -50px rgba(232,181,99,.35), inset 0 1px 0 rgba(255,255,255,.22); }
.plan__flag{ position:absolute; top:20px; right:22px; font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; color:var(--ink); background:var(--amber); padding:5px 11px; border-radius:999px; }
.plan h3{ font-family:var(--display); font-weight:800; letter-spacing:.004em; font-size:1.28rem; margin:0 0 8px; }
.plan__sub{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--lichen); margin:0 0 22px; }
.plan__price{ font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:.004em; margin:0 0 26px; }
.plan__price span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:rgba(241,237,228,.55); display:block; margin-bottom:4px; }
.plan ul{ list-style:none; margin:0 0 28px; padding:22px 0 0; border-top:1px solid rgba(241,237,228,.16); display:grid; gap:11px; align-content:start; }
.plan .btn{ margin-top:auto; }
.plan li{ font-size:.9rem; color:rgba(241,237,228,.78); display:flex; gap:11px; }
.plan li::before{ content:'◆'; color:var(--amber); font-size:.62em; padding-top:.45em; }

/* =========================================================================
   13 · FAQ
   ========================================================================= */
.faq{ padding:clamp(130px,15vw,210px) 0 calc(var(--hud-h) + clamp(70px,8vw,130px)); }
.faq__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,5vw,80px); align-items:start; }
.faq__aside{ position:sticky; top:calc(var(--nav-h) + 6vh); }
.faq__note{ color:rgba(241,237,228,.6); font-size:.94rem; max-width:30ch; }
.faq details{ border-top:1px solid rgba(241,237,228,.16); padding:4px 0; }
.faq details:last-child{ border-bottom:1px solid rgba(241,237,228,.16); }
.faq summary{
  list-style:none; cursor:pointer; padding:30px 0; display:flex; justify-content:space-between; align-items:center; gap:24px;
  font-family:var(--display); font-weight:600; letter-spacing:.008em; font-size:clamp(1rem,1.5vw,1.25rem);
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--amber); }
.faq summary i{ position:relative; width:14px; height:14px; flex:none; }
.faq summary i::before,.faq summary i::after{ content:''; position:absolute; inset:50% 0 auto; height:1.5px; background:currentColor; transition:transform .4s var(--ease); }
.faq summary i::after{ transform:rotate(90deg); }
.faq details[open] summary i::after{ transform:rotate(0); }
.faq details[open] summary{ color:var(--amber); }
.faq details p{ margin:0 0 26px; color:rgba(241,237,228,.72); font-size:.95rem; max-width:60ch; }

/* =========================================================================
   14 · CTA
   ========================================================================= */
.cta{ position:relative; overflow:hidden; padding:clamp(130px,15vw,210px) 0 calc(var(--hud-h) + clamp(70px,8vw,130px)); }
.cta__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:start; }
.cta__title{ font-family:var(--display); font-weight:800; letter-spacing:0; line-height:.98; font-size:clamp(1.6rem,2.7vw,2.3rem); margin:0 0 28px; }
.cta__copy > p{ color:rgba(241,237,228,.78); max-width:44ch; font-size:.98rem; }
.cta__list{ list-style:none; margin:38px 0 0; padding:0; display:grid; gap:20px; }
.cta__list li{ display:grid; gap:5px; border-top:1px solid rgba(241,237,228,.16); padding-top:16px; }
.cta__list b{ font-family:var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.24em; color:var(--lichen); text-transform:uppercase; }
.cta__list span{ font-size:.94rem; color:rgba(241,237,228,.85); }
.cta__form{ padding:clamp(28px,3.4vw,44px); display:grid; gap:18px; }
.field{ display:grid; gap:8px; }
.field label{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--lichen); }
.field input,.field textarea{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:12px;
  padding:13px 16px; font-size:.93rem; outline:none; resize:vertical;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(241,237,228,.34); }
.field input:focus,.field textarea:focus{ border-color:var(--amber); background:rgba(255,255,255,.1); }
.field input:user-invalid{ border-color:#c9705a; }
.cta__small{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:rgba(241,237,228,.5); margin:0; text-align:center; }
.cta__small.is-ok{ color:var(--amber); }

/* =========================================================================
   15 · FOOTER
   ========================================================================= */
.foot{ position:relative; background:var(--ink); padding:clamp(70px,9vw,120px) 0 34px; border-top:1px solid rgba(241,237,228,.12); overflow:hidden; }
.foot__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:34px; }
.foot__grid > div{ display:grid; gap:11px; align-content:start; }
.foot__k{ font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--lichen); margin-bottom:6px; }
.foot__grid a{ font-size:.92rem; color:rgba(241,237,228,.72); transition:color .3s var(--ease); width:fit-content; }
.foot__grid a:hover{ color:var(--amber); }
.foot__say p{ font-family:var(--display); font-weight:600; letter-spacing:.006em; font-size:1.02rem; margin:0 0 20px; max-width:24ch; }
.foot__mark{
  font-family:var(--display); font-weight:900; letter-spacing:.012em; line-height:.8;
  font-size:clamp(2.4rem,9.5vw,7.6rem); color:transparent; -webkit-text-stroke:1px rgba(157,184,180,.16);
  margin:clamp(50px,7vw,90px) 0 30px; text-align:center; user-select:none;
}
.foot__base{ display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between; border-top:1px solid rgba(241,237,228,.12); padding-top:22px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:rgba(241,237,228,.42); }
.foot__vertical{
  position:absolute; right:calc(max(22px,4.5vw) - 4px); top:60px;
  writing-mode:vertical-rl; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  color:rgba(241,237,228,.3); margin:0;
}

/* =========================================================================
   SCROLL REVEAL PRIMITIVES
   ========================================================================= */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay:var(--d,0ms); }
[data-reveal="clip"]{ transform:translateY(46px); clip-path:inset(0 0 100% 0); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out), clip-path 1.1s var(--ease-out); }
[data-reveal].is-in{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }

.sp-line{ display:block; overflow:hidden; }
.sp-line > i{ display:block; font-style:inherit; transform:translateY(105%); transition:transform 1s var(--ease-out); transition-delay:var(--d,0ms); }
.is-in .sp-line > i, .sp-line.is-in > i{ transform:translateY(0); }
.sp-word{ display:inline-block; overflow:hidden; vertical-align:top; }
.sp-word > i{ display:inline-block; font-style:inherit; transform:translateY(104%); opacity:0; transition:transform .9s var(--ease-out), opacity .7s var(--ease-out); transition-delay:var(--d,0ms); }
[data-split].is-in .sp-word > i{ transform:translateY(0); opacity:1; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .searchpill input{ width:96px; }
  .stack__card{ grid-template-columns:1fr; }
  .stack__media{ min-height:230px; }
  .stack__media::after{ background:linear-gradient(180deg, transparent 50%, rgba(22,36,28,.92) 100%); }
  .split__grid,.faq__grid,.cta__grid{ grid-template-columns:1fr; }
  .split__media,.faq__aside{ position:relative; top:0; }
  .split__frame{ aspect-ratio:16/10; }
  .reel__shell{ justify-content:center; }
}
@media (max-height:800px) and (min-width:721px){
  .chapter--hero{ padding:calc(var(--nav-h) + 3vh) 0 calc(var(--hud-h) + 3vh); }
  .hero__inner{ gap:clamp(22px,4vh,52px); }
  .hero__panel{ padding:22px 26px 24px; }
  .hero__panel-copy{ margin:0 0 16px; }
  .hero__panel h2{ margin:0 0 10px; }
  .chapter--manifesto{ padding:8vh 0 calc(var(--hud-h) + 4vh); }
  .chapter--about{ padding:8vh 0 calc(var(--hud-h) + 5vh); }
}

@media (max-width:720px){
  :root{ --r:18px; --nav-h:66px; }
  .nav__cta{ display:none; }
  .searchpill{ padding:8px 14px; }
  .searchpill input{ width:70px; }
  .hero__panel{ width:calc(100% - 2*max(22px,4.5vw)); bottom:96px; padding:24px 24px 26px; }
  .hero__panel h2{ font-size:1.12rem; }
  .hero__panel-copy{ font-size:.85rem; }
  .hero__vertical{ display:none; }
  .hero__cue{ display:none; }
  .hero__type{ top:calc(var(--nav-h) + 24px); }
  .hgal__track{ height:320vh; }
  .vcard{ width:70vw; } .vcard--wide{ width:82vw; }
  .foot__base{ flex-direction:column; gap:8px; }
  .ridge svg{ height:clamp(200px,54vw,260px); }
  .pin b{ font-size:.76rem; }
  .pin i{ font-size:8.5px; letter-spacing:.1em; }
  .pin s{ height:10px; margin-top:6px; }
}

/* =========================================================================
   REDUCED MOTION — everything resolves to its final state
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1 !important; clip-path:none !important; }
  [data-reveal]:not(.pin){ transform:none !important; }
  .pin__in{ opacity:1 !important; transform:none !important; }
  .sp-line > i,.sp-word > i{ transform:none !important; opacity:1 !important; }
  .hero__cue i::after{ animation:none; }
  .loader__mark path{ animation:none; stroke-dashoffset:0; }
  .split__glow,.split__tag .dot{ animation:none; }
  .split__embers,.split__snow{ display:none; }
  *{ transition-duration:.01ms !important; }
}