/* off---set™ brand deck v2 */

:root {
  --signal:      #FF4400;
  --signal-deep: #C62B00;  /* darker, red-leaning — hover / active state */
  --ember:       #FA6E43;
  --carbon:      #0B0C0D;
  --graphite: #333336;
  --paper:    #F6F6F6;
  --paper-pure: #FFFFFF;
  --fog:      #FAFAFA;
  --ink:   #16171A;
  --ink-2: #333336;
  --ink-3: #5F5F66;
  --steel: #8A8A91;
  --bone:  #E6E6E6;

  --bg: var(--paper);
  --fg: var(--ink);
  --fg-mute: var(--steel);
  --rule: var(--bone);

  --serif: "Apple Garamond", "Times New Roman", Georgia, serif;
  --sans:  "Inter Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(20px, 5vw, 80px);
  --gutter-y: clamp(24px, 6vh, 64px);

  /* Unified slide-body spacing — every slide obeys the same rhythm.
   * Bottom is larger than top so centred content sits slightly high,
   * which keeps the content → slide-foot-rule gap consistent across
   * slides. Individual slides can add extra top-push but never change
   * the bottom value. */
  --sb-pad-top:    clamp(20px, 3.8vh, 44px);
  --sb-pad-bottom: clamp(36px, 5.2vh, 64px);
  --sb-gap:        clamp(16px, 3vh, 32px);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}
@media (min-width: 1920px) { :root { --gutter: 96px; } }

html[data-theme="dark"] {
  --bg: var(--carbon);
  --fg: #F2F2F2;
  --fg-mute: #8A8A91;
  --rule: #1F2024;
  --paper: #111215;
  --paper-pure: #0B0C0D;
  --fog: #14151A;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
html { overflow: hidden; }
body {
  font-family: var(--sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
  transition: background 400ms var(--ease), color 400ms var(--ease);
}
ul, ol { list-style: none; padding: 0; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; }

.wm {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--signal);
  letter-spacing: -0.02em;
  line-height: 0.9;
  display: inline-block;
}
.wm .dash {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0;
  color: inherit;
}
.wm .reg {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.26em;
  vertical-align: top;
  position: relative;
  top: 0.55em;
  margin-left: 0.12em;
  color: currentColor;
  letter-spacing: 0.04em;
}

/* v4a — Rennstrecke: 2D Grid 7×6, Pfad 7→5→6→4 */
.deck {
  display: grid;
  grid-template-columns: repeat(7, 100vw);
  grid-template-rows: repeat(6, 100dvh);
  width: 100vw;
  height: 100dvh;
  overflow: auto;
  scroll-snap-type: both mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  background: var(--carbon);
}
.deck::-webkit-scrollbar { display: none; }

.slide {
  width: 100vw;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: var(--gutter-y) var(--gutter) 72px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  transition: background 400ms var(--ease), color 400ms var(--ease);
}

/* Track positioning — Top row right */
.slide:nth-child(1)  { grid-column: 1; grid-row: 1; }
.slide:nth-child(2)  { grid-column: 2; grid-row: 1; }
.slide:nth-child(3)  { grid-column: 3; grid-row: 1; }
.slide:nth-child(4)  { grid-column: 4; grid-row: 1; }
.slide:nth-child(5)  { grid-column: 5; grid-row: 1; }
.slide:nth-child(6)  { grid-column: 6; grid-row: 1; }
.slide:nth-child(7)  { grid-column: 7; grid-row: 1; }
/* Right column down */
.slide:nth-child(8)  { grid-column: 7; grid-row: 2; }
.slide:nth-child(9)  { grid-column: 7; grid-row: 3; }
.slide:nth-child(10) { grid-column: 7; grid-row: 4; }
.slide:nth-child(11) { grid-column: 7; grid-row: 5; }
.slide:nth-child(12) { grid-column: 7; grid-row: 6; }
/* Bottom row left */
.slide:nth-child(13) { grid-column: 6; grid-row: 6; }
.slide:nth-child(14) { grid-column: 5; grid-row: 6; }
.slide:nth-child(15) { grid-column: 4; grid-row: 6; }
.slide:nth-child(16) { grid-column: 3; grid-row: 6; }
.slide:nth-child(17) { grid-column: 2; grid-row: 6; }
.slide:nth-child(18) { grid-column: 1; grid-row: 6; }
/* Left column up */
.slide:nth-child(19) { grid-column: 1; grid-row: 5; }
.slide:nth-child(20) { grid-column: 1; grid-row: 4; }
.slide:nth-child(21) { grid-column: 1; grid-row: 3; }
.slide:nth-child(22) { grid-column: 1; grid-row: 2; }

/* Track infield — visible only during 2D exploration */
.track-infield {
  grid-column: 2 / 7;
  grid-row: 2 / 6;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 60px,
      rgba(255,68,0,0.04) 60px 62px
    ),
    var(--carbon);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
  font-family: var(--sans);
  pointer-events: none;
}
.track-infield .infield-wm {
  font-size: clamp(48px, 10vw, 160px);
  letter-spacing: -0.02em;
}
.track-infield .infield-wm .dash { color: currentColor; }
.track-infield .infield-caption {
  font-family: "Inter Display", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 18px;
  color: rgba(255,255,255,0.4);
}
.slide--paper  { --bg: var(--paper);      --fg: var(--ink);    --fg-mute: var(--steel); --rule: var(--bone); }
.slide--white  { --bg: var(--paper-pure); --fg: var(--ink);    --fg-mute: var(--steel); --rule: var(--bone); }
.slide--carbon { --bg: var(--carbon);     --fg: #F2F2F2;       --fg-mute: #8A8A91;      --rule: #1F2024; }
.slide--accent { --bg: var(--signal);     --fg: #FFFFFF;       --fg-mute: rgba(255,255,255,.72); --rule: rgba(255,255,255,.28); }
.slide--accent .wm { color: #FFFFFF; }

html[data-theme="dark"] .slide--paper { --bg: #111215; --fg: #F2F2F2; --fg-mute: #8A8A91; --rule: #1F2024; }
html[data-theme="dark"] .slide--white { --bg: #0F1012; --fg: #F2F2F2; --fg-mute: #8A8A91; --rule: #1F2024; }

.slide-head, .slide-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 32px);
  font-family: var(--mono);
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  flex-shrink: 0;
}
.slide-head { padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.slide-foot { padding-top: 16px; border-top: 1px solid var(--rule); margin-top: auto; }
.slide-head .chapter { color: var(--fg); }
.slide-head, .slide-foot { text-transform: uppercase; }
.slide-head .wm, .slide-foot .wm { text-transform: none; }
.slide-foot > span { transition: color 260ms var(--ease); cursor: default; }
.slide-foot > span:hover { color: var(--signal); }
.slide--accent .slide-foot > span:hover { color: var(--carbon); }

.slide-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sb-pad-top) var(--sb-pad-bottom);
  gap: var(--sb-gap);
  max-width: 1440px;
  width: 100%;
  align-self: center;
}

.eyebrow {
  font-family: var(--mono);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid var(--signal);
}
.display {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(30px, 6.5vw, 100px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: anywhere;
}
.h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(28px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(22px, 3.5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.012em;
}
.lead {
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.4;
  font-weight: 400;
  color: var(--fg);
  max-width: 60ch;
  text-wrap: pretty;
}
.small {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.5;
  color: var(--fg-mute);
  max-width: 48ch;
  text-wrap: pretty;
}
.mono {
  font-family: var(--mono);
  letter-spacing: 0.02em;
  font-feature-settings: "tnum" 1, "zero" 1;
}
.em-italic { font-style: italic; font-weight: 500; letter-spacing: -0.02em; }
.em-accent { color: var(--signal); }
.slide--accent .em-accent { color: var(--carbon); }
.em-bold-accent { font-weight: 700; color: var(--signal); font-style: normal; }
.slide--accent .em-bold-accent { color: var(--carbon); }

.accel {
  position: relative;
  transition: background 300ms var(--ease);
}
.accel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--ease);
  pointer-events: none;
}
.accel:hover::after, .accel:focus-within::after { transform: scaleX(1); }
.slide--accent .accel::after { background: var(--carbon); }
.accel-top::after { bottom: auto; top: 0; }

.curb-word, .accel-word {
  color: inherit;
  font-weight: inherit;
  transition: color 260ms var(--ease), font-weight 260ms linear, letter-spacing 260ms var(--ease);
}
.accel:hover .curb-word, .accel:focus-within .curb-word,
.accel:hover .accel-word, .accel:focus-within .accel-word {
  color: var(--signal);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.slide--accent .accel:hover .curb-word { color: var(--carbon); }

.pillars li .name {
  transition: color 300ms var(--ease), transform 300ms var(--ease), letter-spacing 300ms var(--ease);
  transform-origin: left center;
  display: inline-block;
}
.pillars li.accel:hover .name {
  color: var(--signal);
  transform: translateX(6px);
  letter-spacing: -0.025em;
}

.type-cell { transition: border-color 300ms var(--ease); }
.type-cell-sample {
  font-size: clamp(64px, 12vw, 160px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-block: 8px;
  overflow-wrap: anywhere;
  display: inline-block;
  transform-origin: left center;
  transition: transform 540ms var(--ease), color 320ms var(--ease);
}
.type-cell.accel:hover .type-cell-sample { transform: scale(1.08); }
.type-cell.accel.signal:hover .type-cell-sample { color: var(--signal); }

.slide[data-enter] [data-anim="rise"],
.slide[data-enter] [data-anim="fade"] {
  animation-duration: 640ms;
  animation-timing-function: var(--ease);
  animation-fill-mode: both;
}
.slide[data-enter] [data-anim="rise"] { animation-name: entry-rise; }
.slide[data-enter] [data-anim="fade"] { animation-name: entry-fade; }
.slide[data-enter] [data-anim="rise"][data-delay="1"] { animation-delay: 80ms; }
.slide[data-enter] [data-anim="rise"][data-delay="2"] { animation-delay: 180ms; }
.slide[data-enter] [data-anim="rise"][data-delay="3"] { animation-delay: 300ms; }
.slide[data-enter] [data-anim="rise"][data-delay="4"] { animation-delay: 440ms; }
.slide[data-enter] [data-anim="fade"][data-delay="2"] { animation-delay: 180ms; }
.slide[data-enter] [data-anim="fade"][data-delay="3"] { animation-delay: 300ms; }
.slide[data-enter] [data-anim="fade"][data-delay="4"] { animation-delay: 440ms; }
@keyframes entry-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes entry-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.gap-accent {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3vh, 40px);
}
.gap-sequence {
  font-family: var(--sans);
  font-size: clamp(36px, 8vw, 128px);
  line-height: 1.02;
  font-weight: 500;
  color: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 clamp(12px, 2vw, 32px);
  text-wrap: balance;
  letter-spacing: -0.025em;
}
.gap-seq-blueprint,
.gap-seq-reality,
.gap-seq-dashes i {
  opacity: 0;
  transform: translateX(-14px);
}
.slide[data-enter] .gap-seq-blueprint { animation: gap-in-left 620ms var(--ease) 60ms both; }
.slide[data-enter] .gap-seq-dashes i  { animation: gap-in-pop 460ms var(--ease) both; }
.slide[data-enter] .gap-seq-dashes i:nth-child(1) { animation-delay: 640ms; }
.slide[data-enter] .gap-seq-dashes i:nth-child(2) { animation-delay: 780ms; }
.slide[data-enter] .gap-seq-dashes i:nth-child(3) { animation-delay: 920ms; }
.slide[data-enter] .gap-seq-reality   { animation: gap-in-right 620ms var(--ease) 1100ms both; }
@keyframes gap-in-left  { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes gap-in-right { from { opacity: 0; transform: translateX(24px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes gap-in-pop   { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
.gap-seq-dashes {
  display: inline-flex;
  gap: clamp(8px, 1.6vw, 14px);
  align-items: center;
  vertical-align: middle;
  margin: 0 clamp(4px, 1vw, 12px);
}
.gap-seq-dashes i {
  display: block;
  width: clamp(32px, 7vw, 80px);
  height: clamp(4px, 0.8vw, 10px);
  background: #FFFFFF;
  border-radius: 1px;
  transform-origin: left center;
}

.cover-grid { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vh, 48px); align-content: center; }
@media (min-width: 768px) { .cover-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; } }
.cover-subtag { font-style: italic; font-weight: 400; font-size: clamp(16px, 1.8vw, 22px); color: var(--fg-mute); margin-top: 8px; }
.cover-positioning { font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal); margin-top: 10px; }
.cover-meta { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 32px); margin-top: clamp(24px, 4vh, 48px); }
@media (min-width: 1024px) { .cover-meta { grid-template-columns: repeat(4, 1fr); } }
.cover-meta-item .h3 { margin-top: 8px; }
.cover-meta-item { padding: 8px 10px; }

.wm-deco { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.4vh, 32px); min-height: 0; }
.wm-deco .wm-hero { text-align: center; padding-block: clamp(16px, 2.8vh, 36px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow: hidden; }
.wm-hero-labels { margin-top: 12px; font-size: clamp(9px, 0.9vw, 11px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
.wm-deco-parts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2.2vw, 24px); }
@media (min-width: 768px) { .wm-deco-parts { grid-template-columns: repeat(4, 1fr); } }
.wm-part { min-width: 0; padding: 8px 12px; }
.wm-part-glyph { margin-top: 6px; font-size: clamp(18px, 2.2vw, 26px); line-height: 1.1; transition: color 260ms var(--ease); }
.wm-part-note { margin-top: 6px; font-size: clamp(11px, 1.1vw, 13px); line-height: 1.4; }
.wm-deco-parts .accel:hover .wm-part-glyph { color: var(--signal); }

.colour-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule); }
@media (min-width: 768px) { .colour-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.colour-cell { padding: clamp(18px, 2.5vw, 28px); display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(150px, 22vh, 260px); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
@media (min-width: 768px) { .colour-cell:last-child { border-right: 0; } }

.type-grid { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 48px); }
@media (min-width: 768px) { .type-grid { grid-template-columns: 1fr 1fr; } }
.type-cell { border-top: 2px solid var(--fg); padding: 16px 16px 0; }
.type-cell.signal { border-top-color: var(--signal); }

.gap-label { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: clamp(10px, 1vw, 12px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.gap-label::before { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--signal); }
.slide--accent .gap-label::before { background: var(--carbon); }

.voice-grid { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 48px); border: 1px solid var(--rule); }
@media (min-width: 768px) { .voice-grid { grid-template-columns: 1fr 1fr; gap: 0; } }
.voice-cell { padding: clamp(20px, 2.5vw, 40px); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
@media (min-width: 768px) {
  .voice-cell:last-child { border-right: 0; border-bottom: 0; }
  .voice-cell:first-child { border-bottom: 0; }
}
.voice-list li { border-left: 3px solid var(--signal); padding: 6px 0 6px 16px; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.4; margin-bottom: 14px; }
.voice-list.never li { border-left-color: transparent; color: var(--fg-mute); text-decoration: line-through; text-decoration-color: var(--signal); }

.pillars { border-top: 1px solid var(--rule); }
.pillars li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: clamp(12px, 2vw, 24px);
  padding: clamp(14px, 2vh, 22px) clamp(8px, 1vw, 16px);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
@media (min-width: 768px) { .pillars li { grid-template-columns: 48px minmax(0, 0.9fr) minmax(0, 1.3fr); align-items: center; } }
.pillars .no { font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); letter-spacing: 0.14em; color: var(--signal); }
.pillars .name { font-size: clamp(18px, 2.5vw, 32px); font-weight: 500; }

/* Origin · the display headline and the register stack sit in one grid.
 * The stack stretches to match ONLY the display's height — not the full
 * slide and not the sibling lead paragraph, which lives outside this grid. */
.origin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3.5vw, 48px);
  align-items: stretch;     /* stack takes the row height = display height */
}
@media (min-width: 1024px) {
  .origin-grid { grid-template-columns: 1fr 1fr; }
}
.origin-title {
  margin: 0;
  align-self: start;
}
.origin-stack {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(12px, 1.8vh, 24px);
  height: 100%;              /* match grid row height = display height */
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(14px, 2.2vh, 24px);
}
.origin-lead {
  /* Lives outside origin-grid — not part of the P1–P3 distribution. */
  max-width: 42ch;
  margin-top: clamp(4px, 0.8vh, 12px);
}
.origin-register { display: flex; flex-direction: column; gap: 10px; padding: 8px 12px; }
.origin-register-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: clamp(16px, 1.8vw, 22px); font-weight: 500; }
.origin-register-head strong { transition: color 260ms var(--ease); }
.origin-register-tag { font-family: var(--mono); font-size: clamp(10px, 0.9vw, 12px); letter-spacing: 0.18em; color: var(--signal); flex-shrink: 0; }
.origin-register-note { margin: 0; max-width: 44ch; text-wrap: pretty; }
.origin-register.accel:hover .origin-register-head strong { color: var(--signal); }

.bridge-body {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: clamp(10px, 1.8vh, 22px);    /* tighter — intro + curbs read as one unit */
  align-content: center;
}
.bridge-intro { display: flex; flex-direction: column; gap: 12px; }
.bridge-title { max-width: 18ch; font-weight: 500; letter-spacing: -0.028em; }

.curb-mark {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--signal);
  /* Shrunk from 150–480 → 88–260. The curbs are visually prominent
   * but no longer tower; they now close the composition on the
   * same horizontal line as the "concept to curb →" arrow in the
   * bridge-outro when the 2-column LG layout is active. */
  font-size: clamp(88px, 20vw, 260px);
  line-height: 0.8;
  letter-spacing: -0.02em;
  user-select: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-block: 0;
  margin-top: -0.18em;       /* pull up closer to intro baseline */
  margin-bottom: -0.14em;    /* trim optical overhang */
  transition: color 500ms var(--ease), letter-spacing 400ms var(--ease);
  cursor: default;
}
/* Hover goes darker / redder — `signal-deep` (#C62B00). User-requested
 * shift from the lighter ember tone. */
.curb-mark:hover { color: var(--signal-deep); letter-spacing: -0.005em; }

.bridge-outro { display: flex; flex-direction: column; gap: clamp(14px, 2vh, 24px); max-width: 60ch; }
.bridge-lead { margin: 0; }
.bridge-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--signal);
  font-style: italic;
  font-family: var(--sans);
  transition: gap 300ms var(--ease), color 300ms var(--ease);
  cursor: pointer;
  text-decoration: none;
  width: fit-content;
}
.bridge-arrow:hover { gap: 22px; color: var(--ember); }
.bridge-arrow-label { font-family: var(--sans); font-style: italic; font-weight: 500; font-size: clamp(15px, 1.4vw, 20px); letter-spacing: -0.01em; text-transform: none; color: inherit; }

@media (min-width: 1024px) {
  .bridge-body {
    grid-template-rows: auto auto;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 80px);
    row-gap: clamp(8px, 1.5vh, 18px);
    align-items: end;                 /* bottoms of both columns align — the
                                         curb-mark ends on the same line as
                                         the outro's "concept to curb →" */
  }
  .bridge-intro { grid-column: 1; grid-row: 1; align-self: end; }
  .curb-mark    { grid-column: 1; grid-row: 2; align-self: end; }
  .bridge-outro { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}

.gtm-mark { font-size: clamp(44px, 9vw, 120px); font-weight: 500; line-height: 1; }
.gtm-cross { color: var(--signal); margin: 0 0.14em; font-weight: 400; }
.phase-grid { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--rule); margin-top: clamp(16px, 2vh, 32px); }
@media (min-width: 768px) { .phase-grid { grid-template-columns: 1fr 1fr; } }
.phase-cell { padding: clamp(14px, 2vw, 24px); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.phase-cell:last-child { border-right: 0; border-bottom: 0; }
@media (min-width: 768px) { .phase-cell { border-bottom: 0; } .phase-cell:last-child { border-right: 0; } }
.phase-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: clamp(16px, 1.8vw, 22px); font-weight: 500; }
.phase-head strong { transition: color 260ms var(--ease); }
.phase-tag { font-family: var(--mono); font-size: clamp(10px, 0.9vw, 12px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal); flex-shrink: 0; }
.phase-note { margin: 12px 0 0; max-width: 46ch; text-wrap: pretty; }
.phase-cell.accel:hover .phase-head strong { color: var(--signal); }

.method-pipeline { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
@media (min-width: 768px) { .method-pipeline { grid-template-columns: 1fr 1fr; border-left: 1px solid var(--rule); } }
@media (min-width: 1024px) { .method-pipeline { grid-template-columns: repeat(4, 1fr); } }
.method-step { padding: clamp(16px, 2.5vw, 28px); border-bottom: 1px solid var(--rule); }
@media (min-width: 768px) { .method-step { border-right: 1px solid var(--rule); } }
@media (min-width: 1024px) { .method-step { border-bottom: 0; } }
.method-step .no { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal); }
.method-step .h3 { transition: color 260ms var(--ease), font-weight 260ms linear, letter-spacing 260ms var(--ease); }
.method-step.accel:hover .h3 { color: var(--signal); font-weight: 700; letter-spacing: -0.025em; }
.method-cta { margin-top: clamp(16px, 3vh, 32px); padding: clamp(18px, 3vw, 32px); background: var(--signal); color: #FFFFFF; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
@media (min-width: 768px) { .method-cta { flex-direction: row; align-items: center; justify-content: space-between; } }
.method-cta-claim { font-weight: 500; font-size: clamp(16px, 1.8vw, 22px); max-width: 38ch; }
.method-cta-btn { font-family: var(--mono); font-size: clamp(12px, 1vw, 13px); letter-spacing: 0.18em; text-transform: uppercase; padding: 14px 22px; border: 1px solid rgba(255,255,255,.6); color: #FFFFFF; text-decoration: none; white-space: nowrap; display: inline-flex; gap: 10px; align-items: center; transition: background 260ms var(--ease), border-color 260ms ease, padding-inline-end 260ms var(--ease); }
.method-cta-btn:hover { background: rgba(255,255,255,.14); border-color: #FFFFFF; padding-inline-end: 28px; }

.apps-header { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 16px; margin-bottom: clamp(16px, 2.5vh, 28px); }
.apps-grid { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--rule); border: 1px solid var(--rule); min-width: 0; }
@media (min-width: 640px) { .apps-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .apps-grid { grid-template-columns: repeat(3, 1fr); } }
.apps-tile { padding: clamp(14px, 2vw, 24px); min-height: clamp(140px, 22vh, 220px); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; overflow: hidden; min-width: 0; }
.apps-tile--signal { background: var(--signal); color: #FFFFFF; }
.apps-tile--paper  { background: var(--paper);  color: var(--ink); }
.apps-tile--carbon { background: var(--carbon); color: #FFFFFF; }
html[data-theme="dark"] .apps-tile--paper { background: #18191D; color: #F2F2F2; }
.apps-tile-tag { font-family: var(--mono); font-size: clamp(10px, 0.9vw, 11px); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
.apps-tile-tag--mute { color: var(--fg-mute); opacity: 1; }
.apps-tile-wm { color: inherit; font-size: clamp(28px, 4.4vw, 56px); line-height: 0.95; overflow-wrap: anywhere; }
.apps-tile-wm--sm { font-size: clamp(20px, 2.6vw, 30px); }
.apps-tile-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.apps-tile-card-name { margin: 0; }
.apps-tile-claim { font-family: var(--sans); font-weight: 500; font-size: clamp(13px, 1.4vw, 17px); line-height: 1.25; text-wrap: balance; }
.apps-tile-foot { font-family: var(--mono); font-size: clamp(9px, 0.8vw, 11px); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apps-tile-foot--mute { color: var(--fg-mute); opacity: 1; }

/* Contact · flex-column flow, slide-body already centres vertically.
 * Tight gaps so intro + timezones + channels + cta all fit inside
 * 100dvh minus head/foot/HUD. */
.contact-body { display: flex; flex-direction: column; gap: clamp(16px, 2.2vh, 26px); }
.contact-intro { display: flex; flex-direction: column; gap: 10px; max-width: 60ch; }
.contact-title { max-width: 14ch; font-weight: 500; letter-spacing: -0.025em; margin: 0; font-size: clamp(28px, 5.5vw, 84px); }
.contact-lead { margin: 0; max-width: 58ch; font-size: clamp(15px, 1.5vw, 19px); }

/* .nobr guards against browsers breaking the phrase across lines */
.nobr { white-space: nowrap; }

/* Timezone strip — 5 chips, live ticker */
.timezones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 0;
}
@media (min-width: 640px) { .timezones { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .timezones { grid-template-columns: repeat(5, 1fr); } }
.tz-chip {
  background: var(--bg);
  padding: clamp(8px, 1.2vw, 12px) clamp(10px, 1.4vw, 16px);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: clamp(10px, 0.95vw, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  transition: background 260ms var(--ease);
  min-width: 0;
}
.tz-chip:hover { background: color-mix(in oklab, var(--bg) 90%, var(--signal)); }
.tz-city { color: var(--fg-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-time { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--fg); letter-spacing: 0.02em; }
.tz-status {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fg-mute);
  transition: background 400ms var(--ease), box-shadow 400ms var(--ease);
}
.tz-chip[data-open="true"] .tz-status {
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(255, 68, 0, 0.12);
}
.contact-channels { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
@media (min-width: 768px) { .contact-channels { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .contact-channels { grid-template-columns: repeat(4, 1fr); } }
.contact-channel { padding: clamp(14px, 2vw, 22px) clamp(16px, 2vw, 24px); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@media (min-width: 768px) { .contact-channel { border-right: 1px solid var(--rule); } .contact-channel:nth-child(2n) { border-right: 0; } }
@media (min-width: 1280px) { .contact-channel:nth-child(2n) { border-right: 1px solid var(--rule); } .contact-channel:last-child { border-right: 0; } .contact-channel { border-bottom: 0; } }
.contact-channel-tag { font-family: var(--mono); font-size: clamp(10px, 0.9vw, 11px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-mute); }
.contact-channel-value { font-family: var(--sans); font-weight: 500; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.2; color: var(--fg); text-decoration: none; overflow-wrap: anywhere; transition: color 260ms var(--ease); }
.contact-channel:hover .contact-channel-value { color: var(--signal); }
.contact-channel-note { font-family: var(--sans); font-size: clamp(11px, 1vw, 13px); color: var(--fg-mute); }
.contact-cta { display: flex; flex-direction: column; gap: 12px; padding: clamp(14px, 2vw, 24px) clamp(16px, 2.2vw, 28px); background: var(--carbon); color: #FFFFFF; }
@media (min-width: 768px) { .contact-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 40px); } }
.contact-cta-claim { font-family: var(--sans); font-weight: 500; font-size: clamp(15px, 1.6vw, 20px); line-height: 1.3; max-width: 44ch; }
.contact-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid rgba(255,255,255,.6); color: #FFFFFF; text-decoration: none; font-family: var(--mono); font-size: clamp(11px, 0.95vw, 13px); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; transition: background 260ms var(--ease), border-color 260ms ease, padding-inline-end 260ms var(--ease); flex-shrink: 0; }
.contact-cta-btn:hover { background: rgba(255,255,255,.14); border-color: #FFFFFF; padding-inline-end: 26px; }

.signoff-body { gap: clamp(14px, 2.2vh, 24px); }
.signoff-title { color: #FFFFFF; font-size: clamp(40px, 8vw, 128px); font-weight: 400; line-height: 1.0; }
.signoff-locations { display: flex; flex-wrap: wrap; gap: clamp(14px, 2.4vw, 32px); font-family: var(--mono); font-size: clamp(10px, 0.95vw, 12px); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-top: clamp(12px, 2vh, 24px); }
.signoff-locations li { transition: color 260ms var(--ease); cursor: default; }
.signoff-locations li:hover { color: var(--carbon); }
.signoff-foot { color: rgba(255,255,255,.8); border-top-color: rgba(255,255,255,.28); }

.deck-hud {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 10px var(--gutter);
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto auto;
  align-items: center;
  gap: clamp(10px, 1.8vw, 20px);
  font-family: var(--mono);
  font-size: clamp(10px, 0.9vw, 11px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 10;
  color: var(--fg-mute);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--rule);
}
.deck-counter { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fg); }
.deck-counter .sector { color: var(--fg-mute); margin-left: 10px; }
.deck-progress { height: 1px; background: var(--rule); position: relative; overflow: hidden; min-width: 80px; }
.deck-progress-bar { position: absolute; inset: 0; background: var(--signal); transform: scaleX(0); transform-origin: left center; transition: transform 200ms ease; }

.race-track { display: none; gap: 2px; }
@media (min-width: 768px) { .race-track { display: flex; } }
.race-sector {
  width: clamp(36px, 5vw, 64px);
  height: 8px;
  background: var(--rule);
  position: relative;
  overflow: hidden;
  transition: background 260ms var(--ease);
}
.race-sector::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--signal);
  transform: scaleX(var(--sector-progress, 0));
  transform-origin: left center;
  transition: transform 420ms var(--ease);
}
.race-sector.is-past::before { transform: scaleX(1); background: var(--fg-mute); }
.race-sector.is-active { outline: 1px solid var(--fg); outline-offset: 1px; }

.hud-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  transition: border-color 260ms var(--ease), background 260ms var(--ease);
}
.hud-btn:hover { border-color: var(--signal); }
.hud-btn svg { width: 14px; height: 14px; display: block; }
.hud-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

.lang-switch { display: inline-flex; gap: 4px; }
.lang-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 8px;
  min-width: 34px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--fg-mute);
  border: 1px solid transparent;
  transition: color 260ms var(--ease), border-color 260ms var(--ease), background 260ms var(--ease);
}
.lang-btn:hover { color: var(--fg); border-color: var(--rule); }
.lang-btn[aria-pressed="true"] { color: var(--signal); border-color: var(--signal); }
.lang-flag { font-weight: 700; font-size: 10px; margin-bottom: 3px; letter-spacing: 0.1em; }
.lang-code { font-size: 9px; opacity: 0.7; }

.hud-hint, .locale-badge, .queued-badge { white-space: nowrap; display: none; }
@media (min-width: 1280px) { .hud-hint, .locale-badge { display: inline; } }
.locale-badge { color: var(--fg-mute); margin-left: 6px; }
.queued-badge { color: var(--signal); border: 1px solid var(--signal); padding: 2px 6px; font-size: 9px; letter-spacing: 0.14em; border-radius: 2px; margin-left: 8px; }

@media (prefers-reduced-motion: reduce) {
  .deck { scroll-behavior: auto; }
  .accel::after, .curb-word, .pillars li .name, .type-cell-sample,
  .bridge-arrow, .curb-mark, .method-cta-btn, .contact-cta-btn,
  .slide-foot > span, .signoff-locations li { transition: none; }
  .slide[data-enter] * { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════ */
/*  Slide-specific vertical balance tweaks                         */
/*  Additive to --sb-pad-*. Bottom padding is NEVER overridden —   */
/*  every slide ends with --sb-pad-bottom clearance to slide-foot. */
/*  Top-push only, to give headlines more breathing room.          */
/* ══════════════════════════════════════════════════════════════ */

/* Slide 7 + 11 — extra top padding pushes headline down a touch,
 * keeping bottom clearance identical to every other slide. */
[aria-labelledby="s07-title"] .slide-body,
[aria-labelledby="s10-title"] .slide-body {
  padding-top: calc(var(--sb-pad-top) + clamp(10px, 2vh, 24px));
  gap: clamp(14px, 2.3vh, 26px);
}
[aria-labelledby="s07-title"] .slide-body > :first-child,
[aria-labelledby="s10-title"] .slide-body > :first-child {
  margin-top: clamp(6px, 1.2vh, 16px);
}
[aria-labelledby="s07-title"] .voice-cell {
  padding: clamp(26px, 3.6vh, 52px) clamp(20px, 2.5vw, 40px);
}

/* Slide 10 Bridge — bottom-biased padding pulls the centred block up
 * a notch so the big --- visual doesn't sit low in the frame. */
/* Bridge · vertically centred composition. Equal top/bottom padding so
 * the intro+curbs block sits optically in the middle of the slide. */
[aria-labelledby="s10-bridge-title"] .slide-body {
  padding-block: clamp(32px, 5vh, 64px) clamp(32px, 5vh, 64px);
  justify-content: center;
}

/* Slide 11 Method · push the CTA higher.
 * Adding extra bottom padding shifts the centred content up — the orange
 * CTA band now has breathing room above the foot-rule. Gap between
 * pipeline and CTA stays tight so they read as one block. */
[aria-labelledby="s10-title"] .slide-body {
  padding-bottom: calc(var(--sb-pad-bottom) + clamp(24px, 4vh, 56px));
  gap: clamp(12px, 1.9vh, 22px);
}

/* ══════════════════════════════════════════════════════════════ */
/*  Slide 13 · Operating Shape · unified composition               */
/*  Three vertical zones — intro, timeline, lead — spaced with the */
/*  same rhythm. The timeline is the centre of gravity: a single   */
/*  heavy rule with four gate markers and two phase brackets.      */
/* ══════════════════════════════════════════════════════════════ */

.shape-slide-body {
  gap: clamp(20px, 3.2vh, 40px);
}

.shape-intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shape-heading {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 26ch;
  text-wrap: balance;
  color: var(--fg);
}
.shape-heading strong { font-weight: 700; font-style: inherit; }
.shape-heading .shape-curb {
  font-weight: 700;
  color: inherit;
  transition: color 260ms var(--ease);
  cursor: default;
}
.shape-heading .shape-curb:hover,
.shape-heading .shape-curb:focus-visible { color: var(--signal); }

.shape-timeline {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: clamp(12px, 1.6vh, 20px);
  margin: 0;
  padding: 0;
}

.shape-track {
  --shape-dot-d: clamp(18px, 2.2vw, 26px);
  --shape-line-y: clamp(26px, 3.2vh, 40px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: var(--shape-line-y);
  padding-bottom: clamp(4px, 0.8vh, 10px);
}

.shape-track::before {
  /* The centre line — heavier than other rules because it is the content */
  content: "";
  position: absolute;
  top: var(--shape-line-y);
  left: 0;
  right: 0;
  height: 3px;
  background: var(--fg);
  transform-origin: left center;
}
.slide[data-enter] .shape-track::before {
  animation: shape-line-draw 860ms var(--ease) both;
}

.shape-track .shape-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1vh, 10px);
  position: relative;
  padding-top: calc(var(--shape-dot-d) / 2);
  cursor: default;
}

.shape-track .g-dot {
  position: absolute;
  top: calc(var(--shape-line-y) - var(--shape-dot-d) / 2 - 1px);
  left: calc(50% - var(--shape-dot-d) / 2);
  width: var(--shape-dot-d);
  height: var(--shape-dot-d);
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--fg);
  z-index: 1;
  transition: background 320ms var(--ease), border-color 320ms var(--ease), transform 380ms var(--ease);
}

.shape-track .g-num {
  font-family: var(--mono);
  font-size: clamp(10px, 0.95vw, 12px);
  letter-spacing: 0.2em;
  color: var(--fg-mute);
  transition: color 280ms var(--ease);
}

.shape-track .g-name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 30px);
  letter-spacing: -0.015em;
  color: var(--fg);
  transition: color 280ms var(--ease), font-weight 280ms linear, letter-spacing 280ms var(--ease);
}

.shape-track .shape-gate:hover .g-dot,
.shape-track .shape-gate:focus-within .g-dot {
  background: var(--signal);
  border-color: var(--signal);
  transform: scale(1.3);
}
.shape-track .shape-gate:hover .g-name {
  color: var(--signal);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.shape-track .shape-gate:hover .g-num { color: var(--signal); }

/* Last gate always signal-orange — the payoff is visible upfront */
.shape-track .shape-gate:last-child .g-dot {
  background: var(--signal);
  border-color: var(--signal);
}
.shape-track .shape-gate:last-child .g-name { color: var(--signal); font-weight: 700; }

/* Phase brackets — two halves of the track, with visible top rule + tick */
.shape-phases {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.shape-phase-item {
  position: relative;
  padding-top: clamp(12px, 1.6vh, 18px);
  font-family: var(--mono);
  font-size: clamp(10px, 0.95vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  text-align: center;
}
.shape-phase-item strong {
  color: var(--fg);
  font-weight: 500;
  letter-spacing: 0.22em;
}
.shape-phase-item::before {
  /* bracket bar */
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: var(--rule);
}
.shape-phase-item::after {
  /* centre tick */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 7px;
  background: var(--rule);
}

/* Closing lead */
.shape-lead-new {
  font-family: var(--sans);
  font-size: clamp(15px, 1.55vw, 20px);
  line-height: 1.45;
  color: var(--fg-mute);
  max-width: 66ch;
  margin: 0;
  text-wrap: pretty;
}
.shape-lead-new strong {
  color: var(--fg);
  font-weight: 500;
}

/* Entry — dots pop in after the line is drawn */
.slide[data-enter] .shape-track .g-dot {
  animation: shape-dot-pop 520ms var(--ease) both;
}
.slide[data-enter] .shape-track .shape-gate:nth-child(1) .g-dot { animation-delay: 280ms; }
.slide[data-enter] .shape-track .shape-gate:nth-child(2) .g-dot { animation-delay: 440ms; }
.slide[data-enter] .shape-track .shape-gate:nth-child(3) .g-dot { animation-delay: 600ms; }
.slide[data-enter] .shape-track .shape-gate:nth-child(4) .g-dot { animation-delay: 760ms; }

@media (prefers-reduced-motion: reduce) {
  .slide[data-enter] .shape-track::before,
  .slide[data-enter] .shape-track .g-dot { animation: none; }
}

/* ══════════════════════════════════════════════════════════════ */
/*  Block 1 · Foundation (Vision / Mission / Purpose)              */
/* ══════════════════════════════════════════════════════════════ */
.foundation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 1024px) {
  .foundation-grid {
    grid-template-columns: repeat(3, 1fr);
    border-left: 1px solid var(--rule);
  }
}
.foundation-cell {
  padding: clamp(20px, 2.8vw, 36px) clamp(16px, 2.4vw, 30px);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 14px);
  min-width: 0;
  cursor: default;
  transition: background 260ms var(--ease);
}
@media (min-width: 1024px) {
  .foundation-cell { border-right: 1px solid var(--rule); border-bottom: 0; }
  .foundation-cell:last-child { border-right: 0; }
}
.foundation-cell:last-child { border-bottom: 0; }
.foundation-cell:hover { background: color-mix(in oklab, var(--bg) 93%, var(--signal)); }
.foundation-label {
  font-family: var(--mono);
  font-size: clamp(10px, 0.95vw, 12px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
}
.foundation-statement {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--fg);
  text-wrap: balance;
  margin: 0;
  transition: color 260ms var(--ease);
}
.foundation-cell:hover .foundation-statement { color: var(--signal); }
.foundation-support {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.45;
  color: var(--fg-mute);
  max-width: 38ch;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════ */
/*  Block 2 · Philosophy · Carbon BG                               */
/* ══════════════════════════════════════════════════════════════ */
.philosophy-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(38px, 7.5vw, 124px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: #FFFFFF;
  text-wrap: balance;
  margin: 0;
  max-width: 16ch;
}
.philosophy-title .em-italic { font-weight: 500; }
.philosophy-lead {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(16px, 1.8vw, 22px);
  color: rgba(255,255,255,.78);
  margin: clamp(16px, 3vh, 32px) 0 0;
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════════ */
/*  Block 3 · Values × Principles                                  */
/* ══════════════════════════════════════════════════════════════ */
/* Ethos slide · head row (title + code-label side by side, like every other slide) */
.vp-head-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 24px);
  margin-bottom: clamp(10px, 1.8vh, 20px);
}
.vp-title {
  max-width: 28ch;
  margin: 10px 0 0;
  letter-spacing: -0.018em;
}

/* Compact grid — five values + four principles fit comfortably in centred
 * content zone at 768-1440 viewports. Left column (Values) has 5 items,
 * right column (Principles) has 4 — uneven but acceptable visually. */
.vp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 40px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .vp-grid { grid-template-columns: 1fr 1fr; border-left: 1px solid var(--rule); }
}
.vp-column {
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 1.5vh, 18px) clamp(14px, 2vw, 24px);
  min-width: 0;
}
@media (min-width: 900px) {
  .vp-column { border-right: 1px solid var(--rule); padding: clamp(12px, 1.6vh, 20px) clamp(16px, 2.2vw, 28px); }
  .vp-column:last-child { border-right: 0; }
}
.vp-column-head {
  font-family: var(--mono);
  font-size: clamp(10px, 0.9vw, 11px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding-bottom: clamp(8px, 1.2vh, 12px);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(4px, 0.8vh, 8px);
}
.vp-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: clamp(8px, 1.2vw, 14px);
  padding: clamp(7px, 1.1vh, 12px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  cursor: default;
}
.vp-item:last-child { border-bottom: 0; }
.vp-code {
  font-family: var(--mono);
  font-size: clamp(9px, 0.85vw, 11px);
  letter-spacing: 0.18em;
  color: var(--signal);
  transition: color 260ms var(--ease);
}
.vp-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vp-head {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(14px, 1.45vw, 19px);
  color: var(--fg);
  letter-spacing: -0.013em;
  line-height: 1.2;
  transition: color 260ms var(--ease), letter-spacing 260ms var(--ease);
}
.vp-note {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(12px, 1vw, 14px);
  color: var(--fg-mute);
  line-height: 1.35;
}
.vp-item:hover .vp-head { color: var(--signal); font-weight: 700; letter-spacing: -0.02em; }
.vp-item:hover .vp-code { color: var(--signal); }

/* ══════════════════════════════════════════════════════════════ */
/*  Block 4 · Trajectory                                           */
/* ══════════════════════════════════════════════════════════════ */
.trajectory-display {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(34px, 5.8vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.trajectory-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(16px, 2.4vh, 24px);
}
@media (min-width: 900px) { .trajectory-grid { grid-template-columns: 1.1fr 1fr; } }
.trajectory-objectives {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.trajectory-obj {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(12px, 1.8vh, 18px) clamp(6px, 1vw, 12px);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  cursor: default;
}
.trajectory-obj:last-child { border-bottom: 0; }
.trajectory-year {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 0.04em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  transition: transform 320ms var(--ease);
}
.trajectory-what {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.4;
  color: var(--fg);
  transition: color 260ms var(--ease);
}
.trajectory-obj:hover .trajectory-year { transform: translateX(6px); }
.trajectory-obj:hover .trajectory-what { color: var(--signal); }

.trajectory-goals {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.8vh, 8px);
}
.trajectory-goals-head {
  font-family: var(--mono);
  font-size: clamp(10px, 0.95vw, 12px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding-bottom: clamp(8px, 1.2vh, 12px);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(4px, 0.8vh, 8px);
}
.trajectory-goal {
  padding: clamp(10px, 1.4vh, 14px) 0;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
  cursor: default;
  transition: color 260ms var(--ease);
}
.trajectory-goal:first-of-type { border-top: 0; }
.trajectory-goal:last-child { border-bottom: 1px solid var(--rule); }
.trajectory-goal:hover { color: var(--signal); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════ */
/*  Block 6 · Network                                              */
/* ══════════════════════════════════════════════════════════════ */
.network-display {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(34px, 6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 18ch;
  margin: 0;
  text-wrap: balance;
}
.network-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  margin-top: clamp(16px, 2.4vh, 24px);
}
@media (min-width: 1024px) { .network-grid { grid-template-columns: repeat(4, 1fr); } }
.network-cell {
  padding: clamp(18px, 2.5vw, 28px) clamp(14px, 2vw, 22px);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vh, 10px);
  min-height: clamp(130px, 20vh, 180px);
  cursor: default;
  min-width: 0;
  transition: background 260ms var(--ease);
}
.network-cell:hover { background: color-mix(in oklab, var(--bg) 93%, var(--signal)); }
.network-cat {
  font-family: var(--mono);
  font-size: clamp(10px, 0.95vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
}
.network-role {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: -0.015em;
  color: var(--fg);
  transition: color 260ms var(--ease), letter-spacing 260ms var(--ease);
}
.network-note {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(12px, 1.1vw, 14px);
  color: var(--fg-mute);
  line-height: 1.4;
}
.network-cell:hover .network-role { color: var(--signal); letter-spacing: -0.02em; }

/* ══════════════════════════════════════════════════════════════ */
/*  Block 7 · Narrative                                            */
/* ══════════════════════════════════════════════════════════════ */
.narrative-display {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(32px, 6.5vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}
.narrative-display .dot {
  color: var(--signal);
  margin: 0 0.2em;
  font-weight: 400;
}
.narrative-triptych {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: clamp(16px, 2.4vh, 24px);
}
@media (min-width: 900px) {
  .narrative-triptych { grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--rule); }
}
.narrative-pane {
  padding: clamp(18px, 2.5vw, 28px) clamp(14px, 2vw, 22px);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vh, 10px);
  min-width: 0;
  cursor: default;
  transition: background 260ms var(--ease);
}
@media (min-width: 900px) {
  .narrative-pane { border-right: 1px solid var(--rule); border-bottom: 0; }
  .narrative-pane:last-child { border-right: 0; }
}
.narrative-pane:last-child { border-bottom: 0; }
.narrative-pane:hover { background: color-mix(in oklab, var(--bg) 94%, var(--signal)); }
.narrative-term {
  font-family: var(--mono);
  font-size: clamp(10px, 0.95vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
}
.narrative-what {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 28px);
  letter-spacing: -0.015em;
  color: var(--fg);
  transition: color 260ms var(--ease);
}
.narrative-text {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.45;
  color: var(--fg-mute);
  margin: 0;
}
.narrative-pane:hover .narrative-what { color: var(--signal); }

/* ═══════════════════════════════════════════════════════════════════ */
/* v4 Master-Hub · Home-Navigation                                      */
/* ═══════════════════════════════════════════════════════════════════ */
.home-btn {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--fg-mute);
  text-decoration: none;
  font-family: "Inter Display", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
  gap: 6px;
}
.home-btn:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
}
.home-btn svg { width: 14px; height: 14px; }

/* x-height compensation: Apple Garamond has smaller x-height than Inter Display.
   Bump inline wordmark to match surrounding letterforms. Zero specificity via :where(). */
:where(h1, h2, h3, h4, h5, h6, p, li, dd, .display, .lead, .l-sender, .l-subject, .l-body, .bc-b-foot, .l-foot, .variant, .variant-use, .sig-body, .v, .contact-channel-note, .slide-foot span) .wm {
  font-size: 1.1em;
}

/* ══════════════════════════════════════════════════════════════
 * MOBILE OVERRIDE — 2026.04.25
 * The 7×6 paddock-grid deck is desktop-optimised. On mobile we
 * collapse to a single vertical flow with natural slide heights.
 * Everything above this block stays intact for ≥769px viewports.
 * ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Break the fixed-size grid → vertical flow */
  .deck {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    background: var(--carbon);
  }

  /* Slides become natural-height stacked blocks */
  .slide {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    scroll-snap-align: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    padding: 32px 20px !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* Reset all positional grid mappings */
  .slide:nth-child(n) { grid-column: auto !important; grid-row: auto !important; }

  /* Content inside slides: comfortable mobile rhythm */
  .slide-head, .slide-foot {
    grid-template-columns: 1fr;
    gap: 4px;
    font-size: 10px;
    letter-spacing: 0.12em;
    padding: 10px 0;
  }
  .slide-head .chapter, .slide-foot .chapter { font-size: 11px; }

  .slide-body {
    padding: 16px 0 !important;
    min-height: auto !important;
    gap: 16px;
  }

  /* Display type: keep hierarchy but cap size so nothing overflows */
  .slide .display,
  .slide h1 {
    font-size: clamp(40px, 11vw, 72px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.03em !important;
    word-break: break-word;
  }
  .slide h2 { font-size: clamp(24px, 6vw, 36px) !important; line-height: 1.1 !important; }
  .slide h3 { font-size: clamp(18px, 4.5vw, 24px) !important; line-height: 1.2 !important; }
  .slide .lead { font-size: clamp(16px, 4vw, 20px) !important; line-height: 1.45 !important; }
  .slide p    { font-size: 15px; line-height: 1.55; }

  /* Cover-grid: stack */
  .cover-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .cover-meta { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }

  /* Wordmark decoration: smaller blocks, 2-col */
  .wm-deco-parts { grid-template-columns: 1fr 1fr !important; }
  .wm-part { padding: 10px 12px !important; }

  /* Colour grid: 2-col on mobile instead of 1fr flat */
  .colour-grid { grid-template-columns: 1fr 1fr !important; }
  .colour-cell { min-height: 100px; padding: 16px !important; }

  /* Type / voice / phase / method / pillars / apps — all forced single column */
  .type-grid,
  .voice-grid,
  .phase-grid,
  .method-pipeline,
  .apps-grid,
  .origin-grid { grid-template-columns: 1fr !important; }

  /* Pillars: keep number + body stacked cleanly */
  .pillars li {
    grid-template-columns: 40px 1fr !important;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    padding: 16px 0;
  }
  .pillars li > *:nth-child(3) { grid-column: 1 / span 2; }

  /* Navigation / controls: ensure ≥44px tap targets */
  .home-btn,
  .deck-nav button,
  .deck-nav a,
  .lang-btn {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 11px !important;
  }

  /* Bottom deck-nav: stick to bottom as a mobile pit-lane strip */
  .deck-nav {
    position: sticky !important;
    bottom: 0;
    left: 0; right: 0;
    background: color-mix(in srgb, var(--carbon) 94%, transparent);
    backdrop-filter: blur(8px);
    padding: 10px 20px !important;
    gap: 8px !important;
    border-top: 1px solid var(--rule);
    justify-content: space-between;
  }

  /* Hide the home icon label on very small screens if it cramps */
  .home-btn span:not(.sr-only) { display: inline; }

  /* Section "track" badges — fall back to flex */
  .slide .section-num,
  .slide .meta-row,
  .slide .bc-meta { flex-wrap: wrap !important; gap: 6px !important; font-size: 10px; }

  /* Tables / grids with rigid min widths */
  .slide table, .slide .grid-2, .slide .grid-3, .slide .grid-4 { display: block; }

  /* Overflow protection */
  .slide * { min-width: 0; max-width: 100%; }
  .slide img, .slide svg { height: auto; }

  /* Reduced motion already respected — keep */
  .slide, .slide * { will-change: auto; }
}

/* Very small viewports — tighten further */
@media (max-width: 420px) {
  .slide { padding: 24px 16px !important; }
  .slide .display, .slide h1 { font-size: clamp(34px, 10vw, 56px) !important; }
  .wm-deco-parts, .colour-grid, .cover-meta { grid-template-columns: 1fr !important; }
}

/* Landscape phones — give the deck breathing room height-wise */
@media (max-width: 768px) and (orientation: landscape) {
  .slide { min-height: auto !important; padding: 24px 28px !important; }
}