/* ===================================================================
   Get Out of Jail Free · contact center continuity, presented by Servion
   Theme: Servion's brand, taken from servion.com (theme tokens and the
   official logo files). Every colour lives here; components use the
   role tokens below, never raw values. *-rgb triplets feed rgba().
   Type: Poppins (Servion brand), plus condensed Archivo for the
   card's printed-game character.
=================================================================== */

:root{
  /* Servion palette (servion.com) */
  --sv-indigo:   #1e1d58;   /* base text colour, footer and dark sections */
  --sv-navy:     #003973;   /* logo wordmark, headings on light */
  --sv-blue:     #0391e6;   /* secondary colour: rules, icons */
  --sv-peri:     #6687cc;   /* pretitles */
  --sv-yellow:   #fec502;   /* highlights on dark */
  --sv-amber:    #fbad18;   /* button gradient end */
  --sv-orange:   #ff844c;   /* primary button */
  --sv-sky:      #edf6ff;   /* light page background */

  /* roles: dark scenes */
  --dark:        var(--sv-indigo);
  --dark-rgb:    30,29,88;
  --deep-rgb:    15,14,48;      /* vignette and overlays, below indigo */
  --dark-2:      #2a2970;       /* raised panels on indigo */
  --dark-2-rgb:  42,41,112;
  --dark-3-rgb:  52,51,128;
  --on-dark:     #e9ecfb;       /* 13.0:1 on indigo */
  --on-dark-rgb: 233,236,251;
  --on-dark-soft:#b9bee3;       /* 8.4:1 on indigo, 7.0:1 on panels */
  --line-dark:   rgba(var(--on-dark-rgb),.14);

  /* roles: accents */
  --accent:      var(--sv-orange);   /* decorative warm accent: markers, rules, card corners */
  --accent-rgb:  255,132,76;
  --accent-hi:   var(--sv-yellow);   /* highlight text on dark (9.6:1) */
  --accent-hi-rgb: 254,197,2;
  --accent-deep: #e05515;            /* card title on card stock (large text) */
  --accent-ink:  #0062ad;            /* small accent text on light (5.7:1); Servion blue, deepened */
  --accent-ink-rgb: 0,98,173;
  --blue:        var(--sv-blue);
  --cyan:        #07b6e5;            /* Servion icon cyan: board highlights */
  --peri:        var(--sv-peri);
  --peri-rgb:    102,135,204;
  --soft:        #9fa8d8;
  --navy:        var(--sv-navy);
  --navy-rgb:    0,57,115;

  /* roles: calls to action (Servion's pill button: orange into amber, indigo text) */
  --cta:         var(--sv-orange);
  --cta-grad:    linear-gradient(84deg, var(--sv-orange) 0%, var(--sv-amber) 100%);
  --cta-hover:   var(--sv-yellow);
  --cta-ink:     var(--sv-indigo);   /* 6.3:1 on orange */

  /* roles: light scenes */
  --light:       var(--sv-sky);
  --light-rgb:   237,246,255;
  --white:       #ffffff;
  --ink:         var(--sv-indigo);   /* body text on light (14:1) */
  --ink-head:    var(--sv-navy);     /* headings on light (10.5:1) */
  --ink-soft:    #4b5280;            /* secondary text on light (6.8:1) */
  --line-ink:    rgba(var(--dark-rgb),.16);
  --card:        #f7f2e6;            /* the card's warm printed stock */

  /* type */
  --font:  'Poppins', 'Segoe UI', system-ui, sans-serif;
  --label: 'Poppins', 'Segoe UI', system-ui, sans-serif;   /* eyebrows, counters, small caps labels */
  --cond:  'Archivo', 'Arial Narrow', 'Segoe UI', sans-serif;
  --fs-display: clamp(2.3rem, 1.1rem + 4.2vw, 4.9rem);
  --fs-headline: clamp(1.7rem, 1rem + 2.3vw, 3rem);
  --fs-lead: clamp(1.08rem, .95rem + .7vw, 1.42rem);
  --fs-body-lg: clamp(1rem, .94rem + .3vw, 1.16rem);
  --fs-body: clamp(.95rem, .92rem + .16vw, 1.02rem);
  --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(--dark); }
body{
  margin:0; background:var(--dark); 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:ui-monospace, 'SF Mono', Menlo, monospace; 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(--cta); color:var(--cta-ink); font-weight:600; text-decoration:none;
}
.skip-link:focus{ top:12px; }
:focus-visible{ outline:3px solid var(--accent-hi); outline-offset:3px; border-radius:6px; }
.scene--light :focus-visible{ outline-color:var(--accent-ink); }
.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(--peri); stroke-width:1.5; opacity:.16; vector-effect:non-scaling-stroke; }
.bd-edge{ fill:none; stroke:var(--peri); stroke-width:2; opacity:.3; vector-effect:non-scaling-stroke; }
.bd-band{ opacity:.24; }
.bd-band--o{ fill:var(--cyan); opacity:.3; }
.bd-band--s{ fill:var(--blue); }
.bd-band--m{ fill:var(--peri); }
.bd-band--g{ fill:var(--soft); opacity:.16; }
.bd-bars{ fill:none; stroke:var(--soft); stroke-width:6; opacity:.4; stroke-linecap:round; }
.bd-cards{ fill:none; stroke:var(--peri); stroke-width:2; opacity:.14; vector-effect:non-scaling-stroke; }
.bd-cards--o{ stroke:var(--cyan); opacity:.34; }
.bd-arrow{ fill:var(--cyan); opacity:.26; }
.bd-dot{ fill:var(--peri); opacity:.35; }
/* keep the reading side of each dark scene calm */
.backdrop::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(var(--dark-rgb),.88) 0%, rgba(var(--dark-rgb),.6) 42%, rgba(var(--dark-rgb),.1) 78%),
    radial-gradient(120% 90% at 50% 50%, transparent 50%, rgba(var(--deep-rgb),.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(var(--dark-rgb),.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 18px; gap:10px; text-decoration:none; transition:opacity .4s, visibility .4s; }
[data-scene="plan"] .hud-logo{ opacity:0; visibility:hidden; }
.hud-sv{ height:20px; width:auto; }

/* Servion logo: official white artwork on dark, full colour on light */
.brandline{ display:flex; align-items:center; }
.brandline-sv{ height:clamp(28px, 3.4vh, 36px); width:auto; }
.brandline--hero{ margin-bottom:clamp(20px, 3.6vh, 36px); }
.hud-scene{ flex:none; white-space:nowrap; 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(--label); color:var(--accent-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(var(--dark-rgb),.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(var(--on-dark-rgb),.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(--accent); 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(--dark); 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(var(--dark-rgb),.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(--cta-grad); }
.pager-btn--next svg{ stroke:var(--cta-ink); }
.pager-btn--next:hover{ background:var(--cta-hover); }
.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(--accent); 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(--dark-2); color:var(--on-dark);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.scene-menu::backdrop{ background:rgba(var(--deep-rgb),.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(--label); 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(var(--accent-rgb),.18); }
.scene-menu-list .n{ font-family:var(--label); font-size:.8rem; color:var(--accent-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(--light); }
/* 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(var(--navy-rgb),.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--navy-rgb),.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(--label); font-weight:600; font-size:var(--fs-eyebrow);
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-hi); margin-bottom:clamp(12px, 2vh, 20px);
}
.eyebrow img{ width:28px; height:28px; }
.eyebrow--ink{ color:var(--accent-ink); }
.display{
  font-weight:600; font-size:var(--fs-display); line-height:1.06; letter-spacing:-.03em; color:var(--white);
}
.display em, .headline .hl{ font-style:normal; color:var(--accent-hi); }
.headline{
  font-weight:600; font-size:var(--fs-headline); line-height:1.12; letter-spacing:-.03em; color:var(--white); max-width:22ch;
}
.headline--ink{ color:var(--ink-head); }
.hl-ink{ color:var(--blue); }   /* large headline text only (3.1:1) */
.display, .headline, .lead{ text-wrap:balance; }
.lead{ font-size:var(--fs-lead); line-height:1.42; color:var(--on-dark); max-width:40ch; 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(--cta-grad); color:var(--cta-ink); box-shadow:0 12px 32px rgba(var(--accent-rgb),.28); }
.btn--primary:hover{ background:var(--cta-hover); transform:translateY(-2px); }
.btn--ghost{ border:1.5px solid rgba(var(--on-dark-rgb),.38); color:var(--on-dark); }
.btn--ghost:hover{ border-color:var(--accent-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(var(--peri-rgb),.16), transparent 60%),
    var(--card);
  color:var(--dark);
  box-shadow:inset 0 0 0 1px rgba(var(--dark-rgb),.08);
  padding:4.2cqw;
}
.card-frame{
  position:relative; height:100%; border:max(2px, .5cqw) solid var(--dark); 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(var(--dark-rgb),.4); border-radius:1cqw; pointer-events:none;
}
.card-corner{ position:absolute; width:3.2cqw; height:3.2cqw; background:var(--accent); 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(--label); font-weight:600; font-size:2.35cqw; letter-spacing:.28em; text-transform:uppercase; color:var(--navy); }
.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(--dark); }
.card-title span:last-child{ font-size:14.2cqw; letter-spacing:.01em; color:var(--accent-deep); }
.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(--dark); stroke-width:2.6; }
.card-art-door *{ stroke:var(--blue); stroke-width:2.2; }
.card-art-door > path:first-child{ fill:rgba(var(--navy-rgb),.1); }
.card-art-headset *{ stroke:var(--accent); stroke-width:3.4; }
.card-art-headset circle{ fill:var(--accent); }
.card-art-path, .card-art-arrow{ stroke:var(--accent); 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(--dark); }
.card-sig{
  position:absolute; right:3.2cqw; bottom:2.2cqw; display:flex; align-items:center; gap:.9cqw;
  font-family:var(--label); font-size:1.9cqw; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--navy);
}
.card-sig img{ width:7.2cqw; height:auto; }
.card-sig .card-sig-cresyn{ width:5.4cqw; }
.card-sig-rule{ width:1px; height:5cqw; background:rgba(var(--dark-rgb),.3); margin:0 .6cqw; }
.card-plus{ font-family:var(--label); font-weight:600; color:var(--accent); }
.card-sig .card-plus{ font-size:2.6cqw; }
.card-back{
  transform:rotateY(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(var(--on-dark-rgb),.05) 0 2px, transparent 2px 14px),
    radial-gradient(90% 90% at 50% 50%, var(--blue) 0%, var(--dark-2) 70%);
  box-shadow:inset 0 0 0 1px rgba(var(--on-dark-rgb),.16);
  padding:4.2cqw;
}
.card-back-inner{
  height:100%; border:max(2px,.5cqw) solid var(--accent); border-radius:1.6cqw;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4cqw;
}
.card-back-marks{ display:flex; align-items:center; gap:3cqw; }
.card-back-marks img{ width:20cqw; height:auto; opacity:.95; }
.card-back-marks .card-plus{ font-size:7cqw; font-weight:500; color:var(--accent-hi); }
.card-back-inner span{ font-family:var(--label); font-size:2.6cqw; letter-spacing:.32em; text-transform:uppercase; color:var(--accent-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); }
.hook-aims{ list-style:none; padding:0; margin:clamp(14px, 2.4vh, 24px) 0 0; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.95rem; font-weight:500; color:var(--on-dark); }
.hook-aims li{ position:relative; padding-left:16px; white-space:nowrap; }
.hook-aims li::before{ content:""; position:absolute; left:0; top:.52em; width:6px; height:6px; background:var(--accent-hi); transform:rotate(45deg); }
.key-hint{ display:flex; align-items:center; gap:6px; font-size:.86rem; color:var(--on-dark-soft); }
.hook-visual{ position:relative; }

/* Cresyn credit: present, never competing with the Servion logo */
.credit-cresyn{ display:inline-flex; align-items:center; gap:7px; }
.credit-mark{ width:22px; height:22px; }
.credit-word{ height:11px; width:auto; }
.program-credit{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:clamp(22px, 4vh, 40px);
  padding-top:14px; border-top:1px solid var(--line-dark); max-width:420px;
  font-family:var(--label); font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-soft);
}
.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(var(--dark-2-rgb),.7); border:1px solid var(--line-dark);
}
.status-board{
  border-radius:var(--radius); background:rgba(var(--dark-2-rgb),.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(--label); 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(--label); font-size:.86rem;
}
.status-row + .status-row{ border-top:1px dashed rgba(var(--on-dark-rgb),.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(--soft); 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(--accent-hi); }
.status-row--bad dt::before{ background:var(--accent-hi); box-shadow:0 0 0 0 rgba(var(--accent-hi-rgb),.6); }
.scene--disruption.is-in .status-row--bad dt::before{ animation:ping 2.4s ease-out infinite; }
.status-row--warn dt::before{ background:var(--peri); }
.status-row--key{ margin:6px 10px 4px; padding:12px 10px; border-radius:10px; background:rgba(var(--accent-rgb),.16); border:1px solid rgba(var(--accent-hi-rgb),.5); }
.status-row--key dt{ color:var(--on-dark); font-weight:600; }
.status-row--key dt::before{ background:var(--accent-hi); border-radius:2px; transform:rotate(45deg); }
.status-row--key dd{ color:var(--accent-hi); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.status-meter{ width:64px; height:6px; border-radius:6px; background:rgba(var(--on-dark-rgb),.12); overflow:hidden; }
.status-meter span{ display:block; height:100%; width:28%; background:var(--accent-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(var(--accent-hi-rgb),.6); } 70%,100%{ box-shadow:0 0 0 9px rgba(var(--accent-hi-rgb),0); } }
.stat-note{ margin-top:18px; padding-left:16px; border-left:2px solid var(--accent); 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(--dark); border-radius:10px;
  padding:0 clamp(16px, 1.6vw, 22px) clamp(16px, 2.2vh, 22px); overflow:hidden;
  box-shadow:0 14px 30px -22px rgba(var(--dark-rgb),.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(--dark); }
.deed-num{ font-family:var(--label); font-size:.8rem; font-weight:600; color:var(--accent-ink); letter-spacing:.1em; }
.deed h3{ color:var(--ink-head); 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(--dark); border-color:var(--dark); 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(--accent-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(var(--accent-rgb),.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(--label); font-weight:600; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-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(--peri); }
.route-line--dead{ stroke:var(--blue); stroke-dasharray:3 7; }
.route-line--live{ stroke:var(--accent-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(--dark-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(--dark-2); border:2px solid var(--peri); justify-content:center; }
.route-node--switch::before{ content:""; width:1.1em; height:1.1em; border-radius:2px; background:var(--peri); 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(var(--dark-2-rgb),.55); border:1.5px dashed var(--blue); 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(--accent-hi); }
.route-node--primary span{ font-family:var(--label); font-size:.86em; color:var(--accent-hi); text-transform:uppercase; letter-spacing:.08em; }
.route-node--fallback{ top:76.8%; background:var(--card); color:var(--dark); border:2px solid var(--accent); box-shadow:0 18px 40px -16px rgba(var(--accent-rgb),.55); }
.route-node--fallback b{ font-weight:700; }
.route-node--fallback span{ font-family:var(--label); font-size:.86em; color:var(--accent-ink); }

.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(--peri), var(--accent-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(--label); 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(--dark-2); border:1.5px solid var(--peri);
}
.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(--cta-ink); }
.track-space--go .track-num::before{ background:var(--cta); border-color:var(--cta); }

/* ===================================================================
   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(--label); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.example-copy .headline{ max-width:16ch; }
.sla{ border:1px solid var(--line-ink); border-radius:12px; background:var(--white); padding:clamp(12px, 1.8vh, 18px) clamp(14px, 1.4vw, 20px); margin-bottom:12px; }
.sla-k{ font-family:var(--label); font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.sla-steps{ list-style:none; padding:0; margin:10px 0 0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(10px, 1.2vw, 16px); }
.sla-steps li{ display:flex; flex-direction:column; padding-top:10px; border-top:3px solid var(--line-ink); }
.sla-steps li:nth-child(1){ border-top-color:var(--blue); }
.sla-steps li:nth-child(2){ border-top-color:color-mix(in srgb, var(--blue) 60%, var(--dark)); }
.sla-steps li:nth-child(3){ border-top-color:var(--dark); }
.sla-t{ font-size:.82rem; font-weight:600; color:var(--ink); line-height:1.3; }
.sla-n{ margin-top:4px; 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(--dark); letter-spacing:-.005em; }
.sla-steps li:nth-child(1) .sla-n{ color:var(--blue); }
.sla-u{ margin-top:2px; font-size:.84rem; color:var(--ink-soft); }
.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; }
.figures--pair .figure dt{ font-size:clamp(1.5rem, 1.1rem + 1vw, 2rem); }
.figures--pair .figure:nth-child(1) dt{ color:var(--dark); }
.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(--dark); letter-spacing:-.005em; }
.figure:nth-child(1) dt{ color:var(--blue); }
.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(--label); font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); padding-bottom:6px; border-bottom:1.5px solid var(--dark); 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(--blue); transform:rotate(45deg); }
.insight{ margin-top:clamp(16px, 2.6vh, 24px); padding:14px 18px; border-radius:10px; background:var(--dark); 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(--label); 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(--blue), var(--accent-hi)); position:relative; }
.spectrum-bar::after{ content:""; position:absolute; right:-2px; top:-5px; border:6px solid transparent; border-left:9px solid var(--accent-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(var(--dark-2-rgb),.82); border:1px solid var(--line-dark);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.option:nth-child(2){ background:rgba(var(--dark-3-rgb),.86); }
.option--full{ background:linear-gradient(160deg, rgba(var(--accent-rgb),.24), rgba(var(--dark-2-rgb),.92) 60%); border-color:rgba(var(--accent-hi-rgb),.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(var(--on-dark-rgb),.16); font-size:.9rem; color:var(--on-dark-soft); }
.option-fit span{ display:block; font-family:var(--label); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-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(var(--on-dark-rgb),.3); color:var(--on-dark);
}
.phased .option-k{ color:var(--accent-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(--accent); }
.outcomes p:last-child{ border-left:4px solid var(--blue); }
.outcome-k{ display:block; font-family:var(--label); 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(var(--dark-rgb),.06), 0 30px 60px -28px rgba(var(--dark-rgb),.45); transform:rotate(1.2deg);
  border-top:8px solid var(--dark);
}
.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(--dark); transform:rotate(9deg);
  box-shadow:inset 0 0 0 4px var(--card), inset 0 0 0 5px rgba(var(--dark-rgb),.35), 0 10px 20px -10px rgba(var(--dark-rgb),.5);
  background-image:linear-gradient(var(--accent), var(--accent)); background-size:56% 9px; background-repeat:no-repeat; background-position:50% 44%;
}
.brief-head{ padding-bottom:12px; border-bottom:1.5px solid var(--dark); }
.brief-head h3{ font-family:var(--label); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-ink); }
.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(--label); 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(--dark); border-radius:3px; }
.box--on::before{ background:var(--dark); box-shadow:inset 0 0 0 3px var(--white); }
.brief-sign{ display:block; margin-top:12px; padding-top:6px; border-top:1px solid var(--dark); width:70%; font-family:var(--label); 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(--dark); color:var(--on-dark); font-size:.92rem; }
.caveat strong{ color:var(--accent-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(var(--dark-2-rgb),.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-sv{ height:24px; width:auto; }
.role--lead{ border-color:rgba(var(--accent-hi-rgb),.45); background:linear-gradient(160deg, rgba(var(--accent-hi-rgb),.12), rgba(var(--dark-2-rgb),.9) 55%); }
.role-you{ font-family:var(--label); font-weight:600; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark); padding:8px 12px; border:1px dashed rgba(var(--on-dark-rgb),.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(--accent-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(--accent-hi); transform:rotate(45deg); }
.role--you{ background:rgba(var(--dark-rgb),.6); border-style:dashed; }
.role--program{ border-color:rgba(var(--peri-rgb),.5); }
.role--program .role-k{ border-bottom-color:var(--cyan); }
.role--program ul li::before{ background:var(--cyan); }
.role-tag{ margin-left:auto; padding:3px 8px; border:1px solid rgba(var(--peri-rgb),.55); border-radius:999px; font-family:var(--label); font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-soft); white-space:nowrap; }
.roles-note{ margin-top:clamp(12px, 2vh, 20px); }
.role--you .role-k{ border-bottom-color:var(--peri); }
.role--you ul li::before{ background:var(--peri); }

/* ===================================================================
   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(var(--accent-rgb),.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(var(--dark-2-rgb),.9); border:1px solid var(--line-dark); }
.cta-side-k{ font-family:var(--label); font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-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(--cta); color:var(--cta-ink); font-family:var(--label); font-size:.75rem; font-weight:600; }
.contact{ margin-top:14px; display:grid; gap:4px; }
.contact-row{ display:grid; grid-template-columns:76px minmax(0,1fr); align-items:center; min-height:36px; }
.contact-k{ font-family:var(--label); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-soft); }
.contact-row > span:not(.contact-k){ color:var(--white); font-weight:500; }
.contact a{ color:var(--white); font-weight:500; text-underline-offset:4px; text-decoration-color:rgba(var(--accent-hi-rgb),.6); overflow-wrap:anywhere; }
.contact a:hover{ color:var(--accent-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-brands{ flex:none; display:flex; align-items:center; gap:18px; }
.cta-sv{ height:clamp(26px, 3.4vh, 32px); width:auto; flex:none; }
.cta-rule{ width:1px; align-self:stretch; min-height:36px; background:var(--line-dark); flex:none; }
.cta-credit{ display:flex; flex-direction:column; gap:6px; flex:none; }
.cta-credit-k{ font-family:var(--label); font-size:.62rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-soft); }
.cta-credit .credit-mark{ width:24px; height:24px; }
.cta-credit .credit-word{ height:12px; }
.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){
  /* Poppins sets larger than its size suggests: trim type and rhythm so each scene fits the screen */
  .brandline--hero{ margin-bottom:14px; }
  .hook-actions{ margin-top:18px; }
  .program-credit{ margin-top:14px; padding-top:10px; }
  :root{
    --fs-display: clamp(2.2rem, 1rem + 3.4vw, 3.9rem); --fs-headline: clamp(1.6rem, 1rem + 1.7vw, 2.4rem);
    --fs-lead: clamp(1rem, .9rem + .5vw, 1.25rem); --fs-body-lg: clamp(.95rem, .9rem + .2vw, 1.05rem); --fs-body: .92rem;
  }
  body{ line-height:1.48; }
  .body-lg{ margin-top:10px; }
  .questions-head{ margin-bottom:16px; }
  .deed{ padding-bottom:14px; }
  .deed::before{ margin-bottom:10px; }
  .deed h3{ font-size:1.02rem; }
  .triad li{ padding:8px 0; }
  .triad{ margin-top:16px; }
  .role-k{ font-size:1.02rem; padding-bottom:8px; }
  .role-brand{ height:36px; }
  .option-k{ font-size:1.02rem; }
  .option-v, .option-fit{ font-size:.86rem; }
  .next-list li{ padding:6px 0; }
  .cta-footer{ margin-top:20px; padding-top:14px; }
  .display--cta{ font-size:clamp(2rem, 1rem + 3vw, 3.6rem); }
  .track-space h3{ font-size:.98rem; }
  .route{ max-width:440px; }
  .deed p{ font-size:.92rem; }
  .track{ margin-top:22px; }
  .track-space p{ font-size:.86rem; }
  .figure{ padding:10px 14px; }
  .figure dt{ font-size:2rem; }
  .sla{ padding:10px 14px; margin-bottom:10px; }
  .sla-steps{ margin-top:6px; }
  .sla-steps li{ padding-top:7px; }
  .sla-n{ font-size:2rem; }
  .built li{ font-size:.86rem; margin-top:4px; }
  .insight p{ font-size:.9rem; }
  .body-ink{ font-size:.92rem; margin-top:8px; line-height:1.5; }
  .example-logos img{ max-height:52px; width:auto; }
  .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:14px; }
  .role ul li{ line-height:1.35; }
  .example-grid{ row-gap:14px; }
  .figure dd{ font-size:.84rem; }
  .built h3{ margin-bottom:4px; }
  .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; }
}

/* mid-height screens (e.g. 1536×864, 1600×900): a lighter trim for Poppins */
@media (min-width: 900px) and (min-height: 821px) and (max-height: 920px){
  .program-credit{ margin-top:18px; padding-top:12px; }
  .hook-actions{ margin-top:26px; }
  :root{ --fs-headline: clamp(1.7rem, 1rem + 1.9vw, 2.7rem); --fs-body-lg: clamp(.98rem, .92rem + .25vw, 1.1rem); }
  .roles, .options{ margin-top:16px; }
  .role{ padding:18px 20px; }
  .role ul li{ margin-top:7px; font-size:.93rem; }
  .option-v, .option-fit{ font-size:.9rem; }
  .figure{ padding:12px 16px; }
  .built li{ font-size:.9rem; margin-top:5px; }
  .body-ink{ font-size:.96rem; }
  .spectrum{ margin-top:20px; }
}

@media (min-width: 1600px) and (min-height: 900px){
  :root{
    --maxw: 1440px;
    --fs-display: clamp(3.8rem, 1rem + 3.5vw, 5.8rem);
    --fs-headline: clamp(2.8rem, 1rem + 1.9vw, 3.6rem);
    --fs-lead: 1.55rem; --fs-body-lg: 1.24rem; --fs-body: 1.06rem; --fs-eyebrow: .88rem;
  }
  .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(--peri), var(--accent-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; gap:8px; }
  .hud-logo{ flex:none; gap:7px; padding:0 14px; }
  .hud{ gap:8px; }
  .hud-sv{ height:17px; }
  .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-aims{ flex-direction:column; gap:6px; }
  .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; }
  .cta-brands{ gap:14px; }
  .cta-sv{ height:24px; }
  .cta-credit-k{ font-size:.58rem; letter-spacing:.1em; }
  .spectrum{ font-size:.66rem; }
  .route{ font-size:.7rem; }
}
@media (max-width: 380px){
  /* narrowest phones: keep both logos whole; the counter alone opens the scene list */
  .hud-logo{ gap:5px; padding:0 12px; }
  .hud-sv{ height:15px; }
  .hud-scene{ padding:0 14px; }
  .hud-scene svg{ display:none; }
  .example-logos{ gap:10px; }
  .logo-gocrisis, .logo-omningage{ height:46px; }
  .figure dt{ font-size:1.8rem; }
  .sla-n{ font-size:1.8rem; }
  .sla-t, .sla-u{ font-size:.76rem; }
  .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; }
}