/* ==========================================================================
   MATRIX MISSIONS — shared stylesheet
   Monochrome system. Inter (body) / Outfit (display).
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  /* monochrome ramp — the only colours in the system */
  --black:#000000;
  --ink-950:#030303;
  --ink-900:#070707;
  --ink-850:#0b0b0b;
  --ink-800:#101010;
  --ink-700:#181818;
  --ink-600:#242424;
  --ink-500:#333333;
  --ink-400:#4d4d4d;
  --ink-300:#727272;
  --ink-200:#9c9c9c;
  --ink-100:#c8c8c8;
  --ink-050:#e8e8e8;
  --white:#ffffff;

  /* semantic */
  --bg:var(--black);
  --fg:var(--white);
  --muted:var(--ink-200);
  --faint:var(--ink-300);
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.07);
  --surface:rgba(255,255,255,.035);
  --surface-hi:rgba(255,255,255,.065);

  /* fluid type scale (from the brand content spec) */
  --text-xs:clamp(.75rem,.72rem + .12vw,.875rem);
  --text-sm:clamp(.875rem,.84rem + .14vw,1rem);
  --text-base:clamp(1rem,.97rem + .14vw,1.125rem);
  --text-lg:clamp(1.125rem,1.06rem + .3vw,1.375rem);
  --text-xl:clamp(1.25rem,1.16rem + .4vw,1.5rem);
  --text-2xl:clamp(1.5rem,1.33rem + .8vw,2rem);
  --text-3xl:clamp(1.875rem,1.6rem + 1.3vw,2.5rem);
  --text-4xl:clamp(2.25rem,1.7rem + 2.6vw,3.5rem);
  --text-5xl:clamp(3rem,2rem + 4.6vw,5rem);
  --text-6xl:clamp(3.5rem,1.9rem + 7.4vw,8rem);

  /* rhythm */
  --lh-tight:1.2;
  --lh-snug:1.35;
  --lh-normal:1.5;
  --lh-relaxed:1.65;
  --ls-tight:-0.02em;
  --ls-wide:0.02em;
  --ls-wider:0.05em;
  --ls-widest:0.1em;

  /* layout — 24-col grid carried over from the reference build */
  --gutter:32px;
  --gap:20px;
  --maxw:1920px;
  --header-h:82px;
  --header-top:40px;

  /* motion */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
}

@media (max-width:1199px){ :root{ --gutter:24px; --header-top:28px; } }
@media (max-width:860px){  :root{ --gutter:18px; --header-top:18px; --header-h:64px; } }

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:auto}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:var(--text-base);
  font-weight:400;
  line-height:var(--lh-normal);
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
ul,ol{list-style:none;margin:0;padding:0}
p,h1,h2,h3,h4,h5,h6,figure{margin:0}
img,svg,video,canvas{display:block;max-width:100%}
input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(255,255,255,.18);color:#fff}
:focus-visible{outline:1px solid rgba(255,255,255,.75);outline-offset:3px}

/* ---------------------------------------------------------------- type */
h1,h2,h3,h4,h5,h6,.display{
  font-family:'Outfit','Inter',sans-serif;
  font-weight:700;
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
}
h1,.t-5xl{font-size:var(--text-5xl)}
h2,.t-4xl{font-size:var(--text-4xl)}
h3,.t-3xl{font-size:var(--text-3xl)}
h4,.t-2xl{font-size:var(--text-2xl)}
h5,.t-xl{font-size:var(--text-xl)}
h6,.t-lg{font-size:var(--text-lg)}
.t-6xl{font-size:var(--text-6xl)}
.t-base{font-size:var(--text-base)}
.t-sm{font-size:var(--text-sm)}
.t-xs{font-size:var(--text-xs)}
p{line-height:var(--lh-relaxed)}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.upper{text-transform:uppercase}

/* tagline — decodes out of noise, no chrome, no pill */
.tagline{display:flex;flex-direction:column;gap:11px;align-self:flex-start;width:min(430px,62vw)}
.tagline-text{
  display:flex;flex-wrap:nowrap;
  font-size:var(--text-xs);font-weight:500;line-height:1;
  letter-spacing:.30em;text-transform:uppercase;color:#fff;
}
.tagline-text .dc{display:inline-block;min-width:.66em;text-align:center}
.tagline-text .dc-sp{min-width:.34em}
.tagline-rule{
  height:1px;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.55) 42%,rgba(255,255,255,.04) 100%);
  transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--e-out) .45s;
}
.tagline.in .tagline-rule{transform:scaleX(1)}

/* small caps label used above every section title */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Inter',sans-serif;font-size:var(--text-xs);font-weight:500;
  letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--ink-200);
}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.55}

/* ---------------------------------------------------------------- grid */
.grid{
  display:grid;
  grid-template-columns:repeat(24,minmax(0,1fr));
  column-gap:var(--gap);
  width:calc(100% - var(--gutter)*2);
  max-width:var(--maxw);
  margin-inline:auto;
}
.wrap{width:calc(100% - var(--gutter)*2);max-width:var(--maxw);margin-inline:auto}

/* ---------------------------------------------------------------- scene */
#scene{position:fixed;inset:0;z-index:0;background:var(--black)}
#scene canvas{width:100%;height:100%;display:block}
#scene-poster{
  position:absolute;inset:0;background:#000 center/cover no-repeat;
  opacity:1;transition:opacity 1.2s var(--e-out);pointer-events:none;
}
#scene.is-live #scene-poster{opacity:0}
#grain{
  position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.038;
  /* feTurbulence randomises R/G/B independently -> coloured speckle.
     saturate 0 makes it neutral; stitchTiles kills the repeat seam. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite;
  will-change:transform;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}
}
#vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 45%,transparent 45%,rgba(0,0,0,.72) 100%);
}

/* ---------------------------------------------------------------- cursor */
.cursor{
  position:fixed;left:0;top:0;width:28px;height:28px;margin:-14px 0 0 -14px;
  border:1px solid rgba(255,255,255,.5);border-radius:50%;
  z-index:200;pointer-events:none;opacity:0;will-change:transform;
  transition:width .32s var(--e-out),height .32s var(--e-out),margin .32s var(--e-out),
             background-color .32s,border-color .32s,opacity .4s;
}
.cursor.is-hover{width:52px;height:52px;margin:-26px 0 0 -26px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.85)}
.cursor-dot{
  position:fixed;left:0;top:0;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;
  background:#fff;z-index:201;pointer-events:none;opacity:0;will-change:transform;transition:opacity .4s
}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}


/* ==========================================================================
   navigation — one floating glass bar, pinned for the whole journey.
   The scene's luminance swings from near-black to near-white, so bare text
   washed out over bright terrain; the frosted panel is what makes icons
   legible at every scroll position, not just decoration.
   ========================================================================== */
#header{
  position:fixed;top:var(--header-top);left:0;right:0;z-index:40;
  pointer-events:none;
}
.nav-wrap{display:flex;justify-content:center}
.navbar{
  pointer-events:auto;
  display:flex;align-items:center;gap:clamp(8px,1vw,16px);
  padding:9px 10px 9px 18px;border-radius:100px;
  background:rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
          backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 20px 54px -22px rgba(0,0,0,.85);
}

.nav-brand{display:flex;align-items:center;gap:11px;padding-right:2px}
.nav-brand img{width:26px;flex:none}
.nav-brand span{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
}
.nav-div{width:1px;height:22px;background:rgba(255,255,255,.14);flex:none}

.nav-rail{display:flex;align-items:center;gap:2px;position:relative}
.nav-cap{
  position:absolute;left:0;top:0;height:40px;width:0;border-radius:100px;
  background:rgba(255,255,255,.12);opacity:0;pointer-events:none;
  transition:opacity .35s var(--e-out);will-change:transform,width;
}
.nav-cap.on{opacity:1}
.nav-item{
  display:flex;align-items:center;height:40px;padding:0 11px;border-radius:100px;
  color:var(--ink-200);transition:color .3s,background-color .3s;
}
.nav-item{position:relative;z-index:1}
.nav-item:hover{color:#fff}
.nav-ico{width:20px;height:20px;flex:none;
  transition:transform .42s var(--e-out);will-change:transform}
.nav-item:hover .nav-ico{transform:translateY(-1px) scale(1.09)}
.nav-item:active .nav-ico{transform:scale(.9);transition-duration:.12s}
.nav-ghost:hover .nav-ico{transform:translateX(2px)}
.nav-ico-play{width:14px;height:14px;transition:transform .4s var(--e-out)}
.nav-cta:hover .nav-ico-play{transform:translateX(3px)}
/* label stays collapsed until the icon is hovered or is the current route,
   so the rail reads as icons without anyone having to guess what they mean */
.nav-label{
  max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  font-size:var(--text-xs);letter-spacing:.06em;
  transition:max-width .42s var(--e-out),opacity .28s ease,margin-left .42s var(--e-out);
}
.nav-item:hover .nav-label,.nav-item.is-active .nav-label{max-width:9ch;opacity:1;margin-left:9px}
.nav-item.is-active{color:#fff}

.nav-act{display:flex;align-items:center;gap:6px}
.nav-ghost{
  padding:0 14px;height:40px;display:inline-flex;align-items:center;gap:8px;border-radius:100px;
  font-size:var(--text-xs);letter-spacing:.05em;color:var(--ink-200);
  transition:color .3s,background-color .3s;
}
.nav-ghost:hover{color:#fff;background:rgba(255,255,255,.09)}
.nav-cta{
  padding:0 18px;height:40px;display:inline-flex;align-items:center;gap:9px;border-radius:100px;
  background:#fff;color:#000;font-size:var(--text-xs);font-weight:500;letter-spacing:.05em;
  white-space:nowrap;transition:box-shadow .35s,transform .35s var(--e-out);
}
.nav-cta:hover{box-shadow:0 10px 26px -8px rgba(255,255,255,.5)}
.nav-cta:active{transform:scale(.97)}

.nav-burger{display:none;align-items:center;gap:10px;height:40px;padding:0 6px 0 12px;border-radius:100px}
.nav-burger-t{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;
              color:var(--ink-100);transition:color .3s}
.nav-burger-i{display:flex;flex-direction:column;align-items:center;justify-content:center;
              gap:5px;width:22px;height:22px;flex:none}
.nav-burger i{display:block;width:17px;height:1.4px;background:#fff;border-radius:2px;
              transition:transform .4s var(--e-out)}

/* over the light footer the glass has to flip with everything else */
body.is-light .navbar{
  background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 18px 46px -24px rgba(0,0,0,.35);
}
body.is-light .nav-brand span,body.is-light .nav-item.is-active,
body.is-light .nav-item:hover,body.is-light .nav-ghost:hover{color:#0a0a0a}
body.is-light .nav-item,body.is-light .nav-ghost{color:#5a5a5a}
body.is-light .nav-ghost:hover{background:rgba(0,0,0,.06)}
body.is-light .nav-cap{background:rgba(0,0,0,.08)}
body.is-light .nav-div{background:rgba(0,0,0,.12)}
body.is-light .nav-brand img{filter:invert(1)}
body.is-light .nav-cta{background:#0a0a0a;color:#fff}
body.is-light .nav-burger i{background:#0a0a0a}
body.is-light .nav-burger-t{color:#0a0a0a}

@media (max-width:1180px){
  .nav-brand span{display:none}
  .nav-brand{padding-right:0}
}
@media (max-width:900px){
  /* Mobile bar: the floating pill becomes a full-width bar,
     brand hard left, menu hard right, nothing competing between them.
     Get Started is not lost - it is a full-width button in the overlay. */
  .navbar{
    width:100%;justify-content:space-between;gap:10px;
    padding:10px 8px 10px 16px;border-radius:15px;
  }
  .nav-rail,.nav-div,.nav-ghost,.nav-cta{display:none}
  .nav-burger{display:flex}
  .nav-brand span{display:inline}   /* the wordmark is the anchor, keep it */
}
@media (max-width:560px){
  .navbar{padding:9px 6px 9px 14px}
}

/* ---------------------------------------------------------------- shell */
main{position:relative;z-index:3}

/* ---------------------------------------------------------------- hero */
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(97deg,rgba(0,0,0,.90) 0%,rgba(0,0,0,.70) 24%,rgba(0,0,0,.22) 44%,transparent 60%),
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 26%);
}
/* svh, not vh: on mobile the URL bar hiding grows vh mid-scroll, which
   changes the hero's total length underneath the camera track. svh is
   the stable small-viewport unit, and equals vh on desktop. */
.hero{position:relative;height:320svh}
.hero-inner{position:sticky;top:0;height:100svh;width:100%;overflow:hidden}
.hero-lockup{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  padding-top:calc(var(--header-top) + var(--header-h) + 18px);
  padding-bottom:clamp(64px,12vh,120px);
}
.lockup{grid-column:3 / 23;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,34px);opacity:0}
.lockup-badge{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  padding:8px 16px 8px 12px;border:1px solid var(--line);border-radius:100px;
  font-size:var(--text-xs);letter-spacing:var(--ls-wider);text-transform:uppercase;
  color:var(--ink-100);background:rgba(255,255,255,.03);backdrop-filter:blur(6px);
}
.lockup-badge i{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 12px 2px rgba(255,255,255,.75);animation:pulse 2.4s var(--e-inout) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.lockup-mark{display:flex;align-items:center;gap:clamp(16px,2vw,28px)}
.lockup-mark img{width:clamp(48px,5.4vw,84px);height:auto}
.lockup-mark .rule{width:1px;height:clamp(44px,5vw,76px);background:var(--line)}
.lockup h1{
  font-size:var(--text-6xl);line-height:.96;letter-spacing:-0.035em;text-transform:uppercase;
  max-width:16ch;
}
.lockup h1 em{font-style:normal;color:var(--ink-200)}
.lockup .sub{max-width:52ch;color:var(--ink-100);font-size:var(--text-lg);line-height:var(--lh-snug)}

.scroll-cue{position:absolute;z-index:2;left:0;right:0;bottom:clamp(24px,4vh,44px)}
.scroll-cue-inner{grid-column:3 / 23;display:flex;align-items:center;gap:16px;opacity:0}
.scroll-cue-inner span{font-size:var(--text-xs);letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--ink-200)}
.scroll-line{width:56px;height:1px;background:rgba(255,255,255,.2);position:relative;overflow:hidden}
.scroll-line::after{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-100%);animation:sweep 2.8s var(--e-inout) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* flight HUD — instrumentation for the journey, not a 'scroll' label */
.hud{
  /* z-index 4 puts the instruments above the scene (0) and page content (3)
     but BELOW the opaque footer (6), so the footer physically covers them as
     it scrolls up. No class toggle, no observer, no measurement to go wrong. */
  position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;
  transition:opacity 1.2s var(--e-out) .55s;
}
.hud.ready{opacity:1}
.hud-rail{
  position:absolute;left:max(12px,calc(var(--gutter) - 14px));
  top:26vh;bottom:22vh;width:1px;background:rgba(255,255,255,.10);
}
.hud-rail i{position:absolute;left:0;top:0;width:1px;height:0;background:rgba(255,255,255,.85)}
.hud-rail i::after{
  content:"";position:absolute;left:-2px;bottom:-2.5px;width:5px;height:5px;border-radius:50%;
  background:#fff;box-shadow:0 0 12px 3px rgba(255,255,255,.55);
}
.hud-bottom{position:absolute;left:0;right:0;bottom:clamp(20px,4vh,40px)}
.hud-inner{grid-column:3 / 23;display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.hud-read{display:flex;align-items:baseline;gap:clamp(16px,2vw,34px)}
.hud-pair{display:inline-flex;align-items:baseline;gap:8px}
.hud-k{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-400)}
.hud-v{
  font-size:var(--text-sm);letter-spacing:.10em;color:#fff;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.hud-u{font-size:9px;letter-spacing:.2em;color:var(--ink-400);margin-left:-4px}
.hud-ch{text-transform:uppercase;letter-spacing:.20em;font-size:var(--text-xs);min-width:9ch;display:inline-block}
@media (max-width:860px){.hud-rail{display:none}.hud-right{display:none}}

/* ---------------------------------------------------------------- reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--e-out),transform 1.1s var(--e-out)}
.reveal.in{opacity:1;transform:none}
.w{display:inline-block;opacity:.16;will-change:opacity}


/* ==========================================================================
   content sections — every block opens rather than simply appearing
   ========================================================================== */
.sec{position:relative;padding:clamp(110px,16vh,210px) 0}
.sec-head{grid-column:3 / 21;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px);margin-bottom:clamp(56px,8vh,110px)}
.sec-title{font-size:var(--text-4xl);line-height:1.06;letter-spacing:-0.03em;text-transform:uppercase;max-width:20ch}

/* ---- masked line/word reveal ------------------------------------------- */
.ln-w{display:inline-block;overflow:hidden;vertical-align:top}
.ln-i{display:inline-block;transform:translateY(105%);transition:transform 1.05s var(--e-out)}
.in .ln-i,.ln-go .ln-i{transform:translateY(0)}

/* ---- capability cards --------------------------------------------------- */
.cards{grid-column:3 / 23;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft)}
.card{
  background:rgba(0,0,0,.42);backdrop-filter:blur(3px);
  padding:clamp(26px,2.6vw,42px) clamp(20px,1.8vw,30px) clamp(40px,5vw,72px);
  display:flex;flex-direction:column;gap:14px;min-height:clamp(240px,26vw,330px);
  opacity:0;transform:translateY(34px);
  transition:opacity .9s var(--e-out),transform 1s var(--e-out),background-color .5s;
}
.in > .card{opacity:1;transform:none}
.card:hover{background:rgba(255,255,255,.055)}
.card-no{font-size:10px;letter-spacing:.24em;color:var(--ink-400)}
.card-t{font-size:var(--text-xl);letter-spacing:-0.01em;margin-top:auto}
.card-d{font-size:var(--text-sm);color:var(--ink-200);line-height:var(--lh-relaxed)}

/* ---- numbers ------------------------------------------------------------ */
.sec-num{padding-block:clamp(70px,9vh,120px)}
.nums{grid-column:3 / 23;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,50px);margin:0}
.num{opacity:0;transform:translateY(26px);transition:opacity .85s var(--e-out),transform .95s var(--e-out);
     border-top:1px solid var(--line);padding-top:20px}
.in > .num{opacity:1;transform:none}
.num-v{font-family:'Outfit',sans-serif;font-weight:700;font-size:var(--text-4xl);line-height:1;letter-spacing:-0.03em;
       font-variant-numeric:tabular-nums}
.num-k{margin:10px 0 0;font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-300)}

/* ---- focus blocks ------------------------------------------------------- */
.focus{grid-column:3 / 15;display:flex;flex-direction:column;gap:clamp(16px,2vw,26px);
       padding-block:clamp(60px,9vh,130px);border-top:1px solid var(--line-soft)}
.focus-r{grid-column:11 / 23;text-align:right;align-items:flex-end}
.focus-idx{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-400)}
.focus-t{font-size:var(--text-3xl);line-height:1.08;letter-spacing:-0.025em;max-width:16ch}
.focus-d{font-size:var(--text-base);color:var(--ink-200);max-width:46ch}
.ticks{display:flex;flex-wrap:wrap;gap:10px 8px;margin-top:6px}
.focus-r .ticks{justify-content:flex-end}
.ticks li{font-size:var(--text-xs);letter-spacing:.06em;color:var(--ink-100);
          border:1px solid var(--line);border-radius:100px;padding:7px 14px}

/* ---- approach rows ------------------------------------------------------ */
.rows{grid-column:3 / 23}
.row{
  display:grid;grid-template-columns:70px minmax(0,4fr) minmax(0,6fr);gap:clamp(16px,3vw,48px);
  align-items:baseline;padding:clamp(26px,3.4vh,44px) 0;border-top:1px solid var(--line-soft);
  opacity:0;transform:translateY(28px);transition:opacity .9s var(--e-out),transform 1s var(--e-out);
}
.in > .row{opacity:1;transform:none}
.row:last-child{border-bottom:1px solid var(--line-soft)}
.row-no{font-size:10px;letter-spacing:.24em;color:var(--ink-400)}
.row-t{font-size:var(--text-xl);letter-spacing:-0.01em}
.row-d{font-size:var(--text-sm);color:var(--ink-200)}

/* ---- cta ---------------------------------------------------------------- */
.sec-cta{padding-block:clamp(130px,20vh,260px)}
.cta{grid-column:3 / 21;display:flex;flex-direction:column;gap:clamp(20px,3vw,34px);align-items:flex-start}
.cta-t{font-size:var(--text-5xl);line-height:1;letter-spacing:-0.035em;text-transform:uppercase;max-width:14ch}
.cta-d{font-size:var(--text-lg);color:var(--ink-200);max-width:44ch}
.cta-btn{
  display:inline-flex;align-items:center;gap:14px;margin-top:10px;
  padding:17px 30px;border:1px solid var(--line);border-radius:100px;
  font-size:var(--text-sm);letter-spacing:.06em;
  transition:background-color .4s,color .4s,border-color .4s,gap .4s var(--e-out);
}
.cta-btn:hover{background:#fff;color:#000;border-color:#fff;gap:20px}

@media (max-width:1199px){
  .sec-head{grid-column:2 / 24}
  .cards,.nums,.rows,.cta{grid-column:2 / 24}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .focus{grid-column:2 / 15}
  .focus-r{grid-column:11 / 24}
}
@media (max-width:860px){
  .sec{padding:clamp(80px,11vh,130px) 0}
  .sec-head,.cards,.nums,.rows,.cta,.focus,.focus-r{grid-column:1 / -1}
  .cards{grid-template-columns:1fr}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .focus-r{text-align:left;align-items:flex-start}
  .focus-r .ticks{justify-content:flex-start}
  .row{grid-template-columns:1fr;gap:8px}
}


/* ==========================================================================
   CTA
   ========================================================================== */
.cta-t{
  font-size:var(--text-6xl);line-height:.92;letter-spacing:-0.042em;text-transform:uppercase;
  max-width:13ch;margin:0;
}
.cta-acts{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);flex-wrap:wrap;margin-top:8px}
.cta-btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:17px 32px;border-radius:100px;background:#fff;color:#000;
  font-size:var(--text-sm);letter-spacing:.04em;font-weight:500;
  transition:transform .4s var(--e-out),box-shadow .4s;
}
.cta-btn:hover{box-shadow:0 14px 40px -12px rgba(255,255,255,.45)}
.cta-link{
  display:inline-flex;align-items:center;gap:10px;color:var(--ink-100);
  font-size:var(--text-sm);letter-spacing:.04em;transition:color .35s,gap .35s var(--e-out);
}
.cta-link:hover{color:#fff;gap:16px}
@media (max-width:860px){
  .cta-t{max-width:10ch}
}

/* ==========================================================================
   footer — the page surfaces into light
   ========================================================================== */
#footer{
  position:relative;z-index:6;background:#efefef;color:#0a0a0a;
  padding:clamp(70px,9vh,120px) 0 clamp(34px,4vh,54px);
  --line:rgba(0,0,0,.14);--line-soft:rgba(0,0,0,.09);
}
#footer .grid{row-gap:0}
.f-wordmark{grid-column:3 / 23;margin-bottom:clamp(50px,7vh,96px)}
.f-wordmark{cursor:crosshair}
.f-wordmark svg{width:100%;height:auto;display:block;color:#0a0a0a;overflow:visible}
.f-wordmark .dm{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;
                transition:transform .72s var(--e-out),opacity .5s ease}
.f-wordmark.in .dm{transform:scale(1);opacity:1}

.f-brand{grid-column:3 / 10;display:flex;gap:16px;align-items:flex-start;padding-top:28px;border-top:1px solid var(--line)}
.f-brand img{filter:invert(1);flex:none;margin-top:2px}
.f-brand p{font-size:var(--text-sm);line-height:var(--lh-relaxed);color:#4a4a4a;max-width:30ch}
.f-brand strong{color:#0a0a0a;font-weight:600}

.f-cols{grid-column:10 / 23;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,26px);
        padding-top:28px;border-top:1px solid var(--line)}
.f-col h3{font-family:'Inter',sans-serif;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
          color:#8a8a8a;margin-bottom:16px}
.f-col li + li{margin-top:9px}
.f-col a{font-size:var(--text-sm);color:#3a3a3a;transition:color .3s}
.f-col a:hover{color:#000}

.f-bot{grid-column:3 / 23;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
       margin-top:clamp(48px,7vh,90px);padding-top:22px;border-top:1px solid var(--line);
       font-size:var(--text-xs);color:#6a6a6a}
.f-bot ul{display:flex;gap:24px}
.f-bot a{transition:color .3s}
.f-bot a:hover{color:#000}

@media (max-width:1199px){
  .f-wordmark,.f-bot{grid-column:2 / 24}
  .f-brand{grid-column:2 / 10}
  .f-cols{grid-column:9 / 24}
}
@media (max-width:860px){
  .f-wordmark,.f-brand,.f-cols,.f-bot{grid-column:1 / -1}
  .f-cols{margin-top:34px;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}
  .f-bot{margin-top:40px}
}

/* The HUD reads out the flight. Once the footer opens there is no flight
   left to report, and it was colliding with the brand copy, so it leaves. */
/* instruments belong to the flight; the moment the footer surfaces they go,
   and they go quickly rather than trailing the intro's slow entry easing */
body.is-light .hud{opacity:0 !important;transition-delay:0s !important;transition-duration:.3s !important}
body.is-light .cursor{border-color:rgba(0,0,0,.45)}
body.is-light .cursor.is-hover{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.8)}
body.is-light .cursor-dot{background:#000}
body.is-light #grain{opacity:.022}

/* ---------------------------------------------------------------- loader */
#loader{
  position:fixed;inset:0;z-index:300;background:var(--black);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px;
  transition:opacity 1s var(--e-out),visibility 1s;
}
#loader.done{opacity:0;visibility:hidden}
#loader img{width:56px;opacity:.9}
#loader .bar{width:140px;height:1px;background:rgba(255,255,255,.14);position:relative;overflow:hidden}
#loader .bar i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e-out)}
#loader .lbl{font-size:10px;letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--ink-400)}

/* short viewports: the display size has to give way before the layout breaks */
@media (max-height:860px){
  :root{--text-6xl:clamp(2.6rem,1.3rem + 5.2vw,5rem)}
  .lockup{gap:clamp(12px,1.8vw,24px)}
  .lockup .sub{font-size:var(--text-base)}
  .hud-tl,.hud-tr{display:none}
}
@media (max-height:700px){
  :root{--text-6xl:clamp(2.1rem,1.1rem + 4.2vw,3.6rem)}
  .lockup-mark img:first-child{width:clamp(38px,4vw,54px)}
  .lockup-mark .rule{height:34px}
  .lockup .sub{font-size:var(--text-sm);max-width:46ch}
}

@media (prefers-reduced-motion:reduce){
  .scroll-line::after,#grain,.lockup-badge i{animation:none}
  .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   page masthead + aside card — inner routes
   ========================================================================== */
.phead{position:relative;padding:calc(var(--header-h) + clamp(150px,22vh,250px)) 0 clamp(60px,9vh,120px)}
.phead-in{grid-column:3 / 21;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px)}
.phead-t{font-size:var(--text-5xl);line-height:1;letter-spacing:-0.035em;text-transform:uppercase;max-width:15ch;margin:0}
.phead-d{font-size:var(--text-lg);color:var(--ink-200);max-width:46ch;margin:0}

.pcard{
  grid-column:16 / 23;align-self:end;
  display:flex;flex-direction:column;gap:12px;
  padding:clamp(22px,2.4vw,32px);
  border:1px solid var(--line-soft);border-radius:14px;
  background:rgba(255,255,255,.028);
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
  transition:background-color .4s,border-color .4s;
}
.pcard:hover{background:rgba(255,255,255,.055);border-color:var(--line)}
.pcard-k{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-400)}
.pcard-t{font-size:var(--text-xl);letter-spacing:-0.01em;margin:0}
.pcard-d{font-size:var(--text-sm);color:var(--ink-200);line-height:var(--lh-relaxed);margin:0}
.pcard-l{grid-column:3 / 10}

@media (max-width:1199px){
  .phead-in{grid-column:2 / 24}
  .pcard,.pcard-l{grid-column:2 / 24;margin-top:clamp(28px,4vh,48px)}
}
@media (max-width:860px){
  .phead{padding-top:calc(var(--header-h) + clamp(100px,15vh,160px))}
  .phead-in,.pcard,.pcard-l{grid-column:1 / -1}
}

/* ==========================================================================
   legal routes — /terms and /refund-policy
   ========================================================================== */
.legal{grid-column:4 / 20;display:flex;flex-direction:column;gap:clamp(34px,4.5vh,56px)}
.legal-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;
  font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-400);
}
.switch{
  display:inline-flex;gap:5px;padding:5px;border:1px solid var(--line-soft);border-radius:100px;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.switch a{
  padding:8px 17px;border-radius:100px;color:var(--ink-300);
  font-size:var(--text-xs);letter-spacing:.09em;white-space:nowrap;
  transition:background-color .35s,color .35s;
}
.switch a:hover{color:#fff}
.switch a[aria-current="page"]{background:rgba(255,255,255,.1);color:#fff}

.lblock{
  padding:clamp(26px,3vw,40px);
  border:1px solid var(--line-soft);border-radius:16px;
  background:rgba(8,8,8,.55);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
}
.lblock h2{font-size:var(--text-2xl);letter-spacing:-0.02em;margin:0 0 20px;text-transform:uppercase}
.lblock p{font-size:var(--text-base);color:var(--ink-200);line-height:var(--lh-relaxed);margin:0 0 18px}
.lblock p:last-child{margin-bottom:0}
.lblock ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.lblock p + ul{margin-top:4px}
.lblock li{
  position:relative;padding-left:28px;
  font-size:var(--text-sm);color:var(--ink-200);line-height:var(--lh-relaxed);
}
.lblock li::before{content:"";position:absolute;left:0;top:.66em;width:13px;height:1px;background:var(--ink-500)}
.lblock a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-500);transition:text-decoration-color .3s}
.lblock a:hover{text-decoration-color:#fff}

@media (max-width:1199px){.legal{grid-column:2 / 24}}
@media (max-width:860px){.legal{grid-column:1 / -1}}

/* ==========================================================================
   open roles — /careers expanders
   ========================================================================== */
.roles{grid-column:3 / 23;display:flex;flex-direction:column;gap:14px}
.role{
  border:1px solid var(--line-soft);border-radius:14px;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background-color .4s,border-color .4s;
}
.role:hover{border-color:var(--line)}
.role[open]{background:rgba(255,255,255,.045);border-color:var(--line)}
.role > summary{
  list-style:none;cursor:pointer;padding:clamp(22px,2.4vw,30px);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(16px,2vw,26px);
}
.role > summary::-webkit-details-marker{display:none}
.role > summary:focus-visible{outline:1px solid var(--ink-300);outline-offset:3px;border-radius:14px}
.role-badge{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-300);
  border:1px solid var(--line-soft);border-radius:100px;padding:7px 13px;white-space:nowrap;
}
.role-t{font-size:var(--text-xl);letter-spacing:-0.01em;margin:0}
.role-b{font-size:var(--text-sm);color:var(--ink-300);margin:5px 0 0}
.role-sign{position:relative;width:16px;height:16px;color:var(--ink-300);flex:none}
.role-sign::before,.role-sign::after{content:"";position:absolute;background:currentColor;transition:transform .45s var(--e-out)}
.role-sign::before{left:0;top:7px;width:16px;height:1px}
.role-sign::after{left:7px;top:0;width:1px;height:16px}
.role[open] .role-sign::after{transform:scaleY(0)}
.role-body{
  padding:0 clamp(22px,2.4vw,30px) clamp(26px,3vw,36px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,46px);
}
.role-body h4{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-400);margin:0 0 16px}
.role-body ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.role-body li{position:relative;padding-left:24px;font-size:var(--text-sm);color:var(--ink-200);line-height:var(--lh-relaxed)}
.role-body li::before{content:"";position:absolute;left:0;top:.66em;width:11px;height:1px;background:var(--ink-500)}
.role-act{grid-column:1 / -1}

@media (max-width:1199px){.roles{grid-column:2 / 24}}
@media (max-width:860px){
  .roles{grid-column:1 / -1}
  .role > summary{grid-template-columns:minmax(0,1fr) auto;gap:14px}
  .role-badge{grid-column:1 / -1;justify-self:start}
  .role-body{grid-template-columns:1fr}
}

/* ==========================================================================
   forms — /contact and /apply
   ========================================================================== */
.split{
  grid-column:3 / 23;display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(34px,5vw,84px);align-items:start;
}
.info-t{font-size:var(--text-3xl);line-height:1.08;letter-spacing:-0.025em;text-transform:uppercase;margin:0 0 20px}
.info-d{font-size:var(--text-base);color:var(--ink-200);line-height:var(--lh-relaxed);margin:0 0 clamp(30px,4vh,48px);max-width:44ch}
.info-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.info-list li{
  display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--line-soft);
}
.info-list li:last-child{border-bottom:1px solid var(--line-soft)}
.info-k{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-400)}
.info-v{font-size:var(--text-sm);color:var(--ink-100)}
.info-v a{color:inherit;transition:color .3s}
.info-v a:hover{color:#fff}

.formcard{
  padding:clamp(26px,3vw,42px);
  border:1px solid var(--line-soft);border-radius:18px;
  background:rgba(8,8,8,.55);
  backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);
}
.formcard h2{font-size:var(--text-2xl);letter-spacing:-0.02em;text-transform:uppercase;margin:0 0 clamp(22px,3vh,32px)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,22px)}
.field{display:flex;flex-direction:column;gap:9px}
.field-wide{grid-column:1 / -1}
.field label{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;
  border:1px solid var(--line-soft);border-radius:10px;
  background:rgba(255,255,255,.03);color:#fff;
  font-family:inherit;font-size:var(--text-sm);line-height:1.5;
  transition:border-color .35s,background-color .35s;
}
.field textarea{resize:vertical;min-height:132px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-500)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ink-300);background:rgba(255,255,255,.06);
}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-300) 50%),
                   linear-gradient(135deg,var(--ink-300) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field select option{background:#0a0a0a;color:#fff}
.form-act{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:6px}
.form-btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 32px;border-radius:100px;border:0;background:#fff;color:#000;cursor:pointer;
  font-family:inherit;font-size:var(--text-sm);letter-spacing:.04em;font-weight:500;
  transition:box-shadow .4s;
}
.form-btn:hover{box-shadow:0 14px 40px -12px rgba(255,255,255,.45)}
.form-msg{font-size:var(--text-sm);color:var(--ink-200);margin:0;max-width:34ch}

@media (max-width:1199px){.split{grid-column:2 / 24;grid-template-columns:1fr;gap:clamp(40px,6vh,64px)}}
@media (max-width:860px){.split{grid-column:1 / -1}.fields{grid-template-columns:1fr}}

/* ==========================================================================
   application form — /apply
   ========================================================================== */
.formwrap{grid-column:6 / 20}
.field input[type="file"]{padding:11px 14px;cursor:pointer;color:var(--ink-200)}
.field input[type="file"]::file-selector-button{
  margin-right:14px;padding:9px 17px;border-radius:100px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.05);color:#fff;
  font-family:inherit;font-size:var(--text-xs);letter-spacing:.06em;cursor:pointer;
  transition:background-color .35s;
}
.field input[type="file"]::file-selector-button:hover{background:rgba(255,255,255,.12)}
.field-hint{font-size:var(--text-xs);color:var(--ink-400);margin:0}
.form-btn-ghost{background:transparent;color:var(--ink-100);border:1px solid var(--line)}
.form-btn-ghost:hover{box-shadow:none;background:rgba(255,255,255,.06);color:#fff}

.done{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.done-mark{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:#fff}
.done-t{font-size:var(--text-2xl);letter-spacing:-0.02em;text-transform:uppercase;margin:0}
.done-d{font-size:var(--text-sm);color:var(--ink-200);line-height:var(--lh-relaxed);margin:0;max-width:46ch}

@media (max-width:1199px){.formwrap{grid-column:3 / 23}}
@media (max-width:860px){.formwrap{grid-column:1 / -1}}

/* ==========================================================================
   group menu — the other Matrix companies
   ========================================================================== */
.nav-grp{position:relative}
.nav-grp-btn{border:0;background:transparent;font-family:inherit;cursor:pointer}
.nav-grp-btn[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.09)}
.nav-grp-menu{
  position:absolute;top:calc(100% + 13px);right:0;min-width:216px;padding:12px;
  border:1px solid rgba(255,255,255,.12);border-radius:16px;
  background:rgba(14,14,14,.72);
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 26px 64px -30px rgba(0,0,0,.92);
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .32s var(--e-out),transform .32s var(--e-out),visibility .32s;
}
.nav-grp-menu.is-open{opacity:1;visibility:visible;transform:none}
.nav-grp-k{
  display:block;padding:4px 12px 11px;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-500);
}
.nav-grp-menu ul{display:flex;flex-direction:column;gap:2px}
.nav-grp-menu a{
  display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:10px;
  font-size:var(--text-xs);letter-spacing:.04em;color:var(--ink-200);white-space:nowrap;
  transition:background-color .3s,color .3s;
}
.nav-grp-menu a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-grp-menu a svg{margin-left:auto;opacity:.45;flex:none;transition:opacity .3s}
.nav-grp-menu a:hover svg{opacity:1}
.nav-grp-menu .is-here{color:#fff}
.nav-grp-menu .is-here::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}

body.is-light .nav-grp-btn[aria-expanded="true"]{color:#0a0a0a;background:rgba(0,0,0,.06)}
body.is-light .nav-grp-menu{
  background:rgba(252,252,252,.86);border-color:rgba(0,0,0,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 26px 64px -30px rgba(0,0,0,.4);
}
body.is-light .nav-grp-k{color:#8a8a8a}
body.is-light .nav-grp-menu a{color:#4a4a4a}
body.is-light .nav-grp-menu a:hover,body.is-light .nav-grp-menu .is-here{color:#0a0a0a}
body.is-light .nav-grp-menu a:hover{background:rgba(0,0,0,.06)}

@media (max-width:900px){.nav-grp{display:none}}
@media (prefers-reduced-motion:reduce){.nav-grp-menu{transition-duration:.01ms}}

/* Hover bridge: the menu floats 13px below the button, and without this the
   pointer crosses dead space on the way down and the menu closes. Inert while
   the menu is hidden, because visibility:hidden takes the pseudo with it. */
.nav-grp-menu::before{content:"";position:absolute;left:0;right:0;top:-15px;height:15px}

/* ==========================================================================
   split CTA — label pill + arrow disc
   ========================================================================== */
.cta-pill{display:inline-flex;align-items:center;gap:7px}
.cta-pill-label{
  display:inline-flex;align-items:center;height:60px;padding:0 36px;border-radius:100px;
  background:#fff;color:#000;
  font-size:var(--text-sm);letter-spacing:.04em;font-weight:500;white-space:nowrap;
  transition:padding .45s var(--e-out),box-shadow .45s;
}
.cta-pill-arrow{
  display:inline-grid;place-items:center;flex:none;
  width:60px;height:60px;border-radius:50%;background:#fff;color:#000;
  transition:box-shadow .45s,transform .45s var(--e-out);
}
.cta-pill-arrow svg{transition:transform .5s var(--e-out)}
.cta-pill:hover .cta-pill-label{padding:0 42px;box-shadow:0 16px 44px -14px rgba(255,255,255,.5)}
.cta-pill:hover .cta-pill-arrow{box-shadow:0 16px 44px -14px rgba(255,255,255,.5)}
.cta-pill:hover .cta-pill-arrow svg{transform:rotate(45deg)}

@media (max-width:860px){
  .cta-pill-label{height:54px;padding:0 28px}
  .cta-pill-arrow{width:54px;height:54px}
  .cta-pill:hover .cta-pill-label{padding:0 32px}
}
@media (prefers-reduced-motion:reduce){
  .cta-pill-label,.cta-pill-arrow,.cta-pill-arrow svg{transition:none}
  .cta-pill:hover .cta-pill-arrow svg{transform:none}
}

/* ==========================================================================
   mobile menu — below 900px, where the rail collapses to the burger
   ========================================================================== */
.navmenu{
  position:fixed;inset:0;z-index:38;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--header-top) + var(--header-h) + 34px) var(--gutter) 40px;
  background:rgba(6,6,6,.84);
  backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);
  opacity:0;visibility:hidden;
  transition:opacity .48s var(--e-out),visibility .48s;
}
body.menu-open .navmenu{opacity:1;visibility:visible}
.navmenu-in{display:flex;flex-direction:column;gap:clamp(26px,4.5vh,48px);max-height:100%;overflow-y:auto}

.navmenu-rail{display:flex;flex-direction:column}
.navmenu-item{
  display:flex;align-items:baseline;gap:15px;
  padding:15px 0;border-bottom:1px solid var(--line-soft);
  font-family:'Outfit',sans-serif;font-size:var(--text-3xl);font-weight:700;
  letter-spacing:-0.025em;text-transform:uppercase;color:var(--ink-300);
  opacity:0;transform:translateY(15px);
  transition:color .35s,opacity .5s var(--e-out),transform .5s var(--e-out);
}
body.menu-open .navmenu-item{opacity:1;transform:none}
body.menu-open .navmenu-item:nth-child(1){transition-delay:.06s}
body.menu-open .navmenu-item:nth-child(2){transition-delay:.12s}
body.menu-open .navmenu-item:nth-child(3){transition-delay:.18s}
body.menu-open .navmenu-item:nth-child(4){transition-delay:.24s}
body.menu-open .navmenu-item:nth-child(5){transition-delay:.30s}
.navmenu-item.is-active{color:#fff}
.navmenu-no{font-family:'Inter',sans-serif;font-size:10px;font-weight:500;letter-spacing:.24em;color:var(--ink-500)}

.navmenu-k{display:block;margin-bottom:13px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-500)}
.navmenu-co{display:flex;flex-direction:column;gap:11px}
.navmenu-co a{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--ink-200)}
.navmenu-co a svg{opacity:.5}
.navmenu-co .is-here{color:#fff}
.navmenu-co .is-here::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}

.navmenu-act{display:flex;gap:11px;flex-wrap:wrap}
.navmenu-ghost,.navmenu-cta{
  display:inline-flex;align-items:center;justify-content:center;flex:1 1 140px;
  height:52px;padding:0 26px;border-radius:100px;
  font-size:var(--text-sm);letter-spacing:.05em;font-weight:500;
}
.navmenu-ghost{border:1px solid var(--line);color:var(--ink-100)}
.navmenu-cta{background:#fff;color:#000}

body.menu-open{overflow:hidden}
body.menu-open .nav-burger i:first-child{transform:translateY(3.2px) rotate(45deg)}
body.menu-open .nav-burger i:last-child{transform:translateY(-3.2px) rotate(-45deg)}

@media (min-width:901px){.navmenu{display:none}}
@media (prefers-reduced-motion:reduce){
  .navmenu,.navmenu-item{transition-duration:.01ms}
  body.menu-open .navmenu-item{transition-delay:0s}
}

/* ==========================================================================
   responsive grid — the 24-column grid cannot survive a phone
   --------------------------------------------------------------------------
   24 columns means 23 gaps. At --gap:20px that is 460px of gap alone, which
   is wider than a 412px phone's content box before a single pixel of content.
   The grid then overflows and every child gets clipped by overflow-x:hidden.
   Fewer columns and a smaller gap as the viewport narrows; everything that
   spans the full width uses 1 / -1 so it does not care how many there are.
   ========================================================================== */
@media (max-width:1199px){
  :root{--gap:16px}
}
@media (max-width:860px){
  :root{
    --gap:12px;
    /* Display type had no step between 561px and desktop, so at tablet width
       a single long word ("communication?") rendered 752px wide inside a
       584px box and pushed past the viewport. */
    --text-6xl:clamp(2.8rem,0.6rem + 7.2vw,4.6rem);
  }
  /* ch-based caps are narrower than a long word can ever be; let the heading
     use the full column here, and break rather than overflow in the worst case */
  .cta-t,.sec-title,.phead-t{max-width:100%;overflow-wrap:break-word}
  .grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  /* the hero lockup never had a narrow-screen rule at all */
  .lockup,.scroll-cue-inner{grid-column:1 / -1}
  /* long addresses have no break opportunity in a narrow footer column */
  .f-col a{overflow-wrap:anywhere}
}
@media (max-width:560px){
  :root{
    --gap:10px;
    /* the hero type overrides were keyed on viewport HEIGHT only, so a tall
       phone (412x915) still got the full desktop display size */
    --text-6xl:clamp(2.4rem,1.2rem + 5.6vw,3.4rem);
    --text-5xl:clamp(2.1rem,1.4rem + 3.4vw,2.9rem);
  }
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* legal links in the mobile overlay — the real footer is a full page-scroll
   away on a phone, so terms and refunds need a reachable home up here */
.navmenu-legal{display:flex;flex-wrap:wrap;gap:10px 24px;padding-top:2px}
.navmenu-legal a{font-size:var(--text-xs);letter-spacing:.06em;color:var(--ink-400);transition:color .3s}
.navmenu-legal a:hover{color:#fff}

/* ==========================================================================
   staff area — login. No scene, no Three.js: this page and everything past
   it is a tool, so it loads instantly and stays quiet.
   ========================================================================== */
.auth{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(28px,6vh,64px) var(--gutter);gap:clamp(20px,3.5vh,34px);
}
.auth-top{width:100%;max-width:520px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.auth-brand{display:flex;align-items:center;gap:11px;font-size:var(--text-xs);
            letter-spacing:.2em;text-transform:uppercase;color:var(--ink-200)}
.auth-back{font-size:var(--text-xs);letter-spacing:.08em;color:var(--ink-400);transition:color .3s}
.auth-back:hover{color:#fff}

/* auth.js overwrites className on this element, so style it by this class alone */
.login-container{
  width:100%;max-width:520px;padding:clamp(26px,4vw,40px);
  border:1px solid var(--line-soft);border-radius:18px;background:rgba(255,255,255,.028);
  animation:authIn .6s var(--e-out) both;
}
@keyframes authIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.auth-h{font-size:var(--text-2xl);letter-spacing:-0.02em;text-transform:uppercase;margin:0 0 7px}
.auth-sub{font-size:var(--text-sm);color:var(--ink-300);margin:0 0 clamp(22px,3vh,30px)}

.dept-dock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:clamp(20px,3vh,28px)}
.dept-tab{
  display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 8px;
  border:1px solid var(--line-soft);border-radius:12px;color:var(--ink-400);
  transition:color .3s,border-color .3s,background-color .3s;
}
.dept-tab:hover{color:var(--ink-100);border-color:var(--line)}
.dept-tab.active{color:#fff;border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.06)}
.dept-tab-icon{width:22px;height:22px}
.dept-tab-icon svg{width:100%;height:100%;display:block}
.dept-tab-name{font-size:10px;letter-spacing:.14em;text-transform:uppercase}

.dept-label{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;
            color:var(--ink-400);margin:0 0 18px}
.dept-label span{color:#fff}

.auth-err{
  display:none;align-items:center;gap:10px;margin-bottom:18px;padding:12px 14px;
  border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(255,255,255,.05);
  font-size:var(--text-xs);color:#fff;animation:shake .38s;
}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(3px)}50%{transform:translateX(-3px)}}

.pw-wrap{position:relative}
.pw-wrap input{padding-right:46px}
.pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);
           width:24px;height:24px;display:grid;place-items:center;color:var(--ink-400);transition:color .3s}
.pw-toggle:hover{color:#fff}
.pw-toggle svg{width:18px;height:18px;display:block}
.eye-closed{display:none}

.form-btn-full{width:100%;justify-content:center}
.btn-loader{display:none;align-items:center;gap:9px}
.btn-loader i{width:13px;height:13px;border-radius:50%;flex:none;
              border:1.5px solid rgba(0,0,0,.25);border-top-color:#000;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.auth-note{margin-top:20px;font-size:var(--text-xs);color:var(--ink-500);text-align:center}

/* Below ~400px the longest display word ("communication?") is still wider
   than the column, so the scale needs one more step down. Phones at 360+
   keep the larger size. */
@media (max-width:400px){
  :root{--text-6xl:clamp(1.9rem,0.9rem + 5.6vw,2.6rem)}
}
@media (max-width:560px){
  .dept-dock{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* two pills side by side do not fit a 360px phone */
  .switch{flex-wrap:wrap;width:100%}
  .switch a{flex:1 1 auto;text-align:center;padding:8px 12px}
}
@media (prefers-reduced-motion:reduce){
  .login-container{animation:none}
  .auth-err{animation:none}
}

/* ==========================================================================
   staff area — app shell and dashboards
   ========================================================================== */
.appbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:15px;
  padding:13px var(--gutter);border-bottom:1px solid var(--line-soft);
  background:rgba(8,8,8,.74);
  backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);
}
.appbar-brand{display:flex;align-items:center;gap:10px;font-size:var(--text-xs);
              letter-spacing:.18em;text-transform:uppercase;color:var(--ink-100)}
.appbar-div{width:1px;height:17px;background:var(--line);flex:none}
.appbar-dept{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-300)}
.appbar-out{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;
  border:1px solid var(--line-soft);border-radius:100px;
  font-size:var(--text-xs);letter-spacing:.06em;color:var(--ink-200);
  transition:color .3s,border-color .3s,background-color .3s;
}
.appbar-out svg{width:16px;height:16px;flex:none}
.appbar-out:hover{color:#fff;border-color:var(--line);background:rgba(255,255,255,.06)}

.app{max-width:1180px;margin-inline:auto;padding:clamp(34px,6vh,64px) var(--gutter) clamp(60px,10vh,110px)}
.app-head{display:flex;flex-direction:column;gap:10px;margin-bottom:clamp(26px,4vh,44px)}
.app-k{font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-400)}
.app-t{font-size:var(--text-3xl);letter-spacing:-0.025em;text-transform:uppercase;margin:0}
.app-d{font-size:var(--text-sm);color:var(--ink-300);margin:0;max-width:58ch;line-height:var(--lh-relaxed)}

.desk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:13px}
.desk{
  display:flex;flex-direction:column;gap:11px;padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--line-soft);border-radius:14px;background:rgba(255,255,255,.025);
  transition:background-color .35s,border-color .35s,transform .35s var(--e-out);
}
.desk:hover{background:rgba(255,255,255,.06);border-color:var(--line);transform:translateY(-2px)}
.desk.is-current{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.05)}
.desk-ico{width:23px;height:23px;color:var(--ink-200)}
.desk-ico svg{width:100%;height:100%;display:block}
.desk-n{font-size:var(--text-lg);letter-spacing:-0.01em;margin:0;color:#fff}
.desk-d{font-size:var(--text-xs);color:var(--ink-400);margin:0;line-height:var(--lh-relaxed)}

.empty{
  display:flex;flex-direction:column;align-items:flex-start;gap:13px;
  padding:clamp(34px,6vw,64px);border:1px dashed var(--ink-700);border-radius:16px;
  background:rgba(255,255,255,.018);
}
.empty-t{font-size:var(--text-xl);letter-spacing:-0.01em;margin:0}
.empty-d{font-size:var(--text-sm);color:var(--ink-300);margin:0;max-width:54ch;line-height:var(--lh-relaxed)}
.empty-back{margin-top:6px;font-size:var(--text-xs);letter-spacing:.08em;color:var(--ink-400);transition:color .3s}
.empty-back:hover{color:#fff}

/* the only motion in here: things settle in once, then stay still */
.app-head,.desk-grid,.empty{animation:appIn .5s var(--e-out) both}
.desk-grid,.empty{animation-delay:.08s}
@keyframes appIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.app-head,.desk-grid,.empty{animation:none}}

/* Staff pages stay blank until the guard has confirmed the department, so a
   desk never flashes into view for someone who is about to be redirected. */
body[data-desk]:not(.is-authed) .app{visibility:hidden}