/* SAVCOR · Structural VIPV — presentation styles
   Layout: every scene is composed on a 1920×1080 design frame scaled by --u.
   Without JavaScript (or in print) scenes are rendered as a static sequence. */

@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-200-normal.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --u: calc(min(100vw, 177.7778vh) / 1920);
  --ink: #0b0c0e;
  --ink-2: #121418;
  --ink-3: #1a1d22;
  --line: rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.28);
  --fg: #f2f3f4;
  --fg-2: #b9bec5;
  --fg-3: #858b93;
  --silver: #d5d9de;
  --accent: #8fb6d6;      /* controlled cool accent */
  --accent-2: #5f8fb8;
  --paper: #eceef0;
  --paper-2: #e2e5e8;
  --paper-ink: #111317;
  --paper-ink-2: #4a5059;
  --paper-line: rgba(17,19,23,.14);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --fs-display: calc(150 * var(--u));
  --fs-h1: calc(78 * var(--u));
  --fs-h2: calc(46 * var(--u));
  --fs-h3: max(16px, calc(29 * var(--u)));
  --fs-lead: max(17px, calc(31 * var(--u)));
  --fs-body: max(14px, calc(22 * var(--u)));
  --fs-small: max(13px, calc(19 * var(--u)));
  --fs-label: max(11px, calc(15 * var(--u)));
  --fs-figure: calc(96 * var(--u));
  --pad-x: calc(150 * var(--u));
  --pad-top: calc(150 * var(--u));
  --pad-bottom: calc(120 * var(--u));
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--fg); }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: var(--fs-body); line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- typography ---------- */
.label, .kicker {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; font-weight: 400;
  color: var(--fg-3);
}
.kicker { color: var(--accent); display: flex; align-items: center; gap: calc(16 * var(--u)); }
.kicker::before { content: ""; width: calc(36 * var(--u)); min-width: 18px; height: 1px; background: currentColor; opacity: .8; }
.display { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 200; font-size: var(--fs-display); line-height: .94; letter-spacing: -.035em; }
.h1 { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 300; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.028em; }
.h2 { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 300; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.02em; }
.h3 { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.38; font-weight: 300; color: var(--fg-2); letter-spacing: -.005em; }
.body { color: var(--fg-2); }
.small { font-size: var(--fs-small); line-height: 1.45; color: var(--fg-3); }
.figure { font-family: "Inter Tight", sans-serif; font-weight: 200; font-size: var(--fs-figure); letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.muted { color: var(--fg-3); }
.accent { color: var(--accent); }
strong { font-weight: 500; color: var(--fg); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- scene system ---------- */
.deck { position: relative; }
.scene { position: relative; overflow: hidden; background: var(--ink); min-height: 100vh; }
.scene[data-theme="graphite"] { background: radial-gradient(120% 90% at 70% 10%, #1b1f25 0%, var(--ink-2) 55%, #0c0d10 100%); }
.scene[data-theme="light"] { background: linear-gradient(180deg, #f1f2f4 0%, var(--paper) 60%, var(--paper-2) 100%); color: var(--paper-ink); }
.scene[data-theme="light"] .lead, .scene[data-theme="light"] .body { color: var(--paper-ink-2); }
.scene[data-theme="light"] .small, .scene[data-theme="light"] .label { color: #6b717a; }
.scene[data-theme="light"] .kicker { color: #3f6f97; }
.scene[data-theme="light"] strong { color: var(--paper-ink); }
.scene[data-theme="light"] .rule { background: var(--paper-line); }

.frame {
  position: absolute; left: 50%; top: 50%;
  width: calc(1920 * var(--u)); height: calc(1080 * var(--u));
  transform: translate(-50%, -50%);
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
}

/* full-bleed media */
.media { position: absolute; inset: 0; overflow: hidden; background: #0b0c0e; }
.media img, .media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.media video { opacity: 0; transition: opacity .7s var(--ease); }
.media video.is-ready { opacity: 1; }
.media video.is-looping { opacity: 0; transition-duration: .45s; }
.media .cam { position: absolute; inset: 0; }
.shade { position: absolute; inset: 0; pointer-events: none; }
.shade--hero { background: linear-gradient(90deg, rgba(8,9,11,.9) 0%, rgba(8,9,11,.72) 30%, rgba(8,9,11,.18) 55%, rgba(8,9,11,0) 72%), linear-gradient(0deg, rgba(8,9,11,.7) 0%, rgba(8,9,11,0) 38%), linear-gradient(180deg, rgba(8,9,11,.45) 0%, rgba(8,9,11,0) 25%); }
.shade--left { background: linear-gradient(90deg, rgba(8,9,11,.95) 0%, rgba(8,9,11,.86) 38%, rgba(8,9,11,.35) 64%, rgba(8,9,11,.12) 100%), linear-gradient(0deg, rgba(8,9,11,.55) 0%, rgba(8,9,11,0) 30%); }
.shade--deep { background: linear-gradient(90deg, rgba(8,9,11,.97) 0%, rgba(8,9,11,.93) 46%, rgba(8,9,11,.6) 72%, rgba(8,9,11,.35) 100%); }
.shade--bottom { background: linear-gradient(0deg, rgba(8,9,11,.96) 0%, rgba(8,9,11,.82) 24%, rgba(8,9,11,.35) 46%, rgba(8,9,11,0) 64%), linear-gradient(180deg, rgba(8,9,11,.5) 0%, rgba(8,9,11,0) 22%); }
.shade--full { background: rgba(8,9,11,.55); }

.caption-concept {
  position: absolute; right: var(--pad-x); bottom: calc(118 * var(--u));
  font-family: "IBM Plex Mono", monospace; font-size: max(10px, calc(12.5 * var(--u))); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.62); display: flex; gap: .8em; align-items: center;
}
.caption-concept::before { content: ""; width: .55em; height: .55em; border: 1px solid currentColor; border-radius: 50%; }
.tag-evidence {
  font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase;
  color: #cfe3f2; display: inline-flex; align-items: center; gap: .7em;
}
.tag-evidence::before { content: ""; width: .6em; height: .6em; background: var(--accent); border-radius: 50%; }

/* ---------- presentation mode (JS) ---------- */
html.js, html.js body { height: 100%; overflow: hidden; }
html.js .deck { position: fixed; inset: 0; }
html.js .scene {
  position: absolute; inset: 0; min-height: 0;
  opacity: 0; visibility: hidden; z-index: 1;
  transition: opacity .85s var(--ease), visibility 0s linear .85s;
}
html.js .scene.is-active { opacity: 1; visibility: visible; z-index: 3; transition: opacity .85s var(--ease), visibility 0s; }
html.js .scene.is-leaving { visibility: visible; z-index: 2; opacity: 1; transition: visibility 0s linear .9s; }
html.js .scene.is-leaving [data-r] { opacity: 0 !important; transform: translate3d(calc(var(--dir, 1) * -18 * var(--u)), 0, 0) !important; transition: opacity .32s var(--ease), transform .6s var(--ease) !important; transition-delay: 0s !important; }

/* subtle camera move on immersive media */
html.js .scene .media .cam { transform: scale(1.075); transition: transform 10s var(--ease-out); }
html.js .scene.is-active .media .cam { transform: scale(1); }
html.js .scene[data-cam="drift"] .media .cam { transform: scale(1.06) translateX(1.2%); }
html.js .scene[data-cam="drift"].is-active .media .cam { transform: scale(1.02) translateX(0); }

/* staged reveals */
html.js .scene [data-r] { opacity: 0; transform: translate3d(calc(var(--dir, 1) * 26 * var(--u)), calc(10 * var(--u)), 0); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: 0s; }
html.js .scene.is-active [data-r] { opacity: 1; transform: none; transition-delay: calc(var(--d, 0) * 1ms + 260ms); }
html.js .scene [data-r="fade"] { transform: none; }

/* ---------- chrome ---------- */
.chrome { display: none; }
html.js .chrome { display: block; }
.topbar { position: fixed; z-index: 20; left: 0; right: 0; top: 0; height: calc(110 * var(--u)); min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad-x); pointer-events: none; }
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: calc(28 * var(--u)); color: inherit; text-decoration: none; }
.brand img { height: max(12px, calc(19 * var(--u))); width: auto; }
.brand .logo-dark { display: none; }
.brand .chapter-name { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); padding-left: calc(28 * var(--u)); border-left: 1px solid rgba(255,255,255,.25); line-height: 1.2; transition: color .4s; }
.tools { display: flex; gap: calc(10 * var(--u)); }
.icon-btn { appearance: none; background: transparent; border: 1px solid rgba(255,255,255,.22); color: #fff; width: max(36px, calc(48 * var(--u))); height: max(36px, calc(48 * var(--u))); border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.icon-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.icon-btn:focus-visible, .chapter-link:focus-visible, .nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.icon-btn svg { width: 44%; height: 44%; }
.bottombar { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; height: calc(96 * var(--u)); min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad-x); pointer-events: none; }
.bottombar > * { pointer-events: auto; }
.counter { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .16em; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.counter b { color: #fff; font-weight: 500; }
.nav { display: flex; gap: calc(10 * var(--u)); }
.nav-btn { appearance: none; background: transparent; border: 1px solid rgba(255,255,255,.22); color: #fff; height: max(36px, calc(48 * var(--u))); padding: 0 calc(22 * var(--u)); min-width: max(36px, calc(48 * var(--u))); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: .6em; font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; transition: background .25s, border-color .25s; }
.nav-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.nav-btn:disabled { opacity: .3; cursor: default; }
.nav-btn svg { width: 1.2em; height: 1.2em; }
.progress { position: fixed; z-index: 21; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.08); }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .6s var(--ease-out); }
.hint { position: fixed; z-index: 21; left: 50%; bottom: calc(26 * var(--u)); transform: translateX(-50%); font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); transition: opacity .8s; pointer-events: none; }
.hint.is-hidden { opacity: 0; }

body.on-light .brand .logo-light { display: none; }
body.on-light .brand .logo-dark { display: block; }
body.on-light .brand .chapter-name { color: #5a616b; border-left-color: rgba(17,19,23,.2); }
body.on-light .icon-btn, body.on-light .nav-btn { color: var(--paper-ink); border-color: rgba(17,19,23,.22); }
body.on-light .icon-btn:hover, body.on-light .nav-btn:hover { background: rgba(17,19,23,.06); border-color: rgba(17,19,23,.45); }
body.on-light .counter { color: #5a616b; }
body.on-light .counter b { color: var(--paper-ink); }
body.on-light .hint { color: #6b717a; }
body.on-light .progress { background: rgba(17,19,23,.08); }

/* chapter menu */
.menu { position: fixed; inset: 0; z-index: 40; background: rgba(8,9,11,.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s; color: var(--fg); overflow-y: auto; }
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
.menu-inner { max-width: calc(1500 * var(--u)); margin: 0 auto; padding: calc(150 * var(--u)) var(--pad-x) calc(110 * var(--u)); display: grid; grid-template-columns: 1fr 2.2fr; gap: calc(100 * var(--u)); min-height: 100%; }
.menu-inner .h2 { margin-top: calc(18 * var(--u)); }
.menu ol { counter-reset: ch; border-top: 1px solid var(--line); }
.chapter-link { appearance: none; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: calc(15 * var(--u)) 0; display: grid; grid-template-columns: calc(70 * var(--u)) 1fr auto; align-items: baseline; gap: calc(16 * var(--u)); cursor: pointer; color: var(--fg-2); transition: color .2s, padding .3s var(--ease-out); font-size: var(--fs-h3); font-family: "Inter Tight", sans-serif; font-weight: 300; }
.chapter-link .label { min-width: 30px; }
.chapter-link:hover, .chapter-link.is-current { color: #fff; padding-left: calc(10 * var(--u)); }
.chapter-link.is-current .label { color: var(--accent); }
.chapter-link .count { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); color: var(--fg-3); letter-spacing: .12em; }
.menu-close { position: absolute; top: calc(31 * var(--u)); right: var(--pad-x); }
.menu-keys { margin-top: calc(40 * var(--u)); display: grid; gap: .5em; }
.menu-keys kbd { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); border: 1px solid var(--line-strong); border-radius: 4px; padding: .1em .45em; margin-right: .5em; color: var(--fg); }

/* ================= scene compositions ================= */

/* 01 opening */
.s-opening .frame { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: calc(190 * var(--u)); }
.s-opening .logo-hero { width: calc(250 * var(--u)); margin-bottom: calc(56 * var(--u)); }
.s-opening .display { max-width: calc(900 * var(--u)); font-size: calc(124 * var(--u)); }
.s-opening .display span { display: block; color: var(--silver); }
.s-opening .sub { margin-top: calc(40 * var(--u)); display: flex; gap: calc(54 * var(--u)); align-items: baseline; max-width: calc(700 * var(--u)); }
.s-opening .sub .lead { color: #e6e8eb; }
.s-opening .meta { position: absolute; left: var(--pad-x); bottom: calc(118 * var(--u)); }

/* 02 opportunity */
.s-opportunity .frame { display: flex; flex-direction: column; justify-content: center; }
.s-opportunity .h1 { max-width: calc(980 * var(--u)); margin-top: calc(30 * var(--u)); }
.s-opportunity .lead { max-width: calc(760 * var(--u)); margin-top: calc(38 * var(--u)); }
.principles { margin-top: calc(64 * var(--u)); display: grid; grid-template-columns: repeat(3, calc(250 * var(--u))); gap: calc(40 * var(--u)); }
.principles li { border-top: 1px solid var(--line-strong); padding-top: calc(18 * var(--u)); }
.principles .h3 { margin-top: calc(10 * var(--u)); color: var(--fg); font-size: max(15px, calc(24 * var(--u))); }

/* 03 at a glance */
.s-glance .frame { display: grid; grid-template-columns: calc(560 * var(--u)) 1fr; gap: calc(120 * var(--u)); align-content: center; }
.s-glance .h1 { margin-top: calc(26 * var(--u)); }
.s-glance .lead { margin-top: calc(32 * var(--u)); }
.glance-total { margin-top: calc(60 * var(--u)); padding-top: calc(26 * var(--u)); border-top: 1px solid var(--line-strong); }
.glance-total .figure { margin-top: calc(14 * var(--u)); }
.glance-total .small { margin-top: calc(14 * var(--u)); }
.streams { border-top: 1px solid var(--line-strong); }
.streams li { display: grid; grid-template-columns: calc(70 * var(--u)) 1fr calc(260 * var(--u)) calc(230 * var(--u)); gap: calc(20 * var(--u)); align-items: baseline; padding: calc(25 * var(--u)) 0; border-bottom: 1px solid var(--line); }
.streams .h3 { color: var(--fg); }
.streams .small { margin-top: calc(6 * var(--u)); }
.streams .amt { font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: max(17px, calc(34 * var(--u))); letter-spacing: -.02em; text-align: right; font-variant-numeric: tabular-nums; color: var(--fg); }
.streams .trl { text-align: left; }
.pill-trl { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .12em; color: var(--fg-2); white-space: nowrap; }
.pill-trl b { color: var(--accent); font-weight: 500; }

/* 04 evidence */
.s-evidence .frame { display: grid; grid-template-columns: calc(470 * var(--u)) 1fr; gap: calc(80 * var(--u)); padding-top: calc(140 * var(--u)); }
.s-evidence .intro { display: flex; flex-direction: column; justify-content: center; }
.s-evidence .h1 { margin-top: calc(26 * var(--u)); font-size: calc(70 * var(--u)); }
.s-evidence .lead { margin-top: calc(30 * var(--u)); font-size: max(16px, calc(26 * var(--u))); }
.s-evidence .status { margin-top: calc(48 * var(--u)); border-top: 1px solid var(--line-strong); }
.s-evidence .status li { display: flex; justify-content: space-between; padding: calc(14 * var(--u)) 0; border-bottom: 1px solid var(--line); }
.evidence-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1.3fr 1fr; gap: calc(18 * var(--u)); height: calc(800 * var(--u)); }
.ev { position: relative; margin: 0; overflow: hidden; background: #000; }
.ev img { width: 100%; height: 100%; object-fit: cover; }
.ev figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(40 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u)); background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,0)); font-size: var(--fs-small); color: #e9ecef; line-height: 1.35; }
.ev figcaption .label { display: block; color: rgba(255,255,255,.62); margin-bottom: .35em; }
.ev--c { grid-column: 1 / 4; grid-row: 2; }
.ev--a img { object-position: 50% 50%; }

/* 05 architecture (light) */
.s-architecture .frame { display: grid; grid-template-columns: calc(520 * var(--u)) 1fr; gap: calc(60 * var(--u)); }
.s-architecture .intro { padding-top: calc(10 * var(--u)); }
.s-architecture .h1 { margin-top: calc(26 * var(--u)); font-size: calc(68 * var(--u)); }
.s-architecture .lead { margin-top: calc(28 * var(--u)); font-size: max(16px, calc(25 * var(--u))); }
.render-thumb { margin-top: calc(46 * var(--u)); display: grid; grid-template-columns: calc(150 * var(--u)) 1fr; gap: calc(22 * var(--u)); align-items: end; }
.render-thumb img { width: calc(150 * var(--u)); height: calc(174 * var(--u)); object-fit: cover; border: 1px solid var(--paper-line); }
.stack-wrap { position: relative; height: calc(810 * var(--u)); }
.stack-svg { position: absolute; left: 0; top: 0; width: calc(560 * var(--u)); height: calc(810 * var(--u)); overflow: visible; }
.stack-svg .plate { transition: transform 1.4s var(--ease-out); }
html.js .s-architecture .stack-svg .plate { transform: translateY(var(--collapse, 0)); }
html.js .s-architecture.is-active .stack-svg .plate { transform: none; transition-delay: calc(var(--pd, 0) * 1ms + 250ms); }
.layers { position: absolute; left: calc(610 * var(--u)); right: 0; top: 0; height: 100%; }
.layer { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: calc(54 * var(--u)) 1fr; gap: calc(12 * var(--u)); transform: translateY(-50%); }
.layer .idx { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); color: #3f6f97; letter-spacing: .1em; padding-top: .45em; }
.layer .h3 { color: var(--paper-ink); font-size: max(15px, calc(26 * var(--u))); }
.layer .small { margin-top: calc(4 * var(--u)); color: #5c636c; }
.layer::before { content: ""; position: absolute; right: 100%; top: .85em; width: calc(70 * var(--u)); height: 1px; background: rgba(17,19,23,.3); margin-right: calc(14 * var(--u)); }
.diagram-note { position: absolute; left: var(--pad-x); bottom: calc(112 * var(--u)); }

/* 06 manufacturing overview */
.s-flow .head { max-width: calc(1200 * var(--u)); }
.s-flow .h1 { margin-top: calc(22 * var(--u)); font-size: calc(62 * var(--u)); }
.s-flow .lead { margin-top: calc(18 * var(--u)); font-size: max(15px, calc(24 * var(--u))); max-width: calc(1050 * var(--u)); }
.flow { position: absolute; left: var(--pad-x); right: var(--pad-x); top: calc(430 * var(--u)); height: calc(520 * var(--u)); }
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.node { position: absolute; width: calc(330 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--line-strong); background: rgba(12,14,17,.86); }
.node .label { color: var(--accent); }
.node .h3 { margin-top: calc(6 * var(--u)); font-size: max(14px, calc(25 * var(--u))); color: var(--fg); }
.node .small { margin-top: calc(4 * var(--u)); color: var(--fg-3); }
.node--core { border-color: rgba(143,182,214,.7); background: rgba(22,30,40,.9); }
.lane-label { position: absolute; font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }

/* 07/08 stage tables */
.s-stages .h1 { margin-top: calc(22 * var(--u)); font-size: calc(58 * var(--u)); }
.stage-table { width: 100%; border-collapse: collapse; margin-top: calc(46 * var(--u)); table-layout: fixed; }
.stage-table th { text-align: left; font-family: "IBM Plex Mono", monospace; font-weight: 400; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); padding: 0 calc(18 * var(--u)) calc(14 * var(--u)) 0; border-bottom: 1px solid var(--line-strong); }
.stage-table td { vertical-align: top; padding: calc(25 * var(--u)) calc(20 * var(--u)) calc(25 * var(--u)) 0; border-bottom: 1px solid var(--line); font-size: max(13px, calc(20 * var(--u))); color: var(--fg-2); line-height: 1.45; }
.stage-table td:first-child { font-family: "IBM Plex Mono", monospace; color: var(--accent); font-size: var(--fs-label); padding-top: calc(36 * var(--u)); }
.stage-table .stage-name { font-family: "Inter Tight", sans-serif; font-size: max(15px, calc(28 * var(--u))); color: var(--fg); font-weight: 400; letter-spacing: -.01em; line-height: 1.2; }
.stage-table .qc { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.qc span { font-family: "IBM Plex Mono", monospace; font-size: max(10px, calc(14 * var(--u))); letter-spacing: .06em; padding: .2em .55em; border: 1px solid var(--line-strong); color: var(--fg-2); white-space: nowrap; }
.stage-table .flag { display: block; margin-top: .5em; font-size: max(11px, calc(14.5 * var(--u))); color: #c9b98d; }
.stage-table .flag::before { content: "◦ "; }
.stages-foot { margin-top: calc(26 * var(--u)); }

/* 09 geography (light) */
.s-geo .frame { display: grid; grid-template-columns: calc(640 * var(--u)) 1fr; gap: calc(60 * var(--u)); }
.s-geo .h1 { margin-top: calc(26 * var(--u)); font-size: calc(68 * var(--u)); }
.s-geo .lead { margin-top: calc(26 * var(--u)); font-size: max(16px, calc(25 * var(--u))); }
.supply { margin-top: calc(44 * var(--u)); border-top: 1px solid var(--paper-line); }
.supply li { display: grid; grid-template-columns: 1fr auto; padding: calc(13 * var(--u)) 0; border-bottom: 1px solid var(--paper-line); font-size: var(--fs-body); color: var(--paper-ink); }
.supply li span:last-child { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: #4f6f8c; padding-top: .3em; }
.supply li.hq { font-weight: 500; }
.geo-svg { width: 100%; height: calc(790 * var(--u)); overflow: visible; }
.geo-svg text { font-family: "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
html.js .s-geo .route { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2.2s var(--ease-out) .5s; }
html.js .s-geo.is-active .route { stroke-dashoffset: 0; }

/* chapter openers */
.s-chapter .frame { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: calc(170 * var(--u)); }
.chapter-grid { display: grid; grid-template-columns: 1fr calc(930 * var(--u)); gap: calc(80 * var(--u)); align-items: end; }
.chapter-grid .trl-track { margin-top: 0; }
.chapter-foot { margin-top: calc(22 * var(--u)); text-align: right; color: rgba(255,255,255,.7) !important; }
.s-chapter .chapter-no { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .2em; color: rgba(255,255,255,.7); }
.s-chapter .display { margin-top: calc(14 * var(--u)); font-size: calc(160 * var(--u)); }
.s-chapter .lead { margin-top: calc(22 * var(--u)); max-width: calc(640 * var(--u)); color: #e3e6e9; }
.trl-track { margin-top: calc(56 * var(--u)); display: grid; grid-template-columns: repeat(3, calc(300 * var(--u))); gap: 0; max-width: calc(960 * var(--u)); }
.trl-step { border-top: 1px solid rgba(255,255,255,.35); padding-top: calc(16 * var(--u)); padding-right: calc(28 * var(--u)); position: relative; }
.trl-step::before { content: ""; position: absolute; top: calc(-5 * var(--u)); left: 0; width: calc(9 * var(--u)); height: calc(9 * var(--u)); min-width: 6px; min-height: 6px; border-radius: 50%; background: #fff; transform: translateY(-1px); }
.trl-step.is-now::before { background: var(--accent); box-shadow: 0 0 0 calc(6 * var(--u)) rgba(143,182,214,.22); }
.trl-step .h2 { font-size: calc(50 * var(--u)); color: #fff; }
.trl-step .small { margin-top: calc(6 * var(--u)); color: rgba(255,255,255,.72); }

/* product detail scenes */
.s-detail .frame { display: grid; grid-template-columns: calc(470 * var(--u)) 1fr; grid-template-rows: auto 1fr; column-gap: calc(90 * var(--u)); }
.s-detail .intro { grid-row: 1 / 3; }
.s-detail .h1 { margin-top: calc(26 * var(--u)); font-size: calc(64 * var(--u)); }
.s-detail .lead { margin-top: calc(24 * var(--u)); font-size: max(15px, calc(24 * var(--u))); }
.s-detail .total { margin-top: calc(50 * var(--u)); padding-top: calc(22 * var(--u)); border-top: 1px solid var(--line-strong); }
.s-detail .total .figure { margin-top: calc(10 * var(--u)); font-size: calc(88 * var(--u)); }
.s-detail .total .small { margin-top: calc(10 * var(--u)); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(60 * var(--u)); }
.col { border-top: 1px solid var(--line-strong); padding-top: calc(20 * var(--u)); display: flex; flex-direction: column; }
.col .cost-line { margin-top: auto; padding-top: calc(22 * var(--u)); flex-direction: column; align-items: flex-start; gap: calc(4 * var(--u)); }
.col .h3 { color: var(--fg); }
.facts { margin-top: calc(18 * var(--u)); display: grid; gap: calc(9 * var(--u)); }
.facts li { display: grid; grid-template-columns: calc(190 * var(--u)) 1fr; gap: calc(14 * var(--u)); font-size: var(--fs-small); color: var(--fg-2); line-height: 1.4; }
.facts li > span:first-child { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); padding-top: .25em; }
.cost-line { margin-top: calc(22 * var(--u)); display: flex; align-items: baseline; gap: calc(18 * var(--u)); flex-wrap: wrap; }
.cost-line .amt { font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: max(18px, calc(40 * var(--u))); letter-spacing: -.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.cost-line .small { color: var(--fg-3); }
.timeline { grid-column: 2; align-self: end; margin-top: calc(36 * var(--u)); }
.tl-grid { position: relative; margin-top: calc(14 * var(--u)); }
.tl-axis { display: grid; grid-template-columns: repeat(32, 1fr); border-bottom: 1px solid var(--line-strong); font-family: "IBM Plex Mono", monospace; font-size: max(9.5px, calc(12 * var(--u))); color: var(--fg-3); letter-spacing: .08em; }
.tl-axis span { padding-bottom: calc(8 * var(--u)); white-space: nowrap; }
.tl-axis .yr { color: var(--fg-2); grid-column: span 12; border-left: 1px solid var(--line-strong); padding-left: calc(8 * var(--u)); }
.tl-axis .yr.short { grid-column: span 8; }
.tl-row { display: grid; grid-template-columns: repeat(32, 1fr); align-items: center; height: calc(42 * var(--u)); min-height: 22px; border-bottom: 1px solid var(--line); position: relative; }
.bar { height: calc(24 * var(--u)); min-height: 14px; display: flex; align-items: center; padding: 0 calc(10 * var(--u)); font-size: max(10px, calc(13 * var(--u))); font-family: "IBM Plex Mono", monospace; letter-spacing: .04em; white-space: nowrap; overflow: hidden; color: #0b0c0e; }
.bar--dev { background: #d8dde3; }
.bar--test { background: rgba(143,182,214,.9); }
.bar--test-light { background: rgba(143,182,214,.35); color: #e6eef5; border: 1px dashed rgba(143,182,214,.75); }
.bar--sub { background: transparent; border: 1px solid rgba(255,255,255,.35); color: var(--fg-2); }
.ms { position: absolute; top: 50%; width: calc(14 * var(--u)); height: calc(14 * var(--u)); min-width: 9px; min-height: 9px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.ms-label { position: absolute; top: 50%; transform: translateY(-50%); font-family: "IBM Plex Mono", monospace; font-size: max(9.5px, calc(12 * var(--u))); letter-spacing: .06em; color: #fff; white-space: nowrap; padding-left: calc(14 * var(--u)); }
.tl-legend { margin-top: calc(12 * var(--u)); display: flex; gap: calc(26 * var(--u)); flex-wrap: wrap; }
.media-strip { position: absolute; top: 0; right: 0; bottom: 0; width: 34%; }
.media-strip img { width: 100%; height: 100%; object-fit: cover; }

/* roller blind */
.s-blind .frame { display: grid; grid-template-columns: calc(600 * var(--u)) 1fr; column-gap: calc(80 * var(--u)); }
.s-blind .h1 { margin-top: calc(26 * var(--u)); font-size: calc(64 * var(--u)); }
.s-blind .scope { margin-top: calc(30 * var(--u)); display: grid; gap: calc(10 * var(--u)); }
.s-blind .scope li { display: flex; gap: calc(14 * var(--u)); align-items: baseline; font-size: var(--fs-body); color: var(--fg-2); }
.s-blind .scope li::before { content: ""; flex: none; width: calc(10 * var(--u)); min-width: 6px; height: 1px; background: var(--accent); transform: translateY(-.3em); }
.s-blind .scope li.no::before { background: var(--fg-3); }
.draft-tag { display: inline-flex; gap: .6em; align-items: center; font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: #d9c48f; border: 1px solid rgba(217,196,143,.45); padding: .35em .7em; }

/* appearance detail */
.s-appearance .frame { display: grid; grid-template-columns: calc(560 * var(--u)) 1fr; column-gap: calc(70 * var(--u)); }
.s-appearance .h1 { margin-top: calc(26 * var(--u)); font-size: calc(60 * var(--u)); }
.s-appearance .lead { margin-top: calc(22 * var(--u)); font-size: max(15px, calc(23 * var(--u))); }
.goals { margin-top: calc(30 * var(--u)); border-top: 1px solid var(--line-strong); }
.goals li { display: grid; grid-template-columns: calc(44 * var(--u)) 1fr; padding: calc(12 * var(--u)) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--fg-2); }
.goals li b { font-weight: 400; color: var(--fg); display: block; font-size: var(--fs-body); }
.goals .label { padding-top: .35em; color: var(--accent); }
.mosaic { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: calc(16 * var(--u)); height: calc(560 * var(--u)); }
.mosaic .ev video, .mosaic .ev img { width: 100%; height: 100%; object-fit: cover; }
.mosaic .ev--tall { grid-row: 1 / 3; }
.learn { margin-top: calc(26 * var(--u)); display: grid; grid-template-columns: calc(250 * var(--u)) 1fr; gap: calc(30 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid var(--line-strong); }
.learn ul { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)) calc(30 * var(--u)); }
.learn li { font-size: var(--fs-small); color: var(--fg-2); }

/* industrialisation */
.s-industrial .frame { display: grid; grid-template-columns: calc(820 * var(--u)) 1fr; column-gap: calc(80 * var(--u)); }
.s-industrial .h1 { margin-top: calc(26 * var(--u)); font-size: calc(66 * var(--u)); }
.s-industrial .lead { margin-top: calc(24 * var(--u)); font-size: max(15px, calc(24 * var(--u))); max-width: calc(720 * var(--u)); }
.equip { margin-top: calc(36 * var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); }
.equip li { padding: calc(16 * var(--u)) calc(18 * var(--u)) 0 0; }
.equip .h3 { color: var(--fg); font-size: max(14px, calc(24 * var(--u))); margin-top: calc(6 * var(--u)); }
.kpis { margin-top: calc(48 * var(--u)); display: grid; grid-template-columns: repeat(3, auto); gap: calc(60 * var(--u)); justify-content: start; }
.kpis .figure { font-size: calc(80 * var(--u)); margin-top: calc(10 * var(--u)); }
.kpis .small { margin-top: calc(8 * var(--u)); max-width: calc(240 * var(--u)); }
.footnote { position: absolute; left: var(--pad-x); bottom: calc(112 * var(--u)); max-width: calc(980 * var(--u)); }

/* roadmap (light) */
.s-roadmap .h1 { margin-top: calc(16 * var(--u)); font-size: calc(54 * var(--u)); }
.s-roadmap .frame { padding-top: calc(135 * var(--u)); }
.s-roadmap .head { display: flex; justify-content: space-between; align-items: end; }
.s-roadmap .head-right { text-align: right; }
.gantt { margin-top: calc(26 * var(--u)); display: grid; grid-template-columns: calc(430 * var(--u)) repeat(24, 1fr) calc(170 * var(--u)); font-size: var(--fs-small); color: var(--paper-ink); }
.g-h { font-family: "IBM Plex Mono", monospace; font-size: max(9.5px, calc(12.5 * var(--u))); letter-spacing: .08em; color: #6b717a; padding: calc(6 * var(--u)) 0; text-align: center; border-bottom: 1px solid var(--paper-line); }
.g-h.yr { grid-column: span 12; text-align: left; padding-left: calc(8 * var(--u)); color: var(--paper-ink); border-left: 1px solid rgba(17,19,23,.25); font-weight: 500; }
.g-h.left { text-align: left; }
.g-h.right { text-align: right; }
.g-label { padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)) 0; border-bottom: 1px solid var(--paper-line); line-height: 1.2; display: flex; flex-direction: column; justify-content: center; min-height: calc(52 * var(--u)); }
.g-label b { font-weight: 500; }
.g-label .small { font-size: max(11px, calc(14.5 * var(--u))); color: #6b717a; }
.g-track { grid-column: span 24; position: relative; border-bottom: 1px solid var(--paper-line); background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 24 - 1px), rgba(17,19,23,.06) calc(100% / 24 - 1px), rgba(17,19,23,.06) calc(100% / 24)); }
.g-track::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(17,19,23,.25); }
.g-bar { position: absolute; top: 50%; height: calc(22 * var(--u)); min-height: 12px; transform: translateY(-50%); display: flex; align-items: center; padding-left: calc(8 * var(--u)); font-family: "IBM Plex Mono", monospace; font-size: max(9.5px, calc(12 * var(--u))); letter-spacing: .04em; white-space: nowrap; color: #0e1013; }
.g-bar.dev { background: #c3ccd5; }
.g-bar.test { background: #8fb6d6; }
.g-bar.app { background: #b9c3cc; }
.g-bar.ind { background: #3a414a; color: #fff; }
.g-sop { position: absolute; top: 50%; transform: translate(-50%, -50%); width: calc(68 * var(--u)); min-width: 34px; height: calc(30 * var(--u)); min-height: 16px; background: #111317; color: #fff; display: grid; place-items: center; font-family: "IBM Plex Mono", monospace; font-size: max(9.5px, calc(12 * var(--u))); letter-spacing: .1em; }
.g-amt { border-bottom: 1px solid var(--paper-line); text-align: right; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: flex-end; font-family: "Inter Tight", sans-serif; font-size: max(13px, calc(21 * var(--u))); }
html.js .s-roadmap .g-bar { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease-out); }
html.js .s-roadmap.is-active .g-bar { clip-path: inset(0 0 0 0); transition-delay: calc(var(--d, 0) * 1ms + 350ms); }
.timing-note { margin-top: calc(20 * var(--u)); display: grid; grid-template-columns: calc(430 * var(--u)) 1fr; border-top: 1px solid rgba(17,19,23,.3); padding-top: calc(16 * var(--u)); }
.timing-note ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(30 * var(--u)); }
.timing-note li { font-size: max(11.5px, calc(17 * var(--u))); color: var(--paper-ink-2); line-height: 1.35; }
.timing-note li b { display: block; color: var(--paper-ink); font-weight: 500; font-family: "Inter Tight", sans-serif; font-size: max(14px, calc(22 * var(--u))); }

/* budget (light) */
.s-budget .frame { display: grid; grid-template-columns: calc(520 * var(--u)) 1fr; column-gap: calc(90 * var(--u)); }
.s-budget .h1 { margin-top: calc(24 * var(--u)); font-size: calc(62 * var(--u)); }
.s-budget .figure { margin-top: calc(44 * var(--u)); font-size: calc(112 * var(--u)); color: var(--paper-ink); }
.s-budget .year-split { margin-top: calc(40 * var(--u)); border-top: 1px solid var(--paper-line); }
.s-budget .year-split li { display: flex; justify-content: space-between; align-items: baseline; padding: calc(14 * var(--u)) 0; border-bottom: 1px solid var(--paper-line); }
.s-budget .year-split .amt { font-family: "Inter Tight", sans-serif; font-size: max(16px, calc(32 * var(--u))); font-weight: 300; font-variant-numeric: tabular-nums; }
.budget-table { width: 100%; border-collapse: collapse; color: var(--paper-ink); }
.budget-table caption { text-align: left; padding-bottom: calc(14 * var(--u)); }
.budget-table th { text-align: right; font-family: "IBM Plex Mono", monospace; font-weight: 400; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: #6b717a; padding: 0 0 calc(12 * var(--u)) calc(16 * var(--u)); border-bottom: 1px solid rgba(17,19,23,.35); }
.budget-table th:first-child { text-align: left; padding-left: 0; }
.budget-table td { text-align: right; padding: calc(16 * var(--u)) 0 calc(16 * var(--u)) calc(16 * var(--u)); border-bottom: 1px solid var(--paper-line); font-variant-numeric: tabular-nums; font-size: var(--fs-body); vertical-align: top; }
.budget-table td:first-child { text-align: left; padding-left: 0; font-family: "Inter Tight", sans-serif; font-size: max(15px, calc(25 * var(--u))); }
.budget-table td .small { display: block; font-size: max(11px, calc(14.5 * var(--u))); color: #6b717a; margin-top: .2em; font-family: "Inter", sans-serif; }
.budget-table td.total { font-weight: 500; }
.budget-table tr.sum td { border-bottom: 0; border-top: 1px solid rgba(17,19,23,.5); font-weight: 500; font-size: max(16px, calc(28 * var(--u))); padding-top: calc(18 * var(--u)); }
.budget-note { margin-top: calc(22 * var(--u)); }

/* closing */
.s-closing .frame { display: flex; flex-direction: column; justify-content: center; }
.s-closing .h1 { margin-top: calc(26 * var(--u)); max-width: calc(900 * var(--u)); font-size: calc(84 * var(--u)); }
.s-closing .align { margin-top: calc(56 * var(--u)); display: grid; grid-template-columns: repeat(4, calc(222 * var(--u))); gap: calc(30 * var(--u)); }
.s-closing .align li { border-top: 1px solid rgba(255,255,255,.4); padding-top: calc(16 * var(--u)); font-size: var(--fs-small); color: rgba(255,255,255,.78); }
.s-closing .align li b { display: block; font-family: "Inter Tight", sans-serif; font-weight: 400; font-size: max(15px, calc(25 * var(--u))); color: #fff; margin: calc(8 * var(--u)) 0 calc(6 * var(--u)); }
.s-closing .thanks { margin-top: calc(70 * var(--u)); display: flex; align-items: center; gap: calc(36 * var(--u)); }
.s-closing .thanks img { width: calc(220 * var(--u)); }

/* appendix */
.s-appendix .h1 { margin-top: calc(22 * var(--u)); font-size: calc(56 * var(--u)); }
.qc-matrix { margin-top: calc(40 * var(--u)); width: 100%; border-collapse: collapse; }
.qc-matrix th { font-family: "IBM Plex Mono", monospace; font-weight: 400; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); padding: 0 calc(10 * var(--u)) calc(14 * var(--u)); border-bottom: 1px solid var(--line-strong); text-align: center; }
.qc-matrix th:first-child, .qc-matrix td:first-child { text-align: left; padding-left: 0; }
.qc-matrix td { text-align: center; padding: calc(13 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--fg-2); }
.qc-matrix td:first-child { font-family: "Inter Tight", sans-serif; font-size: max(14px, calc(23 * var(--u))); color: var(--fg); }
.qc-matrix td:first-child .label { margin-right: calc(16 * var(--u)); color: var(--accent); }
.dot { display: inline-block; width: calc(12 * var(--u)); height: calc(12 * var(--u)); min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--accent); }
.notes-grid { margin-top: calc(40 * var(--u)); display: grid; grid-template-columns: 1.1fr 1fr; gap: calc(80 * var(--u)); }
.trl-defs { border-top: 1px solid var(--line-strong); }
.trl-defs li { display: grid; grid-template-columns: calc(110 * var(--u)) 1fr; padding: calc(13 * var(--u)) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--fg-2); }
.trl-defs li b { font-family: "IBM Plex Mono", monospace; font-weight: 500; color: var(--accent); font-size: var(--fs-label); letter-spacing: .1em; padding-top: .2em; }
.notes-list { display: grid; gap: calc(18 * var(--u)); }
.notes-list li { font-size: var(--fs-small); color: var(--fg-2); padding-left: calc(22 * var(--u)); position: relative; }
.notes-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: calc(10 * var(--u)); min-width: 6px; height: 1px; background: var(--fg-3); }

/* film control (reduced motion) */
.film-toggle { display: none; position: absolute; z-index: 6; right: var(--pad-x); top: calc(130 * var(--u)); }
html.reduce-motion .film-toggle { display: inline-flex; }

/* ================= reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
  html.js .scene, html.js .scene.is-active, html.js .scene.is-leaving { transition-duration: .01s !important; }
  html.js .scene [data-r] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .scene .media .cam { transform: none !important; transition: none !important; }
  html.js .s-architecture .stack-svg .plate { transform: none !important; transition: none !important; }
  html.js .s-geo .route { stroke-dashoffset: 0 !important; transition: none !important; }
  html.js .s-roadmap .g-bar { clip-path: none !important; transition: none !important; }
  .progress i { transition: none; }
}

/* ================= no-JS / static document fallback ================= */
html:not(.js) .scene { height: 100vh; min-height: calc(1080 * var(--u)); }
html:not(.js) .media video { display: none; }

/* ================= small screens: fluid, scrollable scenes ================= */
@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  :root {
    --fs-display: 46px; --fs-h1: 33px; --fs-h2: 25px; --fs-h3: 18px; --fs-lead: 17px; --fs-body: 15.5px; --fs-small: 13.5px; --fs-label: 10.5px; --fs-figure: 44px;
    --pad-x: 20px; --pad-top: 78px; --pad-bottom: 88px;
  }
  html.js .scene { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
  html:not(.js) .scene { height: auto; min-height: 100vh; }
  .frame, .s-opening .frame, .s-chapter .frame { position: relative; left: auto; top: auto; transform: none; width: 100%; height: auto; min-height: 100%; display: block !important; padding: var(--pad-top) var(--pad-x) var(--pad-bottom); }
  .scene > .media { position: absolute; inset: 0; height: 100%; }
  .s-opening .frame, .s-chapter .frame { min-height: 100svh; display: flex !important; flex-direction: column; justify-content: flex-end; }
  .s-opening .logo-hero { width: 150px; margin-bottom: 26px; }
  .s-opening .sub { flex-direction: column; gap: 10px; }
  .s-opening .meta, .caption-concept, .diagram-note, .footnote { position: static; margin-top: 22px; }
  .caption-concept { justify-content: flex-start; }
  .shade--left, .shade--deep, .shade--hero { background: linear-gradient(0deg, rgba(8,9,11,.95) 0%, rgba(8,9,11,.78) 55%, rgba(8,9,11,.45) 100%); }
  .chapter-grid, .principles, .streams li, .equip, .kpis, .s-closing .align, .cols, .notes-grid, .learn, .learn ul, .timing-note, .timing-note ul, .mosaic, .evidence-grid, .trl-track { grid-template-columns: 1fr !important; }
  .principles, .kpis, .s-closing .align, .cols, .notes-grid { gap: 20px; }
  .streams li { gap: 4px; padding: 16px 0; }
  .streams .amt { text-align: left; }
  .s-glance .frame > * + *, .s-evidence .frame > * + *, .s-architecture .frame > * + *, .s-geo .frame > * + *, .s-detail .frame > * + *, .s-blind .frame > * + *, .s-appearance .frame > * + *, .s-industrial .frame > * + *, .s-budget .frame > * + * { margin-top: 32px; }
  .evidence-grid { height: auto; grid-template-rows: none; }
  .ev, .ev--a, .ev--b, .ev--c, .ev--d { grid-row: auto !important; aspect-ratio: 4 / 3; }
  .ev--a, .ev--b { aspect-ratio: 3 / 4; }
  .mosaic { height: auto; grid-template-rows: none; }
  .mosaic .ev, .mosaic .ev--tall { grid-row: auto; aspect-ratio: 16 / 10; }
  .stack-wrap { height: auto; display: grid; gap: 22px; }
  .stack-svg { position: relative; width: 100%; max-width: 360px; height: auto; aspect-ratio: 560 / 810; margin: 0 auto; }
  .layers { position: static; display: grid; gap: 14px; }
  .layer { position: static; transform: none; }
  .layer::before { display: none; }
  .render-thumb { grid-template-columns: 90px 1fr; }
  .render-thumb img { width: 90px; height: 104px; }
  .flow { position: static; height: auto; margin-top: 24px; display: grid; gap: 10px; }
  .flow-svg, .lane-label { display: none; }
  .node { position: static !important; width: auto; }
  .stage-table, .stage-table tbody, .stage-table tr, .stage-table td { display: block; width: 100%; }
  .stage-table thead { display: none; }
  .stage-table tr { border-bottom: 1px solid var(--line); padding: 12px 0; }
  .stage-table td { border: 0; padding: 3px 0; }
  .stage-table td[data-h]::before { content: attr(data-h); display: block; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin-top: 6px; }
  .geo-svg { height: auto; aspect-ratio: 1080 / 790; }
  .facts li { grid-template-columns: 110px 1fr; }
  .timeline { margin-top: 30px; overflow-x: auto; }
  .tl-grid { min-width: 620px; }
  .media-strip { display: none; }
  .gantt-wrap { overflow-x: auto; margin-right: calc(-1 * var(--pad-x)); padding-right: var(--pad-x); }
  .gantt { min-width: 900px; grid-template-columns: 210px repeat(24, 1fr) 100px; }
  .s-roadmap .head { display: block; }
  .s-roadmap .head-right { text-align: left; margin-top: 10px; }
  .budget-table td:nth-child(2), .budget-table th:nth-child(2), .budget-table td:nth-child(3), .budget-table th:nth-child(3) { display: none; }
  .qc-wrap { overflow-x: auto; }
  .qc-matrix { min-width: 640px; }
  .menu-inner { grid-template-columns: 1fr; gap: 20px; padding-top: 70px; }
  .chapter-link { grid-template-columns: 40px 1fr auto; padding: 12px 0; }
  .topbar { background: linear-gradient(180deg, rgba(8,9,11,.6), rgba(8,9,11,0)); }
  body.on-light .topbar { background: linear-gradient(180deg, rgba(236,238,240,.92), rgba(236,238,240,0)); }
  .brand .chapter-name { display: none; }
  .nav-btn .txt { display: none; }
  .hint { display: none; }
  .s-chapter .display { font-size: 58px; }
  .chapter-grid { gap: 24px; }
  .chapter-foot { text-align: left; }
  .trl-step .h2 { font-size: 26px; }
  .trl-track { gap: 14px; }
  .film-toggle { top: 70px; }
  .scene .frame { padding: var(--pad-top) var(--pad-x) var(--pad-bottom) !important; }
  /* token sizes override per-scene desktop sizing */
  .scene .h1, .scene .s-evidence .h1 { font-size: var(--fs-h1) !important; }
  .scene .display { font-size: var(--fs-display) !important; }
  .scene .figure { font-size: var(--fs-figure) !important; }
  .scene .lead { font-size: var(--fs-lead) !important; max-width: none !important; }
  .scene .h2, .trl-step .h2 { font-size: var(--fs-h2) !important; }
  .s-opening .display, .s-opening .sub, .s-opportunity .h1, .s-closing .h1, .s-industrial .lead { max-width: none !important; }
  .facts li { grid-template-columns: 96px 1fr !important; }
  .layer { grid-template-columns: 34px 1fr !important; }
  .trl-defs li { grid-template-columns: 64px 1fr !important; }
  .goals li { grid-template-columns: 34px 1fr !important; }
  .chapter-link { font-size: 18px; }
  .kpis .small, .s-closing .align li { max-width: none !important; }
  .s-closing .thanks img { width: 140px; }
  .s-closing .thanks { gap: 18px; }
  .ev--c { grid-column: auto !important; }
  .glance-total, .s-detail .total { margin-top: 26px; }
  .equip li { padding: 10px 0 0; }
  .kicker::before { width: 18px; }
  .principles .h3, .equip .h3, .layer .h3, .node .h3 { font-size: 17px !important; }
}

/* ================= print / PDF: one 16:9 page per scene ================= */
@page { size: 1920px 1080px; margin: 0; }
@media print {
  :root { --u: 1px; }
  html, body { height: auto !important; overflow: visible !important; background: #0b0c0e; }
  html.js .deck { position: static; }
  html.js .scene, .scene { position: relative !important; inset: auto; width: 1920px; height: 1080px; min-height: 0; opacity: 1 !important; visibility: visible !important; page-break-after: always; break-after: page; overflow: hidden; }
  html.js .scene [data-r] { opacity: 1 !important; transform: none !important; }
  html.js .scene .media .cam { transform: none !important; }
  html.js .s-architecture .stack-svg .plate { transform: none !important; }
  html.js .s-geo .route { stroke-dashoffset: 0 !important; }
  html.js .s-roadmap .g-bar { clip-path: none !important; }
  .media video { display: none !important; }
  .chrome, .menu, .film-toggle { display: none !important; }
  .print-folio { display: block !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.print-folio { display: none; position: absolute; right: var(--pad-x); bottom: calc(46 * var(--u)); font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .14em; color: rgba(255,255,255,.55); }
.scene[data-theme="light"] .print-folio { color: #6b717a; }
.print-brand { display: none; position: absolute; left: var(--pad-x); top: calc(46 * var(--u)); }
.print-brand img { height: calc(19 * var(--u)); width: auto; }
@media print { .print-brand { display: block; } .scene[data-theme="light"] .print-brand .lb { display: none; } .scene:not([data-theme="light"]) .print-brand .db { display: none; } }

/* ================= PDF export mode (used by build/make_pdf.py) ================= */
html.pdf-mode .chrome, html.pdf-mode .menu, html.pdf-mode .film-toggle { display: none !important; }
html.pdf-mode .media video { display: none !important; }
html.pdf-mode .scene, html.pdf-mode .scene * { transition: none !important; }
html.pdf-mode .scene [data-r] { opacity: 1 !important; transform: none !important; }
html.pdf-mode .scene .media .cam { transform: none !important; }
html.pdf-mode .print-folio, html.pdf-mode .print-brand { display: block !important; }
html.pdf-mode .scene[data-theme="light"] .print-brand .lb { display: none; }
html.pdf-mode .scene:not([data-theme="light"]) .print-brand .db { display: none; }


/* ======================= V2 additions ======================= */
html.js .deck[data-dir="-1"] { --dir: -1; }
.media video { transition: opacity .9s var(--ease); }

/* layer explorer */
.explore-btn { margin-top: calc(34 * var(--u)); appearance: none; background: transparent; border: 1px solid rgba(17,19,23,.28); color: var(--paper-ink); border-radius: 999px; padding: .55em 1.1em; font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; display: none; }
html.js .explore-btn { display: inline-flex; }
.explore-btn[aria-pressed="true"] { background: var(--paper-ink); color: var(--paper); }
.layer { cursor: pointer; transition: opacity .5s var(--ease); outline-offset: 6px; }
.layer:focus-visible { outline: 2px solid #3f6f97; }
.stack-svg .plate > * { transition: opacity .5s var(--ease); }
.stack-svg .plate { transition: transform .9s var(--ease-out), opacity .5s var(--ease); }
.has-focus .layer { opacity: .38; }
.has-focus .layer.is-on { opacity: 1; }
.has-focus .layer.is-on .h3 { color: #3f6f97; }
.has-focus .stack-svg .plate { opacity: .32; }
.has-focus .stack-svg .plate.is-on { opacity: 1; }
html.js .s-architecture.is-active .stack-svg .plate.is-on { transform: translateX(-16px); }

/* manufacturing flow */
.s-flow .head { max-width: none; }
.s-flow .h1 { font-size: calc(56 * var(--u)); }
.s-flow .frame { padding-top: calc(130 * var(--u)); }
.flow { top: calc(285 * var(--u)); height: calc(600 * var(--u)); }
.zone-label { position: absolute; top: calc(10 * var(--u)); font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.flow .lane-label { position: absolute; left: calc(18 * var(--u)); width: calc(120 * var(--u)); line-height: 1.3; transform: translateY(-50%); color: var(--fg-2); }
.flow .node { width: calc(270 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); }
.flow .node .h3 { font-size: max(14px, calc(25 * var(--u))); }
.flow .node .small { font-size: max(12px, calc(17 * var(--u))); color: var(--fg-2); }
.flow .node--core { width: calc(290 * var(--u)); padding-top: calc(22 * var(--u)); padding-bottom: calc(22 * var(--u)); }
.flow .node--input { border-style: dashed; background: transparent; padding: calc(12 * var(--u)) calc(16 * var(--u)); }
.flow .node--input .small { color: var(--fg-3); }
.qcs { margin-top: calc(10 * var(--u)); display: flex; gap: calc(6 * var(--u)); flex-wrap: wrap; }
.qcs i, .flow-legend i { font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: max(10.5px, calc(15 * var(--u))); letter-spacing: .04em; color: #cfe3f2; border: 1px solid rgba(143,182,214,.45); padding: .05em .45em; border-radius: 2px; }
.flow-legend { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: calc(112 * var(--u)); display: flex; justify-content: space-between; gap: calc(40 * var(--u)); align-items: baseline; }
.flow-legend .label { margin-right: .8em; }
.flag-note { color: #d6c08a !important; }
.flag-note::before { content: "◦ "; }

/* component / finishing lanes */
.s-lanes .h1 { margin-top: calc(22 * var(--u)); font-size: calc(60 * var(--u)); }
.lanes { margin-top: calc(56 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(56 * var(--u)); }
.lanes--4 { grid-template-columns: repeat(4, 1fr); gap: calc(44 * var(--u)); }
.lane { border-top: 1px solid var(--line-strong); padding-top: calc(18 * var(--u)); }
.lane-head { font-family: "IBM Plex Mono", monospace; font-size: max(11.5px, calc(17 * var(--u))); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.lanes--4 .lane-head { font-family: "Inter Tight", sans-serif; font-size: max(17px, calc(36 * var(--u))); letter-spacing: -.01em; text-transform: none; color: #fff; font-weight: 300; }
.step { margin-top: calc(28 * var(--u)); padding-bottom: calc(24 * var(--u)); border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step-no { font-family: "Inter Tight", sans-serif; font-size: max(17px, calc(36 * var(--u))); font-weight: 300; color: #fff; letter-spacing: -.01em; }
.step-proc { margin-top: calc(10 * var(--u)); font-size: max(14.5px, calc(24 * var(--u))); color: var(--fg-2); }
.lanes--4 .step-proc { margin-top: calc(18 * var(--u)); min-height: calc(120 * var(--u)); }
.io { margin-top: calc(14 * var(--u)); display: flex; align-items: baseline; gap: calc(12 * var(--u)); flex-wrap: wrap; font-size: max(14px, calc(22 * var(--u))); color: var(--fg); }
.io b { color: var(--accent); font-weight: 400; }
.io-list { margin-top: calc(18 * var(--u)); font-size: max(14px, calc(22 * var(--u))); color: var(--fg); display: grid; grid-template-columns: calc(52 * var(--u)) 1fr; gap: calc(10 * var(--u)); }
.io-list .label { padding-top: .25em; min-width: 26px; }
.step .flag-note, .lane .flag-note { margin-top: calc(12 * var(--u)); font-size: max(12px, calc(17 * var(--u))); }
.lanes-foot { position: absolute; left: var(--pad-x); bottom: calc(118 * var(--u)); }

/* plan scenes with image panel */
.s-plan .plan-media { position: absolute; top: 0; bottom: 0; left: 0; width: 36%; overflow: hidden; }
.s-plan .plan-media img { width: 100%; height: 100%; object-fit: cover; }
.s-plan .plan-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,20,24,0) 55%, rgba(18,20,24,1) 100%), linear-gradient(0deg, rgba(8,9,11,.55), rgba(8,9,11,0) 40%); }
.s-plan .plan-media .caption-concept { left: var(--pad-x); right: auto; z-index: 2; }
.s-plan .frame { padding-left: calc(1920 * .36 * var(--u) + 90 * var(--u)); }
.s-plan .h1 { margin-top: calc(24 * var(--u)); font-size: calc(58 * var(--u)); max-width: calc(900 * var(--u)); }
.s-plan .cols { margin-top: calc(54 * var(--u)); }
.s-plan .facts li, .s-blindplan .facts li { grid-template-columns: calc(150 * var(--u)) 1fr; font-size: max(13.5px, calc(20 * var(--u))); }
.money { margin-top: calc(50 * var(--u)); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: calc(40 * var(--u)); border-top: 1px solid var(--line-strong); padding-top: calc(22 * var(--u)); }
.money .amt { margin-top: calc(10 * var(--u)); font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: max(20px, calc(46 * var(--u))); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.money .small { margin-top: calc(6 * var(--u)); }
.money-total .amt { font-size: max(24px, calc(64 * var(--u))); font-weight: 200; }
.money-total .label { color: var(--accent); }

/* roller blind concept (light) */
.s-blind .frame { display: grid; grid-template-columns: calc(640 * var(--u)) 1fr; gap: calc(70 * var(--u)); align-items: center; }
.s-blind .h1 { margin-top: calc(26 * var(--u)); font-size: calc(64 * var(--u)); }
.s-blind .lead { margin-top: calc(26 * var(--u)); }
.scope-tags { margin-top: calc(40 * var(--u)); display: grid; gap: calc(12 * var(--u)); }
.scope-tags li { display: flex; align-items: center; gap: calc(14 * var(--u)); font-size: max(15px, calc(25 * var(--u))); font-family: "Inter Tight", sans-serif; color: var(--paper-ink); padding: calc(12 * var(--u)) 0; border-bottom: 1px solid var(--paper-line); }
.scope-tags li::before { content: ""; width: calc(12 * var(--u)); height: calc(12 * var(--u)); min-width: 8px; min-height: 8px; border-radius: 50%; background: #3f6f97; flex: none; }
.scope-tags li.no::before { background: transparent; border: 1.5px solid #8a9099; }
.blind-note { margin-top: calc(26 * var(--u)); max-width: calc(560 * var(--u)); }
.blind-fig { position: relative; }
.blind-svg { width: 100%; height: auto; max-height: calc(780 * var(--u)); overflow: visible; }
.blind-svg text { font-family: "IBM Plex Mono", monospace; letter-spacing: .08em; }
.fig-caption { margin-top: calc(6 * var(--u)); text-align: right; }
@keyframes rayTravel { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes flowOut { from { stroke-dashoffset: 28; } to { stroke-dashoffset: 0; } }
html.js .s-blind.is-active .blind-svg .ray { stroke-dasharray: 44 16; animation: rayTravel 2.4s linear infinite; animation-delay: calc(var(--i) * -.35s); }
html.js .s-blind.is-active .blind-svg .flow-out { animation: flowOut 1.4s linear infinite; }

/* roller blind plan */
.s-blindplan .h1 { margin-top: calc(22 * var(--u)); font-size: calc(58 * var(--u)); }
.trl-track--wide { max-width: none; grid-template-columns: repeat(3, 1fr); margin-top: calc(56 * var(--u)); }
.trl-track--wide .trl-step .h2 { color: #fff; }
.cols--blind { margin-top: calc(50 * var(--u)); }

/* industrialisation functions */
.functions { margin-top: calc(40 * var(--u)); border-top: 1px solid var(--line-strong); padding-top: calc(16 * var(--u)); }
.functions ul { margin-top: calc(14 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)) calc(40 * var(--u)); }
.functions li { font-family: "Inter Tight", sans-serif; font-size: max(15px, calc(26 * var(--u))); color: #fff; font-weight: 300; padding-left: calc(22 * var(--u)); position: relative; }
.functions li::before { content: ""; position: absolute; left: 0; top: .6em; width: calc(10 * var(--u)); min-width: 6px; height: 1px; background: var(--accent); }

/* programme view (light) */
.s-programme .frame { padding-top: calc(135 * var(--u)); }
.s-programme .head { display: flex; justify-content: space-between; align-items: end; }
.s-programme .h1 { margin-top: calc(16 * var(--u)); font-size: calc(54 * var(--u)); white-space: nowrap; }
.prog-legend { max-width: calc(620 * var(--u)); }
.prog-legend { display: flex; gap: calc(26 * var(--u)); flex-wrap: wrap; justify-content: flex-end; color: var(--paper-ink-2) !important; }
.prog-legend li { display: flex; align-items: center; gap: .55em; }
.lg { display: inline-block; width: calc(26 * var(--u)); min-width: 16px; height: calc(12 * var(--u)); min-height: 8px; }
.lg-dev { background: #c3ccd5; } .lg-test { background: #8fb6d6; } .lg-ind { background: linear-gradient(90deg, rgba(58,65,74,.25), #3a414a 30%, #3a414a 70%, rgba(58,65,74,.25)); }
.lg-ms { width: calc(11 * var(--u)); height: calc(11 * var(--u)); min-width: 8px; min-height: 8px; background: #111317; transform: rotate(45deg); }
.prog-wrap { margin-top: calc(28 * var(--u)); }
.prog { position: relative; }
.p-row { display: grid; grid-template-columns: calc(380 * var(--u)) 1fr; min-height: calc(52 * var(--u)); border-bottom: 1px solid var(--paper-line); }
.p-row.p-first { border-top: 1px solid rgba(17,19,23,.22); }
.p-head { border-bottom: 1px solid rgba(17,19,23,.3); min-height: calc(36 * var(--u)); }
.p-label { display: flex; align-items: center; gap: calc(12 * var(--u)); padding-right: calc(14 * var(--u)); font-size: max(12.5px, calc(18 * var(--u))); color: var(--paper-ink); }
.p-label b { font-weight: 500; min-width: calc(190 * var(--u)); }
.p-label span { color: #5f6670; }
.p-track { position: relative; background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 12 - 1px), rgba(17,19,23,.07) calc(100% / 12 - 1px), rgba(17,19,23,.07) calc(100% / 12)); }
.p-year { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-left: calc(10 * var(--u)); border-left: 1px solid rgba(17,19,23,.3); font-family: "IBM Plex Mono", monospace; font-size: max(11px, calc(15 * var(--u))); letter-spacing: .1em; color: var(--paper-ink); }
.p-q { display: none; }
.p-bar { position: absolute; top: 50%; height: calc(26 * var(--u)); min-height: 15px; transform: translateY(-50%); display: flex; align-items: center; overflow: hidden; }
.p-bar span { padding: 0 calc(10 * var(--u)); white-space: nowrap; font-size: max(11px, calc(15 * var(--u))); color: #0e1013; }
.p-bar.dev { background: #c3ccd5; }
.p-bar.test { background: #8fb6d6; }
.p-bar.inv { background: #111317; } .p-bar.inv span { color: #fff; font-family: "IBM Plex Mono", monospace; letter-spacing: .06em; }
.p-bar.tbc { background: repeating-linear-gradient(135deg, rgba(17,19,23,.08) 0 6px, rgba(17,19,23,.02) 6px 12px); border: 1px dashed rgba(17,19,23,.35); } .p-bar.tbc span { color: #4a5059; }
.p-bar.ind { background: linear-gradient(90deg, rgba(58,65,74,.18) 0%, #3a414a 14%, #3a414a 86%, rgba(58,65,74,.18) 100%); } .p-bar.ind span { color: #fff; padding-left: calc(46 * var(--u)); }
.p-ms { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: calc(8 * var(--u)); z-index: 2; }
.p-ms i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); min-width: 9px; min-height: 9px; background: #111317; transform: rotate(45deg); box-shadow: 0 0 0 2px var(--paper); flex: none; }
.p-ms em { font-style: normal; position: absolute; left: calc(18 * var(--u)); white-space: nowrap; font-size: max(11px, calc(15 * var(--u))); color: var(--paper-ink); font-weight: 500; }
.p-text { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: max(11px, calc(15 * var(--u))); color: #5f6670; font-style: italic; }
.p-marker { position: absolute; top: 0; bottom: 0; left: calc(380 * var(--u) + (100% - 380 * var(--u)) * 24 / 36); width: 0; border-left: 2px solid #3f6f97; pointer-events: none; }
.p-marker span { position: absolute; bottom: 100%; left: 0; transform: translateX(-50%); margin-bottom: calc(6 * var(--u)); white-space: nowrap; font-family: "IBM Plex Mono", monospace; font-size: max(10.5px, calc(13.5 * var(--u))); letter-spacing: .08em; text-transform: uppercase; color: #3f6f97; background: var(--paper); padding: 0 .4em; }
html.js .s-programme .p-bar { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-out); }
html.js .s-programme.is-active .p-bar { clip-path: inset(0 0 0 0); transition-delay: calc(var(--d, 0) * 1ms + 350ms); }
.prog-note { margin-top: calc(28 * var(--u)); display: grid; grid-template-columns: calc(380 * var(--u)) 1fr; border-left: 0; }
.prog-note p:last-child { font-size: max(13px, calc(19 * var(--u))); color: var(--paper-ink); max-width: calc(1150 * var(--u)); line-height: 1.45; }
.prog-note .label { color: #3f6f97; padding-top: .3em; }
.s-programme .prog-wrap { padding-top: calc(28 * var(--u)); }

/* budget 2029 */
.amt.tbc { font-family: "IBM Plex Mono", monospace !important; font-size: max(12px, calc(17 * var(--u))) !important; letter-spacing: .1em; text-transform: uppercase; color: #5a616b; }

/* appendix */
.notes-head { margin-bottom: calc(14 * var(--u)); }
.notes-after { margin-top: calc(18 * var(--u)); }
.trl-defs li, .key-list li { font-size: max(13.5px, calc(20 * var(--u))) !important; }
.key-list { border-top: 1px solid var(--line-strong); }
.key-list li { display: grid; grid-template-columns: calc(270 * var(--u)) 1fr; gap: calc(16 * var(--u)); padding: calc(14 * var(--u)) 0; border-bottom: 1px solid var(--line); color: var(--fg-2); }
.key-list b { font-weight: 500; color: #fff; }
.recon { margin-top: calc(46 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(6 * var(--u)) calc(70 * var(--u)); }
.recon li { display: grid; grid-template-columns: calc(50 * var(--u)) 1fr; padding: calc(20 * var(--u)) 0; border-top: 1px solid var(--line-strong); font-size: max(13.5px, calc(20 * var(--u))); color: var(--fg-2); line-height: 1.45; }
.recon li b { display: block; color: #fff; font-weight: 400; font-family: "Inter Tight", sans-serif; font-size: max(15px, calc(26 * var(--u))); margin-bottom: calc(6 * var(--u)); }
.recon .label { color: var(--accent); padding-top: .5em; }
.qc-matrix td, .qc-matrix th { font-size: max(13px, calc(19 * var(--u))); }

@media (prefers-reduced-motion: reduce) {
  html.js .scene.is-leaving [data-r] { transition: none !important; }
  html.js .s-blind.is-active .blind-svg .ray, html.js .s-blind.is-active .blind-svg .flow-out { animation: none !important; }
  html.js .s-programme .p-bar { clip-path: none !important; transition: none !important; }
  .stack-svg .plate { transition: none !important; }
}
html.pdf-mode .s-programme .p-bar { clip-path: none !important; }
html.pdf-mode .blind-svg .ray, html.pdf-mode .blind-svg .flow-out { animation: none !important; }
html.pdf-mode .explore-btn { display: none !important; }

@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  .s-flow .flow { position: static; height: auto; margin-top: 24px; display: grid; gap: 10px; }
  .zone-label, .flow .lane-label { display: none; }
  .flow .node, .flow .node--core { position: static !important; width: auto; }
  .flow-legend { position: static; display: block; margin-top: 20px; }
  .flow-legend p + p { margin-top: 10px; }
  .lanes, .lanes--4 { grid-template-columns: 1fr !important; gap: 26px; margin-top: 26px; }
  .lanes--4 .step-proc { min-height: 0; }
  .lanes-foot { position: static; margin-top: 20px; }
  .s-plan .plan-media { position: relative; width: 100%; height: 34vh; }
  .s-plan .frame { padding-left: var(--pad-x) !important; }
  .s-plan .plan-media::after { background: linear-gradient(0deg, rgba(18,20,24,1) 0%, rgba(18,20,24,0) 60%); }
  .money { grid-template-columns: 1fr !important; gap: 16px; }
  .s-blind .frame { display: block !important; }
  .blind-fig { margin-top: 28px; }
  .functions ul { grid-template-columns: 1fr; }
  .s-programme .head { display: block; }
  .prog-legend { justify-content: flex-start; margin-top: 14px; }
  .prog-wrap { overflow-x: auto; margin-right: calc(-1 * var(--pad-x)); padding-right: var(--pad-x); }
  .prog { min-width: 980px; }
  .p-row { grid-template-columns: 200px 1fr; }
  .p-label b { min-width: 0; }
  .p-label { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; font-size: 12.5px; }
  .p-marker { left: calc(200px + (100% - 200px) * 24 / 36); }
  .s-programme .h1 { white-space: normal; }
  .prog-note { grid-template-columns: 1fr; gap: 6px; }
  .recon { grid-template-columns: 1fr; }
  .key-list li { grid-template-columns: 1fr; gap: 2px; }
  .explore-btn { margin-top: 20px; }
  .io-list { grid-template-columns: 36px 1fr; }
  .blind-note, .s-blind .lead { max-width: none !important; }
  .blind-svg { max-height: none; }
  .scope-tags li { font-size: 16px; }
  .prog-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; max-width: none; }
  .money .amt { font-size: 26px; } .money-total .amt { font-size: 34px; }
}


/* ======================= V3 additions ======================= */
/* overview flow: names only */
.flow .node { height: calc(110 * var(--u)); display: flex; flex-direction: column; justify-content: center; }
.flow .node .h3 { font-size: max(15px, calc(28 * var(--u))); }
.flow .node--core { height: calc(140 * var(--u)); }
.flow .node--input { height: calc(90 * var(--u)); }
.flow .node--core .small { font-size: max(12px, calc(17 * var(--u))); }

/* stage scenes */
.lanes--2 { grid-template-columns: repeat(2, 1fr); gap: calc(110 * var(--u)); }
.lanes--3 { grid-template-columns: repeat(3, 1fr); gap: calc(70 * var(--u)); }
.lanes--3 .step-proc { min-height: calc(110 * var(--u)); }
.lanes--3 .lane { padding-top: calc(26 * var(--u)); }
.lane--core { border-top-color: rgba(143,182,214,.7); }
.lane--core .lane-head { color: #fff; }
.s-lanes .qcs { margin-top: calc(16 * var(--u)); }
.s-lanes .qcs i { font-size: max(11px, calc(15 * var(--u))); padding: .15em .6em; }
.s-lanes .step-no { font-size: max(18px, calc(40 * var(--u))); }
.s-lanes .lanes--2 .step { margin-top: calc(34 * var(--u)); }

/* plan scenes */
.s-plan .cols { margin-top: calc(60 * var(--u)); gap: calc(70 * var(--u)); }
.plan-period { margin-top: calc(18 * var(--u)); font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: max(17px, calc(32 * var(--u))); color: #fff; letter-spacing: -.01em; line-height: 1.2; }
.plan-scope { margin-top: calc(10 * var(--u)); font-size: max(14px, calc(21 * var(--u))); color: var(--fg-2); min-height: calc(64 * var(--u)); }
.amt-lg { margin-top: calc(30 * var(--u)); font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: max(22px, calc(52 * var(--u))); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.amt-lg + .small { margin-top: calc(6 * var(--u)); }
.plan-total { margin-top: calc(56 * var(--u)); padding-top: calc(22 * var(--u)); border-top: 1px solid var(--line-strong); display: grid; grid-template-columns: auto auto 1fr; gap: calc(36 * var(--u)); align-items: baseline; }
.plan-total .label { color: var(--accent); }
.plan-total .amt { font-family: "Inter Tight", sans-serif; font-weight: 200; font-size: max(26px, calc(72 * var(--u))); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }

/* testing scene (light) */
.s-testing .h1 { margin-top: calc(22 * var(--u)); font-size: calc(58 * var(--u)); max-width: calc(1200 * var(--u)); }
.test-wrap { margin-top: calc(56 * var(--u)); }
.tst { position: relative; margin-left: calc(190 * var(--u)); }
.tst-axis { position: relative; height: calc(30 * var(--u)); border-bottom: 1px solid rgba(17,19,23,.3); }
.tst-axis span { position: absolute; bottom: calc(6 * var(--u)); padding-left: calc(8 * var(--u)); border-left: 1px solid rgba(17,19,23,.35); font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .08em; color: var(--paper-ink); }
.tst-phases { position: relative; height: calc(108 * var(--u)); margin-top: calc(16 * var(--u)); }
.tst-ph { position: absolute; top: 0; bottom: 0; padding: calc(12 * var(--u)) calc(14 * var(--u)); border-left: 2px solid #3f6f97; background: rgba(63,111,151,.08); overflow: hidden; }
.tst-ph b { display: block; font-weight: 500; font-size: max(13px, calc(20 * var(--u))); color: var(--paper-ink); line-height: 1.25; }
.tst-ph span { display: block; margin-top: calc(6 * var(--u)); font-size: max(12px, calc(17 * var(--u))); color: #5f6670; }
.tst-ph.ph1 { background: rgba(63,111,151,.16); }
.tst-ph.ph2 { background: rgba(63,111,151,.11); }
.tst-ph.ph3 { background: linear-gradient(90deg, rgba(63,111,151,.08), rgba(63,111,151,.02)); }
.tst-ph.ph1 b, .tst-ph.ph2 b { font-size: max(12px, calc(17 * var(--u))); }
.tst-row { position: relative; height: calc(56 * var(--u)); border-bottom: 1px solid var(--paper-line); }
.tst-name { position: absolute; right: 100%; margin-right: calc(24 * var(--u)); top: 50%; transform: translateY(-50%); font-weight: 500; font-size: max(14px, calc(22 * var(--u))); color: var(--paper-ink); white-space: nowrap; }
.tst-bar { position: absolute; top: 50%; height: calc(14 * var(--u)); min-height: 8px; transform: translateY(-50%); background: #8fb6d6; }
.tst-end { position: absolute; top: 50%; transform: translate(-100%, -50%); margin-left: calc(-12 * var(--u)); font-size: max(12px, calc(17 * var(--u))); color: var(--paper-ink); font-weight: 500; white-space: nowrap; background: var(--paper); padding: 0 .5em; }
.tst-cost { margin-top: calc(50 * var(--u)); border-collapse: collapse; width: calc(1100 * var(--u)); max-width: 100%; color: var(--paper-ink); }
.tst-cost th { font-family: "IBM Plex Mono", monospace; font-weight: 400; font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: #6b717a; text-align: right; padding: 0 0 calc(10 * var(--u)) calc(20 * var(--u)); border-bottom: 1px solid rgba(17,19,23,.35); }
.tst-cost th:first-child, .tst-cost td:first-child { text-align: left; padding-left: 0; }
.tst-cost td { text-align: right; padding: calc(14 * var(--u)) 0 calc(14 * var(--u)) calc(20 * var(--u)); border-bottom: 1px solid var(--paper-line); font-size: max(14px, calc(22 * var(--u))); font-variant-numeric: tabular-nums; }
.tst-cost td:last-child { font-weight: 500; }
.tst-cost td.tbc { font-family: "IBM Plex Mono", monospace; font-size: max(11px, calc(15 * var(--u))); letter-spacing: .08em; text-transform: uppercase; color: #5a616b; }
.test-note { margin-top: calc(26 * var(--u)); max-width: calc(1100 * var(--u)); color: var(--paper-ink-2) !important; }

/* roller blind plan */
.money--blind { margin-top: calc(70 * var(--u)); }
.money--blind .small { max-width: calc(380 * var(--u)); }

/* appearance (A) */
.s-appearance .frame { display: grid; grid-template-columns: calc(620 * var(--u)) 1fr; column-gap: calc(80 * var(--u)); align-items: center; }
.s-appearance .h1 { font-size: calc(58 * var(--u)); }
.s-appearance .goals { margin-top: calc(40 * var(--u)); }
.s-appearance .goals li { padding: calc(16 * var(--u)) 0; font-size: max(13.5px, calc(19 * var(--u))); }
.s-appearance .goals li b { font-size: max(16px, calc(27 * var(--u))); font-family: "Inter Tight", sans-serif; font-weight: 300; margin-bottom: calc(4 * var(--u)); }
.s-appearance .cost-line { margin-top: calc(34 * var(--u)); }
.s-appearance .cost-line .amt { font-size: max(22px, calc(52 * var(--u))); }
.app-visual { margin: 0; }
.app-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0c0e; }
.app-frame img, .app-frame video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 30% 55%; }
.app-frame video { opacity: 0; transition: opacity .9s var(--ease); }
.app-frame video.is-ready { opacity: 1; }
.caption-inline { margin-top: calc(14 * var(--u)); font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.caption-inline::before { content: "○ "; }

/* samples (B) */
.s-samples .frame { display: grid; grid-template-columns: calc(640 * var(--u)) 1fr; column-gap: calc(90 * var(--u)); align-items: center; }
.s-samples .h1 { margin-top: calc(24 * var(--u)); font-size: calc(56 * var(--u)); }
.findings { margin-top: calc(44 * var(--u)); display: grid; gap: calc(26 * var(--u)); }
.findings > div { border-top: 1px solid var(--line-strong); padding-top: calc(14 * var(--u)); }
.findings dt { color: var(--accent); }
.findings dd { margin: calc(8 * var(--u)) 0 0; font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: max(16px, calc(28 * var(--u))); color: #fff; line-height: 1.25; }
.samples-photos { display: grid; grid-template-columns: 1.6fr 1fr; gap: calc(18 * var(--u)); height: calc(560 * var(--u)); }
.samples-photos .ev img { object-fit: cover; }

@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  .flow .node, .flow .node--core, .flow .node--input { height: auto; }
  .lanes--2, .lanes--3 { grid-template-columns: 1fr !important; gap: 26px; }
  .lanes--3 .step-proc { min-height: 0; }
  .plan-total { grid-template-columns: 1fr; gap: 4px; }
  .plan-scope { min-height: 0; }
  .test-wrap { overflow-x: auto; margin-right: calc(-1 * var(--pad-x)); padding-right: var(--pad-x); }
  .tst { min-width: 820px; margin-left: 110px; }
  .tst-cost { width: 100%; }
  .tst-cost th:nth-child(4), .tst-cost td:nth-child(4) { display: none; }
  .s-appearance .frame, .s-samples .frame { display: block !important; }
  .app-visual, .samples-photos { margin-top: 28px; }
  .samples-photos { height: auto; grid-template-columns: 1fr; }
  .samples-photos .ev { aspect-ratio: 16 / 10; }
}

/* V3 refinements */
.tst-phases { height: calc(26 * var(--u)) !important; margin-top: calc(14 * var(--u)) !important; }
.tst-ph { border-left: 2px solid #f5f6f7; }
.tst-ph.ph1, .tst-legend i.ph1 { background: #3f6f97; }
.tst-ph.ph2, .tst-legend i.ph2 { background: #6f97b8; }
.tst-ph.ph3, .tst-legend i.ph3 { background: linear-gradient(90deg, #a9c3d8, rgba(169,195,216,.25)); }
.tst-legend { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: calc(30 * var(--u)); margin: calc(18 * var(--u)) 0 calc(26 * var(--u)); }
.tst-legend li { display: grid; grid-template-columns: calc(26 * var(--u)) 1fr; column-gap: calc(12 * var(--u)); align-items: baseline; }
.tst-legend i { width: calc(22 * var(--u)); min-width: 14px; height: calc(12 * var(--u)); min-height: 8px; grid-row: 1 / 3; align-self: center; }
.tst-legend b { font-weight: 500; font-size: max(14px, calc(22 * var(--u))); color: var(--paper-ink); }
.tst-legend span { font-size: max(12.5px, calc(18 * var(--u))); color: #5f6670; }
.plan-period { min-height: calc(80 * var(--u)); }
.samples-photos { grid-template-columns: 1.95fr 1fr !important; height: calc(330 * var(--u)) !important; align-self: center; }
@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  .tst-legend { grid-template-columns: 1fr; gap: 10px; }
  .plan-period { min-height: 0; }
  .samples-photos { height: auto !important; grid-template-columns: 1fr !important; }
}
.tst-end { margin-left: 0 !important; border-right: 2px solid #3f6f97; }
.samples-photos .ev { display: flex; flex-direction: column; background: transparent; overflow: visible; }
.samples-photos .ev img { flex: 1; min-height: 0; }
.samples-photos .ev figcaption { position: static; background: none; padding: calc(12 * var(--u)) 0 0; color: var(--fg); }
.samples-photos { height: calc(380 * var(--u)) !important; }
@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  .samples-photos .ev { aspect-ratio: auto !important; }
  .samples-photos .ev img { aspect-ratio: 16 / 10; flex: none; }
}
@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  .test-wrap { overflow: visible; margin-right: 0; padding-right: 0; }
  .tst { min-width: 0; margin-left: 0; }
  .tst-axis, .tst-phases { display: none; }
  .tst-row { height: auto; padding: 10px 0 12px; }
  .tst-name { position: static; transform: none; display: block; margin: 0 0 6px; font-size: 16px; }
  .tst-bar { position: relative; top: auto; transform: none; left: 0 !important; height: 10px; }
  .tst-end { position: static; transform: none; display: block; margin-top: 6px; border: 0; padding: 0; background: none; }
  .money--blind .small { max-width: none; }
}
.tst-legend i { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-top: .4em; }
.tst-legend b, .tst-legend span { grid-column: 2; }

/* ===================== V4 additions ===================== */
/* Start presentation */
.start-btn { position: absolute; left: var(--pad-x); bottom: calc(118 * var(--u)); z-index: 5; appearance: none; background: rgba(8,9,11,.35); color: var(--fg); border: 1px solid rgba(255,255,255,.34); border-radius: 999px; padding: .62em 1.25em; font-family: "IBM Plex Mono", monospace; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; display: none; backdrop-filter: blur(6px); transition: background .3s var(--ease), border-color .3s var(--ease), opacity .4s var(--ease); }
html.js .start-btn { display: inline-flex; }
.start-btn:hover, .start-btn:focus-visible { background: rgba(95,143,184,.35); border-color: var(--accent); outline: none; }
html.is-presenting .start-btn { opacity: 0; pointer-events: none; }
.s-opening .meta { bottom: calc(190 * var(--u)); }
html:not(.js) .s-opening .meta { bottom: calc(118 * var(--u)); }

/* Application direction */
.s-application { background: radial-gradient(110% 90% at 75% 30%, #18202b 0%, #0d0f12 60%, #0a0b0d 100%); }
.s-application .frame { display: grid; grid-template-columns: calc(560 * var(--u)) 1fr; column-gap: calc(70 * var(--u)); align-items: center; }
.s-application .h1 { margin-top: calc(26 * var(--u)); font-size: calc(64 * var(--u)); }
.s-application .lead { margin-top: calc(26 * var(--u)); font-size: max(16px, calc(25 * var(--u))); }
.app-list { margin-top: calc(36 * var(--u)); border-top: 1px solid var(--line-strong); }
.app-list li { display: grid; grid-template-columns: calc(56 * var(--u)) 1fr; gap: calc(14 * var(--u)); padding: calc(15 * var(--u)) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--fg-2); }
.app-list li .label { color: var(--accent); padding-top: .3em; }
.app-list li b { display: block; font-family: "Inter Tight", sans-serif; font-weight: 400; font-size: var(--fs-h3); color: var(--fg); margin-bottom: calc(3 * var(--u)); }
.app-dir-fig { margin: 0; }
.app-svg { width: 100%; height: auto; display: block; }
.app-svg text, .trunk-svg text, .edge-svg text { font-family: "IBM Plex Mono", monospace; letter-spacing: .08em; }

/* At a glance split */
.glance-split { margin-top: calc(18 * var(--u)); display: grid; gap: calc(8 * var(--u)); }
.glance-split li { display: flex; justify-content: space-between; gap: 1em; font-size: var(--fs-small); color: var(--fg-2); border-bottom: 1px solid var(--line); padding-bottom: calc(8 * var(--u)); }
.glance-split b { color: var(--fg); font-weight: 400; font-variant-numeric: tabular-nums; }
.streams .amt small { display: block; font-family: "Inter", sans-serif; font-size: max(11px, calc(14.5 * var(--u))); letter-spacing: 0; color: var(--fg-3); margin-top: calc(4 * var(--u)); }
.s-glance .streams li { padding: calc(21 * var(--u)) 0; }

/* Architecture: closed-edge inset */
.edge-inset { margin: calc(36 * var(--u)) 0 0; }
.edge-svg { width: 100%; height: auto; display: block; }
.edge-inset figcaption { margin-top: calc(8 * var(--u)); }

/* Trunk lid */
.s-trunk { background: radial-gradient(120% 90% at 70% 20%, #1a222c 0%, #0f1115 60%, #0a0b0d 100%); }
.s-trunk .frame { display: grid; grid-template-columns: calc(560 * var(--u)) 1fr; column-gap: calc(70 * var(--u)); align-items: center; }
.s-trunk .h1 { margin-top: calc(26 * var(--u)); font-size: calc(62 * var(--u)); }
.s-trunk .lead { margin-top: calc(26 * var(--u)); font-size: max(16px, calc(24 * var(--u))); }
.zone-list { margin-top: calc(34 * var(--u)); border-top: 1px solid var(--line-strong); }
.zone-list li { display: grid; grid-template-columns: calc(44 * var(--u)) 1fr; gap: calc(14 * var(--u)); align-items: center; padding: calc(14 * var(--u)) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--fg-2); }
.zone-list li b { display: block; font-family: "Inter Tight", sans-serif; font-weight: 400; font-size: max(15px, calc(24 * var(--u))); color: var(--fg); }
.zone-list i { width: calc(34 * var(--u)); min-width: 20px; height: calc(18 * var(--u)); min-height: 11px; border-radius: 3px; }
.z-pri i { background: #5f8fb8; }
.z-opt i { background: repeating-linear-gradient(45deg, #8fb6d6 0 2px, transparent 2px 6px); border: 1px solid #8fb6d6; }
.z-tbd i { border: 2px dashed #8a929b; }
.z-no i { background: #6b727b; }
.trunk-fig { margin: 0; }
.trunk-svg { width: 100%; height: auto; display: block; }
.trunk-media { display: grid; grid-template-columns: 1.6fr 1fr; gap: calc(24 * var(--u)); align-items: end; }
.slot-fig { margin: 0; }
.slot-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0c0e; }
.slot-fig--detail .slot-frame { aspect-ratio: 4 / 5; }
.slot-frame img, .slot-frame video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.slot-frame video { opacity: 0; transition: opacity .9s var(--ease); }
.slot-frame video.is-ready { opacity: 1; }

/* Hood close-up panel */
.s-plan [data-slot="hood_closeup"] img { object-position: 58% 50%; }

/* Appearance principles */
.app-principles { border-top: 1px solid var(--line-strong); padding-top: calc(22 * var(--u)); }
.app-principles .ap { display: grid; grid-template-columns: calc(110 * var(--u)) 1fr; gap: calc(26 * var(--u)); align-items: center; padding: calc(26 * var(--u)) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--fg-2); }
.app-principles .ap b { display: block; font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: max(16px, calc(30 * var(--u))); color: var(--fg); margin-bottom: calc(4 * var(--u)); }
.ap-sw { display: block; height: calc(72 * var(--u)); min-height: 40px; border-radius: calc(6 * var(--u)); }
.ap-sw--blue { background: linear-gradient(135deg, #2d5a86 0%, #1c3c5e 55%, #15304d 100%); }
.ap-sw--pattern { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 0 22%, transparent 23%) 0 0 / 18px 18px, linear-gradient(135deg, #2d5a86 0%, #1c3c5e 55%, #15304d 100%); }
.ap-sw--two { background: linear-gradient(180deg, #15181d 0 50%, #2d5a86 50% 100%); }

/* Budget table V4 */
.budget-table tr.sub td { color: #4a5059; font-size: var(--fs-small); border-bottom: 1px solid rgba(17,19,23,.35); }
.budget-table tr.sub td:first-child { font-size: var(--fs-small); font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .1em; }
.budget-table td.ns { text-align: center; color: #6b717a; font-size: var(--fs-small); font-style: italic; }
.s-budget .budget-table td { padding-top: calc(12 * var(--u)); padding-bottom: calc(12 * var(--u)); }

@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  .s-application .frame, .s-trunk .frame { display: block !important; }
  .app-dir-fig, .trunk-fig, .trunk-media, .app-principles { margin-top: 28px; }
  .trunk-media { grid-template-columns: 1fr; }
  .start-btn { position: static; margin-top: 18px; }
  .s-opening .meta { bottom: auto; }
  .app-principles .ap { grid-template-columns: 64px 1fr; gap: 14px; }
  .budget-table td.ns { display: none; }
}
@media print { .start-btn { display: none !important; } }
html.pdf-mode .start-btn { display: none !important; }
/* V4 layout fixes */
#rear-closure .display { font-size: calc(108 * var(--u)); white-space: nowrap; }
.start-btn { left: auto; right: var(--pad-x); bottom: calc(168 * var(--u)); }
.s-opening .meta { bottom: calc(118 * var(--u)); }
.s-glance .glance-total { margin-top: calc(34 * var(--u)); }
.s-glance .glance-total .figure { font-size: calc(80 * var(--u)); }
.s-glance .lead { margin-top: calc(22 * var(--u)); }
.s-glance .frame { padding-bottom: calc(150 * var(--u)); }
.s-plan [data-slot="hood_closeup"] img { object-position: 38% 50%; }
@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  #rear-closure .display { font-size: 46px; white-space: normal; }
  .s-glance .glance-total .figure { font-size: var(--fs-figure); }
}
.s-glance .h1 { font-size: calc(66 * var(--u)); }
.s-application .app-list li { padding: calc(11 * var(--u)) 0; } .s-application .h1 { font-size: calc(58 * var(--u)); }
html.is-presenting .start-btn { opacity: 0 !important; visibility: hidden; pointer-events: none; transition: opacity .4s var(--ease), visibility 0s linear .4s !important; }
@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  .app-list li { grid-template-columns: 34px 1fr; gap: 8px; padding: 10px 0; }
  .zone-list li { grid-template-columns: 40px 1fr; gap: 10px; padding: 10px 0; }
  .zone-list i { width: 28px; height: 14px; }
  .budget-table td.total { display: table-cell !important; }
}
@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  .scene > .footnote, .scene > .caption-concept { margin-left: var(--pad-x); margin-right: var(--pad-x); padding-bottom: 8px; }
  .s-opening > .start-btn { margin: 0 var(--pad-x) 90px; }
}

/* =====================================================================
   V4.1 design review layer
   ===================================================================== */
:root { --panel-w: 44vw; }

/* --- brand placement system: one intentional SAVCOR mark per page --- */
.topbar .brand { transition: transform .5s var(--ease-out), opacity .35s var(--ease); }
body.brand-hide .topbar .brand { opacity: 0; visibility: hidden; pointer-events: none; }
body.brand-panel .topbar .brand { transform: translateX(calc(var(--panel-w) + 96 * var(--u) - var(--pad-x))); }

/* --- 01 cover: vehicle pushed right of the title; one brand mark --- */
.s-opening .media .cam > img, .s-opening .media .cam > video { transform: scale(1.2); transform-origin: 0% 55%; }
.s-opening .shade--hero { background: linear-gradient(90deg, rgba(8,9,11,.94) 0%, rgba(8,9,11,.84) 30%, rgba(8,9,11,.35) 50%, rgba(8,9,11,0) 66%), linear-gradient(0deg, rgba(8,9,11,.72) 0%, rgba(8,9,11,0) 34%), linear-gradient(180deg, rgba(8,9,11,.4) 0%, rgba(8,9,11,0) 22%); }
.s-opening .display { max-width: calc(900 * var(--u)); }

/* --- 02 opportunity: split, photo right --- */
.s-opp .opp-media { position: absolute; top: 0; bottom: 0; right: 0; width: 46%; overflow: hidden; }
.s-opp .opp-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.s-opp .opp-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,20,24,1) 0%, rgba(18,20,24,0) 22%), linear-gradient(0deg, rgba(8,9,11,.5), rgba(8,9,11,0) 30%); }
.s-opp .opp-media .caption-concept { right: var(--pad-x); z-index: 2; }
.s-opp .opp-body { max-width: calc(840 * var(--u)); padding-top: calc(40 * var(--u)); }
.s-opp .h1 { margin-top: calc(26 * var(--u)); font-size: calc(72 * var(--u)); }
.s-opp .lead { margin-top: calc(30 * var(--u)); max-width: calc(740 * var(--u)); }
.opp-points { margin-top: calc(64 * var(--u)); border-top: 1px solid var(--line-strong); }
.opp-points li { display: grid; grid-template-columns: calc(200 * var(--u)) 1fr; align-items: baseline; padding: calc(20 * var(--u)) 0; border-bottom: 1px solid var(--line); }
.opp-points .label { color: var(--accent); }
.opp-points p { font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: var(--fs-h3); color: var(--fg); }

/* --- 03 application direction: typographic, four columns --- */
.s-apps { background: radial-gradient(110% 90% at 80% 20%, #172030 0%, #0d0f12 62%, #0a0b0d 100%); }
.s-apps .frame { display: flex; flex-direction: column; justify-content: center; }
.s-apps .h1 { margin-top: calc(26 * var(--u)); font-size: calc(76 * var(--u)); max-width: calc(1200 * var(--u)); }
.apps { margin-top: calc(90 * var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(48 * var(--u)); }
.apps li { border-top: 1px solid var(--line-strong); padding-top: calc(26 * var(--u)); color: var(--fg-2); font-size: var(--fs-body); line-height: 1.45; }
.app-no { display: block; font-family: "Inter Tight", sans-serif; font-weight: 200; font-size: calc(64 * var(--u)); line-height: 1; color: var(--accent); letter-spacing: -.02em; }
.apps .h3 { margin: calc(26 * var(--u)) 0 calc(12 * var(--u)); font-size: max(17px, calc(32 * var(--u))); color: var(--fg); }
.apps-foot { margin-top: calc(70 * var(--u)); color: var(--fg-3); }

/* --- 04 programme overview --- */
.s-glance .h1 { font-size: calc(62 * var(--u)); }
.s-glance .lead { font-size: max(16px, calc(25 * var(--u))); }
.glance-split li { font-size: max(14px, calc(20 * var(--u))); padding-bottom: calc(10 * var(--u)); }
.streams li { grid-template-columns: calc(54 * var(--u)) 1fr calc(260 * var(--u)) calc(330 * var(--u)); padding: calc(24 * var(--u)) 0; }
.streams .h3 { font-size: max(16px, calc(30 * var(--u))); }
.streams .small { font-size: max(13px, calc(18.5 * var(--u))); }
.streams .pill-trl { font-size: max(11.5px, calc(16 * var(--u))); }
.streams .amt { font-size: max(18px, calc(36 * var(--u))); }
.streams .amt small { font-size: max(12.5px, calc(17 * var(--u))); color: var(--fg-2); margin-top: calc(6 * var(--u)); }

/* --- 05 evidence: proportional grid, nothing stretched or cropped --- */
.s-evidence .frame { grid-template-columns: calc(500 * var(--u)) 1fr; }
.ev-grid { display: grid; grid-template-columns: 0.795fr 0.7475fr 0.777fr; gap: calc(18 * var(--u)) calc(18 * var(--u)); align-content: center; align-items: end; }
.ev-grid .ev { overflow: visible; background: none; }
.ev-grid .ev img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: contain; background: #000; }
.ev-grid .ev--wide { grid-column: 1 / -1; }
.ev-grid .ev--wide img { width: auto; max-width: 100%; height: calc(300 * var(--u)); }
.ev-grid figcaption { position: static; padding: calc(10 * var(--u)) 0 0; background: none; font-size: max(13px, calc(18 * var(--u))); color: var(--fg-2); line-height: 1.35; }
.ev-grid figcaption .label { display: block; color: var(--accent); margin-bottom: .3em; }
.s-evidence .ev-grid .ev:not(.ev--wide) img { max-height: calc(330 * var(--u)); width: auto; max-width: 100%; }

/* --- 06 architecture --- */
.stack-svg .svg-label, .edge-svg .svg-label, .geo-svg .svg-label { font-family: "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.edge-inset { margin-top: calc(40 * var(--u)); }

/* --- 07 flow: no box-in-box, stronger labels --- */
.s-flow .zone-label { top: calc(-6 * var(--u)); font-size: max(11.5px, calc(16.5 * var(--u))); color: var(--accent); }
.s-flow .flow .lane-label { font-size: max(11.5px, calc(16 * var(--u))); color: var(--fg); left: 0; }
.s-flow .node { background: #14171c; border-color: rgba(255,255,255,.34); }
.s-flow .node .label { font-size: max(12px, calc(17 * var(--u))); }
.s-flow .node .h3 { font-size: max(15px, calc(28 * var(--u))); }
.s-flow .node--input { border-style: dashed; background: transparent; }
.s-flow .node--input .small { color: var(--fg-2); font-size: max(12.5px, calc(18 * var(--u))); }
.s-flow .node--core { border-color: var(--accent); background: #18222e; }
.s-flow .flow-legend { position: absolute; left: var(--pad-x); bottom: calc(118 * var(--u)); margin: 0; font-size: max(13px, calc(19 * var(--u))); color: var(--fg-2); }

/* --- 08–10 stage detail: three readable cards --- */
.s-stages .h1 { margin-top: calc(22 * var(--u)); font-size: calc(62 * var(--u)); }
.stage-row { margin-top: calc(70 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(44 * var(--u)); }
.stage { border-top: 1px solid var(--line-strong); padding-top: calc(22 * var(--u)); display: flex; flex-direction: column; }
.stage--core { border-top: 2px solid var(--accent); }
.stage-lane { font-family: "IBM Plex Mono", monospace; font-size: max(11.5px, calc(16 * var(--u))); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.stage-name { margin-top: calc(16 * var(--u)); font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: max(20px, calc(40 * var(--u))); color: #fff; letter-spacing: -.01em; }
.stage-name span { color: var(--fg-3); margin-right: .45em; }
.stage-op { margin-top: calc(10 * var(--u)); font-size: max(14px, calc(22 * var(--u))); color: var(--fg-2); min-height: calc(62 * var(--u)); line-height: 1.4; }
.stage-io { margin-top: calc(26 * var(--u)); display: grid; grid-template-columns: 1fr auto 1fr; gap: calc(16 * var(--u)); align-items: start; padding: calc(20 * var(--u)) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stage-io .label { color: var(--fg-3); margin-bottom: calc(8 * var(--u)); }
.stage-io p:not(.label) { font-size: max(14px, calc(22 * var(--u))); color: #fff; line-height: 1.35; }
.stage-arrow { color: var(--accent); font-size: max(16px, calc(28 * var(--u))); padding-top: calc(24 * var(--u)); }
.stage-qc { margin-top: calc(18 * var(--u)); font-size: max(13.5px, calc(20 * var(--u))); color: var(--fg); }
.stage-qc .label { color: var(--fg-3); margin-right: 1em; }
.stages-foot { position: absolute; left: var(--pad-x); bottom: calc(118 * var(--u)); color: var(--fg-3); }

/* --- 11 geography --- */
.s-geo .supply li { font-size: max(14px, calc(21 * var(--u))); }

/* --- 13/15 plan pages: photo left, text panel right; brand moves onto the panel --- */
.s-plan .plan-media { width: var(--panel-w); }
.s-plan .plan-media::after { background: linear-gradient(90deg, rgba(18,20,24,0) 70%, rgba(18,20,24,1) 100%), linear-gradient(0deg, rgba(8,9,11,.5), rgba(8,9,11,0) 35%); }
.s-plan .frame { padding-left: calc(var(--panel-w) - (100vw - 1920 * var(--u)) / 2 + 96 * var(--u)); padding-right: calc(110 * var(--u)); }
.s-plan .h1 { font-size: calc(54 * var(--u)); max-width: calc(860 * var(--u)); }
.s-plan .plan-note { margin-top: calc(20 * var(--u)); font-size: max(14px, calc(21 * var(--u))); color: var(--fg-2); max-width: calc(860 * var(--u)); }
.s-plan .plan-period { min-height: 0; white-space: nowrap; }
.s-plan .plan-scope { min-height: calc(62 * var(--u)); }
.s-plan .plan-total { grid-template-columns: auto auto; }
.s-plan [data-slot="hood_closeup"] img { object-position: 50% 50%; }
.s-plan [data-slot="trunk_closeup"] img { object-position: 45% 50%; }

/* --- 17 interior PV sunshade (typographic until film arrives) --- */
.s-shade .shade-body { max-width: calc(1400 * var(--u)); }
.s-shade .h1 { margin-top: calc(26 * var(--u)); font-size: calc(80 * var(--u)); }
.s-shade .lead { margin-top: calc(28 * var(--u)); max-width: calc(1150 * var(--u)); }
.shade-facts { margin-top: calc(60 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(44 * var(--u)); }
.shade-facts div { border-top: 1px solid var(--line-strong); padding-top: calc(18 * var(--u)); }
.shade-facts dt { color: var(--accent); }
.shade-facts dd { margin: calc(10 * var(--u)) 0 0; font-size: max(14.5px, calc(23 * var(--u))); color: var(--fg); line-height: 1.4; }
.shade-money { margin-top: calc(56 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(44 * var(--u)); }
.shade-money .amt { margin-top: calc(10 * var(--u)); font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: max(22px, calc(48 * var(--u))); color: #fff; font-variant-numeric: tabular-nums; }
.shade-money .money-total .amt { font-weight: 200; font-size: max(26px, calc(64 * var(--u))); }
.shade-money .label { color: var(--fg-3); }
.shade-money .money-total .label { color: var(--accent); }
.s-shade.has-media .shade-media { position: absolute; top: 0; bottom: 0; right: 0; width: 40%; overflow: hidden; }
.s-shade.has-media .shade-media img, .s-shade.has-media .shade-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-shade.has-media .shade-body { max-width: calc(980 * var(--u)); }
.s-shade.has-media .shade-facts, .s-shade.has-media .shade-money { grid-template-columns: 1fr; gap: calc(16 * var(--u)); }

/* --- 19 appearance development: text-only direction --- */
.s-appearance .h1 { font-size: calc(54 * var(--u)); }
.s-appearance .goals li b { font-size: max(16px, calc(28 * var(--u))); }
.s-appearance .goals li { font-size: max(13.5px, calc(19.5 * var(--u))); }
.direction { border-top: 1px solid var(--line-strong); padding-top: calc(22 * var(--u)); align-self: center; }
.direction > .label { color: var(--fg-3); }
.dir { display: grid; grid-template-columns: calc(200 * var(--u)) 1fr; gap: calc(24 * var(--u)); padding: calc(30 * var(--u)) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.dir-k { font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: max(17px, calc(32 * var(--u))); color: var(--accent); }
.dir-v { font-size: max(14.5px, calc(23 * var(--u))); color: var(--fg); line-height: 1.4; }

/* --- 20 pilot: typographic, no vehicle --- */
.s-pilot { background: radial-gradient(120% 100% at 85% 0%, #19212c 0%, #0d0f12 60%, #0a0b0d 100%); }
.s-pilot .h1 { margin-top: calc(26 * var(--u)); font-size: calc(70 * var(--u)); max-width: calc(1250 * var(--u)); }
.s-pilot .lead { margin-top: calc(26 * var(--u)); max-width: calc(1100 * var(--u)); }
.pilot-grid { margin-top: calc(80 * var(--u)); display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.05fr; gap: calc(44 * var(--u)); }
.pilot-grid > div { border-top: 1px solid var(--line-strong); padding-top: calc(20 * var(--u)); }
.pilot-fig .figure { margin-top: calc(14 * var(--u)); font-size: calc(92 * var(--u)); }
.pilot-fig:first-child .figure { color: #fff; }
.pilot-fig .small { margin-top: calc(10 * var(--u)); font-size: max(13.5px, calc(19 * var(--u))); color: var(--fg-2); }
.pilot-fn ul { margin-top: calc(16 * var(--u)); display: grid; gap: calc(10 * var(--u)); }
.pilot-fn li { font-size: max(14.5px, calc(23 * var(--u))); color: var(--fg); }
.pilot-fig .label, .pilot-fn .label { color: var(--accent); }

/* --- 21 roadmap --- */
.p-row { min-height: calc(60 * var(--u)); }
.p-label { font-size: max(13px, calc(20 * var(--u))); }
.p-bar { height: calc(30 * var(--u)); }
.p-bar span, .p-ms em, .p-text { font-size: max(12px, calc(17 * var(--u))); }
.p-year { font-size: max(12px, calc(17 * var(--u))); }
.prog-note1 { margin-top: calc(26 * var(--u)); font-size: max(13.5px, calc(19 * var(--u))); color: var(--paper-ink-2) !important; }

/* --- 22 budget --- */
.budget-table td.na { color: #8a9099; text-align: right; }
.budget-table sup { font-size: .6em; color: #3f6f97; margin-left: .15em; }
.budget-table th { font-size: max(11px, calc(14 * var(--u))); }
.s-budget .budget-table td { padding-top: calc(15 * var(--u)); padding-bottom: calc(15 * var(--u)); }
.budget-fn { margin-top: calc(18 * var(--u)); display: grid; gap: calc(4 * var(--u)); counter-reset: fn; color: #5f6670 !important; }
.budget-fn li { counter-increment: fn; font-size: max(12.5px, calc(17 * var(--u))); }
.budget-fn li::before { content: counter(fn) "  "; color: #3f6f97; }

/* --- 23 closing --- */
.s-closing .align--3 { grid-template-columns: repeat(3, calc(330 * var(--u))); gap: calc(40 * var(--u)); }
.s-closing .h1 { font-size: calc(80 * var(--u)); }

/* --- mobile --- */
@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  body.brand-panel .topbar .brand { transform: none; }
  .s-opening .media .cam > img, .s-opening .media .cam > video { transform: none; }
  .s-opp .opp-media, .s-shade.has-media .shade-media { position: relative; width: 100%; height: 34vh; }
  .s-opp .opp-media::after { background: linear-gradient(0deg, rgba(18,20,24,1) 0%, rgba(18,20,24,0) 60%); }
  .opp-points li, .dir { grid-template-columns: 1fr; gap: 4px; }
  .apps, .stage-row, .shade-facts, .shade-money, .pilot-grid, .s-closing .align--3 { grid-template-columns: 1fr !important; gap: 22px; }
  .s-appearance .frame { display: block !important; }
  .direction { margin-top: 28px; }
  .ev-grid { grid-template-columns: 1fr 1fr 1fr; margin-top: 28px; }
  .ev-grid .ev--wide img { height: auto; width: 100%; }
  .s-flow .flow-legend, .stages-foot { position: static; margin-top: 20px; }
  .s-plan .frame { padding-left: var(--pad-x) !important; padding-right: var(--pad-x) !important; }
  .s-plan .plan-period { white-space: normal; }
  .stage-op { min-height: 0; }
  .pilot-fig .figure { font-size: 40px; }
  .app-no { font-size: 34px; }
}
/* --- V4.1 review pass 2 --- */
.s-opening .media .cam > img, .s-opening .media .cam > video,
.s-closing .media .cam > img, .s-closing .media .cam > video { transform: translateX(16%); transform-origin: 50% 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%); mask-image: linear-gradient(90deg, transparent 0%, #000 16%); }
.s-closing .shade--left { background: linear-gradient(90deg, rgba(8,9,11,.95) 0%, rgba(8,9,11,.86) 34%, rgba(8,9,11,.3) 56%, rgba(8,9,11,0) 72%), linear-gradient(0deg, rgba(8,9,11,.6) 0%, rgba(8,9,11,0) 30%); }
.s-closing .align--3 { grid-template-columns: repeat(3, calc(300 * var(--u))); }
.apps li { font-size: max(15px, calc(24 * var(--u))); }
.apps .h3 { font-size: max(18px, calc(36 * var(--u))); }
.streams li { grid-template-columns: calc(54 * var(--u)) 1fr calc(250 * var(--u)) calc(230 * var(--u)); }
.streams .split { margin-top: calc(8 * var(--u)); font-size: max(13px, calc(18 * var(--u))); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.s-architecture .h1 { font-size: calc(62 * var(--u)); }
.s-architecture .lead { font-size: max(15px, calc(23 * var(--u))); }
.s-architecture .edge-inset { margin-top: calc(30 * var(--u)); max-width: calc(470 * var(--u)); }
.s-architecture .explore-btn { margin-top: calc(22 * var(--u)); }
.s-stages .frame { display: flex; flex-direction: column; }
.stage-row { margin-top: calc(90 * var(--u)); gap: calc(56 * var(--u)); }
.stage-name { font-size: max(21px, calc(46 * var(--u))); }
.stage-op { font-size: max(14.5px, calc(24 * var(--u))); min-height: calc(68 * var(--u)); }
.stage-io { margin-top: calc(34 * var(--u)); padding: calc(26 * var(--u)) 0; }
.stage-io p:not(.label) { font-size: max(15px, calc(25 * var(--u))); }
.stage-qc { margin-top: calc(22 * var(--u)); font-size: max(14px, calc(22 * var(--u))); }
.s-testing .h1 { max-width: calc(1600 * var(--u)); }
.tst-cost td:last-child { font-weight: 400; }
.tst-cost td:nth-child(4) { font-weight: 500; }
.s-shade .frame, .s-pilot .frame { display: flex; flex-direction: column; justify-content: center; }
.s-evidence .ev-grid .ev:not(.ev--wide) img { max-height: calc(350 * var(--u)); }
.ev-grid .ev--wide img { height: calc(310 * var(--u)); }
#appearance .media .cam > img { transform: scale(1.25); transform-origin: 60% 100%; }
.streams li { grid-template-columns: calc(54 * var(--u)) 1fr calc(205 * var(--u)) calc(215 * var(--u)); }
#appearance .media .cam > img { transform: none; } #appearance .shade--bottom { background: linear-gradient(0deg, rgba(8,9,11,.97) 0%, rgba(8,9,11,.86) 26%, rgba(8,9,11,.4) 50%, rgba(8,9,11,0) 68%), linear-gradient(180deg, rgba(8,9,11,.5) 0%, rgba(8,9,11,0) 22%); } .s-closing .align--3 { grid-template-columns: repeat(3, calc(270 * var(--u))); gap: calc(36 * var(--u)); }
@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  .scene .h1, .scene .lead, .opp-body, .shade-body, .pilot-head, .s-plan .plan-note { max-width: none !important; }
  .s-opp .frame { padding-top: 24px; }
  .s-opp .h1, .s-plan .h1, .s-shade .h1, .s-pilot .h1, .s-apps .h1, .s-stages .h1 { font-size: var(--fs-h1) !important; }
}
@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) { .s-plan .plan-media { width: 100% !important; } }

/* =====================================================================
   V5 — S-Class / Mercedes-Maybach image release
   ===================================================================== */
.s-opening .media .cam > img, .s-closing .media .cam > img { transform: none; -webkit-mask-image: none; mask-image: none; }
.s-opening .media img { object-position: 50% 50%; }
.s-opening .shade--hero { background: linear-gradient(90deg, rgba(8,9,11,.92) 0%, rgba(8,9,11,.78) 28%, rgba(8,9,11,.25) 52%, rgba(8,9,11,0) 68%), linear-gradient(0deg, rgba(8,9,11,.6) 0%, rgba(8,9,11,0) 32%), linear-gradient(180deg, rgba(8,9,11,.35) 0%, rgba(8,9,11,0) 20%); }

/* paired photographs: always two separate images with a visible gap, never one continuous scene */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)); }
.pair img { display: block; width: 100%; height: auto; aspect-ratio: 1018 / 1143; object-fit: cover; background: #0b0c0e; }

/* 02 opportunity with S-Class pair */
.s-opp--pair .frame { display: grid; grid-template-columns: calc(700 * var(--u)) 1fr; column-gap: calc(80 * var(--u)); align-items: center; }
.s-opp--pair .opp-body { padding-top: 0; max-width: none; }
.s-opp--pair .h1 { font-size: calc(64 * var(--u)); }
.s-opp--pair .opp-points { margin-top: calc(48 * var(--u)); }
.s-opp--pair .opp-points li { grid-template-columns: calc(170 * var(--u)) 1fr; }
.opp-pair, .cmf-pair { margin: 0; position: absolute; right: var(--pad-x); top: 50%; transform: translateY(-50%); width: calc(940 * var(--u)); }
html.js .opp-pair[data-r], html.js .cmf-pair[data-r] { transform: translateY(-50%); }
.opp-pair .caption-inline, .cmf-pair .caption-inline { margin-top: calc(14 * var(--u)); }

/* 03 three application areas */
.apps--3 { grid-template-columns: repeat(3, 1fr); gap: calc(70 * var(--u)); }
.apps--3 li { font-size: max(15px, calc(26 * var(--u))); }
.apps--3 .h3 { font-size: max(19px, calc(40 * var(--u))); }

/* 18 colour, material & finish */
.s-cmf .frame { display: grid; grid-template-columns: calc(700 * var(--u)) 1fr; column-gap: calc(80 * var(--u)); align-items: center; }
.s-cmf .h1 { margin-top: calc(24 * var(--u)); font-size: calc(58 * var(--u)); }
.s-cmf .lead { margin-top: calc(22 * var(--u)); font-size: max(15px, calc(23 * var(--u))); }
.s-cmf .goals { margin-top: calc(30 * var(--u)); }
.s-cmf .goals li { padding: calc(13 * var(--u)) 0; font-size: max(13.5px, calc(19 * var(--u))); }
.s-cmf .goals li b { font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: max(16px, calc(26 * var(--u))); margin-bottom: calc(3 * var(--u)); }
.s-cmf .cost-line { margin-top: calc(26 * var(--u)); display: flex; align-items: baseline; gap: calc(22 * var(--u)); }
.s-cmf .cost-line .amt { font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: max(22px, calc(52 * var(--u))); color: #fff; }

/* 22 closing: split, photo right */
.s-closing--split { background: var(--ink-2); }
.close-media { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; overflow: hidden; }
.close-media img { width: 100%; height: 100%; object-fit: cover; }
.close-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,20,24,1) 0%, rgba(18,20,24,0) 24%), linear-gradient(0deg, rgba(8,9,11,.45), rgba(8,9,11,0) 30%); }
.close-media .caption-concept { right: var(--pad-x); z-index: 2; }
.s-closing--split .frame { padding-right: calc(1920 * .5 * var(--u) + 60 * var(--u)); }
.s-closing--split .h1 { font-size: calc(72 * var(--u)); }
.s-closing--split .align--3 { grid-template-columns: 1fr; gap: 0; margin-top: calc(44 * var(--u)); max-width: calc(640 * var(--u)); }
.s-closing--split .align--3 li { display: grid; grid-template-columns: calc(54 * var(--u)) 1fr; column-gap: calc(10 * var(--u)); padding: calc(16 * var(--u)) 0; border-top: 1px solid var(--line-strong); font-size: max(13.5px, calc(19 * var(--u))); }
.s-closing--split .align--3 li .label { grid-row: span 2; padding-top: .45em; color: var(--accent); }
.s-closing--split .align--3 li b { margin: 0 0 calc(4 * var(--u)); font-size: max(16px, calc(27 * var(--u))); }
.s-closing--split .thanks { margin-top: calc(56 * var(--u)); }

@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  .s-opp--pair .frame, .s-cmf .frame { display: block !important; }
  .opp-pair, .cmf-pair { position: static; transform: none !important; width: 100%; margin-top: 26px; }
  .apps--3 { grid-template-columns: 1fr !important; }
  .close-media { position: relative; width: 100%; height: 38vh; }
  .close-media::after { background: linear-gradient(0deg, rgba(18,20,24,1) 0%, rgba(18,20,24,0) 60%); }
  .s-closing--split .frame { padding-right: var(--pad-x) !important; }
  .s-closing--split .align--3 { max-width: none; }
}
/* --- V5 pass 2: split compositions --- */
.split-media { position: absolute; top: 0; bottom: 0; right: 0; overflow: hidden; background: #0b0c0e; }
.split-media--r58 { width: 58%; } .split-media--r62 { width: 62%; }
.split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(11,12,14,1) 0%, rgba(11,12,14,.55) 9%, rgba(11,12,14,0) 24%); }
.s-opening--split { background: #0b0c0e; }
.s-opening--split .frame { padding-right: calc(1920 * .58 * var(--u) + 40 * var(--u)); }
.s-opening--split .display { font-size: calc(118 * var(--u)); max-width: none; }
.s-opening--split .meta { max-width: calc(700 * var(--u)); }
.s-opening--split .caption-concept { z-index: 3; }
.s-opening--split .start-btn { z-index: 3; }
.s-chapter--split { background: #0b0c0e; }
.s-chapter--split .frame { padding-right: calc(1920 * .62 * var(--u) + 30 * var(--u)); display: flex; flex-direction: column; justify-content: center; }
.s-chapter--split .chapter-grid { display: block; }
.s-chapter--split .display { font-size: calc(124 * var(--u)); white-space: nowrap; }
.s-chapter--split .lead { margin-top: calc(18 * var(--u)); }
.s-chapter--split .trl-track { margin-top: calc(56 * var(--u)) !important; grid-template-columns: repeat(3, 1fr); gap: calc(18 * var(--u)); }
.s-chapter--split .trl-step .h2 { font-size: calc(40 * var(--u)); }
.s-chapter--split .chapter-foot { position: static; margin-top: calc(34 * var(--u)); text-align: left; max-width: calc(560 * var(--u)); }
.s-chapter--split .caption-concept { z-index: 3; }
#rear-lid .display { font-size: calc(124 * var(--u)); }
.opp-pair, .cmf-pair { position: static; transform: none; width: auto; }
html.js .opp-pair[data-r], html.js .cmf-pair[data-r] { transform: none; }
html.js .scene:not(.is-active) .opp-pair[data-r], html.js .scene:not(.is-active) .cmf-pair[data-r] { transform: translateY(14px); }
.s-opp--pair .frame { grid-template-columns: calc(640 * var(--u)) 1fr; column-gap: calc(90 * var(--u)); }
.s-cmf .frame { grid-template-columns: calc(640 * var(--u)) 1fr; column-gap: calc(90 * var(--u)); }
@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  .split-media { position: relative; width: 100% !important; height: 40vh; }
  .split-media::after { background: linear-gradient(0deg, rgba(11,12,14,1) 0%, rgba(11,12,14,0) 50%); }
  .s-opening--split .frame, .s-chapter--split .frame { padding-right: var(--pad-x) !important; min-height: 0 !important; }
  .s-chapter--split .display, #rear-lid .display { font-size: 46px; white-space: normal; }
  .s-opening--split .display { font-size: var(--fs-display); }
  .s-chapter--split .trl-track { grid-template-columns: 1fr !important; }
}
.split-media--r52 { width: 52%; }
.s-opening--split .frame { padding-right: calc(1920 * .52 * var(--u) + 60 * var(--u)); }
.s-opening--split .display { font-size: calc(94 * var(--u)); }
@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  .s-opp--pair .opp-points li { grid-template-columns: 1fr !important; gap: 4px; }
  .s-opening--split .meta { max-width: none; position: static; margin-top: 18px; }
  .s-opening--split .frame { min-height: 0 !important; padding-top: 24px; }
  .s-chapter--split .chapter-foot { max-width: none; }
  .s-chapter--split .frame { padding-top: 24px; }
  .s-closing--split .align--3 li { grid-template-columns: 34px 1fr; }
}
@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) { .s-opening--split > .meta { margin-left: var(--pad-x); margin-right: var(--pad-x); } }

/* =====================================================================
   V6 — motion edition
   ===================================================================== */
.split-media--r60 { width: 60%; }
.s-opening--v6 .frame { padding-right: calc(1920 * .60 * var(--u) + 50 * var(--u)); }
.s-opening--v6 .display { font-size: calc(92 * var(--u)); }
.split-media--video img, .split-media--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); }
.split-media--video video { opacity: 0; transition: opacity .6s var(--ease); }
.split-media--video video.is-ready { opacity: 1; }
.split-media--video::after { z-index: 1; }
.cmf-film { margin: 0; }
.film-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0c0e; }
.film-frame img, .film-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-frame video { opacity: 0; transition: opacity .6s var(--ease); }
.film-frame video.is-ready { opacity: 1; }
.cmf-film .caption-inline { margin-top: calc(14 * var(--u)); }
/* discreet motion control */
.motion-toggle { position: absolute; z-index: 4; right: calc(24 * var(--u)); top: calc(24 * var(--u)); appearance: none; border: 1px solid rgba(255,255,255,.38); background: rgba(8,9,11,.42); color: #f2f3f4; border-radius: 999px; padding: .42em 1em; font-family: "IBM Plex Mono", monospace; font-size: max(10.5px, calc(13 * var(--u))); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); opacity: .7; transition: opacity .3s var(--ease), border-color .3s var(--ease); }
.motion-toggle:hover, .motion-toggle:focus-visible { opacity: 1; border-color: var(--accent); outline: none; }
.split-media .motion-toggle { top: auto; bottom: calc(160 * var(--u)); right: var(--pad-x); }
.film-frame .motion-toggle { top: auto; bottom: calc(14 * var(--u)); right: calc(14 * var(--u)); }
.film-toggle { display: none !important; }
@media print { .motion-toggle { display: none !important; } }
html.pdf-mode .motion-toggle { display: none !important; }

/* readability: process stages and roadmap */
.stage-op { font-size: max(15px, calc(25 * var(--u))); }
.stage-io p:not(.label) { font-size: max(15.5px, calc(26 * var(--u))); }
.stage-io .label, .stage-qc .label, .stage-lane { font-size: max(12px, calc(16.5 * var(--u))); }
.stage-qc { font-size: max(15px, calc(23 * var(--u))); }
.stages-foot { font-size: max(13.5px, calc(19 * var(--u))) !important; color: var(--fg-2) !important; }
.p-label { font-size: max(14px, calc(21 * var(--u))); }
.p-label span { color: #4a5059; }
.p-bar span, .p-ms em, .p-text { font-size: max(13px, calc(18 * var(--u))); }
.p-year { font-size: max(13px, calc(18 * var(--u))); }
.prog-legend { font-size: max(13px, calc(18 * var(--u))) !important; }
.prog-note1 { font-size: max(14px, calc(20 * var(--u))) !important; }
.budget-table td { font-size: max(15px, calc(23 * var(--u))); }
.budget-fn li { font-size: max(13.5px, calc(18.5 * var(--u))); }
.tst-cost td { font-size: max(15px, calc(23 * var(--u))); }

@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  .s-opening--v6 .frame { padding-right: var(--pad-x) !important; }
  .split-media--video { height: auto !important; aspect-ratio: 16 / 9; }
  .split-media--video img, .split-media--video video { object-position: 50% 50%; }
  .split-media .motion-toggle { bottom: 12px; right: 12px; }
}
.split-media .motion-toggle { bottom: auto; top: calc(130 * var(--u)); right: var(--pad-x); } @media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) { .split-media .motion-toggle { top: auto; bottom: 12px; right: 12px; } }

/* =====================================================================
   V7 — wide framing: films are shown at their native 16:9, never cover-cropped
   ===================================================================== */
.split-media--video { top: 50%; bottom: auto; height: auto; aspect-ratio: 16 / 9; transform: translateY(-50%); right: 0; }
.split-media--video img, .split-media--video video { object-fit: cover; object-position: 50% 50%; } /* box is 16:9 = source ratio: no crop */
.split-media--video::after { background: linear-gradient(90deg, rgba(11,12,14,1) 0%, rgba(11,12,14,.5) 6%, rgba(11,12,14,0) 16%), linear-gradient(180deg, rgba(11,12,14,.55) 0%, rgba(11,12,14,0) 12%, rgba(11,12,14,0) 88%, rgba(11,12,14,.55) 100%); }
.s-opening--v6 .split-media--r60 { width: 64%; }
.s-opening--v6 .frame { padding-right: calc(1920 * .64 * var(--u) + 40 * var(--u)); }
.s-opening--v6 .display { font-size: calc(86 * var(--u)); }
.s-chapter--split .split-media--video { width: 64%; }
.s-chapter--split .frame { padding-right: calc(1920 * .64 * var(--u) + 30 * var(--u)); }
.split-media--video .motion-toggle { top: calc(16 * var(--u)); right: calc(16 * var(--u)); bottom: auto; }
@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) {
  .split-media--video { position: relative; top: auto; transform: none; width: 100% !important; }
  .split-media--video .motion-toggle { top: auto; bottom: 10px; right: 12px; } /* keep clear of the fixed top bar */
}
.s-opening--v6 .split-media--r60 { width: 60%; }
.s-opening--v6 .frame { padding-right: calc(1920 * .60 * var(--u) + 40 * var(--u)); }
.s-opening--v6 .display { font-size: calc(82 * var(--u)); }
.s-opening--v6 .start-btn { right: auto; left: var(--pad-x); bottom: calc(168 * var(--u)); }
.s-opening--v6 .meta { bottom: calc(118 * var(--u)); }
@media (max-width: 860px), (max-height: 520px) and (max-width: 1000px) { .s-opening--v6 .start-btn { left: auto; } }
.s-opening--v6 .start-btn { bottom: calc(108 * var(--u)); left: calc(var(--pad-x) + 560 * var(--u)); }
/* V7: the centred 16:9 film sits under the frame's empty padding area; let clicks reach the film's Pause/Play control */
.s-opening--v6 .frame, .s-chapter--split .frame { pointer-events: none; }
.s-opening--v6 .frame > *, .s-chapter--split .frame > * { pointer-events: auto; }