/* ===================================================================
   Get Out of Jail Free · Contact center continuity by Cresyn
   Cresyn palette: deep navy #0D1B2A, dark blue #1B263B, slate #415A77,
   muted blue #778DA9, light neutral #E0E1DD, gray #9AA4B2,
   accent orange #C65A1E. Type: Geist (Cresyn brand), Geist Mono,
   and condensed Archivo for the card's printed-game character.
=================================================================== */

:root{
  /* brand */
  --navy:      #0d1b2a;
  --navy-2:    #1b263b;
  --slate:     #415a77;
  --muted:     #778da9;
  --neutral:   #e0e1dd;
  --gray:      #9aa4b2;
  --orange:    #c65a1e;
  --orange-hi: #e8834a;   /* orange lifted for small text on navy (6.4:1) */
  --orange-dk: #a94a16;
  --orange-fill: #b4501a; /* solid fill behind white text (5.1:1) */
  --paper:     #f6f5f1;   /* light presentation surface */
  --card:      #f3eee2;   /* the card's warm printed stock */
  --white:     #ffffff;
  --ink:       #0d1b2a;
  --ink-soft:  #415a77;
  --on-dark:   #e0e1dd;
  --on-dark-soft: #9aa4b2;
  --line-dark: rgba(224,225,221,.14);
  --line-ink:  rgba(13,27,42,.16);

  /* type */
  --font:  'Geist', 'Segoe UI', system-ui, sans-serif;
  --mono:  'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --cond:  'Archivo', 'Arial Narrow', 'Segoe UI', sans-serif;
  --fs-display: clamp(2.4rem, 1.1rem + 4.6vw, 5.2rem);
  --fs-headline: clamp(1.8rem, 1rem + 2.6vw, 3.2rem);
  --fs-lead: clamp(1.12rem, .95rem + .8vw, 1.5rem);
  --fs-body-lg: clamp(1.02rem, .95rem + .35vw, 1.22rem);
  --fs-body: clamp(.98rem, .94rem + .18vw, 1.06rem);
  --fs-eyebrow: clamp(.72rem, .68rem + .18vw, .82rem);

  /* layout */
  --gutter: clamp(16px, 4.5vw, 72px);
  --hud-h: 72px;
  --pager-h: 0px;
  --maxw: 1240px;
  --radius: 14px;

  /* motion */
  --ease-out: cubic-bezier(.16,.84,.3,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --t-reveal: 780ms;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; background:var(--navy); }
body{
  margin:0; background:var(--navy); color:var(--on-dark);
  font-family:var(--font); font-size:var(--fs-body); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,p,ol,ul,dl,dd,figure,blockquote{ margin:0; }
ol,ul{ padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
address{ font-style:normal; }
cite{ font-style:normal; }
kbd{
  font-family:var(--mono); font-size:.75em; font-weight:600;
  padding:.15em .5em; border-radius:6px; border:1px solid var(--line-dark);
  background:rgba(255,255,255,.06); color:var(--on-dark);
}
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.skip-link{
  position:fixed; left:12px; top:-60px; z-index:100; padding:10px 16px; border-radius:8px;
  background:var(--orange-fill); color:var(--white); font-weight:600; text-decoration:none;
}
.skip-link:focus{ top:12px; }
:focus-visible{ outline:3px solid var(--orange-hi); outline-offset:3px; border-radius:6px; }
.scene--light :focus-visible{ outline-color:var(--orange-dk); }
.scene:focus{ outline:none; }

/* ===================================================================
   CAMERA BACKDROP: an original board-game "world"
=================================================================== */
.backdrop{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.backdrop-world{
  position:absolute; left:50%; top:50%; width:2800px; height:2800px;
  margin:-1400px 0 0 -1400px; transform-origin:50% 50%; will-change:transform;
}
.backdrop-world svg{ width:100%; height:100%; overflow:visible; }
.bd-tile{ fill:none; stroke:var(--muted); stroke-width:1.5; opacity:.16; vector-effect:non-scaling-stroke; }
.bd-edge{ fill:none; stroke:var(--muted); stroke-width:2; opacity:.3; vector-effect:non-scaling-stroke; }
.bd-band{ opacity:.24; }
.bd-band--o{ fill:var(--orange); opacity:.32; }
.bd-band--s{ fill:var(--slate); }
.bd-band--m{ fill:var(--muted); }
.bd-band--g{ fill:var(--gray); opacity:.16; }
.bd-bars{ fill:none; stroke:var(--gray); stroke-width:6; opacity:.4; stroke-linecap:round; }
.bd-cards{ fill:none; stroke:var(--muted); stroke-width:2; opacity:.14; vector-effect:non-scaling-stroke; }
.bd-cards--o{ stroke:var(--orange); opacity:.26; }
.bd-arrow{ fill:var(--orange); opacity:.28; }
.bd-dot{ fill:var(--muted); opacity:.35; }
/* keep the reading side of each dark scene calm */
.backdrop::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(13,27,42,.88) 0%, rgba(13,27,42,.6) 42%, rgba(13,27,42,.1) 78%),
    radial-gradient(120% 90% at 50% 50%, transparent 50%, rgba(8,17,27,.7) 100%);
}

/* ===================================================================
   HUD / RAIL / PAGER / SCENE MENU
=================================================================== */
.hud{
  position:fixed; z-index:20; top:0; left:0; right:0; height:var(--hud-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:max(12px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  pointer-events:none;
}
.hud > *{ pointer-events:auto; }
.hud-logo, .hud-scene{
  background:rgba(13,27,42,.84); border:1px solid var(--line-dark);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-radius:999px; height:44px; display:flex; align-items:center;
}
.hud-logo{ padding:0 16px 0 10px; gap:10px; text-decoration:none; transition:opacity .4s, visibility .4s; }
[data-scene="plan"] .hud-logo{ opacity:0; visibility:hidden; }
.hud-mark{ width:26px; height:26px; }
.hud-word{ height:14px; width:auto; }
.hud-scene{ padding:0 8px 0 18px; gap:12px; font-size:.82rem; letter-spacing:.02em; color:var(--on-dark); min-width:44px; }
.hud-scene svg{ width:28px; height:28px; padding:5px; border-radius:50%; fill:none; stroke:var(--on-dark); stroke-width:2; stroke-linecap:round; background:rgba(255,255,255,.06); }
.hud-scene:hover svg{ background:rgba(255,255,255,.14); }
.hud-count{ font-family:var(--mono); color:var(--orange-hi); font-weight:600; font-variant-numeric:tabular-nums; }
.hud-title{ font-weight:500; }

.rail{
  position:fixed; z-index:20; right:max(18px, env(safe-area-inset-right)); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:4px; padding:10px 6px; border-radius:999px;
  background:rgba(13,27,42,.8); border:1px solid var(--line-dark);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.rail-dot{ position:relative; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; }
.rail-dot::before{
  content:""; width:8px; height:8px; border-radius:2px; background:rgba(224,225,221,.38);
  transition:transform .35s var(--ease-out), background .35s;
}
.rail-dot:hover::before{ background:var(--on-dark); }
.rail-dot[aria-current="step"]::before{ background:var(--orange); transform:scale(1.5) rotate(45deg); }
.rail-label{
  position:absolute; right:40px; top:50%; transform:translate(6px,-50%); white-space:nowrap;
  padding:6px 12px; border-radius:8px; background:var(--navy); border:1px solid var(--line-dark); color:var(--on-dark);
  font-size:.8rem; font-weight:500; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.rail-dot:hover .rail-label, .rail-dot:focus-visible .rail-label{ opacity:1; transform:translate(0,-50%); }

.pager{
  position:fixed; z-index:20; right:max(var(--gutter), env(safe-area-inset-right)); bottom:max(22px, env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:10px; padding:6px; border-radius:999px;
  background:rgba(13,27,42,.88); border:1px solid var(--line-dark);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.pager-btn{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; transition:background .25s, opacity .25s; }
.pager-btn svg{ width:22px; height:22px; fill:none; stroke:var(--on-dark); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pager-btn:hover{ background:rgba(255,255,255,.08); }
.pager-btn--next{ background:var(--orange-fill); }
.pager-btn--next svg{ stroke:var(--white); }
.pager-btn--next:hover{ background:#a24716; }
.pager-btn:disabled{ opacity:.3; cursor:default; background:none; }
.pager-meter{ width:84px; height:4px; border-radius:4px; background:rgba(255,255,255,.14); overflow:hidden; }
.pager-fill{ display:block; height:100%; width:0; background:var(--orange); border-radius:4px; transition:width .6s var(--ease-out); }

.scene-menu{
  width:min(440px, calc(100vw - 32px)); max-height:min(640px, calc(100svh - 48px)); padding:0;
  border:1px solid var(--line-dark); border-radius:18px; background:var(--navy-2); color:var(--on-dark);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.scene-menu::backdrop{ background:rgba(8,17,27,.66); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.scene-menu-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 10px 22px; border-bottom:1px solid var(--line-dark); }
.scene-menu-title{ font-family:var(--mono); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-soft); }
.scene-menu-close{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; }
.scene-menu-close:hover{ background:rgba(255,255,255,.08); }
.scene-menu-close svg{ width:20px; height:20px; fill:none; stroke:var(--on-dark); stroke-width:2; stroke-linecap:round; }
.scene-menu-list{ padding:8px; }
.scene-menu-list button{
  width:100%; min-height:48px; display:flex; align-items:center; gap:14px; padding:8px 14px; border-radius:10px; text-align:left;
}
.scene-menu-list button:hover{ background:rgba(255,255,255,.06); }
.scene-menu-list button[aria-current="step"]{ background:rgba(198,90,30,.18); }
.scene-menu-list .n{ font-family:var(--mono); font-size:.8rem; color:var(--orange-hi); }

/* ===================================================================
   SCENES & TYPE
=================================================================== */
#deck{ position:relative; z-index:1; }
.scene{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--hud-h) + clamp(20px, 4vh, 48px)) var(--gutter) calc(clamp(72px, 10vh, 104px) + var(--pager-h));
  overflow:hidden;
}
.scene-inner{ width:100%; max-width:var(--maxw); margin:0 auto; position:relative; }
.scene--dark{ background:transparent; color:var(--on-dark); }
.scene--light{ color:var(--ink); background:var(--paper); }
/* faint board-tile rule on light scenes */
.scene--light::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(to right, rgba(65,90,119,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(65,90,119,.07) 1px, transparent 1px);
  background-size:120px 120px; background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 40%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse at 70% 40%, #000 0%, transparent 75%);
}

.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-weight:600; font-size:var(--fs-eyebrow);
  letter-spacing:.18em; text-transform:uppercase; color:var(--orange-hi); margin-bottom:clamp(12px, 2vh, 20px);
}
.eyebrow img{ width:28px; height:28px; }
.eyebrow--ink{ color:var(--orange-dk); }
.display{
  font-weight:700; font-size:var(--fs-display); line-height:1.02; letter-spacing:-.035em; color:var(--white);
}
.display em, .headline .hl{ font-style:normal; color:var(--orange-hi); }
.headline{
  font-weight:700; font-size:var(--fs-headline); line-height:1.08; letter-spacing:-.028em; color:var(--white); max-width:22ch;
}
.headline--ink{ color:var(--ink); }
.hl-ink{ color:var(--orange); }
.display, .headline, .lead{ text-wrap:balance; }
.lead{ font-size:var(--fs-lead); line-height:1.42; color:var(--on-dark); max-width:34ch; margin-top:clamp(16px, 2.6vh, 28px); }
.lead--sm{ font-size:clamp(1.05rem, .95rem + .5vw, 1.3rem); max-width:40ch; }
.body-lg{ font-size:var(--fs-body-lg); color:var(--on-dark-soft); max-width:56ch; margin-top:clamp(14px, 2.2vh, 24px); }
.body-ink{ color:var(--ink-soft); max-width:58ch; margin-top:14px; }
.body-ink strong{ color:var(--ink); }
.fine-note{ margin-top:clamp(18px, 3vh, 30px); font-size:.9rem; color:var(--on-dark-soft); max-width:62ch; }
.fine-note--center{ margin-left:auto; margin-right:auto; text-align:center; }
.fine-note--ink{ color:var(--ink-soft); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 26px;
  border-radius:999px; font-weight:600; font-size:1rem; text-decoration:none;
  transition:transform .25s var(--ease-out), background .25s, box-shadow .25s, border-color .25s;
}
.btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.btn--primary{ background:var(--orange-fill); color:var(--white); box-shadow:0 12px 32px rgba(198,90,30,.32); }
.btn--primary:hover{ background:#a24716; transform:translateY(-2px); }
.btn--ghost{ border:1.5px solid rgba(224,225,221,.38); color:var(--on-dark); }
.btn--ghost:hover{ border-color:var(--orange-hi); color:var(--white); }

/* ---------------- reveal system ---------------- */
.js [data-reveal]{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay:calc(var(--i, 0) * 80ms);
}
.js .scene.is-in [data-reveal]{ opacity:1; transform:none; }

/* ===================================================================
   THE CARD (reusable)
=================================================================== */
.gojf-card{
  position:relative; width:100%; aspect-ratio:1.6 / 1; border-radius:18px;
  container-type:inline-size; transform-style:preserve-3d;
}
.card-face{
  position:absolute; inset:0; border-radius:inherit; overflow:hidden;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.card-front{
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(140% 120% at 100% 100%, rgba(119,141,169,.16), transparent 60%),
    var(--card);
  color:var(--navy);
  box-shadow:inset 0 0 0 1px rgba(13,27,42,.08);
  padding:4.2cqw;
}
.card-frame{
  position:relative; height:100%; border:max(2px, .5cqw) solid var(--navy); border-radius:1.6cqw;
  display:grid; grid-template-rows:auto auto 1fr auto; justify-items:center; text-align:center;
  padding:3cqw 4cqw 2.4cqw;
}
.card-frame::before{
  content:""; position:absolute; inset:1.1cqw; border:1px solid rgba(13,27,42,.4); border-radius:1cqw; pointer-events:none;
}
.card-corner{ position:absolute; width:3.2cqw; height:3.2cqw; background:var(--orange); transform:rotate(45deg); }
.card-corner--tl{ left:-1.9cqw; top:-1.9cqw; } .card-corner--tr{ right:-1.9cqw; top:-1.9cqw; }
.card-corner--bl{ left:-1.9cqw; bottom:-1.9cqw; } .card-corner--br{ right:-1.9cqw; bottom:-1.9cqw; }
.card-kicker{ font-family:var(--mono); font-weight:600; font-size:2.35cqw; letter-spacing:.28em; text-transform:uppercase; color:var(--slate); }
.card-title{
  display:flex; flex-direction:column; align-items:center; margin-top:1.2cqw;
  font-family:var(--cond); font-stretch:68%; font-weight:900; text-transform:uppercase; line-height:.86;
}
.card-title span:first-child{ font-size:6.2cqw; letter-spacing:.06em; color:var(--navy); }
.card-title span:last-child{ font-size:14.2cqw; letter-spacing:.01em; color:var(--orange); }
.card-art{ align-self:center; width:44cqw; height:auto; margin:1cqw 0; overflow:visible; }
.card-art g, .card-art path, .card-art rect, .card-art circle{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.card-art-cell *{ stroke:var(--navy); stroke-width:2.6; }
.card-art-door *{ stroke:var(--slate); stroke-width:2.2; }
.card-art-door > path:first-child{ fill:rgba(65,90,119,.1); }
.card-art-headset *{ stroke:var(--orange); stroke-width:3.4; }
.card-art-headset circle{ fill:var(--orange); }
.card-art-path, .card-art-arrow{ stroke:var(--orange); stroke-width:3; stroke-dasharray:4 5; }
.card-art-arrow{ stroke-dasharray:none; }
.card-fine{ justify-self:start; margin-left:1.4cqw; font-size:2.6cqw; font-weight:500; letter-spacing:.01em; color:var(--navy); }
.card-sig{
  position:absolute; right:3.2cqw; bottom:2.2cqw; display:flex; align-items:center; gap:.9cqw;
  font-family:var(--mono); font-size:1.9cqw; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--slate);
}
.card-sig img{ width:4.4cqw; height:4.4cqw; }
.card-back{
  transform:rotateY(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(224,225,221,.05) 0 2px, transparent 2px 14px),
    radial-gradient(90% 90% at 50% 50%, var(--slate) 0%, var(--navy-2) 70%);
  box-shadow:inset 0 0 0 1px rgba(224,225,221,.16);
  padding:4.2cqw;
}
.card-back-inner{
  height:100%; border:max(2px,.5cqw) solid var(--orange); border-radius:1.6cqw;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4cqw;
}
.card-back-inner img{ width:22cqw; height:auto; opacity:.95; }
.card-back-inner span{ font-family:var(--mono); font-size:2.6cqw; letter-spacing:.32em; text-transform:uppercase; color:var(--orange-hi); }

/* ===================================================================
   01 · THE QUESTION
=================================================================== */
.hook-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr); gap:clamp(28px,5vw,80px); align-items:center; }
.hook-copy .eyebrow{ letter-spacing:.14em; }
.scene--hook .display{ font-size:clamp(2.3rem, 1rem + 3.6vw, 4.5rem); }
.hook-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:clamp(24px, 4.5vh, 44px); }
.key-hint{ display:flex; align-items:center; gap:6px; font-size:.86rem; color:var(--on-dark-soft); }
.hook-visual{ position:relative; }
.card-stage{ position:relative; width:min(100%, 560px); margin:0 auto; perspective:1400px; }
.gojf-card--hero{
  transform:rotate(-6deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease-out);
  box-shadow:0 2px 0 rgba(255,255,255,.4) inset, 0 40px 80px -20px rgba(0,0,0,.6), 0 18px 30px -18px rgba(0,0,0,.6);
}
.card-shadow{
  position:absolute; left:10%; right:10%; bottom:-14%; height:16%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.45), transparent); filter:blur(8px); z-index:-1;
}
.js .hook-visual .card-stage{ opacity:0; transform:translate3d(0,40px,0) rotate(4deg) scale(.94); transition:opacity 1s var(--ease-out) .25s, transform 1.2s var(--ease-out) .25s; }
.js .scene--hook.is-in .hook-visual .card-stage{ opacity:1; transform:none; }
.hook-visual.is-floating .card-stage{ animation:float 7s ease-in-out infinite; }
@keyframes float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -10px; } }

/* ===================================================================
   02 · THE MOMENT IT CHANGES
=================================================================== */
.disruption-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,72px); align-items:center; }
.scenario-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(18px, 3vh, 28px); max-width:600px; }
.scenario-list li{
  padding:8px 14px; border-radius:999px; font-size:.9rem; color:var(--on-dark);
  background:rgba(27,38,59,.7); border:1px solid var(--line-dark);
}
.status-board{
  border-radius:var(--radius); background:rgba(27,38,59,.88); border:1px solid var(--line-dark);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7); overflow:hidden;
}
.status-head{
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--line-dark); font-weight:600; font-size:.95rem;
}
.status-tag{ font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-soft); }
.status-rows{ padding:6px 0; }
.status-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; padding:11px 18px;
  font-family:var(--mono); font-size:.86rem;
}
.status-row + .status-row{ border-top:1px dashed rgba(224,225,221,.1); }
.status-row dt{ display:flex; align-items:center; gap:10px; color:var(--on-dark-soft); }
.status-row dt::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--gray); flex:none; }
.status-row dd{ display:flex; align-items:center; gap:10px; color:var(--on-dark); text-align:right; }
.status-row dd b{ color:var(--orange-hi); }
.status-row--bad dt::before{ background:var(--orange-hi); box-shadow:0 0 0 0 rgba(232,131,74,.6); }
.scene--disruption.is-in .status-row--bad dt::before{ animation:ping 2.4s ease-out infinite; }
.status-row--warn dt::before{ background:var(--muted); }
.status-row--key{ margin:6px 10px 4px; padding:12px 10px; border-radius:10px; background:rgba(198,90,30,.16); border:1px solid rgba(232,131,74,.5); }
.status-row--key dt{ color:var(--on-dark); font-weight:600; }
.status-row--key dt::before{ background:var(--orange-hi); border-radius:2px; transform:rotate(45deg); }
.status-row--key dd{ color:var(--orange-hi); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.status-meter{ width:64px; height:6px; border-radius:6px; background:rgba(224,225,221,.12); overflow:hidden; }
.status-meter span{ display:block; height:100%; width:28%; background:var(--orange-hi); border-radius:6px; transition:width 4s var(--ease-out) .6s; }
.scene--disruption.is-in .status-meter span{ width:92%; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(232,131,74,.6); } 70%,100%{ box-shadow:0 0 0 9px rgba(232,131,74,0); } }
.stat-note{ margin-top:18px; padding-left:16px; border-left:2px solid var(--orange); font-size:.95rem; color:var(--on-dark-soft); }
.stat-note strong{ color:var(--on-dark); }
.stat-note cite{ display:block; margin-top:6px; font-size:.78rem; }
.stat-note cite a{ color:var(--on-dark-soft); text-underline-offset:3px; }
.stat-note cite a:hover{ color:var(--on-dark); }

/* ===================================================================
   03 · THE HARD QUESTIONS (title-deed tiles)
=================================================================== */
.questions-head{ margin-bottom:clamp(22px, 4vh, 40px); }
.questions-head .headline{ max-width:24ch; }
.deed-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(12px, 1.6vw, 20px); }
.deed{
  position:relative; background:var(--white); border:1.5px solid var(--navy); border-radius:10px;
  padding:0 clamp(16px, 1.6vw, 22px) clamp(16px, 2.2vh, 22px); overflow:hidden;
  box-shadow:0 14px 30px -22px rgba(13,27,42,.45);
}
.deed::before{ content:""; display:block; height:12px; margin:0 calc(clamp(16px, 1.6vw, 22px) * -1) clamp(14px, 2vh, 20px); background:var(--band); border-bottom:1.5px solid var(--navy); }
.deed-num{ font-family:var(--mono); font-size:.8rem; font-weight:600; color:var(--orange-dk); letter-spacing:.1em; }
.deed h3{ margin-top:6px; font-size:clamp(1.1rem, .98rem + .45vw, 1.32rem); line-height:1.22; letter-spacing:-.015em; }
.deed p{ margin-top:8px; color:var(--ink-soft); font-size:.97rem; }
.deed--answer{ background:var(--navy); border-color:var(--navy); color:var(--on-dark); display:flex; align-items:center; padding:clamp(18px, 2.4vh, 26px) clamp(18px, 1.8vw, 26px); }
.deed--answer::before{ display:none; }
.deed--answer p{ margin:0; color:var(--on-dark); font-size:clamp(1.08rem, .98rem + .4vw, 1.3rem); line-height:1.35; font-weight:500; }
.deed--answer strong{ color:var(--orange-hi); font-weight:600; }

/* ===================================================================
   04 · THE CARD
=================================================================== */
.card-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px, 5vw, 80px); align-items:center; }
.reveal-stage{ position:relative; }
.reveal-stage::before{
  content:""; position:absolute; inset:-18% -10%; z-index:-1;
  background:radial-gradient(closest-side, rgba(198,90,30,.24), transparent 70%);
}
.flip{ width:min(100%, 560px); margin:0 auto; perspective:1600px; }
.gojf-card--reveal{ transform:rotateY(180deg); box-shadow:0 40px 80px -24px rgba(0,0,0,.65); }
.js .gojf-card--reveal{ transition:transform 1.3s var(--ease-inout) .45s; }
.js .scene--card.is-in .gojf-card--reveal.is-ready{ transform:rotateY(0deg) rotate(-3deg); }
.triad{ margin-top:clamp(20px, 3.4vh, 34px); display:grid; gap:2px; }
.triad li{ display:grid; grid-template-columns:118px minmax(0,1fr); gap:16px; align-items:baseline; padding:12px 0; border-top:1px solid var(--line-dark); }
.triad li:last-child{ border-bottom:1px solid var(--line-dark); }
.triad-k{ font-family:var(--mono); font-weight:600; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-hi); }
.triad p{ color:var(--on-dark); }

/* ===================================================================
   05 · HOW THE FALLBACK WORKS
=================================================================== */
.fallback-top{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px, 4vw, 64px); align-items:center; }
.fallback-copy .headline{ max-width:20ch; }
.route{ position:relative; width:100%; max-width:520px; aspect-ratio:420 / 250; margin-left:auto; font-size:clamp(.72rem, .62rem + .35vw, .9rem); }
.route-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.route-line{ fill:none; stroke-width:3; stroke-linecap:round; }
.route-line--in{ stroke:var(--muted); }
.route-line--dead{ stroke:var(--slate); stroke-dasharray:3 7; }
.route-line--live{ stroke:var(--orange-hi); stroke-dasharray:10 8; }
.scene--fallback.is-in .route-line--live{ animation:flow 1.2s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-18; } }
.route-node{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; text-align:center; line-height:1.2; }
.route-node--cust{ left:8.5%; top:50%; gap:6px; color:var(--on-dark-soft); }
.route-node--cust svg{ width:3.2em; height:3.2em; padding:.6em; border-radius:50%; background:var(--navy-2); border:1px solid var(--line-dark); fill:none; stroke:var(--on-dark); stroke-width:1.6; stroke-linecap:round; }
.route-node--switch{ left:30.7%; top:50%; width:4.2em; height:4.2em; border-radius:50%; background:var(--navy-2); border:2px solid var(--muted); justify-content:center; }
.route-node--switch::before{ content:""; width:1.1em; height:1.1em; border-radius:2px; background:var(--muted); transform:rotate(45deg); }
.route-node--switch span{ position:absolute; top:calc(100% + 8px); width:9em; color:var(--on-dark-soft); }
.route-node--primary, .route-node--fallback{
  left:83.1%; width:33.8%; padding:.8em .7em; border-radius:10px; transform:translate(-50%,-50%); gap:3px;
}
.route-node--primary{ top:23.2%; background:rgba(27,38,59,.55); border:1.5px dashed var(--slate); color:var(--on-dark-soft); }
.route-node--primary b{ font-weight:600; color:var(--on-dark-soft); text-decoration:line-through; text-decoration-color:var(--orange-hi); }
.route-node--primary span{ font-family:var(--mono); font-size:.86em; color:var(--orange-hi); text-transform:uppercase; letter-spacing:.08em; }
.route-node--fallback{ top:76.8%; background:var(--card); color:var(--navy); border:2px solid var(--orange); box-shadow:0 18px 40px -16px rgba(198,90,30,.55); }
.route-node--fallback b{ font-weight:700; }
.route-node--fallback span{ font-family:var(--mono); font-size:.86em; color:var(--orange-dk); }

.track{ position:relative; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:clamp(8px, 1vw, 14px); margin-top:clamp(28px, 5vh, 52px); }
.track::before{
  content:""; position:absolute; left:22px; right:calc(20% - 4px); top:22px; height:2px; z-index:-1;
  background:linear-gradient(90deg, var(--muted), var(--orange-hi)); transform-origin:left;
}
.js .track::before{ transform:scaleX(0); transition:transform 1.6s var(--ease-inout) .5s; }
.js .scene--fallback.is-in .track::before{ transform:scaleX(1); }
.track-space{ padding:0 4px; }
.track-num{
  position:relative; isolation:isolate; display:grid; place-items:center; width:44px; height:44px; margin:0 0 14px;
  font-family:var(--mono); font-weight:600; font-size:.95rem; color:var(--on-dark);
}
.track-num::before{
  content:""; position:absolute; inset:6px; z-index:-1; border-radius:7px; transform:rotate(45deg);
  background:var(--navy-2); border:1.5px solid var(--muted);
}
.track-space h3{ font-size:clamp(1rem, .94rem + .3vw, 1.15rem); letter-spacing:-.01em; color:var(--white); }
.track-space p{ margin-top:6px; font-size:.92rem; color:var(--on-dark-soft); }
.track-space--go .track-num{ color:var(--white); }
.track-space--go .track-num::before{ background:var(--orange-fill); border-color:var(--orange-fill); }

/* ===================================================================
   06 · AN EXAMPLE IN PRACTICE
=================================================================== */
.example-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(22px, 4vw, 64px); align-items:start; }
.example-logos{ display:flex; align-items:center; gap:16px; margin-bottom:clamp(18px, 3vh, 28px); }
.logo-gocrisis{ height:clamp(60px, 8vh, 80px); width:auto; }
.logo-omningage{ height:clamp(72px, 10vh, 100px); width:auto; }
.logo-with{ font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.example-copy .headline{ max-width:16ch; }
.figures{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:var(--line-ink); border:1px solid var(--line-ink); border-radius:12px; overflow:hidden; }
.figure{ background:var(--white); padding:clamp(14px, 2vh, 20px) clamp(14px, 1.4vw, 20px); }
.figure dt{ font-family:var(--cond); font-stretch:72%; font-weight:800; font-size:clamp(2rem, 1.4rem + 1.8vw, 2.9rem); line-height:1; color:var(--navy); letter-spacing:-.005em; }
.figure:nth-child(1) dt{ color:var(--orange); }
.figure dd{ margin-top:6px; font-size:.9rem; color:var(--ink-soft); line-height:1.4; }
.built{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px, 2vw, 26px); margin-top:clamp(16px, 2.6vh, 24px); }
.built h3{ font-family:var(--mono); font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-dk); padding-bottom:6px; border-bottom:1.5px solid var(--navy); margin-bottom:8px; }
.built li{ position:relative; padding-left:16px; font-size:.92rem; color:var(--ink); line-height:1.4; margin-top:6px; }
.built li::before{ content:""; position:absolute; left:0; top:.5em; width:6px; height:6px; background:var(--slate); transform:rotate(45deg); }
.insight{ margin-top:clamp(16px, 2.6vh, 24px); padding:14px 18px; border-radius:10px; background:var(--navy); color:var(--on-dark); }
.insight p{ font-size:.98rem; line-height:1.45; }
.example-note{ grid-column:1 / -1; margin-top:0; font-size:.84rem; }

/* ===================================================================
   07 · OPTIONS
=================================================================== */
.options-head{ max-width:760px; }
.spectrum{ display:flex; align-items:center; gap:14px; margin-top:clamp(24px, 4vh, 40px); font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-soft); }
.spectrum-bar{ flex:1; height:2px; background:linear-gradient(90deg, var(--slate), var(--orange-hi)); position:relative; }
.spectrum-bar::after{ content:""; position:absolute; right:-2px; top:-5px; border:6px solid transparent; border-left:9px solid var(--orange-hi); border-right:0; }
.options{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(12px, 1.6vw, 20px); margin-top:16px; }
.option{
  display:flex; flex-direction:column; gap:10px; padding:clamp(18px, 2.4vh, 24px) clamp(16px, 1.6vw, 22px);
  border-radius:var(--radius); background:rgba(27,38,59,.82); border:1px solid var(--line-dark);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.option:nth-child(2){ background:rgba(42,58,84,.86); }
.option--full{ background:linear-gradient(160deg, rgba(198,90,30,.24), rgba(27,38,59,.92) 60%); border-color:rgba(232,131,74,.55); }
.option-k{ font-weight:700; font-size:clamp(1.06rem, .98rem + .35vw, 1.24rem); color:var(--white); letter-spacing:-.01em; }
.option-v{ color:var(--on-dark); }
.option-fit{ margin-top:auto; padding-top:12px; border-top:1px dashed rgba(224,225,221,.16); font-size:.9rem; color:var(--on-dark-soft); }
.option-fit span{ display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-hi); margin-bottom:2px; }
.phased{
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-top:clamp(12px, 1.6vw, 20px);
  padding:14px clamp(16px, 1.6vw, 22px); border-radius:var(--radius); border:1.5px dashed rgba(224,225,221,.3); color:var(--on-dark);
}
.phased .option-k{ color:var(--orange-hi); }

/* ===================================================================
   08 · THE EXECUTIVE DECISION
=================================================================== */
.decision-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px, 4.5vw, 72px); align-items:center; }
.decision-copy .headline{ max-width:19ch; }
.objections{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(18px, 3vh, 26px); }
.objections li{ padding:7px 13px; border-radius:8px; background:var(--white); border:1px solid var(--line-ink); font-size:.92rem; color:var(--ink-soft); font-style:italic; }
.outcomes{ display:grid; gap:10px; margin-top:clamp(16px, 2.6vh, 24px); }
.outcomes p{ padding:12px 16px; border-radius:10px; background:var(--white); border:1px solid var(--line-ink); color:var(--ink); font-size:.96rem; }
.outcomes p:first-child{ border-left:4px solid var(--orange); }
.outcomes p:last-child{ border-left:4px solid var(--slate); }
.outcome-k{ display:block; font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:2px; }
.brief{
  position:relative; background:var(--white); border-radius:6px; padding:clamp(20px, 3vh, 30px) clamp(20px, 2vw, 30px);
  box-shadow:0 1px 0 rgba(13,27,42,.06), 0 30px 60px -28px rgba(13,27,42,.45); transform:rotate(1.2deg);
  border-top:8px solid var(--navy);
}
.brief::after{ /* the card, clipped to the brief */
  content:""; position:absolute; right:-14px; top:-26px; width:110px; aspect-ratio:1.6; border-radius:8px;
  background:var(--card); border:2px solid var(--navy); transform:rotate(9deg);
  box-shadow:inset 0 0 0 4px var(--card), inset 0 0 0 5px rgba(13,27,42,.35), 0 10px 20px -10px rgba(13,27,42,.5);
  background-image:linear-gradient(var(--orange), var(--orange)); background-size:56% 9px; background-repeat:no-repeat; background-position:50% 44%;
}
.brief-head{ padding-bottom:12px; border-bottom:1.5px solid var(--navy); }
.brief-head h3{ font-family:var(--mono); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--orange-dk); }
.brief-head p{ font-weight:700; font-size:1.2rem; color:var(--ink); letter-spacing:-.01em; }
.brief-list{ counter-reset:b; }
.brief-list li{ counter-increment:b; display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:10px; padding:11px 0; border-bottom:1px solid var(--line-ink); }
.brief-list li::before{ content:counter(b, decimal-leading-zero); grid-row:1 / span 3; font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); padding-top:2px; }
.brief-list b{ color:var(--ink); font-weight:600; }
.brief-list span{ color:var(--ink-soft); font-size:.92rem; }
.brief-decision{ border-bottom:0 !important; }
.brief-boxes{ display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; }
.box{ display:inline-flex; align-items:center; gap:7px; font-size:.9rem; color:var(--ink) !important; }
.box::before{ content:""; width:15px; height:15px; border:1.5px solid var(--navy); border-radius:3px; }
.box--on::before{ background:var(--navy); box-shadow:inset 0 0 0 3px var(--white); }
.brief-sign{ display:block; margin-top:12px; padding-top:6px; border-top:1px solid var(--navy); width:70%; font-family:var(--mono); font-size:.72rem !important; letter-spacing:.12em; text-transform:uppercase; }
.caveat{ margin-top:clamp(18px, 3vh, 26px); padding:12px 16px; border-radius:10px; background:var(--navy); color:var(--on-dark); font-size:.92rem; }
.caveat strong{ color:var(--orange-hi); }

/* ===================================================================
   07 · WHO DOES WHAT
=================================================================== */
.roles-head{ max-width:760px; }
.roles{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(12px, 1.6vw, 20px); margin-top:clamp(22px, 4vh, 40px); }
.role{
  display:flex; flex-direction:column; padding:clamp(18px, 2.6vh, 26px) clamp(18px, 1.8vw, 24px);
  border-radius:var(--radius); background:rgba(27,38,59,.86); border:1px solid var(--line-dark);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.role-brand{ display:flex; align-items:center; gap:10px; height:44px; margin-bottom:14px; }
.role-mark{ width:34px; height:34px; }
.role-word{ height:17px; width:auto; }
.role-omn{ height:34px; width:auto; }
.role-you{ font-family:var(--mono); font-weight:600; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark); padding:8px 12px; border:1px dashed rgba(224,225,221,.4); border-radius:8px; }
.role-k{ font-size:clamp(1.06rem, .98rem + .35vw, 1.24rem); font-weight:700; letter-spacing:-.01em; color:var(--white); padding-bottom:12px; margin-bottom:6px; border-bottom:1.5px solid var(--orange-hi); }
.role ul li{ position:relative; padding-left:16px; margin-top:9px; color:var(--on-dark); font-size:.95rem; line-height:1.4; }
.role ul li::before{ content:""; position:absolute; left:0; top:.52em; width:6px; height:6px; background:var(--orange-hi); transform:rotate(45deg); }
.role--you{ background:rgba(13,27,42,.6); border-style:dashed; }
.role--you .role-k{ border-bottom-color:var(--muted); }
.role--you ul li::before{ background:var(--muted); }

/* ===================================================================
   10 · NEXT STEP
=================================================================== */
.scene--cta{ flex-direction:column; justify-content:center; }
.scene--cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 60% at 85% 100%, rgba(198,90,30,.3), transparent 70%);
}
.cta-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(24px, 4.5vw, 72px); align-items:center; }
.display--cta{ font-size:clamp(2.2rem, 1rem + 4vw, 4.6rem); max-width:15ch; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(22px, 4vh, 36px); }
.cta-side{ padding:clamp(18px, 2.6vh, 26px) clamp(18px, 2vw, 26px); border-radius:var(--radius); background:rgba(27,38,59,.9); border:1px solid var(--line-dark); }
.cta-side-k{ font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-hi); }
.next-list{ counter-reset:n; margin-top:12px; }
.next-list li{ counter-increment:n; display:grid; grid-template-columns:30px minmax(0,1fr); gap:8px; padding:9px 0; border-bottom:1px solid var(--line-dark); color:var(--on-dark); }
.next-list li::before{ content:counter(n); display:grid; place-items:center; width:22px; height:22px; margin-top:1px; border-radius:5px; background:var(--orange-fill); color:var(--white); font-family:var(--mono); font-size:.75rem; font-weight:600; }
.contact{ margin-top:14px; display:grid; gap:4px; }
.contact-row{ display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; min-height:36px; }
.contact-k{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-soft); }
.contact a{ color:var(--white); font-weight:500; text-underline-offset:4px; text-decoration-color:rgba(232,131,74,.6); overflow-wrap:anywhere; }
.contact a:hover{ color:var(--orange-hi); }
.cta-footer{
  width:100%; max-width:var(--maxw); margin:clamp(30px, 6vh, 56px) auto 0; padding-top:20px; border-top:1px solid var(--line-dark);
  display:flex; align-items:center; gap:22px; position:relative;
}
.cta-footer img{ height:clamp(48px, 6vh, 64px); width:auto; flex:none; }
.legal{ font-size:.74rem; line-height:1.5; color:var(--on-dark-soft); max-width:80ch; }
@media (min-width: 760px){
  /* keep the footer text clear of the fixed pager in the bottom-right corner */
  .cta-footer{ padding-right:220px; }
}

/* ===================================================================
   RESPONSIVE
=================================================================== */
/* short laptop screens (e.g. 1366×768) */
@media (min-width: 900px) and (max-height: 820px){
  :root{ --fs-display: clamp(2.3rem, 1rem + 3.9vw, 4.2rem); --fs-headline: clamp(1.7rem, 1rem + 2vw, 2.6rem); }
  .deed p{ font-size:.92rem; }
  .track{ margin-top:22px; }
  .track-space p{ font-size:.86rem; }
  .figure{ padding:10px 14px; }
  .figure dt{ font-size:2rem; }
  .built li{ font-size:.86rem; margin-top:4px; }
  .insight p{ font-size:.9rem; }
  .body-ink{ font-size:.95rem; margin-top:10px; }
  .brief-list li{ padding:7px 0; }
  .option{ gap:6px; padding:16px 18px; }
  .scene{ padding-top:calc(var(--hud-h) + 6px); padding-bottom:78px; }
  .spectrum{ margin-top:18px; }
  .phased{ padding:10px 18px; }
  .options-head .body-lg, .roles-head .body-lg{ margin-top:10px; }
  .roles{ margin-top:18px; }
  .role{ padding:16px 18px; }
  .role-brand{ margin-bottom:8px; }
  .role ul li{ margin-top:6px; font-size:.9rem; }
  .fine-note{ margin-top:14px; }
  .objections{ margin-top:14px; }
  .objections li{ padding:5px 11px; font-size:.86rem; }
  .outcomes{ margin-top:12px; gap:8px; }
  .outcomes p{ padding:9px 14px; font-size:.92rem; }
  .brief{ padding:16px 22px; }
  .caveat{ margin-top:14px; padding:10px 14px; font-size:.88rem; }
  .example-logos{ margin-bottom:12px; }
  .logo-gocrisis{ height:56px; } .logo-omningage{ height:68px; }
  .built{ margin-top:12px; }
  .insight{ margin-top:12px; padding:10px 14px; }
}

@media (min-width: 1600px) and (min-height: 900px){
  :root{
    --maxw: 1440px;
    --fs-display: clamp(4rem, 1rem + 3.8vw, 6.2rem);
    --fs-headline: clamp(3rem, 1rem + 2.1vw, 3.9rem);
    --fs-lead: 1.7rem; --fs-body-lg: 1.36rem; --fs-body: 1.14rem; --fs-eyebrow: .92rem;
  }
  .card-stage, .flip{ width:min(100%, 640px); }
}

@media (min-width: 900px){
  html{ scroll-snap-type:y proximity; }
  .scene{ scroll-snap-align:start; }
}
@media (min-width: 1100px){
  .scene{ padding-right:max(var(--gutter), 96px); }
}
@media (max-width: 1099px){
  .rail{ display:none; }
  .deed-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width: 899px){
  :root{ --hud-h: 64px; --pager-h: 64px; }
  .options{ grid-template-columns:minmax(0,1fr); }
  .option-fit{ margin-top:0; }
  .hook-grid, .disruption-grid, .card-grid, .fallback-top, .example-grid, .decision-grid, .cta-grid{ grid-template-columns:minmax(0,1fr); }
  .hook-visual{ order:-1; width:min(88%, 420px); margin:6px auto 4px; }
  .reveal-stage{ width:min(90%, 440px); margin:0 auto; }
  .route{ margin:4px auto 0; }
  .track{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .track::before{ left:21px; right:auto; top:8px; bottom:8px; width:2px; height:auto; background:linear-gradient(180deg, var(--muted), var(--orange-hi)); transform-origin:top; }
  .js .track::before{ transform:scaleY(0); }
  .js .scene--fallback.is-in .track::before{ transform:scaleY(1); }
  .track-space{ display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:18px; }
  .track-num{ grid-row:1 / span 2; margin:0; }
  .track-space h3, .track-space p{ grid-column:2; }
  .track-space p{ margin-top:2px; }
  .decision-side{ max-width:560px; }
  .roles{ grid-template-columns:minmax(0,1fr); }
  .cta-footer{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 759px){
  .hud-title{ display:none; }
  .hud-scene{ padding-left:14px; }
  .pager{
    left:max(12px, env(safe-area-inset-left)); right:max(12px, env(safe-area-inset-right));
    bottom:max(12px, env(safe-area-inset-bottom)); justify-content:space-between;
  }
  .pager-meter{ flex:1; width:auto; margin:0 6px; }
  .pager-btn{ width:48px; height:48px; }
  .scene{ align-items:flex-start; }
  .display{ font-size:clamp(2.1rem, 1rem + 6.6vw, 3.2rem); }
  .key-hint{ display:none; }
  .hook-visual{ width:min(84%, 340px); }
  .hook-actions{ margin-top:22px; }
  .deed-grid{ grid-template-columns:minmax(0,1fr); }
  .deed::before{ height:10px; margin-bottom:12px; }
  .triad li{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .status-row{ font-size:.8rem; padding:10px 14px; }
  .status-meter{ width:40px; }
  .figures{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .built{ grid-template-columns:minmax(0,1fr); }
  .option{ display:flex; }
  .brief{ transform:none; }
  .brief::after{ width:84px; right:-6px; top:-20px; }
  .cta-actions .btn{ width:100%; justify-content:center; }
  .spectrum{ font-size:.66rem; }
  .route{ font-size:.7rem; }
}
@media (max-width: 380px){
  .example-logos{ gap:10px; }
  .logo-gocrisis, .logo-omningage{ height:46px; }
  .figure dt{ font-size:1.8rem; }
  .route-node--switch span{ width:7em; }
}

/* ===================================================================
   REDUCED MOTION: everything visible, no camera travel
=================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-snap-type:none; }
  .js [data-reveal], .js .hook-visual .card-stage, .js .track::before{
    opacity:1 !important; transition:none !important;
  }
  .js [data-reveal], .js .hook-visual .card-stage{ transform:none !important; }
  .js .track::before{ transform:none !important; }
  .hook-visual.is-floating .card-stage{ animation:none; }
  .js .gojf-card--reveal{ transition:none; transform:rotateY(0deg) rotate(-3deg); }
  .gojf-card--hero{ transition:none; }
  .scene--disruption.is-in .status-row--bad dt::before, .scene--fallback.is-in .route-line--live{ animation:none; }
  .status-meter span{ width:92%; transition:none; }
  .backdrop-world{ will-change:auto; }
}