/* ============================================================
   TEMPEST Voyage — landing page
   Plain white ground, wet ink, and a single hazard yellow.
   Type is one variable family (Bricolage Grotesque): the display
   cuts run at full width, the micro-labels ride the wdth axis
   down to ~78% via font-stretch, which is what Barlow Condensed
   used to do. One family, two voices.
   ============================================================ */

:root{
  --paper:#ffffff;
  --paper-hi:#ffffff;
  --ink:#0a0a0c;
  --ink-soft:#1a1a1e;
  --muted:#77767c;
  --accent:#ffc60b;
  --teal:#1f6a72;
  --edge:rgba(10,10,12,.12);

  --display:'Bricolage Grotesque','Archivo',system-ui,sans-serif;
  --cond:'Bricolage Grotesque','Archivo',system-ui,sans-serif;
  --body:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --script:'Instrument Serif',Georgia,serif;

  /* the condensed voice */
  --cond-w:78%;

  --nav-h:88px;
  --pad:clamp(20px,4.4vw,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:min(1360px,100% - var(--pad)*2);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- the two voices of the variable family ----------------
   Bricolage's wdth axis is 75..100 and its wght axis 200..800, so
   plain font-stretch / font-weight drive both — no font-variation-settings
   needed, and the fallbacks still behave. */
.nav__links,.nav__signin,.btn,.eyebrow,.kicker,.ticker__track,
.chapter__body strong,.trailer__text strong,.pillars__no,
.missions__meta,.stat span,.foot__links,.join__form input,.join__msg{
  font-stretch:var(--cond-w);
}
.display,.h2,.brand__mark,.stat b,.pillars h3,.missions h3,
.chapter__no,.missions__no{
  font-weight:800;
  font-stretch:100%;
}

/* hexagon field -------------------------------------------- */
.join__hex{
  position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%230a0a0c' stroke-opacity='.11' stroke-width='1'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34'/%3E%3C/g%3E%3C/svg%3E");
  background-size:96px 172px;
  -webkit-mask-image:linear-gradient(105deg,#000 0%,rgba(0,0,0,.55) 34%,transparent 62%);
  mask-image:linear-gradient(105deg,#000 0%,rgba(0,0,0,.55) 34%,transparent 62%);
}

/* ==========================================================
   NAV
   ========================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:800;
  height:var(--nav-h);
  display:flex;align-items:center;gap:clamp(16px,3vw,48px);
  padding-inline:var(--pad);
  transition:background .4s ease, box-shadow .4s ease, height .4s ease;
}
.nav.is-stuck{
  height:68px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--edge);
}
.brand{display:flex;align-items:baseline;gap:.42em;flex:0 0 auto}
.brand__mark{
  font-family:var(--display);font-size:clamp(20px,1.55vw,25px);letter-spacing:.012em;
}
.brand__script{
  font-family:var(--script);font-style:italic;font-size:clamp(19px,1.5vw,25px);
  letter-spacing:-.01em;
}
.nav__links{
  display:flex;gap:clamp(16px,2.4vw,40px);margin-inline:auto;
  font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.13em;
}
.nav__links a{position:relative;padding:6px 0;color:var(--ink);opacity:.72;transition:opacity .25s}
.nav__links a:hover{opacity:1}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}
.nav__links a.is-active{opacity:1}
.nav__end{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.nav__signin{font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.15em}
.nav__rule{width:1px;height:22px;background:var(--edge)}
.nav__burger{display:none;width:42px;height:42px;position:relative}
.nav__burger span,.nav__burger span::before,.nav__burger span::after{
  content:"";position:absolute;left:9px;width:24px;height:2px;background:var(--ink);transition:.3s
}
.nav__burger span{top:20px}
.nav__burger span::before{top:-7px;left:0}
.nav__burger span::after{top:7px;left:0}
.nav.is-open .nav__burger span{background:transparent}
.nav.is-open .nav__burger span::before{transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__burger span::after{transform:translateY(-7px) rotate(-45deg)}

/* hex bullet ----------------------------------------------- */
.hex{
  width:16px;height:18px;flex:0 0 auto;display:inline-grid;place-items:center;
  background:var(--ink);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.hex::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.hex--lg{width:30px;height:34px;background:var(--accent)}
.hex--lg::after{width:9px;height:9px;background:var(--ink);box-shadow:0 0 0 3px rgba(10,10,12,.18)}

/* buttons --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--cond);font-weight:700;letter-spacing:.14em;
}
.btn--pill{
  background:var(--accent);color:var(--ink);font-size:14px;
  padding:11px 22px;border-radius:999px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
}
.btn--pill:hover{transform:translateY(-2px);box-shadow:0 10px 26px -10px rgba(10,10,12,.55)}
.btn--slab{
  position:relative;background:var(--paper-hi);color:var(--ink);
  font-size:clamp(15px,1.25vw,18px);
  padding:12px 46px 12px 12px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  box-shadow:0 18px 40px -24px rgba(10,10,12,.7), inset 0 0 0 1px rgba(10,10,12,.09);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.btn--slab::after{
  content:"";position:absolute;right:16px;top:50%;width:16px;height:1.5px;background:var(--ink);
  transform:translateY(-50%);transition:width .3s
}
.btn--slab:hover{transform:translate3d(4px,-4px,0)}
.btn--slab:hover::after{width:24px}

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  position:relative;
  min-height:100svh;
  padding-top:var(--nav-h);
  overflow:hidden;
  background:#fff;
}

/* Real 3D. The old build had to stay flat because a paper plane at z:0 sat in
   front of the clip at z:-120 and blend modes force flattening anyway. Both are
   gone — the ground is white in the encode — so the stage can hold actual depth
   and the layers sort by Z. Nothing in here may set mix-blend-mode or
   backdrop-filter: either one collapses the 3D context back to flat. */
.stage{
  position:relative;z-index:6;
  height:calc(100svh - var(--nav-h));
  min-height:660px;
  perspective:1500px;
  perspective-origin:60% 45%;
  transform-style:preserve-3d;
}

/* Every parallax layer shares this transform recipe. --ryb/--rxb are a *resting*
   tilt: without them the scene only looks 3D once the pointer moves, so a visitor
   who never moves the mouse — or any touch device — just sees a flat page. */
.l{
  position:absolute;
  will-change:transform;
  transform:
    translate3d(
      calc(var(--mx,0) * var(--px,0) * 1px),
      calc(var(--my,0) * var(--py,0) * 1px + var(--sp,0) * var(--sty,0) * 1px),
      var(--z,0px))
    rotateY(calc((var(--mx,0) * var(--ry,0) + var(--ryb,0)) * 1deg))
    rotateX(calc((var(--my,0) * var(--rx,0) * -1 + var(--rxb,0)) * 1deg));
}

/* — the clip itself —
   NB: layers with a positive --z are scaled up around .stage's
   perspective-origin, so every edge-anchored layer is inset by --pad
   and keeps a modest --z, or it gets pushed out of the viewport. */
/* Right inset is NEGATIVE on purpose. The layer sits at --z:-180, so perspective
   shrinks it toward .stage's 60% origin by 1500/1680 = .893 — a box ending at
   100% would land well short of the edge. Ending it at 106% puts the projected
   right edge past the viewport, so the clip reads flush to the right at any width.

   The white gap down the right edge was `object-fit:contain` letterboxing: past
   roughly 1920x950 the box grows wider than the clip's 16/9 and contain pillarboxes
   it. `cover` on the <video> is the fix — it always fills this box, so the box can
   stay a plain inset rect and there is never a bar on any side. (Constraining the
   box with aspect-ratio + max-height does NOT work: once max-height binds,
   Chromium derives the width from the ratio and the box shrinks off the edge.) */
.l--video{inset:1% -6% 4% 18%}
/* The clip's ground is encoded to pure #fff (white point lifted in ffmpeg), so on
   a white page it simply is the page — no blend mode, no grey rectangle, and the
   mask below feathers the edges so the torn borders never show a hard video edge.
   `cover` rather than `contain` so the clip always fills its box edge to edge —
   it trims whichever axis overflows instead of leaving a white bar. */
.hero__video{
  width:100%;height:100%;object-fit:cover;object-position:center 45%;
  /* scale from the right edge so the chapter zoom can never unpin that edge */
  transform-origin:100% 50%;
  transform:scale(var(--vs,1)) translate3d(var(--vx,0),var(--vy,0),0);
  transition:transform 1.4s cubic-bezier(.35,0,.15,1);
  /* No fade on the right any more — the clip runs off that edge, so it gets cut
     by .hero's overflow rather than dissolving short of the boundary. */
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 5%,#000 14%,#000 100%),
    linear-gradient(to bottom,transparent 0%,#000 5%,#000 84%,rgba(0,0,0,.55) 95%,transparent 100%);
  mask-image:
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 5%,#000 14%,#000 100%),
    linear-gradient(to bottom,transparent 0%,#000 5%,#000 84%,rgba(0,0,0,.55) 95%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* Soft cast shadow sitting well behind the clip. A drop-shadow filter can't do
   this job: CSS applies filters *before* masks, so it would trace the video's
   full rectangle instead of the feathered artwork. A blurred plane at depth
   reads correctly and costs one paint. */
.l--shadow{
  inset:12% -2% 4% 28%;
  background:radial-gradient(56% 50% at 52% 56%,
    rgba(14,16,24,.19) 0%,rgba(14,16,24,.11) 42%,rgba(14,16,24,.03) 66%,transparent 78%);
  filter:blur(44px);
}

/* — copy block — */
.l--copy{left:var(--pad);top:8%;width:min(46vw,760px);z-index:7}
.eyebrow{
  display:flex;align-items:center;gap:14px;margin:0 0 clamp(14px,2vw,26px);
  font-family:var(--cond);font-weight:700;font-size:clamp(13px,1.05vw,16px);letter-spacing:.24em;
}
.eyebrow__bar{width:34px;height:4px;background:var(--accent)}
.eyebrow__tick{display:inline-flex;align-items:center;gap:5px;margin-left:6px}
.eyebrow__tick i{width:22px;height:1px;background:var(--edge)}
.eyebrow__tick i:last-child{width:6px;height:6px;border-radius:50%;background:transparent;border:1px solid var(--edge)}

.display{
  margin:0;
  font-family:var(--display);
  font-size:clamp(3.2rem,7.7vw,8.6rem);
  /* Bricolage 800 has a shorter cap-to-em ratio than Anton did, so it takes a
     tighter leading before the lines touch — .9 still leaves a real gap. */
  line-height:.9;
  letter-spacing:-.028em;
  text-transform:uppercase;
}
.display__line{display:block;overflow:hidden}
.display__line > span{display:block;will-change:transform}
.display--sm{font-size:clamp(3rem,7.6vw,7.4rem)}

.lede{
  margin:clamp(20px,2.6vw,34px) 0 clamp(26px,3vw,40px);
  font-size:clamp(15px,1.24vw,19px);line-height:1.62;color:#2a2a2f;max-width:34ch;
}
.lede em{font-style:normal;font-weight:600;background:linear-gradient(transparent 62%,var(--accent) 62%);padding:0 2px}

/* — trailer card — */
.l--trailer{left:var(--pad);bottom:6%;z-index:7}
.trailer{
  display:flex;align-items:center;gap:18px;text-align:left;
  width:min(340px,44vw);padding:16px 22px 16px 16px;
  background:rgba(16,16,18,.88);color:#fff;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  transition:background .3s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.trailer:hover{background:rgba(16,16,18,.94);transform:translate3d(0,-4px,30px)}
.trailer__play{
  position:relative;flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);
}
.trailer__play::after{
  content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent
}
.trailer:hover .trailer__play{border-color:var(--accent)}
.trailer__text strong{display:block;font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:.14em}
.trailer__text small{display:block;font-size:12.5px;color:rgba(255,255,255,.6);margin-top:2px}
.trailer__bars{display:flex;gap:6px;margin-top:11px}
.trailer__bars i{width:34px;height:2px;background:rgba(255,255,255,.24)}
.trailer__bars i.is-on{background:var(--accent)}

/* — chapter cards — */
.l--cards{right:var(--pad);bottom:6%;z-index:7;width:min(730px,53vw)}
.chapters{list-style:none;display:flex;gap:14px;margin:0;padding:0}
.chapters li{flex:1 1 0;min-width:0}
.chapter{
  position:relative;display:flex;align-items:stretch;gap:12px;width:100%;height:104px;
  padding:14px 0 14px 15px;text-align:left;
  background:rgba(16,16,18,.86);color:#fff;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  transition:transform .4s cubic-bezier(.2,.8,.2,1), background .35s;
}
.chapter:hover{transform:translate3d(0,-8px,40px);background:rgba(16,16,18,.92)}
.chapter.is-active{background:rgba(16,16,18,.95)}
.chapter.is-active::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)
}
.chapter__no{
  font-family:var(--display);font-size:20px;line-height:1;color:rgba(255,255,255,.55);
  position:absolute;left:15px;top:14px;transition:color .3s
}
.chapter.is-active .chapter__no{color:var(--accent)}
.chapter__body{display:flex;flex-direction:column;justify-content:flex-end;flex:1 1 auto;min-width:0;padding-right:4px}
/* nowrap + a fixed size overran the thumb around 1280; let the size ride the
   viewport so the longest title ("THE MAELSTROM") still clears it */
.chapter__body strong{font-family:var(--cond);font-weight:700;font-size:clamp(12.5px,1.06vw,15px);letter-spacing:.08em;white-space:nowrap}
/* the body is bottom-aligned, so a third line grows up into the absolutely
   positioned .chapter__no and collides with it — hard-cap it at two */
.chapter__body small{
  font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.55);margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.chapter__thumb{flex:0 0 92px;align-self:stretch;overflow:hidden;margin:-14px 0 -14px 0}
.chapter__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1);filter:saturate(.9)}
.chapter:hover .chapter__thumb img{transform:scale(1.12)}

.slider{display:flex;align-items:center;justify-content:space-between;margin-top:22px}
.slider__dots{display:flex;gap:8px}
.slider__dots button{width:34px;height:4px;background:rgba(10,10,12,.22);transition:background .3s,width .3s}
.slider__dots button.is-active{background:var(--accent);width:52px}
.slider__arrows{display:flex;gap:10px}
/* the row sits below the dark chapter cards, where the hero wash has already
   faded back to paper — so the arrows carry their own dark chip rather than
   relying on white-on-white */
.slider__arrows button{
  width:52px;height:34px;font-size:15px;
  background:rgba(16,16,18,.86);
  border:1px solid rgba(255,255,255,.28);color:#fff;
  display:grid;place-items:center;transition:background .3s,border-color .3s,color .3s
}
.slider__arrows button:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}

/* ==========================================================
   TICKER
   ========================================================== */
.ticker{background:var(--ink);color:#fff;overflow:hidden;padding:14px 0;position:relative;z-index:10}
.ticker__track{
  display:flex;align-items:center;gap:28px;width:max-content;
  font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.26em;
  animation:slide 34s linear infinite;
}
.ticker__track i{width:7px;height:8px;background:var(--accent);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
@keyframes slide{to{transform:translate3d(-50%,0,0)}}

/* ==========================================================
   SHARED TYPE
   ========================================================== */
.kicker{
  display:flex;align-items:center;gap:12px;margin:0 0 18px;
  font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.26em;
}
.kicker__bar{width:28px;height:3px;background:var(--accent)}
.kicker--light{color:rgba(255,255,255,.8)}
.h2{
  margin:0;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(2.4rem,5.4vw,5.2rem);line-height:.92;letter-spacing:-.025em;
}
.h2--light{color:#fff}

/* ==========================================================
   VOYAGE
   ========================================================== */
.voyage{padding:clamp(80px,10vw,150px) 0 clamp(70px,8vw,120px)}
.voyage__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px) clamp(28px,5vw,90px)}
.voyage__copy{align-self:end}
.voyage__copy p{margin:0 0 18px;color:#3a3a40;font-size:clamp(15px,1.15vw,17px);max-width:48ch}
.pillars{grid-column:1/-1;list-style:none;margin:clamp(30px,5vw,64px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.pillars li{padding-top:22px;border-top:1px solid var(--edge)}
.pillars__no{font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.22em;color:var(--muted)}
.pillars h3{margin:12px 0 10px;font-family:var(--display);font-size:clamp(1.3rem,2vw,1.9rem);letter-spacing:.01em;text-transform:uppercase}
.pillars p{margin:0;color:#4a4a50;font-size:15px}

/* ==========================================================
   MAELSTROM — same clip, screen-blended, so only the spray
   survives on black
   ========================================================== */
.maelstrom{position:relative;background:#050506;overflow:hidden;padding:clamp(90px,11vw,170px) 0 clamp(80px,9vw,140px)}
.maelstrom__video{
  /* An absolutely-positioned *replaced* element resolves `width:auto` from its
     intrinsic ratio and then ignores `right` — so left/right insets alone can
     never stretch it, and the global `video{max-width:100%}` clamped it further.
     That is what left the black gutter down the right edge. Size it explicitly. */
  position:absolute;top:-10%;left:-10%;width:120%;height:120%;max-width:none;
  object-fit:cover;object-position:62% 38%;
  mix-blend-mode:screen;opacity:.62;
  filter:contrast(1.25) saturate(.85);
  transform:translate3d(0,calc(var(--mp,0) * -60px),0) scale(1.04);
  will-change:transform;
}
.maelstrom__veil{
  position:absolute;inset:0;
  background:
    radial-gradient(70% 60% at 22% 40%,rgba(5,5,6,.94) 0%,rgba(5,5,6,.55) 55%,transparent 78%),
    linear-gradient(to bottom,rgba(5,5,6,.85),rgba(5,5,6,.25) 40%,rgba(5,5,6,.95));
}
.maelstrom__inner{position:relative;z-index:2}
.maelstrom__lede{max-width:44ch;margin:26px 0 clamp(44px,6vw,78px);color:rgba(255,255,255,.66);font-size:clamp(15px,1.2vw,18px)}
.missions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.missions li{
  position:relative;padding:26px 24px 24px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
  transition:transform .45s cubic-bezier(.2,.8,.2,1),background .35s,border-color .35s;
}
.missions li:hover{transform:translateY(-8px);background:rgba(255,255,255,.08);border-color:rgba(255,198,11,.5)}
.missions__no{font-family:var(--display);font-size:34px;line-height:1;color:rgba(255,255,255,.22);transition:color .35s}
.missions li:hover .missions__no{color:var(--accent)}
.missions h3{margin:14px 0 10px;font-family:var(--display);font-size:clamp(1.2rem,1.8vw,1.7rem);color:#fff;text-transform:uppercase;letter-spacing:.01em}
.missions p{margin:0 0 20px;color:rgba(255,255,255,.6);font-size:14.5px}
.missions__meta{font-family:var(--cond);font-size:12px;letter-spacing:.2em;color:var(--accent)}

/* ==========================================================
   STATS
   ========================================================== */
.stats{background:var(--ink);color:#fff;padding:clamp(50px,6vw,86px) 0}
.stats__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.stat{border-left:2px solid rgba(255,255,255,.14);padding-left:20px}
.stat b{display:block;font-family:var(--display);font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:1;letter-spacing:.01em}
.stat span{display:block;margin-top:8px;font-family:var(--cond);font-size:12.5px;letter-spacing:.2em;color:rgba(255,255,255,.55)}

/* ==========================================================
   JOIN
   ========================================================== */
.join{position:relative;overflow:hidden;padding:clamp(80px,10vw,150px) 0 clamp(90px,10vw,150px);
  background:radial-gradient(90% 80% at 20% 20%,#fff 0%,var(--paper) 60%)}
.join__hex{-webkit-mask-image:linear-gradient(255deg,#000 0%,transparent 58%);mask-image:linear-gradient(255deg,#000 0%,transparent 58%)}
.join__inner{position:relative;z-index:2}
.join__lede{max-width:40ch;margin:26px 0 36px;color:#3a3a40;font-size:clamp(15px,1.2vw,18px)}
.join__form{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.join__form input{
  flex:1 1 320px;max-width:420px;height:56px;padding:0 20px;
  border:1px solid var(--edge);background:rgba(255,255,255,.7);
  font-family:var(--cond);font-size:17px;letter-spacing:.06em;color:var(--ink);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  outline:none;transition:border-color .3s,background .3s;
}
.join__form input:focus{border-color:var(--accent);background:#fff}
.join__form input::placeholder{color:var(--muted)}
.join__msg{flex:1 0 100%;margin:4px 0 0;min-height:22px;font-family:var(--cond);font-size:15px;letter-spacing:.1em}
.join__msg.is-ok{color:var(--teal)}
.join__msg.is-err{color:#b23b2e}

/* ==========================================================
   FOOTER
   ========================================================== */
.foot{background:var(--ink);color:rgba(255,255,255,.65);padding:44px 0}
.foot__grid{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.brand--foot{color:#fff}
.foot__links{display:flex;gap:26px;font-family:var(--cond);font-size:13.5px;letter-spacing:.18em}
.foot__links a:hover{color:var(--accent)}
.foot__note{margin:0;font-size:12.5px;letter-spacing:.04em}

/* ==========================================================
   LIGHTBOX
   ========================================================== */
.lightbox{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:clamp(16px,5vw,64px);
  background:rgba(5,5,6,.92);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .32s ease;
}
.lightbox.is-in{opacity:1}
.lightbox video{
  width:min(1240px,100%);max-height:86vh;object-fit:contain;background:#fff;
  transform:scale(.96);transition:transform .42s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9);
}
.lightbox.is-in video{transform:none}
.lightbox__close{
  position:absolute;top:clamp(14px,3vw,32px);right:clamp(14px,3vw,32px);
  width:46px;height:46px;color:#fff;font-size:18px;
  border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:.3s
}
.lightbox__close:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}

/* ==========================================================
   REVEAL
   ========================================================== */
[data-anim]{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
[data-anim].is-in{opacity:1;transform:none}
.hero [data-anim]{transition-delay:var(--d,0ms)}

/* dev capture mode — final state, no motion */
.dev-mode [data-anim]{opacity:1!important;transform:none!important;transition:none!important}

/* chapter text swap */
.is-swapping .display__line > span,
.is-swapping #ch-eyebrow,
.is-swapping #ch-lede{transition:transform .38s ease, opacity .38s ease;transform:translate3d(0,-104%,0);opacity:0}
.display__line > span,#ch-eyebrow,#ch-lede{transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .55s}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1380px){
  .chapter__thumb{flex-basis:78px}
}
@media (max-width:1180px){
  .l--copy{width:min(56ch,58vw)}
  .l--cards{width:min(640px,62vw)}
  .chapter__thumb{flex-basis:74px}
  .chapter__body small{display:none}
}
@media (max-width:960px){
  :root{--nav-h:72px}
  .nav__links,.nav__signin,.nav__rule{display:none}
  .nav__burger{display:block;margin-left:auto}
  .nav.is-open .nav__links{
    display:flex;position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;gap:0;
    background:rgba(255,255,255,.97);backdrop-filter:blur(16px);padding:8px var(--pad) 26px;
  }
  .nav.is-open .nav__links a{padding:15px 0;font-size:19px;border-bottom:1px solid var(--edge)}
  .nav__end{margin-left:auto}

  .hero{min-height:auto;padding-bottom:40px}
  /* the 3D stage collapses to a plain column below this width */
  .stage{height:auto;min-height:0;display:flex;flex-direction:column;perspective:none;transform-style:flat}
  .l{position:relative;inset:auto;transform:none!important;width:auto!important}
  .l--shadow{display:none}
  .l--video{order:-1;height:52vh;min-height:320px;margin:0 calc(var(--pad) * -1) 8px}
  .hero__video{
    -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
  }
  .l--copy{padding:0 var(--pad)}
  .l--trailer{padding:22px var(--pad) 0}
  .trailer{width:100%;max-width:420px}
  .l--cards{padding:26px var(--pad) 0}
  .chapters{flex-direction:column}
  .chapter{height:88px}
  .chapter__body small{display:block}
  .voyage__grid{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .missions{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:28px}
}
@media (max-width:560px){
  .brand__mark{font-size:19px}
  .brand__script{font-size:18px}
  .display{font-size:clamp(3rem,15vw,4.6rem)}
  .chapter__thumb{flex-basis:84px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-anim]{opacity:1;transform:none}
}