/* ============================================================= tokens */
:root{
  --abyss:#01050a;
  --deep:#030c14;
  --foam:#d7ecf0;
  --foam-dim:#9fb4b8;
  --muted:#93a9ad;
  --line:rgba(215,236,240,.13);
  --line-soft:rgba(215,236,240,.07);
  --teal:#4fb8b6;
  --teal-bright:#8ee9df;
  --gold:#dc9e5b;
  --pad:clamp(20px, 3.4vw, 56px);
  --nav-h:84px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0; background:var(--abyss); color:var(--foam);
  font-family:'Manrope',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
body.is-locked{ overflow:hidden; height:100vh; }
::selection{ background:var(--teal); color:#01141a; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible{
  outline:2px solid var(--teal); outline-offset:3px; border-radius:2px; }

/* ============================================================= layers */
#gl{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; background:var(--abyss); }
#vignette{ position:fixed; inset:0; z-index:55; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 42%, transparent 40%, rgba(0,4,7,.6) 100%); }
#grain{ position:fixed; inset:-1px; z-index:60; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px; }
.page{ position:relative; z-index:10; }

/* ============================================================= type */
.eyebrow{ font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); text-shadow:0 1px 16px rgba(1,5,9,.9); }
.eyebrow .dot{ display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 10px var(--gold); margin-right:8px; vertical-align:middle; }
h1,h2,h3{ font-weight:400; margin:0; }
.display{ font-family:'Manrope',system-ui,sans-serif; font-weight:400; line-height:1.1; letter-spacing:-.01em; }
.h-hero{ font-size:clamp(26px,3.3vw,48px); }
.h-sec{ font-size:clamp(30px,4vw,58px); }
.body-lg{ font-size:clamp(14px,1.02vw,17px); line-height:1.72; color:#b8ccce; font-weight:300; }
.body{ font-size:14px; line-height:1.68; color:#8ea3a6; font-weight:300; }
.num{ font-size:clamp(26px,2.5vw,36px); font-weight:300; letter-spacing:-.02em; color:var(--foam); font-variant-numeric:tabular-nums; }

/* ============================================================= reveal */
[data-rv]{ opacity:0; }
[data-rv="up"]{ transform:translate3d(0,26px,0); }
[data-rv].rv-in{ opacity:1; transform:none; transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out); }
.mask-line{ display:block; overflow:hidden; }
.mask-line > span{ display:block; transform:translate3d(0,110%,0); transition:transform 1.05s var(--ease-out); }
.mask-line.rv-in > span{ transform:none; }

/* ============================================================= preloader */
#pre{ position:fixed; inset:0; z-index:100; background:var(--abyss);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease), visibility .8s; }
#pre.done{ opacity:0; visibility:hidden; pointer-events:none; }
.pre-in{ width:min(420px,74vw); text-align:center; }
.pre-label{ font-size:12px; letter-spacing:.5em; color:var(--foam-dim); margin-bottom:20px; }
.pre-bar{ position:relative; height:1px; background:rgba(215,236,240,.14); overflow:hidden; }
.pre-bar i{ position:absolute; inset:0 100% 0 0; background:var(--teal); transition:right .35s linear; }
.pre-meta{ display:flex; justify-content:space-between; margin-top:12px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.pre-meta b{ font-weight:500; color:var(--foam-dim); font-variant-numeric:tabular-nums; }

/* ============================================================= nav */
.nav{ position:fixed; top:0; left:0; width:100%; height:var(--nav-h); z-index:50;
  display:flex; align-items:center; gap:24px; padding:0 var(--pad);
  transition:transform .55s var(--ease); }
.nav::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(1,5,9,.62); backdrop-filter:blur(14px) saturate(1.1); opacity:0; transition:opacity .5s linear; }
.nav.stuck::before{ opacity:1; }
.nav::after{ content:''; position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px;
  background:var(--line-soft); opacity:0; transition:opacity .5s; }
.nav.stuck::after{ opacity:1; }
.nav.hide{ transform:translate3d(0,-101%,0); }
.brand{ display:flex; align-items:center; flex:0 0 auto; }
.brand-tx{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.brand-tx b{ font-size:12px; font-weight:600; letter-spacing:.26em; }
.brand-tx i{ font-style:normal; font-size:8px; letter-spacing:.24em; color:var(--muted); }
.nav-links{ display:flex; gap:clamp(18px,2.6vw,46px); margin-left:auto; }
.nav-link{ position:relative; font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--foam-dim); }
.nav-link:hover{ color:var(--foam); }
.nav-link.on{ color:var(--foam); }
.nav-link.on::after{ content:''; position:absolute; left:0; right:0; bottom:-10px; height:1px; background:var(--teal); }
.nav-burger{ display:none; margin-left:clamp(18px,2.6vw,42px); width:26px; height:16px; position:relative; flex:0 0 auto; }
.nav-burger i{ position:absolute; right:0; left:0; height:1.5px; background:var(--foam); transition:transform .45s var(--ease-out), opacity .3s; }
.nav-burger i:nth-child(1){ top:0; }
.nav-burger i:nth-child(2){ top:7px; }
.nav-burger i:nth-child(3){ top:14px; }

/* ============================================================= hero */
.hero{ position:relative; padding:0 var(--pad); }
.hero-title{ min-height:100svh; display:flex; align-items:center; justify-content:center; position:relative; }
.hero-content{ position:relative; padding-top:clamp(56px,9vh,110px); padding-bottom:clamp(30px,5vh,60px); }
.hero-content::before{ content:''; position:absolute; left:50%; width:100vw; transform:translateX(-50%); top:0; height:46%; pointer-events:none; z-index:0;
  background:linear-gradient(rgba(1,4,7,.7), rgba(1,4,7,.3) 46%, transparent); }
.hero-top{ max-width:min(560px,46vw); position:relative; z-index:2; }
.hero-top .eyebrow{ margin-bottom:20px; }
.hero h1{ margin-bottom:18px; }
.hero-tagline{ max-width:380px; margin:0 0 14px; font-style:italic; font-size:clamp(15px,1.3vw,19px);
  color:var(--foam-dim); text-shadow:0 1px 26px rgba(1,4,7,.95); }
.hero-sub{ max-width:340px; text-shadow:0 1px 26px rgba(1,4,7,.95); }
.hero-side{ position:absolute; z-index:2; right:var(--pad); top:clamp(14px,3vh,42px); }
.hero-side .v{ writing-mode:vertical-rl; font-size:12px; letter-spacing:.5em; color:rgba(159,180,184,.55); }
.wordmark{
  position:relative; z-index:1; text-align:center; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:clamp(10px,1.6vh,20px);
  transform:scale(.95); transition:transform 1.4s var(--ease-out), opacity 1.4s var(--ease-out);
}
.wordmark.rv-in{ transform:scale(1); }
.wordmark::before{
  content:''; position:absolute; left:50%; top:50%; width:min(720px,92vw); aspect-ratio:2/1;
  translate:-50% -50%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(79,184,182,.16), transparent 72%);
}
.wordmark-tx{
  font-family:'Archivo Black','Arial Black',sans-serif; font-weight:400; font-size:clamp(40px,14vw,220px);
  line-height:.8; letter-spacing:.01em; text-transform:uppercase;
  background:linear-gradient(180deg, rgba(226,244,246,.98), rgba(159,180,184,.3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 44px rgba(79,184,182,.3));
}
.wordmark-rule{ position:relative; width:clamp(160px,22vw,340px); height:1px; overflow:visible;
  background:linear-gradient(90deg, transparent, var(--teal), transparent); opacity:.7; }
.wordmark-rule::after{ content:''; position:absolute; left:50%; top:50%; width:6px; height:6px;
  translate:-50% -50%; border-radius:50%; background:var(--teal-bright);
  box-shadow:0 0 12px 2px var(--teal-bright); animation:wordmark-spark 3.2s ease-in-out infinite; }
@keyframes wordmark-spark{ 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.6); } }
.wordmark-sub{ font-family:'Manrope',sans-serif; font-size:clamp(10px,1.1vw,14px); font-weight:500;
  letter-spacing:.5em; text-transform:uppercase; color:rgba(205,222,226,.85); padding-left:.5em; }
.hero-foot{ margin-top:clamp(50px,9vh,120px); padding-bottom:clamp(22px,4.2vh,42px); position:relative; z-index:2; }
.hero-cue{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-bottom:14px;
  font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.hero-cue .track{ width:54px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.hero-cue .track i{ position:absolute; inset:0; background:var(--foam); transform-origin:left; animation:cue 2.8s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes cue{ 0%{transform:scaleX(0)} 42%{transform:scaleX(1)} 100%{transform:scaleX(1) translateX(100%)} }

/* ============================================================= sections */
.sec{ position:relative; padding:clamp(88px,15vh,190px) var(--pad); }
.sec::before{ content:''; position:absolute; inset:-22% -4%; z-index:-1; pointer-events:none;
  background:radial-gradient(110% 62% at 30% 50%, rgba(2,6,10,.86), rgba(2,6,10,.6) 42%, rgba(2,6,10,.16) 74%, rgba(2,6,10,0));
  -webkit-mask-image:linear-gradient(transparent, #000 44%); mask-image:linear-gradient(transparent, #000 44%); }
#ruins::before{ background:radial-gradient(108% 64% at 50% 50%, rgba(2,6,10,.68), rgba(2,6,10,.42) 50%, rgba(2,6,10,0)); }
#afterlight::before{ background:radial-gradient(82% 58% at 50% 46%, rgba(2,6,10,.4), rgba(2,6,10,.78) 56%, rgba(2,6,10,.95) 82%, rgba(2,6,10,0)); }
.fin::after{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 50%, rgba(1,5,9,.55), transparent 72%); }
.foot::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(2,6,10,.5), rgba(2,6,10,.94) 40%, rgba(2,6,10,.98)); }
.quote-strip{ font-family:'Cinzel',Georgia,serif; text-align:center; letter-spacing:.03em;
  font-size:clamp(17px,1.8vw,24px); color:var(--foam-dim); margin:0 0 clamp(40px,7vh,80px); }
.quote-strip--after{ margin:clamp(40px,7vh,80px) 0 0; }
.sec-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(30px,5vh,66px); }
.sec-head .k{ font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.sec-head .k b{ color:var(--gold); font-weight:600; }
.rule{ flex:1 1 auto; height:1px; background:var(--line-soft); }

/* — chapter I */
.gate-grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(28px,5vw,90px); align-items:start; }
.gate-grid h2{ max-width:12ch; }
.gate-copy{ padding-top:6px; }
.gate-copy .lead{ font-size:clamp(15px,1.16vw,19px); line-height:1.66; color:#c3d6d8; }
.gate-copy .lead + p{ margin-top:20px; }
.arrowlink{ display:inline-flex; align-items:center; gap:12px; margin-top:34px;
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--foam); }
.arrowlink .ar{ width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; transition:background .45s var(--ease), border-color .45s, transform .5s var(--ease-out); }
.arrowlink .ar svg{ width:13px; height:13px; transition:transform .5s var(--ease-out); }
.arrowlink:hover .ar{ background:var(--teal); border-color:var(--teal); }
.arrowlink:hover .ar svg{ transform:translate3d(2px,-2px,0); }
.arrowlink:hover .ar svg path{ stroke:#01141a; }
.gate-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:clamp(46px,8vh,96px);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.gate-stats div{ padding:24px clamp(14px,2vw,28px); border-left:1px solid var(--line-soft); }
.gate-stats div:first-child{ border-left:0; padding-left:0; }
.gate-stats div b{ display:block; font-size:clamp(22px,2.1vw,32px); font-weight:300; letter-spacing:-.02em; color:var(--gold); }
.gate-stats div span{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* — chapter II cards: eight real rooms in a responsive grid, the first held larger as the lead */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  grid-auto-rows:280px; gap:clamp(10px,1.4vw,22px); align-items:stretch; }
.card{ position:relative; cursor:pointer; display:flex; flex-direction:column; min-height:0; }
.card--lead{ grid-column:span 2; grid-row:span 2; }
.card-fr{ position:relative; isolation:isolate; overflow:hidden; flex:1 1 auto; min-height:220px;
  background:linear-gradient(160deg,#08181c,#02090c 60%,#031014);
  outline:1px solid var(--line-soft); outline-offset:-1px; transition:outline-color .5s var(--ease); }
.card:hover .card-fr{ outline-color:rgba(215,236,240,.3); }
.card-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease-out); }
.card:hover .card-img{ transform:scale(1.045); }
.card-fr::after{ content:''; position:absolute; inset:0; background:linear-gradient(transparent 46%, rgba(2,6,10,.82)); pointer-events:none; }
.card-fr::before{ content:'Explore →'; position:absolute; top:16px; right:16px; z-index:2;
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-bright);
  opacity:0; transform:translateY(-4px); transition:opacity .4s var(--ease), transform .4s var(--ease-out); pointer-events:none; }
.card:hover .card-fr::before{ opacity:1; transform:none; }
.card-lab{ transition:transform .4s var(--ease-out); }
.card:hover .card-lab{ transform:translateY(-2px); }
.card-lab{ position:absolute; left:16px; right:16px; bottom:14px; z-index:2; }
.card-lab b{ display:block; font-size:clamp(13px,1.15vw,17px); font-weight:500; letter-spacing:.02em; text-transform:uppercase; }
.card-lab span{ font-size:11px; color:rgba(215,236,240,.6); }
.card-meta{ display:flex; justify-content:space-between; margin-top:12px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* — chapter III: a plate atlas, not a list */
.cur-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(28px,5vw,90px); align-items:end; margin-bottom:clamp(34px,6vh,72px); }
.cur-head h2{ max-width:13ch; }
.cur{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft); }
.les{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  min-height:250px; padding:clamp(20px,2.2vw,30px); overflow:hidden;
  background:rgba(2,6,9,.7); backdrop-filter:blur(20px) saturate(1.05); -webkit-backdrop-filter:blur(20px) saturate(1.05);
  cursor:pointer; transition:padding .5s var(--ease-out); }
.les:last-child{ grid-column:1 / -1; }
.les::before{ content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(145deg, rgba(79,184,182,.1), transparent 58%); opacity:0; transition:opacity .55s var(--ease); pointer-events:none; }
.les:hover::before{ opacity:1; }
.les:hover{ padding-left:clamp(28px,3vw,40px); }
.les > *{ position:relative; z-index:1; }
.les .k{ font-size:11px; letter-spacing:.16em; color:var(--muted); font-variant-numeric:tabular-nums; transition:color .4s; }
.les:hover .k{ color:var(--teal); }
.les h3{ font-size:clamp(18px,1.8vw,26px); font-weight:400; letter-spacing:-.005em; }
.les p{ margin:0; font-size:13px; line-height:1.6; color:#82969a; max-width:38ch; }
.les .t{ margin-top:auto; font-size:11px; letter-spacing:.14em; color:#7c9093; font-variant-numeric:tabular-nums; }

/* — audience table: who it's for, one row per audience */
.audience-table{ border-top:1px solid var(--line-soft); margin-bottom:clamp(34px,6vh,72px); }
.audience-row{ display:grid; grid-template-columns:minmax(120px,.8fr) minmax(150px,.9fr) minmax(0,1.8fr);
  gap:clamp(14px,2.4vw,40px); align-items:baseline; padding:clamp(16px,2.4vh,26px) 0;
  border-bottom:1px solid var(--line-soft); }
.audience-who{ font-size:clamp(14px,1.1vw,16px); font-weight:600; letter-spacing:.02em; color:var(--foam); }
.audience-tag{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.audience-line{ font-size:14px; line-height:1.6; color:#b8ccce; }

/* — chapter IV: eyebrow/copy/cta held left, the chapter name run vertically down the right edge */
.fin{ min-height:100svh; display:grid; grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);
  align-items:center; column-gap:clamp(30px,6vw,100px); }
.fin-body{ max-width:46ch; }
.fin .eyebrow{ margin-bottom:22px; }
.fin p{ margin:0; }
.fin p.fin-tagline{ font-size:clamp(22px,2.6vw,34px); margin-bottom:18px; color:var(--foam); }
.fin p.fin-quote{ margin-top:20px; font-family:'Cinzel',Georgia,serif; letter-spacing:.03em;
  font-size:clamp(14px,1.3vw,17px); color:var(--muted); }
.fin-vert{ justify-self:end; align-self:center; writing-mode:vertical-rl;
  font-size:clamp(46px,6vw,84px); letter-spacing:.04em; }
.cta{ position:relative; display:inline-flex; align-items:center; gap:12px; margin-top:34px;
  padding:15px 26px; border:1px solid var(--line); border-radius:100px; overflow:hidden;
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--foam);
  transition:color .45s var(--ease), border-color .45s, background .45s var(--ease); }
.cta:hover{ color:#01141a; border-color:var(--teal); background:var(--teal); }

/* — footer: a manifesto line first, then a plain divided index */
.foot{ position:relative; padding:clamp(50px,8vh,96px) var(--pad) clamp(26px,4vh,40px); border-top:1px solid var(--line-soft); }
.foot-brand{ padding-bottom:clamp(26px,4vh,40px); margin-bottom:clamp(26px,4vh,40px); border-bottom:1px solid var(--line-soft); }
.foot-brand p{ margin:0; max-width:52ch; font-size:clamp(16px,1.7vw,22px); line-height:1.4; color:var(--foam-dim); }
.foot-brand .foot-quote{ margin-top:10px; font-family:'Cinzel',Georgia,serif; letter-spacing:.03em;
  font-size:clamp(13px,1.1vw,15px); color:var(--muted); }
.foot-quotes{ display:flex; flex-wrap:wrap; gap:8px 28px; margin:0 0 clamp(26px,4vh,40px);
  font-family:'Cinzel',Georgia,serif; letter-spacing:.03em; font-size:clamp(13px,1.2vw,16px); color:var(--muted); }
.foot-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,3.4vw,48px); }
.foot-grid > div{ padding-left:clamp(18px,2.2vw,32px); border-left:1px solid var(--line-soft); }
.foot-grid > div:first-child{ padding-left:0; border-left:0; }
.foot h4{ margin:0 0 16px; font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.foot li a{ font-size:13px; color:#829698; transition:color .35s; }
.foot li a:hover{ color:var(--foam); }
.foot-link-btn{ font:inherit; font-size:13px; color:#829698; background:none; border:0; padding:0; margin:0;
  cursor:pointer; text-align:left; transition:color .35s; }
.foot-link-btn:hover{ color:var(--foam); }
.foot-contact{ gap:16px !important; }
.contact-link{ display:flex; flex-direction:column; gap:3px; min-height:44px; justify-content:center;
  transition:transform .3s var(--ease-out); }
.contact-link .contact-k{ font-size:9px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  transition:color .3s; }
.contact-link .contact-v{ font-size:13px; color:#829698; transition:color .3s, text-shadow .3s; }
.contact-link .contact-v::after{ content:'→'; margin-left:6px; display:inline-block; opacity:0; transform:translateX(-4px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.contact-link:hover{ transform:translateX(3px); }
.contact-link:hover .contact-k{ color:var(--teal); }
.contact-link:hover .contact-v{ color:var(--teal-bright); text-shadow:0 0 16px rgba(79,184,182,.5); }
.contact-link:hover .contact-v::after{ opacity:1; transform:none; }
.foot-base{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:clamp(38px,6vh,74px); padding-top:20px; border-top:1px solid var(--line-soft);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ============================================================= rail / cursor */
.rail{ position:fixed; right:calc(var(--pad) - 4px); top:50%; transform:translateY(-50%); z-index:45;
  display:flex; flex-direction:column; gap:12px; align-items:center; }
.rail button{ width:22px; height:10px; display:grid; place-items:center; }
.rail i{ display:block; width:14px; height:1px; background:rgba(215,236,240,.26); transition:.5s var(--ease-out); }
.rail button.on i{ width:22px; background:var(--foam); }
.rail button:hover i{ width:22px; background:var(--foam-dim); }
.cur-dot{ position:fixed; z-index:80; top:0; left:0; width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1px solid rgba(215,236,240,.42); border-radius:50%; pointer-events:none;
  transition:width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out),
             background .35s, border-color .35s, opacity .3s; opacity:0; }
.cur-dot.act{ width:52px; height:52px; margin:-26px 0 0 -26px; background:rgba(79,184,182,.08); border-color:rgba(79,184,182,.6); }
@media (hover:hover) and (pointer:fine){ .cur-dot{ opacity:1 } }

/* ============================================================= no-webgl fallback */
.no-webgl #gl{ display:none; }
.no-webgl body{ background:
  radial-gradient(30vw 30vw at 55% 30%, rgba(79,184,182,.28), rgba(20,120,110,.12) 44%, transparent 68%),
  radial-gradient(120% 80% at 50% 0%, rgba(60,150,158,.14), transparent 60%), var(--abyss);
  background-attachment:fixed; }
.no-webgl .sec::before, .no-webgl #ruins::before, .no-webgl #afterlight::before{ background:none; }

/* ============================================================= experience modal */
.xm-root[hidden]{ display:none; }
.xm-root{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,3vw,40px); }
.xm-backdrop{ position:absolute; inset:0; background:rgba(1,3,6,.88);
  opacity:0; backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
  transition:opacity .6s var(--ease), backdrop-filter .7s var(--ease); }
.xm-root.is-open .xm-backdrop{ opacity:1; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.xm-modal{ position:relative; z-index:1; width:min(1440px,92vw); height:min(900px,90vh);
  display:grid; grid-template-columns:62% 38%; background:rgba(3,10,16,.92);
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
  opacity:0; transform:scale(.96); transition:opacity .7s var(--ease), transform .7s var(--ease-out);
  box-shadow:0 60px 140px -40px rgba(0,0,0,.85), 0 0 90px -30px rgba(79,184,182,.25); }
.xm-root.is-open .xm-modal{ opacity:1; transform:none; }
.xm-media{ position:relative; overflow:hidden; background:#02090c; }
.xm-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform-origin:center; }
.xm-media::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 130px rgba(79,184,182,.2); }
.xm-media::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(1,4,7,0) 55%, rgba(1,4,7,.88) 100%),
             linear-gradient(90deg, rgba(1,4,7,.3), transparent 16%); }
.xm-close{ position:absolute; top:18px; right:18px; z-index:5; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; background:rgba(3,10,16,.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line); color:var(--foam);
  transition:border-color .35s var(--ease), transform .45s var(--ease-out); }
.xm-close:hover{ border-color:rgba(79,184,182,.6); transform:rotate(90deg); }
.xm-close svg{ width:14px; height:14px; }
.xm-panel{ position:relative; padding:clamp(28px,3.6vw,56px); display:flex; flex-direction:column;
  gap:12px; overflow-y:auto; min-height:0; }
.xm-panel [data-anim]{ opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.xm-root.is-open .xm-panel [data-anim]{ opacity:1; transform:none; }
.xm-cat{ transition-delay:.05s; font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--teal); }
.xm-title{ transition-delay:.12s; font-size:clamp(26px,3vw,44px); line-height:1.06; margin:2px 0 0; }
.xm-subtitle{ transition-delay:.19s; margin:0; font-style:italic; font-size:clamp(13px,1.2vw,16px); color:var(--foam-dim); }
.xm-desc{ transition-delay:.26s; margin:4px 0 0; font-size:14px; line-height:1.7; color:#b8ccce; max-width:46ch; }
.xm-cta{ transition-delay:.34s; margin-top:auto; padding-top:18px; align-self:flex-start; }
.xm-root.is-swap .xm-img,
.xm-root.is-swap .xm-panel [data-anim]{ opacity:.2 !important; transition:opacity .13s linear; }
@media (max-width:820px){
  .xm-root{ padding:0; }
  .xm-modal{ width:100vw; height:100vh; max-height:100svh; border-radius:0;
    grid-template-columns:1fr; grid-template-rows:40vh 1fr; }
  .xm-panel{ padding:24px 22px 32px; }
}

/* ============================================================= contact modal */
.cm-root[hidden]{ display:none; }
.cm-root{ position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center;
  padding:20px; }
.cm-backdrop{ position:absolute; inset:0; background:rgba(1,3,6,.88);
  opacity:0; backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
  transition:opacity .5s var(--ease), backdrop-filter .6s var(--ease); }
.cm-root.is-open .cm-backdrop{ opacity:1; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.cm-modal{ position:relative; z-index:1; width:min(420px,100%); padding:clamp(28px,4vw,40px);
  background:rgba(3,10,16,.94); border:1px solid var(--line); border-radius:18px;
  opacity:0; transform:translateY(14px) scale(.97);
  transition:opacity .5s var(--ease), transform .5s var(--ease-out);
  box-shadow:0 60px 140px -40px rgba(0,0,0,.85), 0 0 90px -30px rgba(79,184,182,.25); }
.cm-root.is-open .cm-modal{ opacity:1; transform:none; }
.cm-close{ position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:rgba(3,10,16,.6); border:1px solid var(--line); color:var(--foam);
  transition:border-color .35s var(--ease), transform .45s var(--ease-out); }
.cm-close:hover{ border-color:rgba(79,184,182,.6); transform:rotate(90deg); }
.cm-close svg{ width:13px; height:13px; }
.cm-eyebrow{ display:block; font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--teal); }
.cm-title{ font-size:clamp(20px,2.4vw,26px); line-height:1.15; margin:8px 0 0; }
.cm-sub{ margin:8px 0 0; font-size:13px; line-height:1.6; color:var(--foam-dim); max-width:34ch; }
.cm-options{ display:flex; flex-direction:column; gap:1px; margin-top:24px;
  border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; }
.cm-option{ display:flex; flex-direction:column; gap:3px; padding:14px 16px;
  background:rgba(255,255,255,.02); transition:background .3s; }
.cm-option:hover{ background:rgba(79,184,182,.1); }
.cm-option + .cm-option{ border-top:1px solid var(--line-soft); }
.cm-option-k{ font-size:9px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  transition:color .3s; }
.cm-option:hover .cm-option-k{ color:var(--teal); }
.cm-option-v{ font-size:14px; color:var(--foam); }

/* ============================================================= responsive */
@media (max-width:1080px){
  .gate-grid{ grid-template-columns:1fr; gap:26px; }
  .cur-head{ grid-template-columns:1fr; gap:18px; }
  .fin{ grid-template-columns:1fr; text-align:left; }
  .fin-vert{ writing-mode:horizontal-tb; justify-self:start; font-size:clamp(38px,9vw,64px); margin-top:30px; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-grid > div:nth-child(2n+1){ padding-left:0; border-left:0; }
  .foot-grid > div:nth-child(n+3){ padding-top:8px; }
}
@media (max-width:820px){
  .nav-burger{ display:block; }
  .nav-links{
    display:flex; position:fixed; top:0; right:0; bottom:0; width:min(84vw,360px);
    padding:calc(var(--nav-h) + 28px) var(--pad) 34px; flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(1,4,7,.98); border-left:1px solid var(--line-soft);
    transform:translate3d(100%,0,0); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .65s var(--ease-out), opacity .4s, visibility 0s linear .65s; }
  .nav.menu-open .nav-links{ transform:none; opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
  .nav-links .nav-link{ width:100%; padding:17px 0; border-bottom:1px solid var(--line-soft); font-size:17px; }
  .nav.menu-open{ transform:none; transition:none; }
  .nav-burger.active i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-burger.active i:nth-child(2){ opacity:0; }
  .nav-burger.active i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  html.nav-open, html.nav-open body{ overflow:hidden; }
  .rail{ display:none; }
  .hero-top{ max-width:none; }
  .hero-side{ display:none; }
  .wordmark-tx{ font-size:clamp(34px,13.5vw,110px); }
  .wordmark-sub{ letter-spacing:.36em; }
  .cards{ display:flex; flex-direction:column; gap:14px; }
  .card--lead{ grid-column:auto; grid-row:auto; }
  .card--lead .card-fr{ height:auto; aspect-ratio:4/5; }
  .card:not(.card--lead) .card-fr{ min-height:0; aspect-ratio:16/10; }
  .gate-stats{ grid-template-columns:repeat(2,1fr); }
  .gate-stats div:nth-child(2n+1){ border-left:0; padding-left:0; }
  .gate-stats div:nth-child(n+3){ border-top:1px solid var(--line-soft); padding-top:24px; margin-top:0; }
  .cur{ grid-template-columns:1fr; }
  .les:last-child{ grid-column:auto; }
  .audience-row{ grid-template-columns:1fr; gap:6px; }
  .foot-grid{ grid-template-columns:1fr; }
  .foot-grid > div{ padding-left:0; border-left:0; }
  .hero-cue{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-rv]{ opacity:1 !important; transform:none !important; }
  .mask-line > span{ opacity:1 !important; transform:none !important; }
}

/* ============================================================= concept labels and status */
.status-line{ position:absolute; left:50%; bottom:clamp(64px,12vh,120px); transform:translateX(-50%); width:min(92vw,720px); margin:0;
  text-align:center; font-size:11px; font-weight:600; letter-spacing:.14em; line-height:1.7; text-transform:uppercase; color:var(--teal-bright);
  text-shadow:0 1px 14px rgba(1,4,7,.95); }
[data-rv].status-line.rv-in{ transform:translateX(-50%); }
.site-concept{ position:fixed; left:var(--pad); bottom:clamp(14px,2.4vw,24px); z-index:45; pointer-events:none;
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(215,236,240,.72); text-shadow:0 1px 10px #01050a; }
.concept-tag{ position:absolute; top:12px; left:12px; z-index:3; padding:3px 7px; background:rgba(1,5,10,.72);
  font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--foam); pointer-events:none; }
.concept-note{ margin:clamp(24px,4vh,40px) 0 0; max-width:72ch; font-size:13px; color:var(--foam-dim); }
.site-concept{ transition:opacity .4s var(--ease); }
.past-hero .site-concept{ opacity:0; }
@media (max-width:820px){ .nav-burger{ margin-left:auto; } }