/* 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;

  /* Fluid reading scale. Substantive body copy stays 18–22px at 1600,
     20–24px on ultrawide and 16px+ at 1366 without shrinking card space. */
  --body: clamp(16px, 1.05vw + 3.4px, 21px);
  --body-sm: clamp(15px, 0.72vw + 4.6px, 18px);
  --label: clamp(12.5px, 0.8vw + 1.6px, 14px);
  --micro: clamp(11.5px, 0.45vw + 3.6px, 12.5px);
}

*, *::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%);
  background-color: var(--paper);
  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%);
  background-color: var(--night-2);
  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% - 190px); }

.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: var(--body);
  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;
}

/* Grounded cover demo and complete staged homepage proposal. */
.request-demo { width: 100%; padding: calc(var(--u) * 1.8); border: 1px solid #D6DEEA; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 22px 60px rgba(2,8,24,.28); }
.demo-kicker { font-size: max(11px,calc(var(--u) * .62)); letter-spacing: .14em; font-weight: 700; text-transform: uppercase; color: var(--red-ink); }
.demo-heading h2 { font-size: calc(var(--u) * 2.2); line-height: 1.08; margin: 8px 0 10px; }
.demo-heading h2 em { color: var(--red-display); }
.demo-heading p { color: var(--ink-2); font-size: max(14px,calc(var(--u) * .86)); line-height: 1.5; }
.demo-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: calc(var(--u) * 1.2) 0; }
.demo-choices button { display: flex; align-items: flex-start; flex-direction: column; gap: 8px; min-height: 80px; padding: 14px 12px; text-align: left; border: 1px solid #C3CFDE; border-radius: 12px; background: #F6F8FB; color: var(--ink); cursor: pointer; }
.demo-choices button.selected { border: 2px solid var(--flag-navy); padding: 13px 11px; background: #E8EFF9; }
.demo-choices button > span { font-size: max(13px,calc(var(--u) * .8)); font-weight: 700; }
.demo-choices button b { display: block; margin-top: 5px; color: var(--ink-2); font-size: max(11px,calc(var(--u) * .64)); line-height: 1.35; font-weight: 500; }
.demo-choices .ico { width: 27px; height: 27px; color: var(--flag-navy); }
.demo-detail { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.demo-detail > span { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.demo-detail h3 { font-size: max(17px,calc(var(--u) * 1.1)); margin: 7px 0; color: var(--ink); }
.demo-detail p { font-size: max(13px,calc(var(--u) * .8)); line-height: 1.5; color: var(--ink-2); min-height: 3em; }
.demo-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.demo-fields span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; color: var(--ink-2); }
.demo-view-design { display: inline-flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 46px; margin: 16px 0 10px; border: 0; border-radius: 9px; background: var(--red-ink); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.request-demo > small { display: block; color: var(--ink-2); font-size: 11px; line-height: 1.4; }
.proposal-board { width: min(100%,calc(var(--u) * 57)); justify-self: center; border: 1px solid #C7D3E4; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(2,8,24,.28); color: var(--ink); }
.proposal-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--ink-2); }
.proposal-heading span { font-weight: 700; color: var(--red-ink); text-transform: uppercase; letter-spacing: .08em; }
.proposal-image-home img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.proposal-board figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 14px; background: #fff; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-2); }
.proposal-board figcaption button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 1px solid #C3CFDE; border-radius: 8px; background: #F6F8FB; color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; }
.design-dialog { width: min(96vw,1580px); max-width: none; max-height: 94dvh; padding: 0; border: 1px solid #D6DEEA; border-radius: 14px; background: #fff; color: var(--ink); overflow: hidden; }
.design-dialog::backdrop { background: rgba(2,8,24,.8); }
.design-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.design-dialog-head b { display: block; font-size: 15px; }
.design-dialog-head span { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.design-dialog-head button { display: inline-flex; align-items: center; gap: 10px; min-width: 80px; min-height: 44px; border: 1px solid #C3CFDE; border-radius: 8px; background: #F6F8FB; color: var(--ink); cursor: pointer; }
.design-dialog-head button span { margin: 0; font-size: 20px; }
.design-scroll { max-height: calc(94dvh - 86px); overflow: auto; overscroll-behavior: contain; background: #EDF1F7; }
.design-scroll img { width: 1536px; height: 1024px; max-width: none; object-fit: contain; }

/* =========================================================
   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%);
  background-color: #FFFFFF;
}
.cover-logo {
  mix-blend-mode: multiply;
  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: var(--body); 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 { mix-blend-mode: multiply; 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.56fr 1.44fr; gap: calc(var(--u) * 2); }
.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, 41.5vh, 460px); 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); }
.partner-contact a { color: inherit; text-decoration: none; }
.partner-contact a:hover { text-decoration: underline; }

.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%);
  background-color: var(--night);
  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, .controls .download-deck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}
.controls button:hover, .controls .download-deck:hover { background: rgba(255, 255, 255, 0.12); }
.controls .download-deck { text-decoration: none; font-size: 12px; font-weight: 700; padding: 0 14px; }
#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; }
  html, body { height: 100%; overflow: hidden; }
  #deck, .deck { height: calc(100dvh - 74px); overflow-y: auto; overscroll-behavior-y: contain; }
  .slide.active { min-height: 100%; padding: 18px var(--pad-x) 28px; row-gap: 22px; }
  .controls { bottom: 10px; width: calc(100% - 24px); max-width: 450px; justify-content: center; gap: 0; padding: 4px; }
  .controls .download-deck { padding: 0 10px; }
  .partner-contact li { padding: 0 12px; }
  .partner-contact a { display: inline-flex; align-items: center; min-height: 44px; }
  .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%; }
  .request-demo { padding: 20px; }
  .demo-heading h2 { font-size: 28px; }
  .demo-choices { grid-template-columns: 1fr; margin: 18px 0; }
  .demo-choices button { flex-direction: row; align-items: center; min-height: 64px; }
  .demo-choices button > span { font-size: 14px; }
  .demo-choices button b { margin-top: 3px; font-size: 12px; }
  .demo-detail h3 { font-size: 18px; }
  .demo-detail p { font-size: 14px; }
  .proposal-board { width: 100%; }
  .proposal-heading { flex-wrap: wrap; }
  .proposal-board figcaption { align-items: stretch; flex-direction: column; gap: 8px; padding: 12px; }
  .proposal-board figcaption button { justify-content: center; }
  .date-control button { width: 44px; height: 44px; }
  .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; }
}

/* === Brandcore Official Co-Branding & Sign-off Lockups === */
.cover-collab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 13px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  width: fit-content;
  max-width: 100%;
}
.cover-collab--light {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.14);
}
.brandcore-badge-logo {
  height: 18px;
  width: auto;
  display: block;
  object-fit: contain;
}
.cover-collab-sep {
  font-size: 12px;
  opacity: 0.55;
  line-height: 1;
}
.cover-collab-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.88;
}
.partner-brand-signoff {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  width: 100%;
}
.partner-brand-signoff--light {
  border-top-color: rgba(15, 23, 42, 0.14);
}
.signoff-brandcore-logo {
  height: 22px;
  width: auto;
  display: block;
  object-fit: contain;
}
.signoff-brandcore-meta {
  font-size: 11px;
  opacity: 0.72;
  letter-spacing: 0.02em;
}

/* =========================================================================
   2026-10-31 · Readability pass, logo-led 3D cover, audit and live concept
   ========================================================================= */

/* Fluid reading sizes (see --body / --label tokens in :root). */
.kicker, .num, .brand-text small, .head-meta, .slide-foot, .page, .bar-tag,
.partner-kicker, .jc-label, .jc-foot span, .phase-days, .timeline span, .jc-tag,
.stage-caption-label, .finding-tag, .site-panel-kicker, .concept-note {
  font-size: var(--label);
}
.fact-chips li { font-size: var(--label); }
.pillar p, .journey-card p, .phase > p, .notes p, .notes b, .checks li,
.brand-facts dd, .partner-role, .request > p, .jc-foot b, .partner-quote {
  font-size: var(--body);
}
.request > p { font-size: var(--body-sm); }
.request small, .quote-note, .site-panel p, .site-hero p, .audit-shot figcaption,
.partner-brand-signoff .signoff-brandcore-meta { font-size: var(--body-sm); }
.audit-shot figcaption, .signoff-brandcore-meta, .site-trust, .site-trust li,
.site-panel-list li, .site-media-tag, .site-eyebrow, .quote-note { font-size: var(--micro); }
.url { font-size: var(--micro); }

/* Co-brand chip on the white cover column. */
.cover-collab--light { background: rgba(11, 58, 128, 0.05); border-color: rgba(11, 58, 128, 0.16); }
.cover-collab--light .cover-collab-label { color: var(--ink); opacity: 1; font-weight: 700; letter-spacing: 0.07em; }
.cover-collab--light .cover-collab-sep { color: var(--ink-2); opacity: 0.7; }
.cover-collab-label { font-size: var(--micro); }
.cover-collab .brandcore-badge-logo { height: 20px; }

/* Partner sign-off lockup keeps its dark plate on the white card. */
.partner-brand-signoff {
  background: #0B1220;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #F8FAFC;
}
.signoff-brandcore-meta { color: rgba(248, 250, 252, 0.82); opacity: 1; }

/* ---------- Cover stage: dimensional glass + authentic mark ---------- */
#scene { touch-action: none; }
.cover-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.cover-stage.webgl-on .cover-fallback { display: none; }
.fb-halo {
  position: absolute;
  inset: -10%;
  background: radial-gradient(48% 40% at 54% 44%, rgba(148, 190, 255, 0.35) 0%, rgba(148, 190, 255, 0) 70%);
}
.fb-ribbon {
  position: absolute;
  left: -25%;
  right: -25%;
  height: 14%;
  border-radius: 999px;
  transform: rotate(-9deg);
  filter: blur(0.4px);
}
.fb-ribbon-a {
  top: 16%;
  background: linear-gradient(90deg, rgba(232, 16, 60, 0) 0%, #E8103C 18%, #F5F8FF 52%, #2F62C6 84%, rgba(47, 98, 198, 0) 100%);
  opacity: 0.55;
}
.fb-ribbon-b {
  bottom: 12%;
  background: linear-gradient(90deg, rgba(47, 98, 198, 0) 0%, #2F62C6 22%, #E8103C 62%, rgba(232, 16, 60, 0) 100%);
  opacity: 0.4;
}
.fb-glass {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(76%, 560px);
  aspect-ratio: 1.44;
  border-radius: 26px 26px 34px 34px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.5) 0%, rgba(185, 211, 255, 0.16) 42%, rgba(255, 255, 255, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 44px 90px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
}
.fb-glass::after {
  content: '';
  position: absolute;
  inset: 8% 6% 52% 6%;
  border-radius: 18px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 62%);
}
.fb-glass img {
  position: relative;
  z-index: 1;
  width: 78%;
  height: auto;
  padding: 10px 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(2, 8, 24, 0.35);
}
.stage-caption {
  position: absolute;
  z-index: 2;
  left: calc(var(--u) * 1.6);
  top: calc(var(--u) * 1.4);
  right: calc(var(--u) * 10);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.stage-caption-label {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(7, 21, 52, 0.72);
  border: 1px solid rgba(185, 211, 255, 0.32);
  color: var(--ice);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.stage-caption-list { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-caption-list li {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(7, 21, 52, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #EAF1FE;
  font-weight: 600;
  font-size: var(--micro);
  letter-spacing: 0.02em;
}
.hint-move {
  position: absolute;
  top: calc(var(--u) * 1.55);
  right: calc(var(--u) * 1.6);
  z-index: 2;
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(234, 241, 254, 0.6);
  transition: opacity 0.4s ease;
  white-space: nowrap;
}
.hint-move.is-used { opacity: 0; }

/* Glass shatter overlay for the cover → next signature transition. */
.glass-boom {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
}
.glass-boom.is-live { display: block; }

/* ---------- Slide 03 · public-site audit ---------- */
.audit-body { row-gap: calc(var(--u) * 1.5); }
.audit-grid {
  display: grid;
  grid-template-columns: 1.16fr 0.84fr;
  align-items: stretch;
  gap: calc(var(--u) * 1.8);
  min-height: 0;
}
.audit-findings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: calc(var(--u) * 0.7);
}
.finding {
  padding: calc(var(--u) * 0.62) calc(var(--u) * 0.8);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid var(--red-light);
}
.finding-tag {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ice);
}
.finding h3 {
  font-family: var(--serif);
  font-size: calc(var(--u) * 1.02);
  line-height: 1.14;
  color: var(--snow);
  margin-bottom: 4px;
}
.finding p { font-size: var(--body-sm); line-height: 1.45; color: var(--snow-2); }
.audit-shot { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.audit-shot .browser { flex: 1; min-height: 0; }
.audit-view { flex: 1; min-height: 0; }
.audit-view img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.audit-shot figcaption { display: flex; flex-direction: column; gap: 2px; color: var(--snow-2); }
.audit-shot figcaption b { color: var(--snow); font-size: var(--label); }

/* ---------- Slide 05 · live website concept ---------- */
.website-split { grid-template-columns: 0.82fr 1.18fr; align-items: center; }
.concept-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: calc(var(--u) * 1.2);
  color: var(--ice);
  font-weight: 600;
}
.concept-note .ico { color: #7EE2A8; }
.concept-stage { position: relative; min-width: 0; }
.site-browser {
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 26px 64px rgba(2, 8, 24, 0.55);
}
.site-shell { padding: 12px 14px 14px; background: #FFFFFF; color: #0A1B3D; }
.site-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid #E2E8F1;
}
.site-logo { height: 30px; width: auto; }
.site-nav { display: flex; gap: 1px; margin-left: auto; }
.site-tab {
  border: 0;
  background: transparent;
  padding: 6px 7px;
  border-radius: 6px;
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #33415C;
  cursor: pointer;
  white-space: nowrap;
}
.site-tab:hover { background: #EEF3FA; }
.site-tab.is-active { background: #0B3A80; color: #fff; }
.site-quote {
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  background: #B8102E;
  color: #fff;
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}
.site-quote:hover { background: #950C25; }
.site-hero {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 12px;
  padding: 12px 0;
}
.site-eyebrow {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8C0F27;
}
.site-hero h3 {
  font-family: var(--serif);
  font-size: calc(var(--u) * 1.9);
  line-height: 1.03;
  letter-spacing: -0.01em;
  margin: 4px 0 5px;
  color: #0B3A80;
}
.site-hero h3 em { display: block; font-style: normal; color: #B8102E; }
.site-hero p { line-height: 1.42; color: #33415C; }
.site-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.site-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 5px;
  padding: 7px 10px;
  font-size: var(--micro);
  font-weight: 700;
}
.site-btn-red { border: 0; background: #B8102E; color: #fff; cursor: pointer; }
.site-btn-ghost { border: 1px solid #0B3A80; color: #0B3A80; }
.site-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; color: #0B3A80; font-weight: 600; }
.site-trust li::before { content: '\2713'; margin-right: 4px; color: #167A3C; }
.site-hero-media { position: relative; min-height: 132px; border-radius: 8px; overflow: hidden; background: #DCE6F3; }
.site-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.site-media-tag {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 4px 7px;
  border-radius: 4px;
  background: rgba(7, 21, 52, 0.84);
  color: #fff;
  font-weight: 600;
}
.site-panel {
  display: grid;
  grid-template-columns: 1.42fr 0.58fr;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid #E2E8F1;
  align-items: stretch;
}
.site-panel-copy h4 {
  font-family: var(--serif);
  font-size: calc(var(--u) * 1.2);
  line-height: 1.1;
  color: #0B3A80;
  margin: 2px 0 3px;
}
.site-panel-kicker { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8C0F27; }
.site-panel p { line-height: 1.44; color: #33415C; }
.site-panel-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.site-panel-list li {
  padding: 4px 8px;
  border-radius: 999px;
  background: #EDF2F9;
  color: #0B3A80;
  font-weight: 600;
}
.site-panel-img { width: 100%; height: 100%; min-height: 96px; object-fit: cover; border-radius: 7px; }
.site-phone {
  position: absolute;
  right: -8px;
  bottom: -22px;
  z-index: 3;
  width: 146px;
  padding: 11px 11px 10px;
  border-radius: 22px;
  background: linear-gradient(180deg, #0F2752 0%, #071534 100%);
  border: 5px solid #0A1B3D;
  box-shadow: 0 22px 44px rgba(2, 8, 24, 0.6);
  color: #EAF1FE;
  text-align: left;
}
.phone-notch {
  width: 42px;
  height: 4px;
  margin: 0 auto 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}
.phone-logo { height: 20px; width: auto; padding: 3px 4px; background: #fff; border-radius: 3px; }
.phone-eyebrow {
  display: block;
  margin-top: 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B9D3FF;
}
.site-phone strong {
  display: block;
  margin-top: 3px;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.1;
  color: #fff;
}
.site-phone p { margin-top: 3px; font-size: 10px; line-height: 1.35; color: #D3DCEC; }
.phone-btn {
  display: block;
  margin-top: 7px;
  padding: 6px 4px;
  border-radius: 4px;
  background: #C4102F;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  text-align: center;
}
.phone-call { display: block; margin-top: 5px; font-size: 9px; font-weight: 600; color: #B9D3FF; text-align: center; }

/* Quote card inside the concept */
.quote-card {
  position: absolute;
  z-index: 6;
  top: 6%;
  right: 4%;
  width: min(330px, 92%);
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #D6DEEA;
  box-shadow: 0 30px 70px rgba(2, 8, 24, 0.55);
  color: #0A1B3D;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.quote-card.is-open { opacity: 1; transform: none; pointer-events: auto; }
.quote-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #E2E8F1;
  font-size: var(--label);
}
.quote-head button {
  width: 30px;
  height: 30px;
  border: 1px solid #D6DEEA;
  border-radius: 6px;
  background: #F6F8FB;
  color: #0A1B3D;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.quote-body { display: grid; gap: 9px; padding: 11px 12px 12px; }
.quote-field { display: grid; gap: 4px; }
.quote-field > span { font-size: var(--micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #33415C; }
.quote-field input {
  width: 100%;
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid #C3CFDE;
  border-radius: 6px;
  background: #fff;
  color: #0A1B3D;
  font-size: var(--body-sm);
}
.quote-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.quote-chips button {
  border: 1px solid #C3CFDE;
  border-radius: 999px;
  padding: 5px 9px;
  background: #F6F8FB;
  color: #33415C;
  font-size: var(--micro);
  font-weight: 600;
  cursor: pointer;
}
.quote-chips button.is-on { background: #0B3A80; border-color: #0B3A80; color: #fff; }
.quote-submit {
  border: 0;
  border-radius: 6px;
  background: #B8102E;
  color: #fff;
  font-size: var(--label);
  font-weight: 700;
  padding: 10px;
  cursor: pointer;
}
.quote-note { line-height: 1.4; color: #33415C; }
.quote-note.is-done { color: #0B3A80; font-weight: 600; }

/* ---------- Responsive additions ---------- */
@media screen and (max-width: 1023px), screen and (max-height: 599px) {
  .audit-grid { grid-template-columns: 1fr; gap: 18px; }
  .audit-findings { grid-template-columns: 1fr; }
  .audit-shot { order: -1; }
  .audit-view { height: 260px; }
  .audit-view img { height: 260px; }
  .website-split { grid-template-columns: 1fr; }
  .concept-stage { margin-bottom: 20px; }
  .site-top { flex-wrap: wrap; }
  .site-nav { margin-left: 0; order: 3; width: 100%; flex-wrap: wrap; }
  .site-quote { margin-left: auto; }
  .site-hero { grid-template-columns: 1fr; }
  .site-hero-media { min-height: 200px; }
  .site-panel { grid-template-columns: 1fr; }
  .site-panel-img { min-height: 150px; max-height: 190px; }
  .site-phone { position: relative; right: auto; bottom: auto; width: 152px; margin: 14px auto 0; }
  .quote-card { top: 24px; right: 10px; left: 10px; width: auto; }
}
@media screen and (max-width: 560px) {
  .site-nav { gap: 0; }
  .site-tab { padding: 5px 6px; }
  .site-logo { height: 26px; }
  .audit-view, .audit-view img { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .hint-move { display: none; }
  .glass-boom { display: none !important; }
}

/* Contact tab uses a small location card rather than a fifth photograph. */
.site-map {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 96px;
  padding: 10px;
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(11, 58, 128, 0.08) 0%, rgba(11, 58, 128, 0.02) 60%),
    repeating-linear-gradient(0deg, #E4ECF6 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, #E4ECF6 0 1px, transparent 1px 18px),
    #F4F8FD;
  border: 1px solid #D6DEEA;
  color: #0B3A80;
}
.site-map[hidden] { display: none; }
.site-map .ico { width: 18px; height: 18px; color: #B8102E; }
.site-map b { font-size: var(--micro); }
.site-map span { font-size: var(--micro); color: #33415C; }
.site-map-row { margin-top: 3px; padding-top: 3px; border-top: 1px dashed #C3CFDE; }
.phone-eyebrow { font-size: 10px; }
.site-phone strong { font-size: 16px; }
.site-phone p { font-size: 11px; line-height: 1.4; }
.phone-btn { font-size: 10.5px; padding: 7px 4px; }
.phone-call { font-size: 10px; }

/* Phone/tablet cover: the dimensional mark leads, the flat logo steps aside. */
@media screen and (max-width: 1023px), screen and (max-height: 599px) {
  .slide.cover.active { display: flex; flex-direction: column; }
  .cover-stage { order: -1; min-height: clamp(330px, 54vw, 470px); }
  .cover-logo { display: none; }
  .cover-copy { padding-top: 18px; }
  .stage-caption { left: 16px; right: 16px; top: 14px; }
  .stage-caption-list li { font-size: 11.5px; padding: 4px 9px; }
  .hint-move { display: none; }
}
@media screen and (max-width: 1023px) {
  .site-browser { min-width: 0; }
  .site-top { flex-wrap: wrap; }
  .site-nav { margin-left: 0; order: 3; width: 100%; flex-wrap: wrap; }
  .site-quote { margin-left: auto; }
}
@media screen and (max-width: 1500px) and (min-width: 1024px) {
  .site-tab { font-size: 11px; padding: 5px 5px; }
  .site-quote { font-size: 11px; padding: 7px 9px; }
  .site-logo { height: 26px; }
  .concept-stage { min-width: 0; }
  .site-browser { min-width: 0; }
}
@media screen and (max-width: 1500px) and (min-width: 1024px) {
  .site-top { flex-wrap: wrap; row-gap: 6px; }
  .site-nav { flex-wrap: wrap; }
}
@media screen and (max-width: 1500px) and (min-width: 1024px) {
  .site-top { flex-wrap: nowrap; }
  .site-nav { flex-wrap: nowrap; }
  .site-hero { padding: 9px 0; gap: 9px; }
  .site-hero h3 { font-size: calc(var(--u) * 1.62); }
  .site-hero p { font-size: 15px; line-height: 1.36; }
  .site-hero-media { min-height: 112px; }
  .site-shell { padding: 10px 11px 11px; }
  .site-top { padding-bottom: 7px; }
  .site-panel { padding-top: 8px; }
  .site-panel p { font-size: 15px; line-height: 1.38; }
  .site-panel-img { min-height: 78px; }
  .site-panel-copy h4 { font-size: calc(var(--u) * 1.1); }
  .site-phone { width: 116px; right: 8px; bottom: 8px; padding: 8px 8px 7px; }
  .site-phone strong { font-size: 13px; }
  .site-phone p { font-size: 9.5px; }
  .phone-eyebrow, .phone-btn, .phone-call { font-size: 9px; }
  .concept-note { margin-top: 10px; }
}

@media screen and (max-width: 560px) {
  .audit-view, .audit-view img { height: 240px; }
}

/* Wide desktops: the phone mockup stays legible at 100% zoom. */
@media screen and (min-width: 1501px) {
  .site-phone { width: 158px; padding: 12px 12px 11px; }
  .site-phone strong { font-size: 17px; }
  .site-phone p { font-size: 11.5px; }
  .phone-eyebrow { font-size: 10.5px; }
  .phone-btn { font-size: 11px; padding: 8px 4px; }
  .phone-call { font-size: 10.5px; }
}

/* No-WebGL static alternative: soft flag light, no pointer hint. */
.cover-stage:not(.webgl-on) .hint-move { display: none; }
.fb-ribbon { filter: blur(16px); opacity: 0.34; height: 18%; }
.fb-ribbon-a { opacity: 0.4; }
.fb-ribbon-b { opacity: 0.3; }


/* Short laptop heights: keep every card and the kicker inside the fixed slide. */
@media screen and (min-width: 1024px) and (max-height: 820px) {
  h2 { font-size: calc(var(--u) * 2.35); }
  .kicker { margin-bottom: calc(var(--u) * 0.45); }
  .lead { margin-top: calc(var(--u) * 0.5); }
  .slide-body.stack { row-gap: calc(var(--u) * 1.2); }
  .pillars { margin-top: calc(var(--u) * 1.1); gap: calc(var(--u) * 0.65); }
  .pillar { padding: calc(var(--u) * 0.85) calc(var(--u) * 1.1); }
  .timeline { margin: calc(var(--u) * 0.9) 0 calc(var(--u) * 0.5); padding-top: 10px; }
  .phase { padding: calc(var(--u) * 1.1) calc(var(--u) * 1.25); }
  .phase h3 { margin: calc(var(--u) * 0.45) 0 4px; }
  .checks { margin-top: calc(var(--u) * 0.7); padding-top: calc(var(--u) * 0.7); gap: 7px; }
  .notes { gap: calc(var(--u) * 0.7); }
}

@media screen and (min-width: 1024px) and (max-height: 740px) {
  h2 { font-size: calc(var(--u) * 2.18); }
  .phase { padding: calc(var(--u) * 0.92) calc(var(--u) * 1.05); }
  .checks { gap: 5px; }
  .pillars { gap: calc(var(--u) * 0.5); }
}

/* Laptop widths: the desktop mockup carries the concept; the phone returns on
   wide desktops and in the stacked tablet/phone layout. */
@media screen and (min-width: 1024px) and (max-width: 1500px) {
  .site-phone { display: none; }
}

/* =========================================================================
   Windshield-chip BOOM · charge, arrival and shake (cover → next)
   ========================================================================= */
.cover-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(60% 55% at 50% 46%, rgba(255, 255, 255, 0.0) 0%, rgba(214, 234, 255, 0.0) 100%);
  opacity: 0;
  transition: opacity 0.64s cubic-bezier(.5, 0, .9, .4);
}
.cover-stage.is-charging::after {
  opacity: 1;
  background: radial-gradient(60% 55% at 50% 46%, rgba(255, 255, 255, 0.28) 0%, rgba(214, 234, 255, 0.1) 55%, rgba(214, 234, 255, 0) 100%);
}
.cover-stage.is-charging .stage-caption,
.cover-stage.is-charging .hint-move { opacity: 0.25; transition: opacity 0.3s ease; }

@keyframes boom-arrive {
  0%   { opacity: 0; transform: scale(0.94); filter: brightness(1.9) blur(6px); }
  45%  { opacity: 1; filter: brightness(1.25) blur(1px); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes glint-arrive {
  0%   { opacity: 0.15; transform: translateY(16px); }
  100% { opacity: 1; transform: none; }
}
@keyframes deck-shake {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-9px, 5px); }
  26%  { transform: translate(8px, -6px); }
  40%  { transform: translate(-6px, 4px); }
  56%  { transform: translate(5px, -3px); }
  74%  { transform: translate(-2px, 2px); }
  100% { transform: translate(0, 0); }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .slide.active.boom-arrive { animation: boom-arrive 0.76s cubic-bezier(.16, .84, .3, 1) both; }
  .slide.active.glint-arrive { animation: glint-arrive 0.48s cubic-bezier(.22, .61, .36, 1) both; }
  #deck.is-shaking { animation: deck-shake 0.5s linear both; }
}
@media (prefers-reduced-motion: reduce) {
  .cover-stage::after { display: none; }
}

/* =========================================================================
   Slide 06 · draggable before / after (UFG Works redesign)
   ========================================================================= */
.compare-drag { justify-content: center; }
.compare-drag .case { --view-h: clamp(300px, 47vh, 520px); width: min(100%, calc(var(--view-h) * 1.6)); }
.ba-view { --pos: 50%; position: relative; height: var(--view-h); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; pointer-events: none; }
.ba-img.ba-after { clip-path: inset(0 0 0 var(--pos)); }
.ba-label {
  position: absolute;
  top: 12px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  pointer-events: none;
}
.ba-label-before { left: 12px; background: #E3E8F0; color: var(--ink); }
.ba-label-after { right: 12px; background: var(--night); color: #FFFFFF; }
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 3;
  width: 0;
  pointer-events: none;
}
.ba-handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 4px;
  background: linear-gradient(180deg, var(--flag-red) 0 50%, var(--flag-navy) 50% 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 18px rgba(2, 8, 24, 0.35);
}
.ba-handle i {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--flag-navy);
  border: 3px solid var(--flag-navy);
  box-shadow: 0 10px 26px rgba(2, 8, 24, 0.35);
}
.ba-handle .ico { width: 24px; height: 24px; stroke-width: 2.4; }
.ba-range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}
.ba-range:focus-visible + * { outline: none; }
.ba-view:has(.ba-range:focus-visible) { outline: 3px solid var(--flag-red); outline-offset: -3px; }
@media screen and (max-width: 1023px), screen and (max-height: 599px) {
  .compare-drag .case { width: 100%; }
  .ba-view { height: auto; }
}

/* =========================================================================
   FINAL CONSISTENCY OVERRIDES · typography floors & single-shape portrait
   ========================================================================= */

/* 1. Global micro text floor: functional copy and labels remain legible. */
:root { --micro: clamp(13px, 0.8vw + 1.2px, 15px); }

/* 2. Close-slide portrait: one clean circular shape, no navy ring (double
      framing), soft drop shadow only. Preserve the supplied face framing
      (center 18%) from the source photo. */
.partner-photo {
  width: clamp(150px, calc(var(--u) * 8.6), 190px);
  height: clamp(150px, calc(var(--u) * 8.6), 190px);
  border-radius: 50%;
  box-shadow: 0 14px 30px rgba(10, 27, 61, 0.18);
  border: none;
}
.partner-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 50%;
  box-shadow: none;
  border: none;
}

/* 3. Close-slide name spacing: keep the name on the same left alignment line
      as the kicker, role and quote (calm, aligned) with clear breathing room
      below the portrait. */
.partner-name {
  font-size: calc(var(--u) * 1.9);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin-top: calc(var(--u) * 0.9);
  color: var(--ink);
  text-align: left;
}

/* 4. Mobile clarity: text scales up, buttons enlarge, layouts stay clean. */
@media screen and (max-width: 560px) {
  .partner-photo { width: 140px; height: 140px; }
  .partner-name { font-size: 22px; }
  .partner-role, .partner-contact { font-size: 14px; }
  .site-tab { padding: 12px 8px; font-size: 14px; }
}