/* All American Glass Fresno × Brandcore
   One design system: the client's own flag palette (logo navy #0B3A80, logo red #E8103C),
   glass-white "light" slides and night-navy "dark" slides. Every text colour below is
   chosen for AAA contrast on the surface it sits on. */

@font-face { font-family: 'Source Serif 4'; src: url('assets/fonts/96ff6e64477b7eaf8824.woff2') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('assets/fonts/053f3583e4a034f1d1b1.woff2') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('assets/fonts/8ebc3d71038a4b1e5df3.woff2') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/a699af1dea30b799318e.woff2') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/e45972c7e9f24dc39084.woff2') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/87e867b52640b3b397a9.woff2') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/6f49e1b28bce7339f484.woff2') format('truetype'); font-weight: 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 {
  /* Brand (sampled from the All American Glass logo) */
  --flag-red: #E8103C;        /* decorative marks, stripes, icons */
  --flag-navy: #0B3A80;       /* logo blue: labels and icons on light surfaces (10:1) */

  /* Light surfaces */
  --paper: #F6F8FB;
  --paper-2: #EDF1F7;
  --card: #FFFFFF;
  --line: #D6DEEA;
  --ink: #0A1B3D;             /* 16:1 on paper */
  --ink-2: #33415C;           /* 9.7:1 on paper */
  --red-ink: #8C0F27;         /* small red text on light, 8:1 or better */
  --red-display: #B8102E;     /* large display text on light only, 5.9:1 (AAA large) */

  /* Dark surfaces */
  --night: #0A1D42;
  --night-2: #071534;
  --night-card: #0F2752;
  --line-dark: rgba(255, 255, 255, 0.16);
  --snow: #FFFFFF;            /* 15:1 on night */
  --snow-2: #D3DCEC;          /* 10.6:1 on night-card */
  --ice: #B9D3FF;             /* labels on dark, 9.6:1 */
  --ice-display: #A9C8FF;     /* headline accent on dark */
  --red-light: #FF9EAD;       /* small red accents on dark, 7.6:1 */

  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* 1% of a 16:9 slide: 19.2px at 1920×1080, 14.4px at 1440×900 */
  --u: min(1vw, 1.7778vh);
  --pad-x: calc(var(--u) * 4.2);
  --radius: 18px;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--night-2);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.16em;
}

/* ---------- Deck & slide shell ---------- */
#deck, .deck { position: relative; width: 100%; overflow: hidden; }

.slide {
  position: relative;
  display: none;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}
.slide.active { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }

.slide.light {
  background:
    radial-gradient(110% 70% at 100% 0%, rgba(11, 58, 128, 0.07) 0%, rgba(11, 58, 128, 0) 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  color: var(--ink);
}
.slide.dark {
  background:
    radial-gradient(90% 70% at 85% 10%, rgba(64, 120, 220, 0.20) 0%, rgba(64, 120, 220, 0) 60%),
    linear-gradient(160deg, var(--night) 0%, var(--night-2) 100%);
  color: var(--snow);
}

/* Header: the client's mark leads every slide */
.slide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: calc(var(--u) * 0.9);
  border-bottom: 1px solid var(--line);
}
.dark .slide-head { border-bottom-color: var(--line-dark); }

.brand-lockup { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.1); }

.logo-plate {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: calc(var(--u) * 4.6);
  min-height: 64px;
  padding: calc(var(--u) * 0.5) calc(var(--u) * 0.95) calc(var(--u) * 0.75);
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(10, 27, 61, 0.06), 0 10px 26px rgba(10, 27, 61, 0.14);
  overflow: hidden;
}
.light .logo-plate { border: 1px solid var(--line); }
.dark .logo-plate { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); }
/* Flag stripe echoing the logo's red-and-blue sweep */
.logo-plate::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--flag-red) 0 50%, var(--flag-navy) 50% 100%);
}
.logo-plate img { height: 100%; width: auto; opacity: 1; filter: none; }

.brand-text { display: flex; flex-direction: column; gap: 4px; line-height: 1.1; }
.brand-text b {
  font-size: max(15px, calc(var(--u) * 1));
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-text small {
  font-size: max(11.5px, calc(var(--u) * 0.66));
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red-ink);
}
.dark .brand-text b { color: var(--snow); }
.dark .brand-text small { color: var(--ice); }

.head-meta {
  font-size: max(11.5px, calc(var(--u) * 0.66));
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.head-meta b { color: var(--red-ink); }
.dark .head-meta { color: var(--snow-2); }
.dark .head-meta b { color: var(--snow); }

.slide-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  font-size: max(11px, calc(var(--u) * 0.6));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dark .slide-foot { color: var(--snow-2); }
.slide-foot > span:first-child { max-width: calc(50% - 170px); }

.page {
  font-family: var(--sans);
  font-size: max(12px, calc(var(--u) * 0.68));
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink);
}
.dark .page { color: var(--snow); }

/* ---------- Type ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: max(11.5px, calc(var(--u) * 0.68));
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red-ink);
  margin-bottom: calc(var(--u) * 0.8);
}
.kicker .ico { color: var(--flag-red); width: 1.25em; height: 1.25em; }
.dark .kicker { color: var(--ice); }
.dark .kicker .ico { color: var(--red-light); }

h1, h2 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
}
h1 em, h2 em { font-style: normal; color: var(--red-display); }
.dark h1, .dark h2 { color: var(--snow); }
.dark h1 em, .dark h2 em { color: var(--ice-display); }

h2 { font-size: calc(var(--u) * 2.85); line-height: 1.06; }
h1, h2, h3 { text-wrap: balance; }
p, .lead, blockquote { text-wrap: pretty; }
h2 em { display: block; }

.lead {
  font-size: max(15px, calc(var(--u) * 1.06));
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 40em;
  margin-top: calc(var(--u) * 0.9);
}
.dark .lead { color: var(--snow-2); }

.num {
  font-size: max(11.5px, calc(var(--u) * 0.66));
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--red-ink);
}
.dark .num { color: var(--snow); }

/* ---------- Layout primitives ---------- */
.slide-body { min-height: 0; display: grid; align-content: center; }
.split {
  grid-template-columns: 1.06fr 0.94fr;
  align-items: center;
  column-gap: calc(var(--u) * 3.6);
}
.stack { align-content: center; row-gap: calc(var(--u) * 2.1); }
.head-row {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: end;
  column-gap: calc(var(--u) * 3.2);
}
.head-row .lead { margin-top: 0; }

/* ---------- Browser frame (shared) ---------- */
.browser {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: var(--night-card);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 30px 70px rgba(2, 8, 24, 0.5);
}
.light .browser {
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 24px 60px rgba(10, 27, 61, 0.16);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: max(38px, calc(var(--u) * 2.2));
  padding: 0 14px;
  background: #0B1D40;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.light .browser-bar { background: #EEF2F7; border-bottom-color: var(--line); }
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.dots i:nth-child(2) { background: #FEBC2E; }
.dots i:nth-child(3) { background: #28C840; }
.url {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
  padding: 5px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--mono);
  font-size: max(11.5px, calc(var(--u) * 0.66));
  letter-spacing: 0.02em;
  color: var(--snow);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.light .url { background: #FFFFFF; color: var(--ink-2); border: 1px solid var(--line); }
.url .ico { color: var(--ice); }
.light .url .ico { color: var(--flag-navy); }
.bar-tag {
  font-size: max(10.5px, calc(var(--u) * 0.58));
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--night);
  background: var(--ice);
  flex: none;
}
.browser-view { position: relative; overflow: hidden; background: #FFFFFF; }
.browser-view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 1;
  filter: none;
}

/* =========================================================
   SLIDE 1 · COVER
   ========================================================= */
.slide.cover.active { grid-template-rows: none; grid-template-columns: 1.04fr 0.96fr; }

.cover-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--u) * 2.6) calc(var(--u) * 3.4) calc(var(--u) * 3.4) var(--pad-x);
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(11, 58, 128, 0.06) 0%, rgba(11, 58, 128, 0) 70%),
    linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%);
}
.cover-logo {
  width: auto;
  height: calc(var(--u) * 8.4);
  min-height: 110px;
  align-self: flex-start;
  opacity: 1;
  filter: none;
}
.cover-rule { display: flex; gap: 6px; margin: calc(var(--u) * 1.5) 0 calc(var(--u) * 1.6); }
.cover-rule span { height: 4px; border-radius: 2px; background: var(--flag-red); width: 64px; }
.cover-rule span:nth-child(2) { background: var(--flag-navy); width: 34px; }
.cover-rule span:nth-child(3) { width: 14px; }

.cover h1 { font-size: calc(var(--u) * 3.35); line-height: 1.05; max-width: 15em; }
.cover h1 em { display: block; }
.cover .lead { font-size: max(15px, calc(var(--u) * 1.04)); max-width: 34em; }

.fact-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 40em; margin-top: calc(var(--u) * 1.6); }
.fact-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.55em 1em;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(10, 27, 61, 0.06);
  font-size: max(12.5px, calc(var(--u) * 0.76));
  font-weight: 600;
  color: var(--ink);
}
.fact-chips .ico { color: var(--flag-navy); }

.cover-byline {
  margin-top: calc(var(--u) * 1.7);
  padding-top: calc(var(--u) * 1.1);
  border-top: 1px solid var(--line);
  font-size: max(12.5px, calc(var(--u) * 0.76));
  color: var(--ink-2);
}
.cover-byline b { color: var(--ink); }

.cover-stage {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 62% 42%, #16397A 0%, rgba(22, 57, 122, 0) 70%),
    linear-gradient(165deg, #0C2250 0%, var(--night) 45%, var(--night-2) 100%);
}
#scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.cover-stage.webgl-on .ribbon-fallback { display: none; }
.ribbon-fallback { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.ribbon-fallback path { fill: none; stroke-width: 26; stroke-linecap: round; }
.rb-red { stroke: var(--flag-red); }
.rb-white { stroke: #F3F6FC; }
.rb-blue { stroke: #2F62C6; }

.stage-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3);
}
.stage-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--night-card);
  border: 1px solid rgba(185, 211, 255, 0.35);
  font-size: max(11px, calc(var(--u) * 0.64));
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ice);
}
.stage-label .ico { color: var(--red-light); }
.hero-browser { width: 100%; }
.hero-view { aspect-ratio: 3 / 2; }

.stage-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
.stage-facts li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: calc(var(--u) * 0.75) calc(var(--u) * 0.95);
  border-radius: 14px;
  background: var(--night-card);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 3px solid var(--flag-red);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.stage-facts b { font-size: max(14px, calc(var(--u) * 0.92)); color: var(--snow); }
.stage-facts span { font-size: max(12px, calc(var(--u) * 0.7)); color: var(--snow-2); }

.cover > .page { position: absolute; right: calc(var(--u) * 3); bottom: 16px; z-index: 2; padding: 9px 14px; border-radius: 999px; background: var(--night-card); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--snow); }

/* =========================================================
   SLIDE 2 · FOUNDATION (dark)
   ========================================================= */
.pillars { display: grid; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 1.8); }
.pillar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--u) * 1);
  align-items: start;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.35);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-dark);
}
.pillar-icon {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 3.3);
  height: calc(var(--u) * 3.3);
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  background: rgba(185, 211, 255, 0.12);
  border: 1px solid rgba(185, 211, 255, 0.35);
  color: var(--ice);
  font-size: calc(var(--u) * 1.5);
}
.pillar h3 {
  font-family: var(--sans);
  font-size: max(15px, calc(var(--u) * 1.16));
  font-weight: 700;
  color: var(--snow);
  margin: 4px 0 4px;
}
.pillar p { font-size: max(13.5px, calc(var(--u) * 0.95)); line-height: 1.5; color: var(--snow-2); }

.brand-card {
  border-radius: 22px;
  overflow: hidden;
  background: var(--night-card);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.5);
}
.brand-card-plate {
  position: relative;
  display: grid;
  place-items: center;
  padding: calc(var(--u) * 2.8) calc(var(--u) * 2.8) calc(var(--u) * 3.2);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 35%, rgba(11, 58, 128, 0.05) 50%, rgba(255, 255, 255, 0) 65%),
    linear-gradient(180deg, #FFFFFF 0%, #F2F5FA 100%);
}
.brand-card-plate::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 13px;
  background: linear-gradient(180deg, var(--flag-red) 0 5px, #FFFFFF 5px 8px, var(--flag-navy) 8px 13px);
}
.brand-card-plate img { width: min(100%, calc(var(--u) * 25)); height: auto; opacity: 1; filter: none; }

.brand-facts { display: grid; grid-template-columns: 1fr 1fr; }
.brand-facts > div { padding: calc(var(--u) * 1.25) calc(var(--u) * 1.5); border-bottom: 1px solid var(--line-dark); }
.brand-facts > div:nth-child(odd) { border-right: 1px solid var(--line-dark); }
.brand-facts dt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: max(11px, calc(var(--u) * 0.62));
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ice);
  margin-bottom: 5px;
}
.brand-facts dd { font-size: max(14px, calc(var(--u) * 1)); font-weight: 600; line-height: 1.35; color: var(--snow); }

.brand-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: calc(var(--u) * 1.25) calc(var(--u) * 1.5) calc(var(--u) * 1.4); }
.brand-badges li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: max(12px, calc(var(--u) * 0.76));
  font-weight: 600;
  color: var(--snow);
}
.brand-badges .ico { color: var(--red-light); }

/* =========================================================
   SLIDE 3 · CUSTOMER JOURNEYS (light)
   ========================================================= */
.journey-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); column-gap: calc(var(--u) * 1.5); row-gap: 0; }
.journey-card {
  position: relative;
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  align-content: start;
  padding: calc(var(--u) * 1.9) calc(var(--u) * 1.8) calc(var(--u) * 1.6);
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(10, 27, 61, 0.09);
  overflow: hidden;
}
.journey-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--flag-red) 0 50%, var(--flag-navy) 50% 100%);
}
.jc-top { display: flex; align-items: center; justify-content: space-between; }
.jc-num { font-family: var(--serif); font-size: calc(var(--u) * 2.6); font-weight: 700; line-height: 1; color: var(--red-display); }
.jc-tag {
  font-size: max(11px, calc(var(--u) * 0.62));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: #E8EFFB;
  color: var(--flag-navy);
}
.jc-icon {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 3.7);
  height: calc(var(--u) * 3.7);
  min-width: 48px;
  min-height: 48px;
  margin: calc(var(--u) * 1.2) 0 calc(var(--u) * 1);
  border-radius: 50%;
  background: var(--night);
  color: #FFFFFF;
  font-size: calc(var(--u) * 1.85);
  box-shadow: 0 8px 20px rgba(10, 29, 66, 0.25);
}
.jc-label {
  font-size: max(11px, calc(var(--u) * 0.64));
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red-ink);
}
.journey-card h3 {
  font-family: var(--serif);
  font-size: calc(var(--u) * 1.6);
  font-weight: 700;
  line-height: 1.16;
  color: var(--ink);
  margin: 8px 0 calc(var(--u) * 0.7);
}
.journey-card p { font-size: max(14px, calc(var(--u) * 1)); line-height: 1.55; color: var(--ink-2); }
.jc-foot {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-self: end;
  margin-top: calc(var(--u) * 1.3);
  padding-top: calc(var(--u) * 1);
  border-top: 1px solid #E3E9F2;
}
.jc-foot span { font-size: max(11px, calc(var(--u) * 0.6)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.jc-foot b { font-size: max(13.5px, calc(var(--u) * 0.94)); color: var(--flag-navy); }

/* =========================================================
   SLIDE 4 · WEBSITE CONCEPT (dark)
   ========================================================= */
.website-split { grid-template-columns: 0.86fr 1.14fr; }
.notes { display: grid; gap: calc(var(--u) * 1.05); margin-top: calc(var(--u) * 1.8); }
.notes li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--u) * 0.95);
  align-items: start;
  padding: calc(var(--u) * 1.15) calc(var(--u) * 1.3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-dark);
}
.notes .num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 158, 173, 0.6);
  letter-spacing: 0.04em;
}
.notes b { display: block; font-size: max(15px, calc(var(--u) * 1.12)); color: var(--snow); margin-bottom: 4px; }
.notes p { font-size: max(13.5px, calc(var(--u) * 0.95)); line-height: 1.5; color: var(--snow-2); }

.site-browser {
  --view-h: clamp(300px, 42vh, 440px);
  width: min(100%, calc(var(--view-h) * 1.873));
  justify-self: center;
}
.site-view { height: var(--view-h); }
.site-browser figcaption {
  padding: 12px 16px;
  background: #0B1D40;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: max(11px, calc(var(--u) * 0.6));
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--snow-2);
  text-align: center;
}

/* =========================================================
   SLIDE 5 · PROOF (light)
   ========================================================= */
.compare { display: flex; justify-content: center; gap: calc(var(--u) * 2); }
.case { --view-h: clamp(280px, 38vh, 400px); width: calc(var(--view-h) * 1.6); }
.case-view { height: var(--view-h); aspect-ratio: 16 / 10; }
.case-view img.trim-edge { transform: scale(1.02); transform-origin: left top; }
.case .url { font-family: var(--sans); font-weight: 600; letter-spacing: 0.04em; }
.bar-tag.before { background: #E3E8F0; color: var(--ink-2); }
.bar-tag.after { background: var(--night); color: #FFFFFF; }
.case figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-size: max(13px, calc(var(--u) * 0.8));
  color: var(--ink-2);
}
.case figcaption b {
  font-size: max(11px, calc(var(--u) * 0.6));
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red-ink);
}

/* =========================================================
   SLIDE 6 · ROADMAP (dark)
   ========================================================= */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 18px;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--flag-red) 0%, var(--ice) 45%, rgba(185, 211, 255, 0.25) 100%);
}
.timeline li { position: relative; display: flex; flex-direction: column; gap: 2px; }
.timeline li::before {
  content: '';
  position: absolute;
  top: -17px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--night);
  border: 2px solid var(--red-light);
}
.timeline li:last-child { align-items: flex-end; text-align: right; }
.timeline li:last-child::before { left: auto; right: 0; }
.timeline b { font-size: max(13px, calc(var(--u) * 0.8)); color: var(--snow); letter-spacing: 0.04em; }
.timeline span { font-size: max(11px, calc(var(--u) * 0.6)); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--snow-2); }

.phase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: calc(var(--u) * 1.5); row-gap: 0; }
.phase {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
  padding: calc(var(--u) * 1.7) calc(var(--u) * 1.8);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--line-dark);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
}
.phase.featured {
  background: linear-gradient(165deg, #173A7C 0%, var(--night-card) 70%);
  border-color: rgba(185, 211, 255, 0.55);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45), inset 0 3px 0 var(--flag-red);
}
.phase-top { display: flex; align-items: center; justify-content: space-between; }
.phase-num { font-family: var(--serif); font-size: calc(var(--u) * 2.3); font-weight: 700; line-height: 1; color: var(--red-light); }
.phase-days {
  font-size: max(11px, calc(var(--u) * 0.64));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(185, 211, 255, 0.45);
  color: var(--ice);
}
.phase h3 { font-family: var(--serif); font-size: calc(var(--u) * 1.7); font-weight: 700; color: var(--snow); margin: calc(var(--u) * 0.8) 0 6px; }
.phase > p { font-size: max(14px, calc(var(--u) * 1)); line-height: 1.55; color: var(--snow-2); }
.checks { display: grid; gap: 10px; align-content: start; margin-top: calc(var(--u) * 1.1); padding-top: calc(var(--u) * 1.1); border-top: 1px solid var(--line-dark); }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: max(13.5px, calc(var(--u) * 0.92)); line-height: 1.45; color: #E6ECF7; }
.checks .ico { color: var(--red-light); stroke-width: 2.4; margin-top: 0.15em; }

/* =========================================================
   SLIDE 7 · PARTNER (light)
   ========================================================= */
.close-split { grid-template-columns: 1.08fr 0.92fr; }
.partner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--u) * 1.4);
  align-items: start;
  margin-top: calc(var(--u) * 1.8);
  padding: calc(var(--u) * 1.7) calc(var(--u) * 1.8);
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(10, 27, 61, 0.1);
}
.partner-photo {
  width: clamp(112px, calc(var(--u) * 7), 140px);
  height: clamp(112px, calc(var(--u) * 7), 140px);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 3px var(--flag-navy), 0 14px 30px rgba(10, 27, 61, 0.22);
}
.partner-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; opacity: 1; filter: none; }
.partner-kicker { font-size: max(11px, calc(var(--u) * 0.62)); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--red-ink); }
.partner-name { font-family: var(--serif); font-size: calc(var(--u) * 1.75); font-weight: 700; line-height: 1.1; color: var(--ink); margin-top: 4px; }
.partner-role { display: block; margin-top: 3px; font-size: max(13.5px, calc(var(--u) * 0.82)); font-weight: 600; color: var(--ink-2); }
.partner-quote {
  margin-top: calc(var(--u) * 0.8);
  padding-left: 14px;
  border-left: 3px solid var(--flag-red);
  font-family: var(--serif);
  font-size: max(15px, calc(var(--u) * 1.06));
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.partner-contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: calc(var(--u) * 0.9); }
.partner-contact li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: max(12.5px, calc(var(--u) * 0.74));
  font-weight: 600;
  color: var(--ink);
}
.partner-contact .ico { color: var(--flag-navy); }

.request {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.85);
  padding: calc(var(--u) * 2) calc(var(--u) * 2.1);
  border-radius: 22px;
  background: linear-gradient(165deg, #12306A 0%, var(--night) 55%, var(--night-2) 100%);
  border-top: 5px solid var(--flag-red);
  box-shadow: 0 30px 70px rgba(10, 27, 61, 0.35);
  color: var(--snow);
}
.request .kicker { color: var(--ice); margin-bottom: 0; }
.request .kicker .ico { color: var(--red-light); }
.request h3 { font-family: var(--serif); font-size: calc(var(--u) * 2.2); font-weight: 700; line-height: 1.05; color: var(--snow); }
.request > p { font-size: max(14px, calc(var(--u) * 0.88)); line-height: 1.5; color: var(--snow-2); }
.screen-request { display: flex; flex-direction: column; gap: calc(var(--u) * 0.7); }
.suggestions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.suggestions button {
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--snow);
  font-size: max(13px, calc(var(--u) * 0.76));
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.suggestions button:hover,
.suggestions button[aria-pressed="true"] { background: #FFFFFF; border-color: #FFFFFF; color: var(--night); }
.picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.picker-col { display: flex; flex-direction: column; gap: 6px; }
.request label { font-size: max(11px, calc(var(--u) * 0.62)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--snow-2); }
.date-control { position: relative; display: flex; align-items: center; }
.request input {
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 6px 46px 6px 12px;
  border-radius: 12px;
  background: #081733;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--snow);
  font-size: 15px;
  color-scheme: dark;
}
.request input::-webkit-calendar-picker-indicator { display: none; }
.date-control button {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--ice);
  cursor: pointer;
  font-size: 18px;
}
#picker-help { font-size: 13px; color: var(--ice); }
a#contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #A80F2E;
  color: #FFFFFF;
  font-size: max(14px, calc(var(--u) * 0.86));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(168, 15, 46, 0.4);
  transition: transform 0.15s ease, background 0.15s ease;
}
a#contact:hover { background: #8F0C27; transform: translateY(-1px); }
.request small { font-size: max(12px, calc(var(--u) * 0.68)); line-height: 1.45; color: var(--snow-2); }
.print-contact { display: none; }

/* ---------- Presentation controls ---------- */
.controls {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(7, 21, 52, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 32px rgba(2, 8, 24, 0.4);
  color: #FFFFFF;
}
.controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}
.controls button:hover { background: rgba(255, 255, 255, 0.12); }
#counter { min-width: 52px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
#play {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0 999px 999px 0;
  padding: 0 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ice);
  white-space: nowrap;
}
.controls button:focus-visible, a:focus-visible, input:focus-visible, .suggestions button:focus-visible, .date-control button:focus-visible {
  outline: 3px solid var(--flag-red);
  outline-offset: 2px;
}

/* =========================================================
   STAGE MODE · desktop & laptop (fixed 16:9-style slides)
   ========================================================= */
@media screen and (min-width: 1024px) and (min-height: 600px) {
  html, body { height: 100%; overflow: hidden; }
  #deck, .deck { height: 100vh; height: 100dvh; }
  .slide { height: 100%; }
  .slide.active:not(.cover) {
    padding: calc(var(--u) * 1.5) var(--pad-x) 14px;
    row-gap: calc(var(--u) * 1.2);
  }
  .slide.cover.active { padding: 0; }
}

/* =========================================================
   FLOW MODE · tablets, phones, short windows (scrolling slides)
   ========================================================= */
@media screen and (max-width: 1023px), screen and (max-height: 599px) {
  :root { --u: clamp(12.5px, 1.4vw + 6px, 16px); --pad-x: 20px; }
  .slide.active { min-height: 100vh; min-height: 100svh; padding: 18px var(--pad-x) 84px; row-gap: 22px; }
  .slide.cover.active { display: block; padding: 0; background: var(--night-2); }
  .cover-stage { padding-bottom: 64px; }
  .browser-bar .dots { display: none; }
  .slide-head { flex-wrap: wrap; row-gap: 10px; }
  .logo-plate { height: 64px; min-height: 0; padding: 7px 14px 11px; }
  .head-meta { white-space: normal; }
  .split, .website-split, .close-split, .head-row { grid-template-columns: 1fr; row-gap: 22px; }
  .journey-grid, .phase-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; }
  .journey-card, .phase { grid-row: auto; grid-template-rows: none; }
  .fact-chips, .brand-badges { grid-template-columns: 1fr; }
  h2 { font-size: clamp(28px, 6.4vw, 40px); }
  .cover h1 { font-size: clamp(32px, 7.6vw, 52px); }
  .cover-copy { padding: 28px var(--pad-x) 32px; }
  .cover-logo { height: auto; width: min(100%, 360px); min-height: 0; }
  .cover-stage { min-height: 0; }
  .stage-inner { padding: 28px var(--pad-x) 32px; }
  .stage-facts { grid-template-columns: 1fr; }
  .cover > .page { display: none; }
  .brand-card-plate img { width: min(100%, 360px); }
  .compare { flex-direction: column; align-items: stretch; }
  .case { width: 100%; }
  .case-view { height: auto; }
  .site-browser { width: 100%; }
  .site-view { height: auto; aspect-ratio: 1536 / 820; }
  .timeline { display: none; }
  .slide-foot { flex-wrap: wrap; }
  .slide-foot > span:first-child { max-width: none; }
  .partner { grid-template-columns: 1fr; }
  .jc-num, .phase-num { font-size: 36px; }
  .jc-icon { font-size: 24px; }
  .pillar-icon { font-size: 22px; }
}
@media screen and (max-width: 560px) {
  .brand-text small { letter-spacing: 0.1em; }
  .brand-facts { grid-template-columns: 1fr; }
  .brand-facts > div:nth-child(odd) { border-right: 0; }
  .suggestions, .picker-grid { grid-template-columns: 1fr; }
  .fact-chips li { font-size: 13px; }
  .case figcaption { flex-direction: column; align-items: flex-start; gap: 4px; }
  #play { padding: 0 10px; letter-spacing: 0.08em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Print: every slide on its own landscape page ---------- */
@media print {
  @page { size: 13.333in 7.5in; margin: 0; }
  html, body { background: #FFFFFF; height: auto; overflow: visible; }
  #deck, .deck { height: auto; overflow: visible; }
  .slide, .slide.cover {
    display: grid !important;
    width: 13.333in;
    height: 7.5in;
    padding: 0.35in 0.5in 0.25in;
    break-after: page;
    --u: 0.128in;
  }
  .slide:not(.cover) { grid-template-rows: auto minmax(0, 1fr) auto; }
  .slide.cover { grid-template-columns: 1.04fr 0.96fr; padding: 0; }
  .controls, #scene, .screen-request { display: none !important; }
  .cover-stage .ribbon-fallback { display: block !important; }
  .print-contact { display: block; margin-top: 12px; font-size: 13px; color: var(--snow); }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}