/* Global Integrate Logistics · Brandcore growth brief
   One design canvas (1640 x 920) scaled by --u, so every desktop size renders the same composition.
   Palette is drawn from the client mark: indigo letterforms, lavender swoosh, white ground. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assets/fonts/plus-jakarta-sans-400-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/space-grotesk-500-normal.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/jetbrains-mono-400-normal.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Frame: fixed 1640:920 canvas, as large as the window allows. */
  --frame-w: min(96vw, 1640px, calc((100vh - 40px) * 1.782609));
  --frame-h: calc(var(--frame-w) * 0.560976);
  --u: calc(var(--frame-w) / 1640);

  /* Client palette (sampled from client-logo.jpg) */
  --gil-indigo: #2B2470;
  --gil-violet: #3E3592;
  --gil-lavender: #8C84B8;
  --gil-mist: #DCD9EE;

  /* Dark surfaces */
  --night: #121027;
  --night-2: #1A1736;
  --night-3: #221F45;
  --on-dark: #F6F5FC;     /* 14.4:1 on --night-3 */
  --on-dark-2: #D4D0EA;   /* 10.4:1 on --night-3 */
  --on-dark-3: #BDB7DD;   /*  8.1:1 on --night-3 */
  --on-dark-accent: #C9C3F5; /* 9.3:1 */
  --gold: #F0C75E;        /*  9.7:1 on --night-3 */
  --line-dark: rgba(220, 217, 238, 0.16);

  /* Paper surfaces */
  --paper: #F7F6F2;
  --paper-2: #EFEDF6;
  --card: #FFFFFF;
  --on-light: #17142F;    /* 16.5:1 on --paper */
  --on-light-2: #3A365E;  /* 10.4:1 */
  --on-light-3: #4A4570;  /*  7.6:1 on --paper-2 */
  --on-light-accent: #3E3592; /* 9.1:1 */
  --line-light: #E2DFEC;

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0B0A18;
  color: var(--on-dark);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 50% 35%, #1D1A3C 0%, transparent 70%),
    #0B0A18;
}

button, input, summary, a { font: inherit; color: inherit; }
img { display: block; max-width: 100%; opacity: 1; filter: none; }
p, h1, h2, h3, dl, dd, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.14em;
}

/* ---------- Frame & slide shell ---------- */

.deck {
  position: relative;
  width: var(--frame-w);
  height: var(--frame-h);
  overflow: hidden;
  border-radius: calc(var(--u) * 20);
  background: var(--night);
  box-shadow:
    0 calc(var(--u) * 40) calc(var(--u) * 110) rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(220, 217, 238, 0.12);
}

.slide {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: calc(var(--u) * 44) calc(var(--u) * 84) calc(var(--u) * 100);
}

.slide.active { display: flex; flex-direction: column; }

.theme-dark {
  color: var(--on-dark);
  background:
    radial-gradient(calc(var(--u) * 1100) calc(var(--u) * 700) at 88% 0%, rgba(140, 132, 184, 0.16), transparent 65%),
    linear-gradient(160deg, var(--night) 0%, var(--night-2) 100%);
}

.theme-paper {
  color: var(--on-light);
  background:
    radial-gradient(calc(var(--u) * 1000) calc(var(--u) * 640) at 100% 0%, rgba(140, 132, 184, 0.12), transparent 60%),
    var(--paper);
}

/* ---------- Header: client lockup on every slide ---------- */

.slide-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 24);
  padding-bottom: calc(var(--u) * 18);
  border-bottom: 1px solid var(--line-dark);
}
.theme-paper .slide-head { border-bottom-color: var(--line-light); }

.brand-lockup {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 20);
  min-width: 0;
}

/* The logo's own ground is pure white, so the plate is white: no seam, no tint, no glow. */
.logo-plate {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: calc(var(--u) * 11) calc(var(--u) * 22);
  background: #FFFFFF;
  border-radius: calc(var(--u) * 12);
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 22) rgba(6, 5, 20, 0.28);
}
.theme-paper .logo-plate {
  box-shadow: 0 0 0 1px var(--line-light), 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(43, 36, 112, 0.08);
}
.logo-plate img { height: calc(var(--u) * 54); width: auto; }

.brand-meta { display: flex; flex-direction: column; gap: calc(var(--u) * 4); min-width: 0; }
.brand-meta b {
  font-weight: 700;
  font-size: calc(var(--u) * 19);
  letter-spacing: -0.01em;
  color: var(--on-dark);
}
.brand-meta small {
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15.5));
  letter-spacing: 0.04em;
  color: var(--on-dark-3);
}
.theme-paper .brand-meta b { color: var(--on-light); }
.theme-paper .brand-meta small { color: var(--on-light-3); }

.section-tag {
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15.5));
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-dark-2);
}
.section-tag b { color: var(--gold); margin-right: calc(var(--u) * 10); }
.theme-paper .section-tag { color: var(--on-light-2); }
.theme-paper .section-tag b { color: var(--on-light-accent); }

/* ---------- Footer band (controls sit centred in it) ---------- */

.slide-foot {
  position: absolute;
  left: calc(var(--u) * 84);
  right: calc(var(--u) * 84);
  bottom: calc(var(--u) * 30);
  height: calc(var(--u) * 54);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.foot-note, .folio {
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15));
  letter-spacing: 0.08em;
  color: var(--on-dark-3);
}
.foot-note { max-width: calc(var(--u) * 560); }
.folio { font-weight: 600; letter-spacing: 0.16em; }
.theme-paper .foot-note, .theme-paper .folio { color: var(--on-light-3); }

.slide-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 36);
  padding-top: calc(var(--u) * 28);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: calc(var(--u) * 72);
}

.title-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: end;
  gap: calc(var(--u) * 64);
}

/* ---------- Type ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15.5));
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: '';
  width: calc(var(--u) * 30);
  height: 2px;
  background: currentColor;
  flex: none;
}
.theme-paper .eyebrow { color: var(--on-light-accent); }

h1, h2 {
  font-family: var(--font-sans);
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--on-dark);
}
h1 { font-size: calc(var(--u) * 54); line-height: 1.05; }
h2 { font-size: calc(var(--u) * 50); line-height: 1.06; margin-top: calc(var(--u) * 16); }
h1 em, h2 em { font-style: normal; color: var(--on-dark-accent); }
h2 em { display: block; }
.theme-paper h1, .theme-paper h2 { color: var(--on-light); }
.theme-paper h1 em, .theme-paper h2 em { color: var(--on-light-accent); }

.lead {
  font-size: calc(var(--u) * 21);
  line-height: 1.55;
  color: var(--on-dark-2);
}
.theme-paper .lead { color: var(--on-light-2); }
.col-copy .lead { margin-top: calc(var(--u) * 22); }

.checks { display: grid; align-content: start; gap: calc(var(--u) * 12); }
.checks li {
  display: flex;
  gap: calc(var(--u) * 12);
  align-items: flex-start;
  font-size: calc(var(--u) * 18.5);
  line-height: 1.45;
}
.checks .icon {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  margin-top: calc(var(--u) * 2);
  stroke-width: 2.4;
}

/* ---------- Browser frame (shared) ---------- */

.browser {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--u) * 14);
  background: #0E0C22;
  box-shadow:
    0 calc(var(--u) * 30) calc(var(--u) * 70) rgba(6, 5, 20, 0.45),
    0 0 0 1px rgba(201, 195, 245, 0.22);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  background: #1F1C40;
  border-bottom: 1px solid rgba(201, 195, 245, 0.14);
}
.dots { display: flex; gap: calc(var(--u) * 7); }
.dots i { width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%; background: #FF5F57; }
.dots i:nth-child(2) { background: #FEBC2E; }
.dots i:nth-child(3) { background: #28C840; }
.browser-url {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15));
  color: var(--on-dark-2);
}
.browser-url .icon { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.browser-view { aspect-ratio: 1376 / 768; background: #0E0C22; }
.browser-view img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* ---------- 01 Cover ---------- */

.slide.cover.active {
  display: grid;
  grid-template-columns: calc(var(--u) * 780) minmax(0, 1fr);
  padding: 0;
}

.cover-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--u) * 48) calc(var(--u) * 56) calc(var(--u) * 100) calc(var(--u) * 84);
}

.cover-brand { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 16); }
.cover-logo {
  display: inline-flex;
  padding: calc(var(--u) * 24) calc(var(--u) * 32);
  background: #FFFFFF;
  border-radius: calc(var(--u) * 18);
  box-shadow: 0 calc(var(--u) * 22) calc(var(--u) * 56) rgba(6, 5, 20, 0.45);
}
.cover-logo img { height: calc(var(--u) * 90); width: auto; }
.cover-sub {
  font-family: var(--font-mono);
  font-size: max(12.5px, calc(var(--u) * 16));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}

.cover-copy .eyebrow { margin-top: calc(var(--u) * 36); }
.cover-copy h1 { margin-top: calc(var(--u) * 16); }
.cover-copy h1 em { display: block; margin-top: calc(var(--u) * 6); }
.intro {
  margin-top: calc(var(--u) * 20);
  font-size: calc(var(--u) * 20);
  line-height: 1.55;
  color: var(--on-dark-2);
}

.manifest {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: calc(var(--u) * 40);
  margin-top: calc(var(--u) * 26);
  padding-top: calc(var(--u) * 18);
  border-top: 1px solid var(--line-dark);
}
.manifest dt, .fact-rows dt, .plan-strip dt {
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.manifest dd { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 18.5); font-weight: 650; color: var(--on-dark); }

.scene {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 22);
  padding: calc(var(--u) * 56) calc(var(--u) * 56) calc(var(--u) * 100);
  overflow: hidden;
  background:
    radial-gradient(calc(var(--u) * 760) calc(var(--u) * 560) at 55% 42%, rgba(140, 132, 184, 0.30), transparent 70%),
    linear-gradient(180deg, #1D1A42 0%, #141230 100%);
  border-left: 1px solid rgba(201, 195, 245, 0.14);
}
#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.22;
  pointer-events: none;
}
.scene.no-webgl #scene { display: none; }
.scene > :not(canvas) { position: relative; }

.stage-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15.5));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}
.stage-chip {
  padding: calc(var(--u) * 7) calc(var(--u) * 14);
  border-radius: 999px;
  border: 1px solid rgba(240, 199, 94, 0.55);
  color: var(--gold);
  letter-spacing: 0.12em;
}

.stage-callouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 14); }
.stage-callouts li {
  display: flex;
  gap: calc(var(--u) * 12);
  align-items: flex-start;
  padding: calc(var(--u) * 16) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 14);
  background: rgba(18, 16, 39, 0.78);
  border: 1px solid rgba(201, 195, 245, 0.2);
}
.stage-callouts .icon { width: calc(var(--u) * 26); height: calc(var(--u) * 26); color: var(--gold); margin-top: calc(var(--u) * 1); }
.stage-callouts b { display: block; font-size: max(12.5px, calc(var(--u) * 17)); font-weight: 700; line-height: 1.3; color: var(--on-dark); }
.stage-callouts span { display: block; margin-top: calc(var(--u) * 4); font-size: max(12px, calc(var(--u) * 15.5)); color: var(--on-dark-2); }

.cover > .folio {
  position: absolute;
  right: calc(var(--u) * 84);
  bottom: calc(var(--u) * 46);
}

/* ---------- 02 Foundation ---------- */

.s-foundation .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: calc(var(--u) * 64); }

.pull-quote {
  margin-top: calc(var(--u) * 34);
  padding: calc(var(--u) * 6) 0 calc(var(--u) * 6) calc(var(--u) * 26);
  border-left: calc(var(--u) * 4) solid var(--gil-violet);
}
.pull-quote p {
  font-size: calc(var(--u) * 34);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gil-indigo);
}
.pull-quote cite {
  display: block;
  margin-top: calc(var(--u) * 12);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-light-3);
}

.col-visual { min-width: 0; }
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 18); }
.pillar {
  position: relative;
  padding: calc(var(--u) * 24);
  border-radius: calc(var(--u) * 16);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line-light), 0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(43, 36, 112, 0.07);
}
.pillar-icon {
  display: inline-grid;
  place-items: center;
  width: calc(var(--u) * 50);
  height: calc(var(--u) * 50);
  border-radius: calc(var(--u) * 12);
  background: var(--gil-indigo);
  color: #FFFFFF;
}
.pillar-icon .icon { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.pillar-num {
  position: absolute;
  top: calc(var(--u) * 24);
  right: calc(var(--u) * 24);
  font-family: var(--font-num);
  font-size: calc(var(--u) * 18);
  font-weight: 600;
  color: var(--on-light-3);
}
.pillar h3 { margin-top: calc(var(--u) * 16); font-size: calc(var(--u) * 22); line-height: 1.2; letter-spacing: -0.01em; color: var(--on-light); }
.pillar p { margin-top: calc(var(--u) * 8); font-size: max(12.5px, calc(var(--u) * 17)); line-height: 1.5; color: var(--on-light-2); }

.corridor-card {
  margin-top: calc(var(--u) * 18);
  padding: calc(var(--u) * 22) calc(var(--u) * 26) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 16);
  background: linear-gradient(160deg, #1D1A42, var(--night));
  color: var(--on-dark);
  box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 44) rgba(18, 16, 39, 0.22);
}
.corridor-title {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}
.corridor-title span { color: var(--gold); }
.corridor-map { display: block; width: 100%; height: auto; margin-top: calc(var(--u) * 6); overflow: visible; }
.corridor-map text { font-family: var(--font-mono); font-size: 15px; font-weight: 600; letter-spacing: 0.06em; fill: var(--on-dark-2); }
.cm-road { stroke: var(--on-dark-3); stroke-width: 5; stroke-linecap: round; fill: none; }
.cm-cap { stroke: var(--on-dark-3); stroke-width: 3; stroke-linecap: round; fill: none; }
.cm-branch { stroke: var(--on-dark-3); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; fill: none; }
.cm-node circle { fill: var(--night); stroke: var(--on-dark-accent); stroke-width: 3; }
.cm-plane path { fill: none; stroke: var(--on-dark-accent); stroke-width: 1.8; stroke-linejoin: round; }
.cm-home circle { fill: var(--gold); }
.cm-home .cm-pulse { fill: rgba(240, 199, 94, 0.18); stroke: rgba(240, 199, 94, 0.6); stroke-width: 1.5; }
.corridor-map .cm-home text { fill: var(--on-dark); font-weight: 700; }
.corridor-map .cm-home .cm-home-label { fill: var(--gold); font-size: 16px; letter-spacing: 0.14em; }
.corridor-map .cm-branch-label, .corridor-map .cm-home .cm-sub { fill: var(--on-dark-3); font-weight: 600; }

.fact-rows { margin-top: calc(var(--u) * 10); }
.fact-rows div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 16);
  padding: calc(var(--u) * 9) 0;
  border-top: 1px solid var(--line-dark);
}
.fact-rows dd { font-size: max(12.5px, calc(var(--u) * 17)); font-weight: 600; color: var(--on-dark); text-align: right; }

/* ---------- 03 Journey ---------- */

.lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 calc(var(--u) * 24); }
.lane {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: calc(var(--u) * 28) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 18);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line-dark);
  border-top: calc(var(--u) * 4) solid var(--on-dark-accent);
}
.lane-gold { border-top-color: var(--gold); }
.lane-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15.5));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-accent);
}
.lane-gold .lane-pill { color: var(--gold); }
.lane-pill .icon { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.lane h3 { margin-top: calc(var(--u) * 16); font-size: calc(var(--u) * 27); line-height: 1.25; letter-spacing: -0.015em; color: var(--on-dark); }
.lane > p { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 18); line-height: 1.5; color: var(--on-dark-2); }
.lane .checks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 10) calc(var(--u) * 20);
  margin-top: calc(var(--u) * 18);
  padding-top: calc(var(--u) * 18);
  border-top: 1px solid var(--line-dark);
}
.lane .checks li { color: var(--on-dark); font-size: max(12.5px, calc(var(--u) * 17.5)); }
.lane .checks .icon { color: var(--on-dark-accent); }
.lane-gold .checks .icon { color: var(--gold); }

.route-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 16);
}
.route-flow li {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  padding: calc(var(--u) * 12) calc(var(--u) * 20);
  border-radius: 999px;
  border: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, 0.04);
  font-size: max(12.5px, calc(var(--u) * 17));
  font-weight: 600;
  color: var(--on-dark);
}
.route-flow li .icon { width: calc(var(--u) * 22); height: calc(var(--u) * 22); color: var(--on-dark-accent); }
.route-flow .flow-arrow { padding: 0; border: 0; background: none; color: var(--gold); }
.route-flow .flow-arrow .icon { color: var(--gold); width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.route-flow .flow-end { background: var(--gold); border-color: var(--gold); color: var(--night); }
.route-flow .flow-end .icon { color: var(--night); }

/* ---------- 04 Website ---------- */

.s-website .split { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 800); gap: calc(var(--u) * 64); }

.notes { margin-top: calc(var(--u) * 30); display: grid; }
.notes li {
  display: flex;
  gap: calc(var(--u) * 20);
  padding: calc(var(--u) * 18) 0;
  border-top: 1px solid var(--line-light);
}
.notes li:last-child { border-bottom: 1px solid var(--line-light); }
.notes b {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: calc(var(--u) * 12);
  background: var(--gil-indigo);
  color: #FFFFFF;
  font-family: var(--font-num);
  font-size: calc(var(--u) * 18);
  font-weight: 600;
}
.notes h3 { font-size: calc(var(--u) * 21); line-height: 1.25; color: var(--on-light); }
.notes p { margin-top: calc(var(--u) * 5); font-size: max(12.5px, calc(var(--u) * 17.5)); line-height: 1.5; color: var(--on-light-2); }

/* Slide 4 hero: the mockup alone, never covered. 440 design px = 440px at 1920x1080. */
.site-browser .browser-view {
  height: clamp(300px, calc(var(--u) * 440), 440px);
  aspect-ratio: auto;
}
.theme-paper .browser {
  box-shadow:
    0 calc(var(--u) * 22) calc(var(--u) * 48) rgba(23, 20, 47, 0.2),
    0 0 0 1px rgba(43, 36, 112, 0.18);
}
.figure-note {
  margin-top: calc(var(--u) * 26);
  text-align: center;
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-light-2);
}

/* ---------- 05 Trust ---------- */

.s-trust .split { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 640); gap: calc(var(--u) * 72); }

.moves { margin-top: calc(var(--u) * 28); display: grid; gap: calc(var(--u) * 20); }
.moves li { display: flex; gap: calc(var(--u) * 18); align-items: flex-start; }
.move-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  border-radius: calc(var(--u) * 12);
  background: rgba(240, 199, 94, 0.12);
  border: 1px solid rgba(240, 199, 94, 0.4);
  color: var(--gold);
}
.move-icon .icon { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.moves h3 { font-size: calc(var(--u) * 21); line-height: 1.25; color: var(--on-dark); }
.moves p { margin-top: calc(var(--u) * 4); font-size: max(12.5px, calc(var(--u) * 17.5)); line-height: 1.5; color: var(--on-dark-2); }

.profile-card {
  padding: calc(var(--u) * 28) calc(var(--u) * 30);
  border-radius: calc(var(--u) * 20);
  background: var(--card);
  color: var(--on-light);
  box-shadow: 0 calc(var(--u) * 34) calc(var(--u) * 80) rgba(6, 5, 20, 0.5);
}
.profile-kicker {
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-light-accent);
}
.profile-search {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  margin-top: calc(var(--u) * 14);
  padding: calc(var(--u) * 12) calc(var(--u) * 18);
  border-radius: 999px;
  background: var(--paper-2);
  font-size: max(12.5px, calc(var(--u) * 17));
  color: var(--on-light-2);
}
.profile-search .icon { width: calc(var(--u) * 20); height: calc(var(--u) * 20); color: var(--on-light-3); }
.profile-brand {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  margin-top: calc(var(--u) * 22);
}
.profile-logo {
  flex: none;
  padding: calc(var(--u) * 10) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 12);
  box-shadow: 0 0 0 1px var(--line-light);
}
.profile-logo img { height: calc(var(--u) * 40); width: auto; }
.profile-brand strong { display: block; font-size: calc(var(--u) * 21); line-height: 1.2; color: var(--on-light); }
.profile-brand span { display: block; margin-top: calc(var(--u) * 4); font-size: max(12.5px, calc(var(--u) * 16)); color: var(--on-light-3); }
.profile-actions { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 18); }
.profile-actions span {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 9) calc(var(--u) * 16);
  border-radius: 999px;
  border: 1px solid var(--line-light);
  font-size: max(12.5px, calc(var(--u) * 16));
  font-weight: 650;
  color: var(--on-light-accent);
}
.profile-actions .icon { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.profile-actions .primary { background: var(--gil-indigo); border-color: var(--gil-indigo); color: #FFFFFF; }
.profile-rows { margin-top: calc(var(--u) * 16); }
.profile-rows div {
  display: grid;
  grid-template-columns: calc(var(--u) * 110) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 14);
  padding: calc(var(--u) * 11) 0;
  border-top: 1px solid var(--line-light);
}
.profile-rows dt {
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-light-3);
}
.profile-rows dd { font-size: max(12.5px, calc(var(--u) * 17.5)); font-weight: 600; color: var(--on-light); }
.profile-rows .icon { width: calc(var(--u) * 22); height: calc(var(--u) * 22); color: #1E7A4C; stroke-width: 2.6; }

/* ---------- 06 Proof ---------- */

.s-proof .slide-body { gap: calc(var(--u) * 28); }
.s-proof h2 { font-size: calc(var(--u) * 46); }
.s-proof .title-row { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.comparison {
  display: grid;
  grid-template-columns: calc(var(--u) * 640) auto calc(var(--u) * 640);
  justify-content: center;
  align-items: center;
  gap: calc(var(--u) * 26);
}
.case figcaption {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  margin-bottom: calc(var(--u) * 14);
  font-size: calc(var(--u) * 18.5);
  font-weight: 650;
  color: var(--on-dark-2);
}
.case-after figcaption { color: var(--on-dark); }
.case-tag {
  padding: calc(var(--u) * 5) calc(var(--u) * 12);
  border-radius: 999px;
  border: 1px solid var(--on-dark-3);
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}
.case-after .case-tag { background: var(--gold); border-color: var(--gold); color: var(--night); }
.case-browser .browser-bar { height: calc(var(--u) * 36); }
/* Full 16:10 viewport, pinned to the top so each site's header and hero stay visible. */
.case-view {
  height: clamp(280px, calc(var(--u) * 400), 400px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #FFFFFF;
}
.case-view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.035);
  transform-origin: center top;
}
.case-after .browser { box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 70) rgba(6, 5, 20, 0.5), 0 0 0 2px rgba(240, 199, 94, 0.7); }
.case-arrow {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: 50%;
  background: var(--gold);
  color: var(--night);
}
.case-arrow .icon { width: calc(var(--u) * 26); height: calc(var(--u) * 26); stroke-width: 2.4; }

/* ---------- 07 Plan ---------- */

.s-plan .slide-body { gap: calc(var(--u) * 30); }
.s-plan h2 { font-size: calc(var(--u) * 44); }
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 calc(var(--u) * 22); }
.phase {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: calc(var(--u) * 26) calc(var(--u) * 28) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 18);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line-light), 0 calc(var(--u) * 14) calc(var(--u) * 34) rgba(43, 36, 112, 0.07);
}
.phase-top { display: flex; align-items: flex-end; justify-content: space-between; }
.phase-days {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--u) * 8);
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15.5));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-light-3);
}
.phase-days b {
  font-family: var(--font-num);
  font-size: calc(var(--u) * 64);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--gil-indigo);
}
.phase-when {
  padding: calc(var(--u) * 6) calc(var(--u) * 12);
  border-radius: 999px;
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--on-light-accent);
}
.phase h3 { margin-top: calc(var(--u) * 18); font-size: calc(var(--u) * 23); line-height: 1.22; letter-spacing: -0.01em; color: var(--on-light); }
.phase .checks { margin-top: calc(var(--u) * 16); padding-top: calc(var(--u) * 16); border-top: 1px solid var(--line-light); }
.phase .checks li { font-size: max(12.5px, calc(var(--u) * 17.5)); color: var(--on-light-2); }
.phase .checks .icon { color: var(--gil-violet); }
.phase-featured { background: linear-gradient(160deg, #1D1A42, var(--night)); box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 50) rgba(18, 16, 39, 0.3); }
.phase-featured .phase-days { color: var(--on-dark-2); }
.phase-featured .phase-days b { color: var(--gold); }
.phase-featured .phase-when { background: rgba(255, 255, 255, 0.1); color: var(--on-dark); }
.phase-featured h3 { color: var(--on-dark); }
.phase-featured .checks { border-top-color: var(--line-dark); }
.phase-featured .checks li { color: var(--on-dark-2); }
.phase-featured .checks .icon { color: var(--gold); }

.plan-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: calc(var(--u) * 14);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line-light);
}
.plan-strip div { padding: calc(var(--u) * 16) calc(var(--u) * 24); }
.plan-strip div + div { border-left: 1px solid var(--line-light); }
.plan-strip dt { color: var(--on-light-3); }
.plan-strip dd { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 18.5); font-weight: 700; color: var(--on-light); }

/* ---------- 08 Close ---------- */

.s-close .split { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 600); gap: calc(var(--u) * 64); }

.partner {
  display: flex;
  gap: calc(var(--u) * 26);
  align-items: flex-start;
  margin-top: calc(var(--u) * 30);
  padding: calc(var(--u) * 26);
  border-radius: calc(var(--u) * 20);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line-light), 0 calc(var(--u) * 16) calc(var(--u) * 40) rgba(43, 36, 112, 0.08);
}
/* Edge-to-edge cover crop, no white ring. */
.portrait {
  flex: none;
  width: max(112px, calc(var(--u) * 140));
  height: max(112px, calc(var(--u) * 140));
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 28) rgba(43, 36, 112, 0.22);
}
.partner-body { min-width: 0; }
.partner-name { font-size: calc(var(--u) * 30); font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; color: var(--on-light); }
.partner-role {
  margin-top: calc(var(--u) * 6);
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-light-accent);
}
.partner-quote { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 18); line-height: 1.5; color: var(--on-light-2); }
.partner-contacts { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 16); }
.partner-contacts li {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 7) calc(var(--u) * 13);
  border-radius: 999px;
  background: var(--paper-2);
  font-size: max(12.5px, calc(var(--u) * 16));
  font-weight: 650;
  color: var(--on-light);
  white-space: nowrap;
}
.partner-contacts .icon { width: calc(var(--u) * 17); height: calc(var(--u) * 17); color: var(--on-light-accent); }

.contact-card {
  padding: calc(var(--u) * 32) calc(var(--u) * 34) calc(var(--u) * 28);
  border-radius: calc(var(--u) * 22);
  background:
    radial-gradient(calc(var(--u) * 500) calc(var(--u) * 300) at 100% 0%, rgba(140, 132, 184, 0.28), transparent 70%),
    linear-gradient(165deg, #1D1A42, var(--night));
  color: var(--on-dark);
  box-shadow: 0 calc(var(--u) * 34) calc(var(--u) * 80) rgba(18, 16, 39, 0.35);
}
.contact-card .eyebrow { color: var(--gold); }
.contact-card h3 { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 48); font-weight: 750; letter-spacing: -0.03em; line-height: 1.05; }
.contact-sub { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 18); line-height: 1.5; color: var(--on-dark-2); }

.planner { margin-top: calc(var(--u) * 20); }
.planner summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  padding-bottom: calc(var(--u) * 12);
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}
.planner summary::-webkit-details-marker { display: none; }
.planner summary .icon { width: calc(var(--u) * 20); height: calc(var(--u) * 20); transition: transform 0.2s; }
.planner[open] summary .icon { transform: rotate(180deg); }
.planner-content { padding-top: calc(var(--u) * 16); }

.time-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 10); }
.time-actions button {
  min-height: max(44px, calc(var(--u) * 50));
  border-radius: calc(var(--u) * 12);
  border: 1px solid rgba(201, 195, 245, 0.35);
  background: rgba(255, 255, 255, 0.06);
  font-size: max(12.5px, calc(var(--u) * 17));
  font-weight: 700;
  color: var(--on-dark);
  cursor: pointer;
}
.time-actions button:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--on-dark-accent); }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 14); }
.field label {
  display: block;
  margin-bottom: calc(var(--u) * 6);
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.date-field { position: relative; display: flex; }
.date-field input {
  width: 100%;
  min-height: max(44px, calc(var(--u) * 50));
  padding: 0 calc(var(--u) * 52) 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 12);
  border: 1px solid rgba(201, 195, 245, 0.35);
  background: rgba(255, 255, 255, 0.95);
  color: var(--on-light);
  font-size: max(12.5px, calc(var(--u) * 17));
  color-scheme: light;
}
.date-field input::-webkit-calendar-picker-indicator { opacity: 0; pointer-events: none; }
.picker {
  position: absolute;
  right: calc(var(--u) * 4);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: max(40px, calc(var(--u) * 44));
  height: max(40px, calc(var(--u) * 44));
  border: 0;
  border-radius: calc(var(--u) * 10);
  background: transparent;
  color: var(--gil-violet);
  cursor: pointer;
}
.picker .icon { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }

#status, #picker-fallback { margin-top: calc(var(--u) * 12); font-size: max(12.5px, calc(var(--u) * 16)); color: var(--on-dark-2); }
#draft {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 10);
  min-height: max(48px, calc(var(--u) * 56));
  margin-top: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 14);
  background: var(--gold);
  color: var(--night);
  font-family: var(--font-mono);
  font-size: max(12.5px, calc(var(--u) * 16));
  font-weight: 800;
  letter-spacing: 0.12em;
  text-decoration: none;
}
#draft:hover { background: #F6D57E; }
#draft .icon { width: calc(var(--u) * 20); height: calc(var(--u) * 20); stroke-width: 2.4; }
.contact-fine { margin-top: calc(var(--u) * 12); font-size: max(12px, calc(var(--u) * 15.5)); color: var(--on-dark-3); }
.print-contact { display: none; }
.contact-card .brand { height: calc(var(--u) * 30); width: auto; margin-top: calc(var(--u) * 22); }

/* ---------- Controls (centred in each slide's footer band) ---------- */

.controls {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: calc((100vh - var(--frame-h)) / 2 + var(--u) * 30);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 4);
  height: calc(var(--u) * 54);
  padding: 0 calc(var(--u) * 6);
  border-radius: 999px;
  background: rgba(18, 16, 39, 0.94);
  border: 1px solid rgba(220, 217, 238, 0.22);
  box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) rgba(6, 5, 20, 0.4);
  color: var(--on-dark);
}
.controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 8);
  min-width: max(40px, calc(var(--u) * 44));
  height: max(40px, calc(var(--u) * 44));
  padding: 0 calc(var(--u) * 10);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--on-dark);
  cursor: pointer;
}
.controls button:hover { background: rgba(255, 255, 255, 0.1); }
.controls button .icon { width: max(16px, calc(var(--u) * 20)); height: max(16px, calc(var(--u) * 20)); }
#counter {
  white-space: nowrap;
  min-width: calc(var(--u) * 64);
  text-align: center;
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 15));
  font-weight: 700;
  letter-spacing: 0.1em;
}
#autoplay {
  padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 14);
  border-left: 1px solid rgba(220, 217, 238, 0.2);
  border-radius: 0 999px 999px 0;
  font-family: var(--font-mono);
  font-size: max(12px, calc(var(--u) * 14.5));
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--gold);
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.theme-paper :focus-visible { outline-color: var(--gil-violet); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Flow layout: tablets in portrait, phones, short windows ---------- */

@media (max-width: 1023px), (max-height: 559px) {
  :root { --u: 1px; }
  html, body { height: auto; }
  body { display: block; overflow-x: hidden; overflow-y: auto; }

  .deck { width: 100%; height: auto; min-height: 100svh; border-radius: 0; box-shadow: none; overflow: hidden; }
  .slide { height: auto; min-height: 100svh; padding: 20px 20px 104px; }

  .slide-head { flex-wrap: wrap; gap: 12px; }
  .brand-lockup { flex-direction: column; align-items: flex-start; gap: 10px; }
  .logo-plate img { height: 40px; }
  .brand-meta b { font-size: 16px; }
  .brand-meta small, .section-tag { font-size: 12.5px; }

  .slide-body { justify-content: flex-start; gap: 24px; padding-top: 24px; }
  .split, .title-row, .s-proof .title-row, .s-foundation .split, .s-website .split, .s-trust .split, .s-close .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  h1 { font-size: clamp(32px, 8.4vw, 46px); }
  h2 { font-size: clamp(28px, 7.4vw, 40px); }
  .s-plan h2 { font-size: clamp(26px, 7vw, 38px); }
  .lead, .intro { font-size: 17px; }
  .eyebrow, .stage-caption, .cover-sub, .foot-note, .folio { font-size: 12.5px; }

  .slide.cover.active { display: flex; flex-direction: column; padding: 0; }
  .cover-copy { padding: 28px 20px 24px; }
  .cover-logo { padding: 16px 20px; max-width: 100%; }
  .cover-logo img { height: auto; width: min(100%, 460px); }
  .manifest { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .scene { padding: 28px 20px 110px; border-left: 0; border-top: 1px solid var(--line-dark); }
  .stage-caption { flex-wrap: wrap; gap: 10px; }
  .stage-callouts { grid-template-columns: minmax(0, 1fr); }
  .cover > .folio { right: 20px; bottom: 76px; }

  .pillars, .lanes, .lane .checks, .phases, .plan-strip, .field-row, .time-actions { grid-template-columns: minmax(0, 1fr); }
  .lanes, .phases { row-gap: 20px; }
  .plan-strip div + div { border-left: 0; border-top: 1px solid var(--line-light); }
  .route-flow { flex-direction: column; align-items: stretch; }
  .route-flow .flow-arrow { align-self: center; transform: rotate(90deg); }

  .site-browser .browser-view { height: auto; aspect-ratio: 1376 / 768; }
  .comparison { grid-template-columns: minmax(0, 1fr); }
  .case-arrow { justify-self: center; transform: rotate(90deg); }
  .case-view { height: auto; width: 100%; }

  .profile-brand { flex-direction: column; align-items: flex-start; gap: 12px; }
  .profile-rows div { grid-template-columns: minmax(0, 1fr) auto; }
  .profile-rows dt { grid-column: 1 / -1; }
  .partner { flex-direction: column; }
  .partner-contacts li { white-space: normal; }
  .contact-card h3 { font-size: 36px; }

  .slide-foot { left: 20px; right: 20px; bottom: 74px; height: auto; }
  .foot-note { max-width: 70%; }
  .controls { bottom: 12px; height: 54px; padding: 0 6px; }
  .controls button { min-width: 44px; height: 44px; }
  #counter { min-width: 52px; }
  #draft { padding: 0 14px; font-size: 13px; letter-spacing: 0.06em; text-align: center; }
}

@media (max-width: 560px) {
  .corridor-map { display: none; }
  .corridor-title { margin-bottom: 6px; }
}

/* ---------- Print: one slide per landscape page, colours kept ---------- */

@media print {
  @page { size: 11in 6.19in; margin: 0; }
  :root { --frame-w: 11in; --frame-h: 6.17in; --u: calc(11in / 1640); }
  html, body { height: auto; overflow: visible; background: #FFFFFF; }
  body { display: block; }
  .deck { width: 11in; height: auto; border-radius: 0; box-shadow: none; overflow: visible; background: none; }
  .slide, .slide.active, .slide.cover {
    display: flex !important;
    width: 11in;
    height: 6.17in;
    break-after: page;
    page-break-after: always;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .slide.cover { display: grid !important; grid-template-columns: calc(var(--u) * 700) minmax(0, 1fr); padding: 0; }
  .slide:last-child { break-after: auto; page-break-after: auto; }
  .controls, #scene, .planner, .contact-fine { display: none !important; }
  .print-contact { display: block; margin-top: calc(var(--u) * 20); font-size: max(12.5px, calc(var(--u) * 17)); font-weight: 600; color: var(--on-dark); }
}