/* SPL studio story — brand palette only:
   #FF3333 red · #FF6666 · #993333 · #333333 dark · #767676 grey · #FFFFFF · #000000 */
:root {
  --red: #FF3333; --red-light: #FF6666; --red-deep: #993333;
  --dark: #333333; --grey: #767676; --white: #FFFFFF; --black: #000000;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --n: 8;            /* zone count, set by story.js */
  --gutter: 6vw;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--black); color: var(--white); }
body { font: 300 18px/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; }
[hidden] { display: none !important; }

/* ── fixed chrome ─────────────────────────────────────────────────────────── */
.mark { position: fixed; top: 22px; left: 26px; z-index: 40; display: block; line-height: 0; }
.mark img { width: 84px; height: auto; display: block; }

.concept {
  position: fixed; top: 22px; right: 26px; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 7px 8px 7px 14px; background: rgba(0,0,0,.72); border: 1px solid rgba(255,255,255,.18);
  font-size: 12px; letter-spacing: .02em; color: rgba(255,255,255,.85);
}
.concept b { color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.concept button { background: none; border: 0; color: var(--white); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }

/* ── the story ────────────────────────────────────────────────────────────── */
.story { position: relative; height: calc(100vh + (var(--n) - 1) * 115vh); }
.stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--black); }
.stage pano-walkthrough { position: absolute; inset: 0; width: 100%; height: 100%; }

.scrim { position: absolute; inset: 0; pointer-events: none; }
.scrim::before, .scrim::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .25s linear;
}
.scrim::before { background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 42%, rgba(0,0,0,0) 68%); opacity: var(--scrim-l, 0); }
.scrim::after  { background: linear-gradient(270deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 42%, rgba(0,0,0,0) 68%); opacity: var(--scrim-r, 0); }

/* ── zone panels ──────────────────────────────────────────────────────────── */
.panels { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.panel {
  position: absolute; top: 50%; width: min(44vw, 600px);
  opacity: 0; transform: translateY(-50%); will-change: opacity, transform;
}
.panel.left  { left: var(--gutter); }
.panel.right { right: calc(var(--gutter) + 48px); } /* leaves the chapter rail clear */

.panel .eyebrow {
  margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red);
}
.panel h2 {
  margin: 0 0 22px; font-weight: 700; font-size: clamp(42px, 5.6vw, 92px); line-height: .96; letter-spacing: -.025em;
}
.panel .copy { margin: 0; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.45; max-width: 36ch; }
.panel .spec { display: flex; gap: 32px; margin-top: 30px; padding-top: 22px; border-top: 1px solid currentColor; }
.panel .spec b { display: block; font-size: 38px; line-height: 1; letter-spacing: -.02em; }
.panel .spec span { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; opacity: .8; }

/* tones */
.panel.dark  { color: var(--white); text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.panel.red   { background: var(--red); color: var(--white); padding: clamp(28px, 3vw, 48px); }
.panel.red .eyebrow { color: var(--white); }
.panel.red .spec span { opacity: .9; }
.panel.white { background: var(--white); color: var(--dark); padding: clamp(28px, 3vw, 48px); }
.panel.white .copy { color: var(--dark); }
.panel.black { background: var(--black); color: var(--white); padding: clamp(28px, 3vw, 48px); border-left: 8px solid var(--red); }

/* hero zone: oversized, anchored low */
.panel.hero { top: auto; bottom: 12vh; width: min(78vw, 1200px); transform: none; color: var(--white); }
.panel.hero h2 { font-size: clamp(60px, 10vw, 168px); letter-spacing: -.035em; line-height: .9; margin-bottom: 26px; }
.panel.hero h2 em { font-style: normal; color: var(--red); }
.panel.hero .copy { font-size: clamp(18px, 1.5vw, 24px); max-width: 44ch; }

/* ── chapter rail ─────────────────────────────────────────────────────────── */
.rail {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px; z-index: 6;
}
.rail button {
  display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; cursor: pointer;
  color: rgba(255,255,255,.55); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: color .2s;
}
.rail button::after { content: ""; width: 22px; height: 2px; background: currentColor; transition: width .25s, background .2s; }
.rail button span { opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; }
.rail:hover button span { opacity: 1; transform: none; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.rail button.active { color: var(--white); }
.rail button.active::after { width: 44px; background: var(--red); }
.rail button:hover { color: var(--white); }

/* ── cues ─────────────────────────────────────────────────────────────────── */
.cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; pointer-events: none;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85);
  transition: opacity .3s;
}
.cue[data-hidden="1"] { opacity: 0; }
.cue-arrow { width: 10px; height: 10px; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(45deg); animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(-3px) rotate(45deg); } 50% { transform: translateY(3px) rotate(45deg); } }

.manual {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  background: var(--black); border: 1px solid rgba(255,255,255,.2);
  font-size: 13px; letter-spacing: .02em; white-space: nowrap; z-index: 5;
}
.manual button { background: none; border: 0; padding: 0; color: var(--red); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ── closing ──────────────────────────────────────────────────────────────── */
.closing { position: relative; background: var(--black); padding: 22vh 0 0; }
.closing .wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.closing .eyebrow { margin: 0 0 20px; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.tagline { margin: 0 0 30px; font-weight: 700; font-size: clamp(64px, 12vw, 200px); line-height: .9; letter-spacing: -.04em; }
.tagline em { font-style: normal; color: var(--red); }
.lede { max-width: 48ch; font-size: clamp(18px, 1.6vw, 26px); margin: 0 0 40px; color: var(--white); }
.ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 16px 28px; background: var(--red); color: var(--white); text-decoration: none;
  font-weight: 700; font-size: 15px; letter-spacing: .04em;
}
.btn:hover { background: var(--red-deep); }
.btn.ghost { background: transparent; border: 2px solid var(--white); }
.btn.ghost:hover { background: var(--white); color: var(--black); }
.closing footer {
  margin-top: 18vh; padding: 26px var(--gutter); border-top: 1px solid rgba(255,255,255,.15);
  font-size: 13px; color: var(--grey); letter-spacing: .02em;
}

/* ── small screens ────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  :root { --gutter: 6vw; }
  .panel, .panel.left, .panel.right { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: 12vh; transform: none; }
  .panel h2 { font-size: clamp(34px, 9vw, 60px); }
  .panel.hero { bottom: 14vh; }
  .panel.hero h2 { font-size: clamp(48px, 14vw, 96px); }
  .rail { right: 14px; }
  .rail button span { display: none; }
  .mark img { width: 64px; }
  .concept span { display: none; }
  .concept { padding: 6px 8px; }
  .concept::before { content: "Concept"; color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
}