/* ============================================================
   AIVAN LUMEN — THE LUMEN VESSEL · Spacelux V1 design proof
   Material system: black titanium, smoked glass, obsidian,
   light behaves as illumination — never as paint.
   ============================================================ */

/* ---------- fonts (self-hosted) ---------- */
@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/cormorant-garamond-latin-600-italic.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --void:#04060b;            /* deep space base */
  --hull:#080c15;            /* hull surface */
  --panel:#0b101c;           /* panel surface */
  --hair:rgba(190,214,255,.10);      /* hairline seams */
  --hair-soft:rgba(190,214,255,.06);
  --ti-hi:rgba(220,234,255,.16);     /* titanium edge catch-light */
  --cyan:#9fd9ff;            /* interface illumination */
  --cyan-dim:rgba(159,217,255,.55);
  --blue:#5d8dff;
  --ivory:#e9e5db;
  --txt:#d8deea;
  --mut:#8e99b0;
  --faint:#5c667c;
  --sans:'Manrope',-apple-system,'Helvetica Neue',sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --mono:'IBM Plex Mono','SF Mono',monospace;
  --wrap:1280px;
  --ease:cubic-bezier(.22,.61,.21,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  background:var(--void);
  color:var(--txt);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(93,141,255,.35);color:#fff}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,56px)}

/* focus */
:focus-visible{outline:1.5px solid var(--cyan-dim);outline-offset:3px;border-radius:4px}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--cyan-dim);
  display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan-dim))}
h1,h2,h3{font-weight:700;letter-spacing:-.015em;color:#eef2fa}
.serif{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:0;color:var(--ivory)}
.mono{font-family:var(--mono)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:#0a1220;background:linear-gradient(175deg,#e6ecf7,#b9c8e2);
  padding:15px 26px;border-radius:100px;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 0 0 1px rgba(159,217,255,.12), 0 10px 34px rgba(70,120,255,.14);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(159,217,255,.25),0 16px 44px rgba(70,120,255,.22)}
.btn svg{width:14px;height:14px}
.btn-ghost{
  color:var(--txt);background:rgba(150,190,255,.045);
  border:1px solid var(--hair);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{border-color:rgba(159,217,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 24px rgba(93,141,255,.10)}
.link{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan);border-bottom:1px solid rgba(159,217,255,.25);padding-bottom:3px;
  transition:border-color .3s;
}
.link:hover{border-color:var(--cyan)}

/* ============================================================
   NAV — thin hull rail
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  transition:background .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(5,8,14,.72);backdrop-filter:blur(14px);border-color:var(--hair-soft)}
.nav-inner{
  max-width:var(--wrap);margin:0 auto;
  padding:18px clamp(20px,4vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand .sigil{
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--hair);
  background:
    radial-gradient(circle at 32% 30%,rgba(159,217,255,.5),transparent 42%),
    radial-gradient(circle at 68% 72%,rgba(93,141,255,.28),transparent 46%),
    #0a0f1a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 18px rgba(93,141,255,.18);
}
.brand b{font-weight:800;font-size:15px;letter-spacing:.02em;color:#eef2fa;display:block;line-height:1.15}
.brand small{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.nav-links a:not(.btn){
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);transition:color .3s;
}
.nav-links a:not(.btn):hover{color:var(--cyan)}
.nav-links .btn{padding:11px 20px}
.nav-toggle{display:none}

/* ============================================================
   HERO — Observation Deck
   ============================================================ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  isolation:isolate;overflow:clip;
}
.hero-env{position:absolute;inset:0;z-index:-3}
.hero-env img{
  width:100%;height:100%;object-fit:cover;object-position:64% center;
  will-change:transform;transform:scale(1.06);
}
/* scrims guarantee type contrast without killing the environment */
.hero-shade{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(90deg,rgba(4,6,11,.92) 0%,rgba(4,6,11,.66) 30%,rgba(4,6,11,.18) 58%,rgba(4,6,11,.05) 78%),
  linear-gradient(0deg,rgba(4,6,11,.94) 0%,rgba(4,6,11,.25) 26%,transparent 46%),
  linear-gradient(180deg,rgba(4,6,11,.6),transparent 18%);
}
/* architectural light sweep along the upper hull edge */
.hero-sweep{position:absolute;top:0;left:-30%;z-index:-1;width:26%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(190,225,255,.7),transparent);
  animation:sweep 12s var(--ease) infinite;opacity:.6}
@keyframes sweep{0%{left:-30%}62%{left:105%}100%{left:105%}}
/* faint drifting dust outside the glass — never over text */
.hero-drift{position:absolute;inset:0 0 30% 46%;z-index:-1;opacity:.5;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 22% 34%,rgba(220,235,255,.8),transparent 60%),
    radial-gradient(1px 1px at 64% 18%,rgba(220,235,255,.55),transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 52%,rgba(220,235,255,.4),transparent 60%),
    radial-gradient(1px 1px at 45% 66%,rgba(220,235,255,.5),transparent 60%);
  animation:drift 26s linear infinite alternate;
}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-14px,8px,0)}}

.hero-inner{
  position:relative;max-width:var(--wrap);margin:0 auto;width:100%;
  padding:140px clamp(20px,4vw,56px) 0;
}
.hero h1{
  font-size:clamp(2.5rem,5.4vw,4.9rem);line-height:1.03;letter-spacing:-.025em;
  margin:26px 0 22px;max-width:13.5em;font-weight:800;
  text-wrap:balance;
}
.hero h1 .serif{font-size:1.04em}
.hero .lede{max-width:34em;color:var(--mut);font-size:clamp(15px,1.25vw,17.5px);font-weight:500}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* holographic mission index docked at hero base */
.hero-index{
  position:relative;max-width:var(--wrap);margin:0 auto;width:100%;
  padding:0 clamp(20px,4vw,56px);
}
.index-rail{
  margin-top:clamp(40px,6vh,72px);
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--hair-soft);border-bottom:none;
  border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,rgba(10,15,26,.6),rgba(6,9,16,.28));
  backdrop-filter:blur(10px);
  overflow:hidden;
}
.index-rail a{
  padding:16px 20px 15px;display:flex;flex-direction:column;gap:5px;
  border-right:1px solid var(--hair-soft);
  transition:background .4s;position:relative;
}
.index-rail a:last-child{border-right:none}
.index-rail a:hover{background:rgba(140,190,255,.05)}
.index-rail a::after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--cyan-dim),transparent);opacity:0;transition:opacity .4s}
.index-rail a:hover::after{opacity:1}
.ix-no{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;color:var(--faint)}
.ix-t{font-size:13px;font-weight:600;color:var(--txt);letter-spacing:.01em}
.ix-s{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-dim);display:flex;align-items:center;gap:7px}
.ix-s i{width:4px;height:4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);flex:none}

/* ============================================================
   SECTION SHELL — hull architecture between chambers
   ============================================================ */
.deck{position:relative;padding:clamp(84px,11vh,140px) 0;background:var(--void)}
.deck + .deck{border-top:1px solid var(--hair-soft)}
.deck-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:clamp(40px,6vh,64px)}
.deck-head h2{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.12;margin-top:18px;max-width:17em;text-wrap:balance}
.deck-head .link{flex:none;margin-bottom:8px}

/* ============================================================
   MISSION MODULE — archive file inside a viewport frame
   ============================================================ */
.mission{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(30px,4.5vw,64px);align-items:center;
  padding:clamp(30px,4vh,52px) 0;
}
.mission + .mission{border-top:1px solid var(--hair-soft)}
.mission.flip .m-media{order:2}
.mission.flip .m-text{order:1}

/* viewport — imagery embedded in the vessel, not pasted cards */
.viewport{
  position:relative;
  border-radius:20px 84px 20px 20px;
  padding:9px;
  background:
    linear-gradient(160deg,rgba(226,238,255,.13),rgba(226,238,255,.02) 34%,rgba(0,0,0,0) 60%),
    linear-gradient(345deg,rgba(159,217,255,.10),rgba(159,217,255,0) 42%),
    #0a0e18;
  border:1px solid var(--hair);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 24px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.4);
}
.viewport::before{ /* corner catch-light on the swept edge */
  content:"";position:absolute;top:-1px;right:-1px;width:120px;height:120px;
  border-radius:0 84px 0 0;pointer-events:none;
  background:radial-gradient(80px 80px at 100% 0%,rgba(190,226,255,.16),transparent 70%);
}
.viewport::after{ /* structural rib + node */
  content:"";position:absolute;left:-13px;top:18%;bottom:18%;width:1px;
  background:linear-gradient(180deg,transparent,var(--hair) 30%,var(--hair) 70%,transparent);
}
.vp-glass{
  position:relative;overflow:hidden;
  border-radius:13px 76px 13px 13px;
  background:#070a12;
}
.vp-glass img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.viewport:hover .vp-glass img{transform:scale(1.025)}
.vp-glass::after{ /* glass sheen */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 26%,transparent 78%,rgba(159,217,255,.05));
}
/* holographic scan on entry */
.vp-scan{position:absolute;left:0;right:0;top:-4px;height:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(159,217,255,.9),transparent);
  box-shadow:0 0 18px rgba(159,217,255,.55);
}
.in .vp-scan{animation:scan 1.2s var(--ease) .15s 1 forwards}
@keyframes scan{0%{opacity:0;top:-4px}12%{opacity:1}88%{opacity:1}100%{opacity:0;top:calc(100% + 4px)}}
/* status chip docked on glass */
.vp-chip{
  position:absolute;left:16px;bottom:14px;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#dfeaff;background:rgba(6,10,18,.66);
  border:1px solid var(--hair);border-radius:100px;
  padding:8px 14px;backdrop-filter:blur(8px);
}
.vp-chip i{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px var(--cyan)}

/* mission text side */
.m-file{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);
}
.m-file b{color:var(--cyan-dim);font-weight:500}
.m-file .sep{color:var(--hair);font-size:12px}
.m-text h3{font-size:clamp(1.65rem,2.7vw,2.4rem);letter-spacing:-.02em;line-height:1.08;margin:16px 0 14px}
.m-text .desc{color:var(--mut);max-width:32em;font-size:15.5px}
.m-meta{
  margin:24px 0 26px;border-top:1px solid var(--hair-soft);
  display:grid;grid-template-columns:repeat(3,auto);gap:0 34px;justify-content:start;
}
.m-meta div{padding-top:14px}
.m-meta dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.m-meta dd{font-size:13px;font-weight:600;color:var(--txt)}
.m-actions{display:flex;gap:22px;flex-wrap:wrap;align-items:center}

/* route line — Paris → Hollywood */
.route{margin:26px 0 4px;max-width:420px}
.route svg{width:100%;height:auto;display:block;overflow:visible}
.route .r-line{stroke:rgba(159,217,255,.5);stroke-width:1.2;fill:none;stroke-dasharray:340;stroke-dashoffset:340}
.in .route .r-line{animation:draw 2.2s var(--ease) .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.route .r-node{fill:#0a0f1a;stroke:var(--cyan);stroke-width:1.2}
.route .r-halo{fill:none;stroke:rgba(159,217,255,.25);stroke-width:1}
.route text{font-family:var(--mono);font-size:8.5px;letter-spacing:.28em;fill:var(--mut)}

/* production timeline — Kindness Inc. */
.timeline{margin:26px 0 8px;max-width:430px}
.tl-bar{position:relative;height:2px;background:rgba(190,214,255,.12);border-radius:2px;overflow:visible}
.tl-fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,rgba(159,217,255,.25),var(--cyan));border-radius:2px;
  transition:width 1.8s var(--ease) .5s}
.in .tl-fill{width:72%}
.tl-dot{position:absolute;top:50%;left:72%;width:7px;height:7px;border-radius:50%;
  background:var(--cyan);transform:translate(-50%,-50%);box-shadow:0 0 12px var(--cyan)}
.tl-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(159,217,255,.4);
  animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.9);opacity:0}}
.tl-marks{display:flex;justify-content:space-between;margin-top:12px;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.tl-marks .on{color:var(--cyan-dim)}

/* museum inset — cinema screen chip */
.vp-inset{
  position:absolute;right:16px;bottom:14px;width:31%;
  border-radius:10px;overflow:hidden;
  border:1px solid var(--hair);
  box-shadow:0 14px 34px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.09);
}
.vp-inset img{width:100%}
.vp-inset span{
  position:absolute;inset:auto 0 0 0;padding:7px 10px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:#cfe4ff;
  background:linear-gradient(0deg,rgba(4,7,13,.85),transparent);
}
.prism .viewport{background:
    linear-gradient(160deg,rgba(226,238,255,.13),rgba(226,238,255,.02) 34%,rgba(0,0,0,0) 60%),
    linear-gradient(345deg,rgba(255,190,220,.05),rgba(159,217,255,.09) 55%,rgba(190,255,230,.04)),
    #0a0e18}

/* ============================================================
   SONIC CHAMBER — music preview
   ============================================================ */
.sonic{position:relative;isolation:isolate;overflow:clip}
.sonic-env{position:absolute;inset:0;z-index:-2}
.sonic-env img{width:100%;height:100%;object-fit:cover;object-position:center 38%;opacity:.5}
.sonic-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,var(--void) 0%,rgba(4,6,11,.62) 22%,rgba(4,6,11,.55) 62%,var(--void) 100%)}
.tray-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,28px)}
.tray{
  position:relative;border-radius:14px;padding:8px 8px 14px;
  background:linear-gradient(168deg,rgba(226,238,255,.10),rgba(226,238,255,.015) 42%),rgba(8,11,19,.72);
  border:1px solid var(--hair);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 22px 44px rgba(0,0,0,.5);
  backdrop-filter:blur(8px);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.tray:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 30px 60px rgba(0,0,0,.6),0 0 30px rgba(93,141,255,.08)}
.tray .cover{position:relative;border-radius:9px;overflow:hidden}
.tray .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 30%)}
.tray .cover img{aspect-ratio:1;object-fit:cover;width:100%}
.tray .refl{height:34px;margin:2px 6px 0;border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,rgba(120,170,255,.10),transparent 80%);
  mask-image:linear-gradient(180deg,#000,transparent);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);
}
.tray .st{padding:2px 8px 0;display:flex;flex-direction:column;gap:3px}
.tray .st b{font-size:13.5px;font-weight:700;color:var(--txt);letter-spacing:.01em}
.tray .st span{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.sonic-note{margin-top:34px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.sonic-note p{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* ============================================================
   FOOT — hull plate
   ============================================================ */
.foot{border-top:1px solid var(--hair-soft);padding:44px 0 52px;background:var(--void)}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot span{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.foot .sig{color:var(--cyan-dim)}

/* ============================================================
   REVEALS — slow, controlled, physical
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.12s}
.js .reveal.d2{transition-delay:.24s}
.js .reveal.d3{transition-delay:.36s}

/* ============================================================
   MOBILE — refit, not a crop
   ============================================================ */
@media (max-width:960px){
  .nav-links{
    position:fixed;inset:0;background:rgba(4,6,11,.96);backdrop-filter:blur(18px);
    flex-direction:column;justify-content:center;gap:30px;
    opacity:0;pointer-events:none;transition:opacity .4s;
  }
  .nav-links.open{opacity:1;pointer-events:auto}
  .nav-toggle{display:block;background:none;border:1px solid var(--hair);border-radius:9px;
    padding:8px 9px;color:var(--txt);z-index:70;position:relative;cursor:pointer}
  .nav-toggle svg{width:18px;height:18px;display:block}

  .hero{min-height:100svh}
  .hero-env img{object-position:70% center}
  .hero-shade{background:
    linear-gradient(0deg,rgba(4,6,11,.96) 6%,rgba(4,6,11,.55) 42%,rgba(4,6,11,.18) 68%,rgba(4,6,11,.62) 100%)}
  .hero-inner{padding-top:110px}
  .hero h1{font-size:clamp(2.1rem,9vw,2.9rem)}
  .hero-drift{display:none}
  .index-rail{grid-template-columns:1fr 1fr}
  .index-rail a{border-bottom:1px solid var(--hair-soft)}
  .index-rail a:nth-child(even){border-right:none}
  .index-rail a:nth-last-child(-n+2){border-bottom:none}

  .deck-head{flex-direction:column;align-items:flex-start;gap:14px}
  .mission{grid-template-columns:1fr;gap:26px}
  .mission.flip .m-media{order:1}
  .mission.flip .m-text{order:2}
  .viewport{border-radius:16px 54px 16px 16px}
  .vp-glass{border-radius:10px 47px 10px 10px}
  .viewport::after{display:none}
  .m-meta{grid-template-columns:1fr 1fr;gap:0 24px}
  .tray-row{grid-template-columns:1fr 1fr;gap:14px}
  .vp-inset{width:38%}
}

/* ============================================================
   REDUCED MOTION — everything visible, nothing moves
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .hero-sweep,.hero-drift{display:none}
  .hero-env img{transform:none !important}
  .vp-scan{display:none}
  .in .route .r-line{animation:none;stroke-dashoffset:0}
  .tl-fill,.in .tl-fill{transition:none;width:72%}
  .tl-dot::after{animation:none;display:none}
  .tray,.btn,.vp-glass img{transition:none}
  *{animation-duration:.001s !important}
}