/* King's Fitness · Brandcore proposal · candidate stylesheet (source pass, not visually verified) */

@font-face { font-family: "Geist"; src: url("assets/fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("assets/fonts/instrument-serif-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("assets/fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --red: #b52025;            /* sampled from the King's Fitness wordmark */
  --red-bright: #e0343b;     /* display red on dark only */
  --red-deep: #8e1a1f;       /* small red text on paper */
  --steel: #5f6063;          /* sampled from FITNESS */
  --chalk: #f7f5f0;
  --ink-dark: #0b0c0e;
  --panel-dark: #15171a;
  --line-dark: rgba(247, 245, 240, 0.16);
  --paper: #eeeae2;
  --panel-paper: #e4dfd4;
  --ink-paper: #111316;
  --line-paper: rgba(17, 19, 22, 0.18);

  --fs-body: clamp(16px, 0.75rem + 0.45vw, 24px);
  --fs-label: clamp(13px, 0.8rem + 0.15vw, 16px);
  --fs-h2: clamp(40px, 3.6vw, 64px);
  --fs-h3: clamp(24px, 1.2rem + 0.6vw, 34px);
  --fs-display: clamp(56px, 7.2vw, 128px);
  --pad-x: clamp(24px, 4.2vw, 84px);
  --chrome-h: 74px;
  --bottom-h: 56px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
  background: var(--ink-dark);
  color: var(--chalk);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 500ms var(--ease), color 500ms var(--ease);
}
body.theme-paper { background: var(--paper); color: var(--ink-paper); }
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 70% 40%, rgba(181, 32, 37, 0.13), transparent 60%);
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, p, ul, ol, figure { margin: 0; }
button { font: inherit; color: inherit; }
em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 80; background: var(--chalk); color: var(--ink-dark); padding: 8px 12px; }
.skip-link:focus { left: 12px; top: 12px; }
.noscript { position: fixed; inset: auto 16px 16px; z-index: 90; background: var(--chalk); color: var(--ink-dark); padding: 12px; }

/* ---------- Cover canvas and flash layers ---------- */
.cover-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
  z-index: 1; pointer-events: none; display: none;
  background: radial-gradient(ellipse at 66% 46%, #26181a 0%, #0b0c0e 58%, #060607 100%);
}
body.cover-live .cover-canvas { display: block; }
body.boom-active .cover-canvas { z-index: 15; }
.cover-canvas.shake { animation: shake 420ms ease-out; }
.boom-flash {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 65% 50%, rgba(255, 255, 255, 0.92) 0%, rgba(224, 52, 59, 0.55) 22%, rgba(181, 32, 37, 0.0) 60%);
}
.boom-flash.is-flash { animation: flashPulse 520ms ease-out both; }
@keyframes flashPulse { 0% { opacity: 0; } 16% { opacity: 0.9; } 100% { opacity: 0; } }

/* ---------- Slides ---------- */
.deck { position: fixed; inset: 0; z-index: 2; }
.deck.shake { animation: shake 420ms ease-out; }
@keyframes shake {
  0% { transform: translate3d(0, 0, 0); }
  12% { transform: translate3d(-7px, 4px, 0); }
  26% { transform: translate3d(6px, -5px, 0); }
  42% { transform: translate3d(-4px, 3px, 0); }
  60% { transform: translate3d(3px, -2px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 420ms var(--ease), visibility 0s linear 420ms;
  background: var(--ink-dark);
}
.slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 420ms var(--ease), visibility 0s; z-index: 3; }
.slide[data-theme="paper"] { background: var(--paper); color: var(--ink-paper); }
.slide.s-cover { background: transparent; }
.slide.s-flagship { background: linear-gradient(180deg, #111316 0%, #0b0c0e 100%); }
.slide.enter-boom { animation: boomIn 760ms var(--ease) both; }
.slide.enter-wipe { animation: wipeIn 620ms var(--ease) both; }
@keyframes boomIn { from { opacity: 0; transform: scale(0.93); filter: brightness(1.5); } to { opacity: 1; transform: none; filter: none; } }
@keyframes wipeIn { from { opacity: 0; transform: translate3d(42px, 0, 0); } to { opacity: 1; transform: none; } }
.seam {
  position: fixed; top: 0; bottom: 0; left: 0; width: 3px; z-index: 35; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--red-bright), var(--chalk), var(--red-bright), transparent);
  box-shadow: 0 0 22px 4px rgba(224, 52, 59, 0.5);
}
.seam.is-sweep { animation: seamSweep 700ms var(--ease) both; }
@keyframes seamSweep { 0% { left: 100%; opacity: 1; } 85% { opacity: 1; } 100% { left: -4px; opacity: 0; } }

.scroll {
  height: 100%; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: calc(var(--chrome-h) + 22px) var(--pad-x) calc(var(--bottom-h) + 24px);
  scrollbar-width: thin; scrollbar-color: rgba(127, 127, 127, 0.5) transparent;
}
.kicker {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--red-bright); margin-bottom: 0.6em;
}
.slide[data-theme="paper"] .kicker { color: var(--red-deep); }
.h2 { font-size: var(--fs-h2); line-height: 0.98; letter-spacing: -0.045em; font-weight: 650; max-width: 22ch; text-wrap: balance; }
.h2 em { font-size: 1.04em; color: var(--red-bright); }
.slide[data-theme="paper"] .h2 em { color: var(--red-deep); }
.support { margin-top: 0.9em; max-width: 62ch; font-size: var(--fs-body); color: #b9b5ad; }
.slide[data-theme="paper"] .support { color: #4b4f55; }
.sec-head { margin-bottom: clamp(18px, 2.6vh, 34px); }

/* ---------- Chrome ---------- */
.chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--chrome-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 var(--pad-x); color: var(--chalk);
  background: transparent;
  transition: color 500ms var(--ease);
}
body.theme-paper .chrome { color: var(--ink-paper); }
.cobrand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cb-brandcore { height: 22px; width: auto; }
.cb-brandcore-paper { display: none; }
body.theme-paper .cb-brandcore-paper { display: block; }
body.theme-paper .cb-brandcore-dark { display: none; }
.cb-x { font-family: "Instrument Serif", Georgia, serif; font-size: 22px; color: var(--red-bright); line-height: 1; }
body.theme-paper .cb-x { color: var(--red-deep); }
.cb-client { height: 24px; width: auto; }
.chrome-label {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: var(--fs-label);
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 40vw;
}
.chrome-right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.counter { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: var(--fs-label); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.chip-btn {
  min-height: 40px; padding: 8px 16px; border-radius: 999px; background: transparent;
  border: 1px solid currentColor; cursor: pointer; font-size: 15px; letter-spacing: 0.04em;
}
.chip-btn:hover { background: rgba(127, 127, 127, 0.14); }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 21; background: rgba(127, 127, 127, 0.2); }
.progress span { display: block; height: 100%; width: 0%; background: var(--red-bright); transition: width 420ms var(--ease); }

/* ---------- Bottom navigation ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--bottom-h); z-index: 20;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 0 var(--pad-x); background: transparent; color: var(--chalk);
}
body.theme-paper .bottom-nav { color: var(--ink-paper); }
.nav-btn {
  min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: transparent; border: 1px solid currentColor; border-radius: 999px;
  cursor: pointer; font-size: 15px; letter-spacing: 0.03em;
}
.nav-btn svg { flex: none; width: 18px; height: 18px; }
.nav-btn:disabled { opacity: 0.35; cursor: default; }
.nav-btn:not(:disabled):hover { background: rgba(127, 127, 127, 0.14); }
.rail { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.rail button {
  width: 28px; height: 28px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.rail button::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.32; transition: transform 260ms var(--ease), opacity 260ms;
}
.rail button[aria-current="true"]::before { opacity: 1; transform: scale(1.6); background: var(--red-bright); }
body.theme-paper .rail button[aria-current="true"]::before { background: var(--red-deep); }

/* ---------- Cover ---------- */
.s-cover .scroll { display: flex; flex-direction: column; }
.cover-copy { position: relative; z-index: 4; max-width: min(46vw, 760px); margin: auto 0; }
.s-cover .display { font-size: var(--fs-display); line-height: 0.86; letter-spacing: -0.06em; font-weight: 650; text-wrap: balance; }
.s-cover .display em { color: var(--red-bright); font-size: 1.02em; letter-spacing: -0.03em; }
.s-cover .lede { margin-top: 0.8em; max-width: 46ch; color: #d4cfc5; font-size: var(--fs-body); }
.ticker { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; list-style: none; padding: 0; }
.ticker li {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: var(--fs-label);
  padding: 8px 12px; border: 1px solid var(--line-dark); border-radius: 4px; color: var(--chalk);
}
.cover-foot { margin-top: 22px; display: grid; gap: 4px; }
.prepared { font-size: var(--fs-body); color: #d4cfc5; }
.prepared strong { color: var(--chalk); font-weight: 600; }
.local { font-size: var(--fs-label); font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; color: #b9b5ad; letter-spacing: 0.03em; }
.cue {
  margin-top: 22px; min-height: 48px; display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 20px; border-radius: 999px; border: 1px solid var(--red-bright); background: rgba(181, 32, 37, 0.18);
  cursor: pointer; font-size: 16px; letter-spacing: 0.02em;
}
.cue svg { width: 18px; height: 18px; }
.cue:hover { background: rgba(181, 32, 37, 0.32); }
.cover-medallion {
  position: absolute; z-index: 3; left: calc(50% + 26.85vh); top: 55%; transform: translate(-50%, -50%);
  width: 51.15vh; aspect-ratio: 1 / 1; pointer-events: none; display: grid; place-items: center;
}
body.cover-live .cover-medallion { opacity: 0; transition: opacity 240ms linear; }
body.cover-webgl-off .cover-medallion,
body.cover-fallback .cover-medallion { opacity: 1; }
.medallion-disc {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #faf8f3 0%, #ece7dc 60%, #d9d2c3 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 clamp(10px, 1.4vw, 22px) #121315;
  display: grid; place-items: center;
}
.medallion-ring { position: absolute; inset: 4.5%; border-radius: 50%; border: clamp(6px, 0.9vw, 14px) solid var(--red); }
.medallion-disc img { width: 60%; height: auto; position: relative; }
.cover-medallion.is-boom .medallion-disc { animation: medallionBoom 620ms ease-in both; }
@keyframes medallionBoom { 0% { transform: scale(1); opacity: 1; } 55% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1.22); opacity: 0; } }

@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 13/10) { .cover-medallion { width: 36.8vh; } }
@media (max-aspect-ratio: 1/1) { .cover-medallion { left: 50%; top: 31.6%; width: 30.7vh; } .cover-copy { max-width: 100%; padding-top: 50vh; } }

/* ---------- Audit ---------- */
.audit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.finding {
  background: var(--panel-paper); border-top: 4px solid var(--steel); padding: clamp(16px, 1.6vw, 24px);
  display: flex; flex-direction: column; gap: 10px;
}
.finding.sev-high { border-top-color: var(--red); }
.finding.sev-med { border-top-color: #8a6a1e; }
.finding.sev-low { border-top-color: var(--steel); }
.f-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.f-num { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: var(--fs-label); color: var(--ink-paper); font-weight: 700; }
.sev { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: var(--fs-label); padding: 2px 8px; border-radius: 3px; background: var(--ink-paper); color: var(--paper); }
.sev-high .sev { background: var(--red-deep); }
.f-tag { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: var(--fs-label); color: #4b4f55; text-transform: uppercase; letter-spacing: 0.05em; }
.finding h3 { font-size: clamp(22px, 1rem + 0.5vw, 30px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 640; }
.finding p { font-size: clamp(16px, 0.7rem + 0.35vw, 20px); line-height: 1.5; color: #1f2328; }
.finding .src { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: var(--fs-label); color: var(--red-deep); margin-top: auto; letter-spacing: 0.02em; }
.keep-strip { margin-top: clamp(16px, 2.4vh, 26px); display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 24px; align-items: center; }
.badge-fig img { width: 100%; height: auto; border: 1px solid var(--line-paper); }
.badge-fig figcaption { margin-top: 8px; font-size: var(--fs-label); color: #4b4f55; }
.keep-copy p:last-child { font-size: var(--fs-body); max-width: 60ch; }

/* ---------- Gap ---------- */
.band { margin: 0 calc(var(--pad-x) * -1) clamp(18px, 2.6vh, 30px); max-height: 150px; overflow: hidden; }
.band img { width: 100%; height: 150px; object-fit: cover; object-position: center 46%; }
.gap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.path { padding: clamp(18px, 2vw, 28px); border: 1px solid var(--line-dark); }
.path-today { border-color: rgba(181, 32, 37, 0.7); }
.path-next { border-color: rgba(247, 245, 240, 0.4); }
.path-title { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.07em; color: #b9b5ad; margin-bottom: 14px; }
.path ol { list-style: none; padding: 0; display: grid; gap: 10px; counter-reset: step; }
.path li { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; font-size: var(--fs-body); }
.path li::before { content: counter(step); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(247, 245, 240, 0.1); font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 14px; }
.path-today li::before { background: var(--red); color: var(--chalk); }
.path-note { margin-top: 16px; color: #b9b5ad; font-size: clamp(16px, 0.7rem + 0.3vw, 19px); max-width: 52ch; }
.numbers { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }
.num { border-top: 2px solid var(--red-bright); padding-top: 12px; }
.num b { display: block; font-size: clamp(40px, 3.4vw, 60px); line-height: 1; letter-spacing: -0.03em; font-weight: 650; color: var(--chalk); }
.num span { display: block; margin-top: 8px; font-size: clamp(15px, 0.7rem + 0.2vw, 18px); color: #d4cfc5; }

/* ---------- Flagship mockup ---------- */
.mock-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(16px, 2vw, 32px); align-items: start; }
.mock-stage { display: flex; gap: clamp(14px, 1.6vw, 26px); align-items: flex-start; min-width: 0; }
.browser {
  flex: 1 1 auto; min-width: 0; background: #f4f1ea; color: var(--ink-paper); border-radius: 10px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.browser-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #e2ddd2; border-bottom: 1px solid #d0cabd; }
.browser-bar span:not(.url) { width: 10px; height: 10px; border-radius: 50%; background: #b4ada0; }
.browser-bar .url { margin-left: 12px; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 13px; color: #4b4f55; }
.site-nav { display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-bottom: 1px solid #ddd7ca; background: #fbf9f4; flex-wrap: wrap; }
.site-logo { height: 40px; width: auto; }
.site-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.site-tabs button {
  min-height: 40px; padding: 6px 12px; border: 0; background: transparent; cursor: pointer; font-size: 16px; color: #3a3e44; border-bottom: 3px solid transparent; font-weight: 500;
}
.site-tabs button[aria-selected="true"] { color: var(--red); border-bottom-color: var(--red); font-weight: 650; }
.site-call { margin-left: auto; min-height: 40px; display: inline-flex; align-items: center; padding: 6px 12px; background: var(--red); color: #fff; border-radius: 4px; text-decoration: none; font-size: 15px; font-weight: 600; }
.site-body { height: clamp(360px, 54vh, 520px); padding: 0; background: #f4f1ea; }
.panel { padding: 16px 18px 20px; }
.panel[hidden] { display: none; }
.hero-shot { position: relative; height: clamp(190px, 28vh, 260px); overflow: hidden; border-radius: 6px; background: #0b0c0e; }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: 0.8; }
.hero-copy { position: absolute; left: 18px; bottom: 16px; right: 18px; color: var(--chalk); }
.hero-copy h4 { font-size: clamp(22px, 1.6vw, 28px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 650; margin: 6px 0 12px; max-width: 26ch; }
.hero-copy h4 em { color: #ff6a6f; }
.site-eyebrow { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
.hero-copy .site-eyebrow { color: #ffb3b5; }
.site-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-solid, .btn-line {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 4px;
  font-size: 16px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; text-decoration: none; text-align: center;
}
.btn-solid { background: var(--red); color: #fff; border: 1px solid var(--red); }
.btn-solid:hover { background: #9b1b21; }
.btn-solid:disabled { opacity: 0.45; cursor: default; }
.btn-line { background: transparent; color: var(--ink-paper); border: 1px solid var(--ink-paper); }
.btn-line:hover { background: rgba(17, 19, 22, 0.08); }
.hero-copy .btn-line { color: var(--chalk); border-color: var(--chalk); }
.btn-wide { width: 100%; }
.next-card { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; background: #fff; border-left: 4px solid var(--red); }
.next-name { font-size: clamp(20px, 1.2vw, 24px); font-weight: 650; letter-spacing: -0.01em; }
.next-meta { font-size: 16px; color: #3a3e44; }
.program-row { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.program-row figure { position: relative; border-radius: 4px; overflow: hidden; background: #0b0c0e; }
.program-row img { width: 100%; height: 96px; object-fit: cover; }
.program-row figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; background: rgba(11, 12, 14, 0.72); color: var(--chalk); font-size: 13px; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; letter-spacing: 0.04em; }
.sched-top { display: grid; gap: 10px; }
.chips, .week { display: flex; flex-wrap: wrap; gap: 8px; }
.chip, .day {
  min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid #b9b2a4; background: #fbf9f4; cursor: pointer; font-size: 15px; color: var(--ink-paper);
}
.chip.is-on, .day.is-on { background: var(--ink-paper); color: var(--chalk); border-color: var(--ink-paper); }
.day { min-width: 52px; }
.sched-body { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 16px; align-items: start; }
.class-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.class-list li { margin: 0; }
.class-list button {
  width: 100%; min-height: 56px; text-align: left; padding: 10px 14px; background: #fff; border: 1px solid #d5cfc1; border-left: 4px solid var(--red); cursor: pointer; display: grid; gap: 2px;
}
.class-list button.is-on { background: var(--ink-paper); color: var(--chalk); }
.class-list .c-time { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 13px; color: var(--red-deep); letter-spacing: 0.03em; }
.class-list button.is-on .c-time { color: #ffb3b5; }
.class-list .c-name { font-size: 16px; font-weight: 600; }
.class-detail { background: #fff; padding: 14px; border: 1px solid #d5cfc1; }
.detail-photo { margin-bottom: 10px; overflow: hidden; border-radius: 4px; }
.detail-photo img { width: 100%; height: 92px; object-fit: cover; }
.class-detail h5 { font-size: clamp(20px, 1.2vw, 24px); font-weight: 650; letter-spacing: -0.01em; margin: 6px 0 4px; }
.cd-meta { font-size: 16px; color: #3a3e44; }
.seats { margin: 12px 0; }
.seat-bar { height: 8px; background: #e0dace; border-radius: 4px; overflow: hidden; }
.seat-bar span { display: block; height: 100%; background: var(--red); transition: width 320ms var(--ease); }
.seats p { font-size: 14px; color: #4b4f55; margin-top: 6px; }
.cd-note { margin-top: 10px; font-size: 15px; color: #3a3e44; min-height: 3em; }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plan { background: #fff; padding: 16px; border-top: 4px solid #b9b2a4; }
.plan-hot { border-top-color: var(--red); }
.plan-price { font-size: clamp(30px, 2.2vw, 40px); font-weight: 650; letter-spacing: -0.02em; margin: 8px 0 6px; }
.plan-price small { font-size: 16px; font-weight: 400; color: #4b4f55; letter-spacing: 0; }
.plan-line { font-size: 16px; color: #2a2e33; }
.plan-note { margin: 14px 0; font-size: 15px; color: #3a3e44; }
.phone {
  flex: 0 0 auto; width: clamp(200px, 17vw, 236px); height: clamp(420px, 66vh, 500px); border-radius: 34px; padding: 12px;
  background: #101113; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 2px #2a2d31; position: relative;
}
.phone-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 72px; height: 16px; border-radius: 10px; background: #050506; }
.phone-screen { height: 100%; background: #f4f1ea; color: var(--ink-paper); border-radius: 24px; padding: 40px 14px 16px; overflow-y: auto; }
.phone-hero { width: 100%; height: 118px; object-fit: cover; border-radius: 6px; margin-bottom: 12px; }
.phone-title { font-size: 26px; line-height: 1.05; font-weight: 650; letter-spacing: -0.02em; margin: 6px 0 8px; }
.phone-title em { color: var(--red); }
.phone-line { font-size: 16px; margin: 0 0 14px; color: #2a2e33; }
.phone-screen .btn-solid, .phone-screen .btn-line { margin-top: 8px; min-height: 48px; font-size: 16px; }
.mock-detail { display: none; }

/* ---------- System ---------- */
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.service { background: var(--panel-paper); padding: clamp(18px, 1.8vw, 28px); display: flex; flex-direction: column; gap: 10px; border-left: 4px solid var(--red); }
.svc-no { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: var(--fs-label); color: var(--red-deep); text-transform: uppercase; letter-spacing: 0.05em; }
.service h3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.02em; font-weight: 640; }
.service p:not(.svc-no):not(.fixes) { font-size: var(--fs-body); color: #1f2328; }
.fixes { margin-top: auto; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: var(--fs-label); color: #4b4f55; }

/* ---------- Proof compare ---------- */
.compare {
  position: relative; display: grid; grid-template-columns: var(--split, 50%) minmax(0, 1fr);
  min-height: 300px; border: 1px solid var(--line-dark); user-select: none; touch-action: pan-y;
}
.cmp-col { padding: clamp(18px, 2vw, 30px); min-width: 0; }
.cmp-before { background: #1a1c1f; color: #d4cfc5; }
.cmp-after { background: #efebe2; color: var(--ink-paper); }
.cmp-title { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 14px; }
.cmp-before .cmp-title { color: #ffb3b5; }
.cmp-after .cmp-title { color: var(--red-deep); }
.compare ul { list-style: none; padding: 0; display: grid; gap: 12px; }
.compare li { font-size: clamp(17px, 0.8rem + 0.3vw, 21px); line-height: 1.4; padding-left: 16px; border-left: 3px solid currentColor; }
.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 44px; margin-left: -22px; cursor: ew-resize; z-index: 3;
  display: grid; place-items: center; touch-action: none;
}
.cmp-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: var(--red-bright); }
.cmp-handle span { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--chalk); color: var(--ink-dark); display: grid; place-items: center; }
.cmp-handle svg { width: 22px; height: 22px; }

/* ---------- Roadmap ---------- */
.roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }
.phase { background: var(--panel-paper); padding: clamp(18px, 1.8vw, 28px); display: flex; flex-direction: column; gap: 12px; border-top: 4px solid var(--red); }
.phase-day { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: clamp(20px, 1.4vw, 26px); color: var(--red-deep); font-weight: 700; }
.phase h3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.02em; font-weight: 640; }
.phase .owner, .phase .need { font-size: clamp(15px, 0.75rem + 0.2vw, 18px); color: #2a2e33; }
.phase .owner span, .phase .need span { display: block; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: var(--fs-label); text-transform: uppercase; color: #4b4f55; letter-spacing: 0.05em; }
.phase ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.phase li { position: relative; padding-left: 18px; font-size: var(--fs-body); color: #1f2328; }
.phase li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--red); }
.phase .need { margin-top: auto; border-top: 1px solid var(--line-paper); padding-top: 12px; }
.band-roadmap { margin-top: clamp(18px, 2.6vh, 30px); margin-left: 0; margin-right: 0; max-height: none; }
.band-roadmap img { height: 160px; border-radius: 4px; }

/* ---------- Engagement ---------- */
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }
.level { border: 1px solid var(--line-dark); padding: clamp(18px, 1.8vw, 28px); display: flex; flex-direction: column; gap: 12px; }
.level-rec { border-color: var(--red-bright); background: rgba(181, 32, 37, 0.12); }
.lvl-no { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: var(--fs-label); text-transform: uppercase; color: #ffb3b5; letter-spacing: 0.05em; }
.level:not(.level-rec) .lvl-no { color: #b9b5ad; }
.level h3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.02em; font-weight: 640; }
.level ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.level li { position: relative; padding-left: 18px; font-size: var(--fs-body); color: #e4dfd4; }
.level li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--red-bright); }
.band-engage { margin-top: clamp(18px, 2.6vh, 30px); margin-left: 0; margin-right: 0; max-height: none; }
.band-engage img { height: 160px; border-radius: 4px; }

/* ---------- Whole-composition vertical centering (flagged slides only) ---------- */
/* Single structural wrapper holds kicker, heading, lead, body, cards, notes and
   band imagery so the WHOLE composition balances between the fixed global
   masthead and footer. Auto block margins center fitting content and collapse
   to zero when content is taller than the stage, keeping natural top flow. */
.s-system .scroll, .s-proof .scroll, .s-engage .scroll, .s-close .scroll {
  display: flex; flex-direction: column;
}
.s-body { margin-block: auto; }
.s-close .close-grid { margin-block: auto; }

/* Safe whole-composition centering for slide 5 and slide 9 (King's Fitness max-footer-fix).
   The wrapper itself fills the stage (min-height: 100%) and centers its own content.
   Because flex-shrink is 0, tall content expands the wrapper and stays anchored to the
   top flow instead of overflowing above the masthead, while the scroll container's
   padding keeps the bottom clear of the global footer. This avoids the classic flex
   auto-margin overflow bug where the top of tall content becomes unreachable and the
   bottom is obscured by the fixed footer. */
.s-system .s-body {
  min-height: 100%;
  flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.s-close .close-grid {
  min-height: 100%;
  flex-shrink: 0;
  align-content: center;
}

/* ---------- Close ---------- */
.close-scroll { padding-top: calc(var(--chrome-h) + 18px); }
.close-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 3.4vw, 60px); align-items: start; }
.rep-card { margin: 0; justify-self: center; width: 100%; max-width: min(100%, 480px); background: #fff; border: 1px solid var(--line-paper); padding: clamp(10px, 1vw, 14px) clamp(10px, 1vw, 14px) 18px; }
.rep-portrait { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; object-position: center; }
.rep-name { font-size: clamp(26px, 1.6vw, 34px); font-weight: 650; letter-spacing: -0.02em; margin-top: 14px; }
.rep-role { font-size: var(--fs-body); color: #4b4f55; }
.close-copy .h2 { max-width: 20ch; margin-bottom: 14px; }
.lede-dark { font-size: var(--fs-body); color: #2a2e33; max-width: 50ch; }
.contacts { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.contacts li { display: grid; grid-template-columns: 96px 1fr; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line-paper); padding-bottom: 8px; }
.contacts span { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: var(--fs-label); text-transform: uppercase; color: #4b4f55; letter-spacing: 0.05em; }
.contacts a { font-size: clamp(18px, 1vw, 22px); font-weight: 600; color: var(--ink-paper); text-decoration: none; overflow-wrap: anywhere; }
.contacts a:hover { color: var(--red-deep); text-decoration: underline; }
.scheduler { margin-top: 6px; background: #fff; border: 1px solid var(--line-paper); padding: clamp(14px, 1.4vw, 20px); display: grid; gap: 12px; }
.sched-title { font-size: clamp(19px, 1.1vw, 22px); font-weight: 650; }
.scheduler fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.scheduler legend { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: var(--fs-label); text-transform: uppercase; color: #4b4f55; margin-bottom: 8px; letter-spacing: 0.04em; }
.day-options, .time-options { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  min-height: 44px; padding: 8px 12px; border: 1px solid #b9b2a4; background: #fbf9f4; border-radius: 4px; cursor: pointer; font-size: 16px; color: var(--ink-paper); text-align: left;
}
.opt small { display: block; font-size: 13px; color: #4b4f55; }
.opt.is-on { background: var(--ink-paper); color: var(--chalk); border-color: var(--ink-paper); }
.opt.is-on small { color: #d4cfc5; }
.sched-note { font-size: 15px; color: #3a3e44; }
.brand-foot { margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 15px; color: #4b4f55; }
.brand-foot img { height: 28px; width: auto; }

/* ---------- Index overlay ---------- */
.index-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(11, 12, 14, 0.96); display: grid; place-items: center; padding: 24px; }
.index-overlay[hidden] { display: none; }
.index-card { width: min(820px, 100%); max-height: 100%; overflow-y: auto; color: var(--chalk); }
.index-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.index-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.index-list button {
  width: 100%; min-height: 56px; display: grid; grid-template-columns: 60px 1fr; text-align: left; padding: 10px 14px; background: transparent; border: 1px solid var(--line-dark); cursor: pointer; color: var(--chalk); font-size: clamp(17px, 1vw, 20px);
}
.index-list button:hover, .index-list button[aria-current="true"] { border-color: var(--red-bright); background: rgba(181, 32, 37, 0.14); }
.index-list .i-no { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: var(--fs-label); color: #ffb3b5; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .mock-wrap { grid-template-columns: minmax(0, 1fr); }
  .mock-detail { display: block; border-top: 1px solid var(--line-dark); padding-top: 18px; }
  .mock-detail ol { padding-left: 20px; display: grid; gap: 10px; font-size: 16px; color: #d4cfc5; }
  .mock-detail h4 { font-size: var(--fs-h3); margin-bottom: 10px; }
  .mock-detail strong { color: var(--chalk); }
  .cover-copy { max-width: min(46vw, 760px); }
}
@media (max-width: 1100px) {
  .audit-grid, .service-grid, .roadmap, .levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keep-strip { grid-template-columns: 1fr; }
  .keep-strip .badge-fig { max-width: 320px; }
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .close-grid { grid-template-columns: 1fr; }
  .rep-portrait { max-width: min(100%, 420px); }
}
@media (max-width: 900px) {
  .mock-stage { flex-direction: column; align-items: stretch; }
  .phone { width: 100%; max-width: 360px; height: 520px; margin: 0 auto; }
  .site-body { height: 60vh; }
  .sched-body { grid-template-columns: 1fr; }
  .gap-grid { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --chrome-h: 64px; --bottom-h: 60px; }
  .chrome { grid-template-columns: 1fr auto; background: var(--ink-dark); border-bottom: 1px solid var(--line-dark); }
  body.theme-paper .chrome { background: var(--paper); border-bottom-color: var(--line-paper); }
  .chrome-label { display: none; }
  .cb-brandcore { height: 18px; }
  .cb-client { height: 20px; }
  .bottom-nav { background: var(--ink-dark); border-top: 1px solid var(--line-dark); grid-template-columns: auto auto; justify-content: space-between; padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); height: calc(var(--bottom-h) + env(safe-area-inset-bottom)); }
  body.theme-paper .bottom-nav { background: var(--paper); border-top-color: var(--line-paper); }
  .rail { display: none; }
  .nav-btn span { display: none; }
  .nav-btn { min-width: 52px; justify-content: center; }
  .scroll { padding: calc(var(--chrome-h) + 18px) 20px calc(var(--bottom-h) + 30px); }
  .site-body { padding: 0; }
  .s-cover .scroll { padding-top: 0; }
  .cover-copy { max-width: 100%; padding-top: 50vh; }
  .s-cover .display { font-size: clamp(48px, 15vw, 72px); }
  .audit-grid, .service-grid, .roadmap, .levels, .numbers, .plan-grid, .program-row { grid-template-columns: 1fr; }
  .gap-grid { grid-template-columns: 1fr; }
  .keep-strip { grid-template-columns: 1fr; }
  .keep-strip .badge-fig { max-width: 100%; }
  .band { margin-left: -20px; margin-right: -20px; }
  .band img, .band-roadmap img, .band-engage img { height: 120px; }
  .site-nav { gap: 8px; padding: 8px 10px; }
  .site-tabs button { padding: 6px 8px; font-size: 15px; }
  .site-call { margin-left: 0; width: 100%; justify-content: center; }
  .site-body { height: 56vh; }
  .phone { display: none; }
  .mock-detail { display: block; }
  .close-grid { gap: 20px; }
  .rep-portrait { max-width: min(100%, 380px); }
  .contacts li { grid-template-columns: 1fr; gap: 4px; }
  .compare { grid-template-columns: 1fr; min-height: 0; }
  .cmp-handle { display: none; }
  .cmp-col { padding: 18px 20px; }
}

@media (max-width: 420px) {
  .chrome { padding: 0 16px; }
  .cb-x { font-size: 18px; }
}

/* ---------- Motion preferences and no-WebGL ---------- */
@media (prefers-reduced-motion: reduce) {
  .slide, .slide.is-active, .deck, .progress span, .boom-flash, .seam { transition: none !important; animation: none !important; }
  .slide.enter-boom, .slide.enter-wipe { animation: none !important; }
  .cover-medallion.is-boom .medallion-disc { animation: none !important; }
}
body.cover-webgl-off .cover-canvas { display: none; }