/* =============================================================
   Renzo Gracie Jiu Jitsu Middletown — "The Archive"
   Editorial monograph design system
   Bricolage Grotesque + Instrument Serif Italic + Inter + JetBrains Mono
   Brand: Renzo Gracie royal blue #1437A2 (unchanged)
   ============================================================= */

:root {
  /* —— Surfaces */
  --paper: #F4F1E8;
  --paper-soft: #EFEBE0;
  --paper-card: #E9E4D6;
  --paper-rule: rgba(11, 15, 28, 0.14);
  --paper-rule-soft: rgba(11, 15, 28, 0.08);
  --bone: #FFFFFF;

  --ink: #0B0F1C;
  --ink-soft: #141926;
  --ink-card: #1A2030;
  --ink-rule: rgba(255, 255, 255, 0.12);
  --ink-rule-soft: rgba(255, 255, 255, 0.06);

  /* —— Typography colors */
  --text: #0B0F1C;
  --text-muted: #3D4453;
  --text-quiet: #6E7585;
  --text-on-dark: #F4F1E8;
  --text-muted-on-dark: #C4C9D6;
  --text-quiet-on-dark: #7B8294;

  /* —— Brand */
  --blue: #1437A2;
  --blue-bright: #2E54CC;
  --blue-deep: #0E2A7C;
  --blue-tint: rgba(20, 55, 162, 0.07);

  /* —— Type stack */
  --font-display: "Archivo Black", "Anton", "Inter Tight", "Inter", system-ui, sans-serif;
  --font-italic: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* —— Spacing (fluid) */
  --space-2xs: 0.25rem;
  --space-xs: clamp(0.5rem, 0.5vw, 0.625rem);
  --space-sm: clamp(0.75rem, 0.8vw, 1rem);
  --space-md: clamp(1rem, 1.4vw, 1.5rem);
  --space-lg: clamp(1.5rem, 2.4vw, 2.5rem);
  --space-xl: clamp(2.5rem, 4vw, 4rem);
  --space-2xl: clamp(4rem, 7vw, 7rem);
  --space-3xl: clamp(5.5rem, 11vw, 11rem);

  /* —— Layout */
  --gutter: clamp(20px, 4vw, 56px);
  --max-w: 1360px;
  --max-w-narrow: 1100px;
  --max-w-text: 720px;
  --nav-h: 72px;
  --spine-w: 56px;

  /* —— Motion */
  --easing: cubic-bezier(0.22, 1, 0.36, 1);
  --easing-deep: cubic-bezier(0.85, 0, 0.15, 1);
  --dur: 480ms;
  --dur-fast: 240ms;
}

/* ============================================================
   Reset & Base
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "ss01", "ss02";
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; padding: 0; color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.05; font-weight: 500; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Paper grain */
body::before {
  content: '';
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

::selection { background: var(--blue); color: var(--paper); }

/* ============================================================
   Layout primitives
============================================================ */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
}

.wrap-narrow {
  width: 100%;
  max-width: var(--max-w-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-text {
  width: 100%;
  max-width: var(--max-w-text);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.section-tight { padding-block: clamp(40px, 6vw, 80px); position: relative; }

.dark {
  background: var(--ink);
  color: var(--text-on-dark);
}

.dark::before {
  opacity: 0.07;
  mix-blend-mode: screen;
}

/* ============================================================
   Typography
============================================================ */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.94;
  color: var(--text);
  text-transform: uppercase;
}
.dark .display { color: var(--text-on-dark); }

.display em,
.display .ital {
  font-family: var(--font-italic);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
  text-transform: none;
}

.display .accent { color: var(--blue); font-style: normal; font-family: inherit; }
.dark .display .accent { color: var(--blue-bright); }

.h-xl { font-size: clamp(2.75rem, 6.4vw, 6rem); }
.h-lg { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.h-md { font-size: clamp(2rem, 3.6vw, 3.25rem); }
.h-sm { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.h-xs { font-size: clamp(1.3rem, 2vw, 1.8rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: 0.5;
}
.dark .eyebrow { color: var(--text-muted-on-dark); }

.lede {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.35vw, 1.35rem);
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 60ch;
  letter-spacing: -0.005em;
}
.dark .lede { color: var(--text-muted-on-dark); }

.body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 64ch;
}
.dark .body { color: var(--text-muted-on-dark); }

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}

.cap {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
  font-weight: 500;
}
.dark .cap { color: var(--text-quiet-on-dark); }

.section-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
  font-weight: 500;
}
.dark .section-num { color: var(--text-quiet-on-dark); }

/* Hairline rules */
.rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--paper-rule);
  border: 0;
  margin: 0;
}
.dark .rule { background: var(--ink-rule); }

.rule-strong { background: var(--text); height: 1px; }
.dark .rule-strong { background: var(--text-on-dark); }

/* ============================================================
   Buttons & Links
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 30px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  line-height: 1;
  border-radius: 0;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background var(--dur) var(--easing), color var(--dur) var(--easing), transform var(--dur-fast) var(--easing);
  min-height: 56px;
  text-transform: none;
}

.btn .btn-arrow {
  display: inline-block;
  transition: transform var(--dur) var(--easing);
  font-family: var(--font-display);
  font-weight: 400;
}
.btn:hover .btn-arrow { transform: translateX(8px); }
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { background: var(--blue); color: var(--bone); }

.btn-blue {
  background: var(--blue);
  color: var(--bone);
}
.btn-blue:hover { background: var(--blue-deep); }

.btn-light {
  background: var(--paper);
  color: var(--ink);
}
.btn-light:hover { background: var(--blue); color: var(--bone); }

.btn-bone {
  background: var(--bone);
  color: var(--ink);
}
.btn-bone:hover { background: var(--ink); color: var(--paper); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
}
.dark .btn-ghost,
.cover .btn-ghost,
.closing .btn-ghost { color: var(--text-on-dark); border-color: var(--text-on-dark); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.dark .btn-ghost:hover,
.cover .btn-ghost:hover,
.closing .btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Editorial text link with underline draw */
.txt-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: inherit;
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100%/0 1px no-repeat;
  transition: background-size var(--dur) var(--easing);
}
.txt-link:hover { background-size: 100% 1px; }
.txt-link .arr { transition: transform var(--dur) var(--easing); }
.txt-link:hover .arr { transform: translateX(6px); }

/* ============================================================
   Vertical metadata spine (left edge sticky)
============================================================ */
.spine {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--spine-w);
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--paper-rule);
  background: linear-gradient(to right, rgba(244, 241, 232, 0.6), rgba(244, 241, 232, 0));
  mix-blend-mode: normal;
}
.spine-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-quiet);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
}
.spine-text .dot {
  width: 4px; height: 4px;
  background: var(--blue);
  border-radius: 50%;
  display: inline-block;
}
@media (max-width: 980px) {
  .spine { display: none; }
}

/* Right-edge scroll progress */
.scroll-progress {
  position: fixed;
  top: var(--nav-h);
  right: 18px;
  bottom: 24px;
  width: 1px;
  background: var(--paper-rule);
  z-index: 10;
  pointer-events: none;
}
.scroll-progress-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0%;
  background: var(--blue);
  transition: height 80ms linear;
}
.dark-section-context .scroll-progress { background: var(--ink-rule); }
@media (max-width: 980px) {
  .scroll-progress { display: none; }
}

/* ============================================================
   Navigation
============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(244, 241, 232, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--paper-rule-soft);
  transition: background var(--dur) var(--easing), border-color var(--dur) var(--easing);
}

.nav.scrolled {
  background: rgba(244, 241, 232, 0.96);
  border-bottom-color: var(--paper-rule);
}

.nav-inner {
  height: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  font-size: 1.02rem;
}
.nav-brand img {
  width: 34px; height: 34px;
  object-fit: contain;
}
.nav-brand .meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}
.nav-brand .meta .eyebrow-tiny {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
  font-weight: 500;
}
.nav-brand .meta .name {
  font-size: 0.96rem;
  margin-top: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  position: relative;
  padding: 6px 0;
  transition: color var(--dur) var(--easing);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--easing);
}
.nav-links a:hover { color: var(--blue); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--blue); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  transition: background var(--dur) var(--easing);
  min-height: 40px;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--blue); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.nav-toggle svg { width: 24px; height: 24px; }

.nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--paper-rule);
  padding: 24px var(--gutter) 32px;
  flex-direction: column;
  gap: 4px;
  z-index: 49;
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}
.nav-mobile a {
  display: block;
  padding: 16px 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--text);
  border-bottom: 1px solid var(--paper-rule-soft);
  min-height: 48px;
}
.nav-mobile a.cta {
  margin-top: 16px;
  padding: 18px 24px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.95rem;
  border: 0;
  text-align: center;
  border-bottom: 0;
}
.nav-mobile a.cta:hover { background: var(--blue); }

@media (max-width: 980px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav.open .nav-mobile { display: flex; }
}

/* ============================================================
   Hero — Editorial Cover
============================================================ */
.cover {
  position: relative;
  min-height: clamp(620px, 78vh, 820px);
  margin-top: var(--nav-h);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding: clamp(80px, 9vw, 120px) 0 clamp(48px, 6vw, 80px);
  display: flex;
  align-items: flex-end;
}
.cover::before { /* film grain on dark */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='5'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 2;
}

.cover-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cover-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0.55;
  filter: contrast(1.06) saturate(0.85);
}
.cover-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,15,28,0.55) 0%, rgba(11,15,28,0.2) 30%, rgba(11,15,28,0.7) 75%, rgba(11,15,28,0.95) 100%),
    linear-gradient(90deg, rgba(11,15,28,0.55) 0%, rgba(11,15,28,0) 50%);
  pointer-events: none;
}

.cover-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  gap: var(--space-xl);
}

.cover-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted-on-dark);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--ink-rule);
}
.cover-meta .group {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.cover-meta .group span { display: inline-flex; align-items: center; gap: 14px; }
.cover-meta .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--ink-rule);
  color: var(--text-on-dark);
}
.cover-meta .pill .dot {
  width: 6px; height: 6px;
  background: var(--blue-bright);
  border-radius: 50%;
}

.cover-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.96;
  font-size: clamp(2rem, 4.5vw, 4rem);
  color: var(--text-on-dark);
  text-transform: uppercase;
  max-width: 22ch;
}
.cover-title em,
.cover-title .ital {
  font-family: var(--font-italic);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  text-transform: none;
}
.cover-title .accent { color: var(--blue-bright); }

.cover-foot {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-xl);
  align-items: end;
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink-rule);
}
.cover-lede {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.62;
  color: var(--text-on-dark);
  opacity: 0.94;
  max-width: 54ch;
}
.cover-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}
.cover-actions .row {
  display: flex; gap: var(--space-md); flex-wrap: wrap;
  align-items: center;
}
.cover-trust {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted-on-dark);
}
.cover-trust .item {
  display: inline-flex; align-items: baseline; gap: 6px;
}
.cover-trust .num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-on-dark);
  letter-spacing: -0.02em;
  font-stretch: 80%;
}
.cover-trust .sep {
  width: 1px; height: 14px; background: var(--ink-rule);
}

@media (max-width: 780px) {
  .cover { min-height: 88vh; padding-block: var(--space-xl); }
  .cover-foot { grid-template-columns: 1fr; gap: var(--space-lg); }
  .cover-meta { font-size: 0.62rem; gap: var(--space-sm); }
  .cover-meta .group { gap: 10px; }
}

/* Smaller page header (non-home) */
.page-cover {
  position: relative;
  margin-top: var(--nav-h);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding: clamp(120px, 16vw, 200px) 0 clamp(60px, 8vw, 100px);
  min-height: 56vh;
}
.page-cover .cover-bg img { opacity: 0.45; }
.page-cover .cover-bg::after {
  background:
    linear-gradient(180deg, rgba(11,15,28,0.55) 0%, rgba(11,15,28,0.4) 50%, rgba(11,15,28,0.85) 100%);
}
.page-cover-inner {
  position: relative;
  z-index: 3;
  display: grid;
  gap: var(--space-md);
}
.page-crumb {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted-on-dark);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--ink-rule);
}
.page-crumb a { color: var(--text-muted-on-dark); }
.page-crumb a:hover { color: var(--blue-bright); }
.page-crumb .sep { color: var(--text-quiet-on-dark); }

.page-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.94;
  font-size: clamp(2.4rem, 5.6vw, 4.75rem);
  text-transform: uppercase;
}
.page-title em, .page-title .ital {
  font-family: var(--font-italic);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
  text-transform: none;
}
.page-title .accent { color: var(--blue-bright); }

.page-lede {
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  color: var(--text-muted-on-dark);
  max-width: 60ch;
  line-height: 1.55;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink-rule);
}

/* ============================================================
   Live schedule ticker
============================================================ */
.ticker {
  background: var(--ink);
  color: var(--paper);
  border-block: 1px solid var(--ink-rule);
  overflow: hidden;
  position: relative;
  padding: 0;
}
.ticker-strip {
  display: flex;
  align-items: center;
  height: 64px;
  gap: 32px;
  white-space: nowrap;
  width: max-content;
  animation: ticker-scroll 60s linear infinite;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ticker:hover .ticker-strip { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 12px; }
.ticker-item .time {
  color: var(--blue-bright);
  font-weight: 700;
}
.ticker-item .name { color: var(--text-on-dark); }
.ticker-sep {
  width: 6px; height: 6px;
  background: var(--text-quiet-on-dark);
  border-radius: 50%;
  flex: none;
}
.ticker-day {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 80%;
  font-size: 0.9rem;
  color: var(--paper);
  padding: 5px 9px;
  background: var(--blue);
  letter-spacing: 0.05em;
}
@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ============================================================
   Manifesto — three-line numbered statement
============================================================ */
.manifesto {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--paper-rule);
}
.manifesto-row {
  display: grid;
  grid-template-columns: 100px 1fr 1.4fr;
  gap: var(--space-lg);
  align-items: start;
  padding-block: clamp(28px, 4vw, 56px);
  border-bottom: 1px solid var(--paper-rule);
}
.manifesto-row .num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
  padding-top: 10px;
}
.manifesto-row h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.025em;
  line-height: 0.95;
  font-size: clamp(2rem, 4vw, 3.5rem);
}
.manifesto-row h3 em, .manifesto-row h3 .ital {
  font-family: var(--font-italic);
  font-weight: 400;
  font-style: italic;
  font-stretch: 100%;
}
.manifesto-row p {
  margin: 0;
  font-size: 1.075rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 58ch;
}
@media (max-width: 780px) {
  .manifesto-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    padding-block: var(--space-lg);
  }
}

/* ============================================================
   Architectural stats row — one massive horizontal figure rule
============================================================ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-block: 1px solid var(--paper-rule);
  padding-block: clamp(40px, 5vw, 64px);
}
.stats-row > .stat {
  padding-inline: var(--space-md);
  border-right: 1px solid var(--paper-rule-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stats-row > .stat:first-child { padding-left: 0; }
.stats-row > .stat:last-child { border-right: 0; padding-right: 0; }

.stat-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.03em;
  line-height: 0.9;
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  color: var(--text);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.dark .stat-num { color: var(--text-on-dark); }
.stat-num .unit {
  font-size: 0.32em;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  font-stretch: 100%;
  font-weight: 500;
}
.dark .stat-num .unit { color: var(--text-muted-on-dark); }
.stat-num .accent { color: var(--blue); font-stretch: inherit; }
.dark .stat-num .accent { color: var(--blue-bright); }

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}
.dark .stat-label { color: var(--text-muted-on-dark); }

.stat-cap {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--text-quiet);
  text-transform: uppercase;
}
.dark .stat-cap { color: var(--text-quiet-on-dark); }

@media (max-width: 780px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--paper-rule);
  }
  .stats-row > .stat {
    background: var(--paper);
    padding: var(--space-md);
    border-right: 0;
  }
  .dark .stats-row > .stat { background: var(--ink); }
}

/* ============================================================
   Section head (eyebrow + title + lede) — Editorial 5/7 split
============================================================ */
.shead {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.shead-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-xl);
  align-items: end;
  border-bottom: 1px solid var(--paper-rule);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.dark .shead-grid { border-bottom-color: var(--ink-rule); }

.shead-left { display: flex; flex-direction: column; gap: var(--space-md); }
.shead-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--paper-rule-soft);
  width: 100%;
}
.dark .shead-meta { color: var(--text-quiet-on-dark); border-bottom-color: var(--ink-rule-soft); }

@media (max-width: 880px) {
  .shead-grid { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* ============================================================
   Programs Index (TOC layout)
============================================================ */
.toc {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-xl);
  align-items: stretch;
}
.toc-feature {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 580px;
  padding: var(--space-xl);
  cursor: pointer;
  text-decoration: none;
}
.toc-feature .bg {
  position: absolute; inset: 0;
}
.toc-feature .bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--easing);
  opacity: 0.55;
}
.toc-feature:hover .bg img { transform: scale(1.04); }
.toc-feature::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,15,28,0.4) 0%, rgba(11,15,28,0.85) 80%);
}
.toc-feature .meta-row {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted-on-dark);
  margin-bottom: auto;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--ink-rule);
}
.toc-feature .feature-num { color: var(--blue-bright); font-weight: 600; }
.toc-feature .feature-title {
  position: relative; z-index: 2;
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--text-on-dark);
  margin-top: auto;
  padding-top: var(--space-2xl);
}
.toc-feature .feature-title em { font-family: var(--font-italic); font-weight: 400; font-style: italic; font-stretch: 100%; }
.toc-feature .feature-lede {
  position: relative; z-index: 2;
  margin-top: var(--space-md);
  color: var(--text-muted-on-dark);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 48ch;
}
.toc-feature .feature-cta {
  position: relative; z-index: 2;
  margin-top: var(--space-lg);
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 80%;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--text-on-dark);
}
.toc-feature .feature-cta .arr { transition: transform var(--dur) var(--easing); }
.toc-feature:hover .feature-cta .arr { transform: translateX(8px); }

.toc-list { display: flex; flex-direction: column; }
.toc-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: var(--space-md);
  align-items: center;
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--paper-rule);
  text-decoration: none;
  color: var(--text);
  position: relative;
  transition: padding-left var(--dur) var(--easing);
}
.dark .toc-row { color: var(--text-on-dark); border-bottom-color: var(--ink-rule); }
.toc-row:first-child { border-top: 1px solid var(--paper-rule); }
.dark .toc-row:first-child { border-top-color: var(--ink-rule); }
.toc-row:hover { padding-left: 16px; }

.toc-row .thumb {
  width: 110px; height: 88px;
  overflow: hidden;
  background: var(--paper-card);
}
.toc-row .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--easing);
}
.toc-row:hover .thumb img { transform: scale(1.06); }

.toc-row .body-col {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.toc-row .age {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
  font-weight: 500;
}
.dark .toc-row .age { color: var(--text-quiet-on-dark); }
.toc-row h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
}
.toc-row .blurb {
  margin: 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 56ch;
}
.dark .toc-row .blurb { color: var(--text-muted-on-dark); }
.toc-row .arr {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--text-muted);
  transition: transform var(--dur) var(--easing), color var(--dur) var(--easing);
  align-self: center;
}
.dark .toc-row .arr { color: var(--text-muted-on-dark); }
.toc-row:hover .arr { transform: translateX(10px); color: var(--blue); }

@media (max-width: 980px) {
  .toc { grid-template-columns: 1fr; gap: var(--space-lg); }
  .toc-feature { min-height: 480px; padding: var(--space-lg); }
}
@media (max-width: 560px) {
  .toc-row { grid-template-columns: 80px 1fr auto; }
  .toc-row .thumb { width: 80px; height: 64px; }
  .toc-row .blurb { display: none; }
}

/* ============================================================
   Editorial split (5/7 with image + drop cap)
============================================================ */
.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-xl);
  align-items: start;
}
.split-7-5 { grid-template-columns: 7fr 5fr; }
.split-1-1 { grid-template-columns: 1fr 1fr; }

.split-img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--paper-card);
}
.split-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--easing);
}
.split-img:hover img { transform: scale(1.03); }

.split-img-cap {
  margin-top: 14px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.dark .split-img-cap { color: var(--text-quiet-on-dark); }

.dropcap::first-letter {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  float: left;
  font-size: 5.4em;
  line-height: 0.85;
  padding: 0.05em 0.12em 0 0;
  color: var(--blue);
}
.dark .dropcap::first-letter { color: var(--blue-bright); }

.essay { font-size: 1.04rem; line-height: 1.78; color: var(--text-muted); max-width: 64ch; }
.dark .essay { color: var(--text-muted-on-dark); }
.essay p + p { margin-top: 1.2em; }

@media (max-width: 880px) {
  .split, .split-7-5, .split-1-1 { grid-template-columns: 1fr; gap: var(--space-lg); }
  .split-img { aspect-ratio: 4/3; }
}

/* ============================================================
   Pull-quote
============================================================ */
.pq {
  padding: clamp(56px, 8vw, 112px) 0;
  border-block: 1px solid var(--paper-rule);
  position: relative;
}
.dark .pq { border-block-color: var(--ink-rule); }
.pq-mark {
  position: absolute;
  top: 24px; left: 0;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 8rem;
  line-height: 1;
  color: var(--blue);
  opacity: 0.4;
}
.pq-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-stretch: 80%;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-size: clamp(2.25rem, 5vw, 4.75rem);
  color: var(--text);
  max-width: 22ch;
  margin: 0 auto;
  text-align: left;
}
.pq-text em, .pq-text .ital {
  font-family: var(--font-italic);
  font-weight: 400;
  font-style: italic;
  font-stretch: 100%;
}
.dark .pq-text { color: var(--text-on-dark); }
.pq-cite {
  margin-top: var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dark .pq-cite { color: var(--text-muted-on-dark); }
.pq-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--blue);
  font-size: 1rem;
}
.dark .pq-stars { color: var(--blue-bright); }

/* —— Pull-quote — compact variant —— */
.pq.pq-sm { padding: clamp(28px, 4vw, 48px) 0; }
.pq.pq-sm .pq-text {
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  max-width: 56ch;
}
.pq.pq-sm .pq-mark {
  font-size: 4rem;
  top: 8px;
}
.pq.pq-sm .pq-cite { margin-top: var(--space-md); }

/* ============================================================
   Review wall — asymmetric brick layout
============================================================ */
.reviews {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 1px;
  background: var(--paper-rule);
  border-block: 1px solid var(--paper-rule);
}
.review {
  background: var(--paper);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  position: relative;
  transition: background var(--dur) var(--easing);
}
.review:hover { background: var(--paper-soft); }
.review .quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.015em;
  line-height: 1.15;
  font-size: clamp(1.15rem, 1.6vw, 1.6rem);
  color: var(--text);
}
.review .quote em { font-family: var(--font-italic); font-weight: 400; font-style: italic; font-stretch: 100%; }
.review .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.review .author {
  display: flex; flex-direction: column; gap: 3px;
}
.review .author .name { color: var(--text); font-weight: 600; letter-spacing: 0.08em; }
.review .stars { color: var(--blue); font-size: 0.95rem; letter-spacing: 1px; }
.review .platform {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--paper-rule);
}

.review-feature { grid-column: span 7; grid-row: span 2; }
.review-tall { grid-column: span 5; grid-row: span 2; }
.review-short { grid-column: span 4; }
.review-wide { grid-column: span 8; }
.review-mid { grid-column: span 6; }

.review-feature .quote { font-size: clamp(1.6rem, 2.4vw, 2.4rem); }

@media (max-width: 980px) {
  .reviews { grid-template-columns: repeat(6, 1fr); }
  .review-feature { grid-column: span 6; grid-row: auto; }
  .review-tall, .review-wide, .review-mid, .review-short { grid-column: span 6; grid-row: auto; }
}

/* ============================================================
   Geography strip — town list with drive times
============================================================ */
.geo {
  display: block;
  border-block: 1px solid var(--paper-rule);
  padding-block: var(--space-lg);
}
.dark .geo { border-block-color: var(--ink-rule); }

.geo-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: 0;
}
.geo-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: baseline;
  padding-block: 16px;
  border-bottom: 1px solid var(--paper-rule-soft);
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
}
.geo-item:last-child,
.geo-item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.dark .geo-item { border-bottom-color: var(--ink-rule-soft); }
.geo-item .name {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  letter-spacing: -0.01em;
}
.geo-item .name .home {
  font-family: var(--font-italic);
  font-weight: 400;
  font-style: italic;
  font-stretch: 100%;
  color: var(--blue);
  margin-right: 6px;
}
.dark .geo-item .name .home { color: var(--blue-bright); }
.geo-item .dist {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
  font-weight: 500;
  white-space: nowrap;
}
.dark .geo-item .dist { color: var(--text-quiet-on-dark); }

@media (max-width: 880px) {
  .geo-list { grid-template-columns: 1fr; column-gap: 0; }
  .geo-item:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--paper-rule-soft); }
}

/* ============================================================
   Dispatch (blog teaser/index)
============================================================ */
.dispatch {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}
.dispatch-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-decoration: none;
  color: inherit;
}
.dispatch-feature .img {
  aspect-ratio: 5/3;
  overflow: hidden;
  background: var(--paper-card);
}
.dispatch-feature .img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--easing);
}
.dispatch-feature:hover .img img { transform: scale(1.03); }
.dispatch-feature .img-cap {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.dark .dispatch-feature .img-cap { color: var(--text-quiet-on-dark); }
.dispatch-feature h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  color: var(--text);
}
.dark .dispatch-feature h3 { color: var(--text-on-dark); }
.dispatch-feature p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 50ch;
}
.dark .dispatch-feature p { color: var(--text-muted-on-dark); }

.dispatch-list { display: flex; flex-direction: column; }
.dispatch-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--paper-rule);
  text-decoration: none;
  color: inherit;
  align-items: start;
  transition: padding-left var(--dur) var(--easing);
}
.dark .dispatch-row { border-bottom-color: var(--ink-rule); }
.dispatch-row:first-child { border-top: 1px solid var(--paper-rule); }
.dark .dispatch-row:first-child { border-top-color: var(--ink-rule); }
.dispatch-row:hover { padding-left: 12px; }
.dispatch-row .left {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.dispatch-row .ds {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
  display: flex; align-items: center; gap: 10px;
}
.dark .dispatch-row .ds { color: var(--text-quiet-on-dark); }
.dispatch-row h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.015em;
  line-height: 1.05;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
}
.dispatch-row p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.dark .dispatch-row p { color: var(--text-muted-on-dark); }
.dispatch-row .arr {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--text-quiet);
  align-self: center;
  transition: transform var(--dur) var(--easing), color var(--dur) var(--easing);
}
.dark .dispatch-row .arr { color: var(--text-quiet-on-dark); }
.dispatch-row:hover .arr { transform: translateX(8px); color: var(--blue); }

@media (max-width: 880px) {
  .dispatch { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ============================================================
   Closing CTA band
============================================================ */
.closing {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(80px, 12vw, 160px) 0;
  overflow: hidden;
  text-align: left;
  border-top: 1px solid var(--ink-rule);
}
.closing::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='9'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.closing-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted-on-dark);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--ink-rule);
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.closing-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.03em;
  line-height: 0.94;
  font-size: clamp(2.75rem, 8vw, 7.5rem);
  color: var(--text-on-dark);
  max-width: 18ch;
  margin-bottom: var(--space-lg);
}
.closing-title em, .closing-title .ital {
  font-family: var(--font-italic);
  font-weight: 400;
  font-style: italic;
  font-stretch: 100%;
}
.closing-title .accent { color: var(--blue-bright); }
.closing-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xl);
  align-items: end;
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink-rule);
}
.closing-foot p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-muted-on-dark);
  max-width: 52ch;
  line-height: 1.55;
}
.closing-foot .actions {
  display: flex; gap: var(--space-md); flex-wrap: wrap;
}
@media (max-width: 780px) {
  .closing-foot { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* —— Closing CTA — compact variant (team page) —— */
.closing.closing-sm { padding: clamp(48px, 6.5vw, 88px) 0; }
.closing.closing-sm .closing-title {
  font-size: clamp(2rem, 5vw, 4rem);
  margin-bottom: var(--space-md);
}
.closing.closing-sm .closing-meta { margin-bottom: var(--space-lg); }
.closing.closing-sm .closing-foot p { font-size: 0.95rem; }

/* ============================================================
   Colophon footer
============================================================ */
.colophon {
  background: var(--ink);
  color: var(--text-on-dark);
  padding-block: clamp(56px, 8vw, 96px) clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--ink-rule);
  font-family: var(--font-body);
}
.colophon-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--ink-rule);
}
.colophon-brand { display: flex; flex-direction: column; gap: var(--space-md); }
.colophon-brand .lockup {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-stretch: 80%;
}
.colophon-brand .lockup img { width: 44px; height: 44px; object-fit: contain; }
.colophon-brand .lockup .meta {
  display: flex; flex-direction: column; gap: 2px; line-height: 1;
}
.colophon-brand .lockup .meta .eyebrow-tiny {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet-on-dark);
  font-weight: 500;
}
.colophon-brand .lockup .meta .name {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 3px;
  letter-spacing: -0.01em;
}
.colophon-brand p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-muted-on-dark);
  line-height: 1.6;
  max-width: 38ch;
}
.colophon-social {
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--space-sm);
}
.colophon-social a {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink-rule);
  color: var(--text-muted-on-dark);
  transition: color var(--dur) var(--easing), border-color var(--dur) var(--easing), background var(--dur) var(--easing);
}
.colophon-social a:hover { color: var(--paper); border-color: var(--blue-bright); background: var(--blue); }
.colophon-social svg { width: 18px; height: 18px; }

.colophon-col h4 {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet-on-dark);
  font-weight: 500;
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--ink-rule);
}
.colophon-col ul { display: flex; flex-direction: column; gap: 10px; }
.colophon-col a {
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--text-on-dark);
  letter-spacing: -0.01em;
  transition: color var(--dur) var(--easing);
  display: inline-block;
  min-height: 28px;
}
.colophon-col a:hover { color: var(--blue-bright); }

.colophon-contact dl { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.colophon-contact dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet-on-dark);
  font-weight: 500;
  margin-bottom: 4px;
}
.colophon-contact dd {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-on-dark);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.colophon-contact a:hover { color: var(--blue-bright); }

.colophon-bottom {
  padding-top: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-md);
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet-on-dark);
}
.colophon-bottom .center { text-align: center; }
.colophon-bottom .right { text-align: right; }
.colophon-bottom a { color: var(--text-muted-on-dark); }
.colophon-bottom a:hover { color: var(--blue-bright); }
.colophon-bottom .accent-blue { color: var(--blue-bright); }

@media (max-width: 880px) {
  .colophon-top { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .colophon-brand { grid-column: span 2; }
  .colophon-bottom { grid-template-columns: 1fr; text-align: center; }
  .colophon-bottom .center, .colophon-bottom .right { text-align: center; }
}
@media (max-width: 540px) {
  .colophon-top { grid-template-columns: 1fr; }
  .colophon-brand { grid-column: span 1; }
}

/* ============================================================
   Numbered editorial benefit list (kids/adult pages)
============================================================ */
.benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-block: 1px solid var(--paper-rule);
}
.dark .benefits { border-block-color: var(--ink-rule); }
.benefit {
  display: grid;
  grid-template-columns: 88px 1fr 1.4fr;
  gap: var(--space-lg);
  align-items: start;
  padding-block: clamp(20px, 3vw, 36px);
  border-bottom: 1px solid var(--paper-rule);
  transition: padding-left var(--dur) var(--easing), background var(--dur) var(--easing);
}
.dark .benefit { border-bottom-color: var(--ink-rule); }
.benefit:last-child { border-bottom: 0; }
.benefit:hover { padding-left: 12px; }
.benefit .num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--blue);
  padding-top: 6px;
}
.dark .benefit .num { color: var(--blue-bright); }
.benefit h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
}
.benefit p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 56ch;
}
.dark .benefit p { color: var(--text-muted-on-dark); }
@media (max-width: 780px) {
  .benefit { grid-template-columns: 60px 1fr; gap: var(--space-md); }
  .benefit p { grid-column: 2 / -1; }
}

/* ============================================================
   FAQ accordion (editorial)
============================================================ */
.faq {
  display: flex; flex-direction: column;
  border-block: 1px solid var(--paper-rule);
}
.dark .faq { border-block-color: var(--ink-rule); }
.faq-row {
  border-bottom: 1px solid var(--paper-rule);
}
.faq-row:last-child { border-bottom: 0; }
.dark .faq-row { border-bottom-color: var(--ink-rule); }
.faq-row summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 60px 1fr 40px;
  gap: var(--space-md);
  align-items: center;
  padding-block: clamp(20px, 2.5vw, 28px);
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.015em;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  color: var(--text);
  min-height: 56px;
}
.dark .faq-row summary { color: var(--text-on-dark); }
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary .faq-num {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--text-quiet);
  font-weight: 500;
}
.dark .faq-row summary .faq-num { color: var(--text-quiet-on-dark); }
.faq-row summary .icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--paper-rule);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--blue);
  transition: transform var(--dur) var(--easing), background var(--dur) var(--easing), color var(--dur) var(--easing);
  justify-self: end;
}
.dark .faq-row summary .icon { border-color: var(--ink-rule); color: var(--blue-bright); }
.faq-row[open] summary .icon { transform: rotate(45deg); background: var(--blue); color: var(--bone); border-color: var(--blue); }
.faq-row .a {
  padding: 0 var(--space-md) var(--space-lg) calc(60px + var(--space-md));
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 64ch;
}
.dark .faq-row .a { color: var(--text-muted-on-dark); }
@media (max-width: 660px) {
  .faq-row summary { grid-template-columns: 36px 1fr 36px; gap: var(--space-sm); }
  .faq-row .a { padding-left: calc(36px + var(--space-sm)); }
}

/* ============================================================
   Programs page — feature spreads (alternating photo)
============================================================ */
.spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  padding-block: clamp(64px, 9vw, 120px);
  border-bottom: 1px solid var(--paper-rule);
}
.spread:last-child { border-bottom: 0; }
.spread.reverse > .spread-img { order: 2; }
.spread-img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--paper-card);
}
.spread-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--easing);
}
.spread-img:hover img { transform: scale(1.04); }
.spread-img .fig {
  position: absolute; bottom: 16px; left: 16px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(11,15,28,0.6);
  padding: 6px 10px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.spread-body { display: flex; flex-direction: column; gap: var(--space-md); }
.spread-body .num-eb {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
  display: flex; align-items: center; gap: 14px;
}
.spread-body .num-eb::after {
  content: '';
  height: 1px; flex: 1; background: var(--blue);
  opacity: 0.4;
}
.spread-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.025em;
  line-height: 0.95;
  font-size: clamp(2.25rem, 4.4vw, 4rem);
}
.spread-body h2 em { font-family: var(--font-italic); font-weight: 400; font-style: italic; font-stretch: 100%; }
.spread-body .tag {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  color: var(--text-muted);
  line-height: 1.3;
  max-width: 38ch;
}
.spread-body .lede {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 50ch;
}
.spread-body .micro-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  margin-top: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--paper-rule);
}
.spread-body .micro-list li {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
}
.spread-body .micro-list li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--blue);
  border-radius: 50%;
}
.spread-body .actions { margin-top: var(--space-md); display: flex; gap: var(--space-md); flex-wrap: wrap; }
@media (max-width: 880px) {
  .spread { grid-template-columns: 1fr; gap: var(--space-lg); padding-block: var(--space-xl); }
  .spread.reverse > .spread-img { order: 0; }
}

/* Age ladder */
.ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-block: 1px solid var(--paper-rule);
  margin-bottom: var(--space-2xl);
}
.ladder-item {
  padding: var(--space-lg) var(--space-md);
  border-right: 1px solid var(--paper-rule-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ladder-item:last-child { border-right: 0; }
.ladder-item .step {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--text-quiet);
}
.ladder-item .age {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--blue);
}
.ladder-item .name {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 500;
}
@media (max-width: 720px) {
  .ladder { grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--paper-rule); }
  .ladder-item { border-right: 0; background: var(--paper); }
}

/* ============================================================
   Adult page — Amenity manifest tiles
============================================================ */
.amenities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--paper-rule);
  border: 1px solid var(--paper-rule);
}
.dark .amenities { background: var(--ink-rule); border-color: var(--ink-rule); }
.amenity {
  background: var(--paper);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: relative;
  min-height: 220px;
  transition: background var(--dur) var(--easing);
}
.dark .amenity { background: var(--ink); }
.amenity:hover { background: var(--paper-soft); }
.dark .amenity:hover { background: var(--ink-soft); }
.amenity .num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--blue);
  font-weight: 600;
}
.dark .amenity .num { color: var(--blue-bright); }
.amenity h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1;
  margin-top: auto;
}
.amenity p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.dark .amenity p { color: var(--text-muted-on-dark); }
@media (max-width: 880px) {
  .amenities { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .amenities { grid-template-columns: 1fr; }
}

/* Schedule snippet (kids/adult) */
.schedule {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-xl);
  align-items: start;
  padding: var(--space-xl);
  background: var(--paper-soft);
  border: 1px solid var(--paper-rule);
}
.schedule-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  line-height: 1;
  margin-bottom: var(--space-sm);
}
.schedule-head p { color: var(--text-muted); margin: 0; }
.schedule-list { display: flex; flex-direction: column; }
.schedule-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--space-md);
  align-items: center;
  padding-block: 12px;
  border-bottom: 1px solid var(--paper-rule-soft);
  font-family: var(--font-mono);
  font-size: 0.84rem;
}
.schedule-row:last-child { border-bottom: 0; }
.schedule-row .day {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
}
.schedule-row .time {
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.schedule-row .what {
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-align: right;
  color: var(--text);
}
@media (max-width: 780px) {
  .schedule { grid-template-columns: 1fr; padding: var(--space-md); gap: var(--space-md); }
  .schedule-row { grid-template-columns: 70px 1fr; }
  .schedule-row .what { grid-column: 1 / -1; text-align: left; }
}

/* Gi vs No-Gi compare */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--paper-rule);
}
.compare-col {
  padding: var(--space-lg);
  border-right: 1px solid var(--paper-rule);
  display: flex; flex-direction: column; gap: var(--space-md);
}
.compare-col:last-child { border-right: 0; }
.compare-col h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1;
}
.compare-col h4 em { font-family: var(--font-italic); font-weight: 400; font-style: italic; font-stretch: 100%; color: var(--blue); }
.compare-col dl { display: flex; flex-direction: column; gap: 12px; }
.compare-col dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin-bottom: 2px;
}
.compare-col dd {
  margin: 0;
  font-size: 0.96rem;
  color: var(--text);
}
@media (max-width: 720px) {
  .compare { grid-template-columns: 1fr; }
  .compare-col { border-right: 0; border-bottom: 1px solid var(--paper-rule); }
  .compare-col:last-child { border-bottom: 0; }
}

/* ============================================================
   Team page — featured pair + roster grid
============================================================ */
.principals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}
.principal {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.principal .ph {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--paper-card);
}
.principal .ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.04);
  transition: transform 1.6s var(--easing);
}
.principal:hover .ph img { transform: scale(1.03); }
.principal .ph .badge {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--blue);
  color: var(--paper);
  padding: 6px 10px;
  font-weight: 600;
}
.principal .head {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--paper-rule);
}
.principal .head .role {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.principal .head .name {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1;
}
.principal .head .name em { font-family: var(--font-italic); font-weight: 400; font-style: italic; font-stretch: 100%; }
.principal .bio {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.principal .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--paper-rule);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
}
.principal .stats .item {
  display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--paper-rule-soft);
  padding-right: var(--space-sm);
}
.principal .stats .item:last-child { border-right: 0; padding-left: var(--space-sm); padding-right: 0; }
.principal .stats .item:not(:first-child) { padding-left: var(--space-sm); }
.principal .stats .v {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--blue);
}
.principal .stats .l {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

@media (max-width: 780px) {
  .principals { grid-template-columns: 1fr; gap: var(--space-lg); }
}

.coaches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
}
.coach {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--paper-rule);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow var(--dur) var(--easing), transform var(--dur) var(--easing);
}
.coach:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.coach .ph {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--paper-card);
}
.coach .ph img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: filter var(--dur) var(--easing), transform 1.6s var(--easing);
}
.coach:hover .ph img { transform: scale(1.02); }
.coach .meta {
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--paper-rule-soft);
}
.coach .role {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.coach .name {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.01em;
  font-size: 1.05rem;
  line-height: 1.1;
}
@media (max-width: 880px) { .coaches { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Contact page — architectural address + hours table + map
============================================================ */
.address-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-xl);
  align-items: start;
  padding-block: clamp(32px, 4.5vw, 60px);
  border-bottom: 1px solid var(--paper-rule);
}
.address-block {
  font-family: var(--font-display);
  font-stretch: 80%;
  display: flex; flex-direction: column; gap: var(--space-md);
}
.address-block .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
  font-weight: 500;
}
.address-block .street {
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
}
.address-block .coord {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: -8px;
}
.address-block .links {
  display: grid; gap: 12px;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--paper-rule);
}
.address-block .links a {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.015em;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.1;
  display: inline-flex; align-items: baseline; gap: 12px;
  color: var(--text);
  background: linear-gradient(currentColor, currentColor) 0 100%/0 1px no-repeat;
  transition: background-size var(--dur) var(--easing);
  padding-bottom: 4px;
}
.address-block .links a:hover { background-size: 100% 1px; color: var(--blue); }
.address-block .links a .lab {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
  font-weight: 500;
}

.hours {
  border-top: 1px solid var(--paper-rule);
  padding-top: var(--space-md);
}
.hours h3 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
  font-weight: 500;
  margin-bottom: var(--space-md);
}
.hours-table { display: flex; flex-direction: column; }
.hours-table .row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding-block: 10px;
  border-bottom: 1px dotted var(--paper-rule);
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 500;
}
.hours-table .day {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.hours-table .time {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

@media (max-width: 880px) {
  .address-hero { grid-template-columns: 1fr; }
}

.map-card {
  border: 1px solid var(--paper-rule);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/7;
  max-width: 880px;
  margin: 0 auto;
}
.map-card iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
  filter: grayscale(20%) contrast(1.05);
}
.map-cap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
  max-width: 880px;
  margin: 0 auto;
}

/* ============================================================
   Lead modal
============================================================ */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.lead-modal.open { display: flex; }
.lead-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,15,28,0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: fade-in var(--dur) var(--easing);
}
.lead-modal__card {
  position: relative;
  width: 100%;
  max-width: 540px;
  background: var(--paper);
  padding: clamp(24px, 4vw, 48px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border-top: 6px solid var(--blue);
  animation: slide-up var(--dur) var(--easing);
}
.lead-modal__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--paper-rule);
  color: var(--text);
  border-radius: 50%;
  transition: background var(--dur) var(--easing);
}
.lead-modal__close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lead-modal__close svg { width: 16px; height: 16px; }
.lead-modal__step {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
  margin: 0 0 12px;
}
.lead-modal__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.025em;
  line-height: 1;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 8px;
}
.lead-modal__sub {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0 0 var(--space-lg);
}
.lead-modal__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lead-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lead-modal__field { display: flex; flex-direction: column; gap: 6px; }
.lead-modal__field label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
  font-weight: 500;
}
.lead-modal__field input,
.lead-modal__field select {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 14px 16px;
  border: 1px solid var(--paper-rule);
  background: var(--bone);
  color: var(--text);
  outline: none;
  transition: border-color var(--dur) var(--easing);
  min-height: 48px;
  border-radius: 0;
}
.lead-modal__field input:focus,
.lead-modal__field select:focus { border-color: var(--blue); }
.lead-modal__submit {
  margin-top: 6px;
  width: 100%;
  justify-content: center;
}
.lead-modal__legal {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--text-quiet);
  line-height: 1.5;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 540px) {
  .lead-modal__row { grid-template-columns: 1fr; }
}

/* ============================================================
   Booking page
============================================================ */
.booking-progress {
  background: var(--paper-soft);
  border-bottom: 1px solid var(--paper-rule);
  padding-block: var(--space-md);
}
.booking-progress-inner {
  display: flex; align-items: center; gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.booking-progress .step {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text-muted);
}
.booking-progress .step.done { color: var(--text); }
.booking-progress .step.current { color: var(--blue); font-weight: 600; }
.booking-progress .step .step-num {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 600;
}
.booking-progress .step.done .step-num { background: var(--text); color: var(--paper); border-color: var(--text); }
.booking-progress .step.current .step-num { background: var(--blue); color: var(--paper); border-color: var(--blue); }
.booking-progress .divider {
  flex: 1; height: 1px; background: var(--paper-rule);
  max-width: 100px;
}

.booking-hero {
  padding-block: clamp(48px, 7vw, 96px);
  border-bottom: 1px solid var(--paper-rule);
}
.booking-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  letter-spacing: -0.025em;
  line-height: 0.95;
  font-size: clamp(2.25rem, 5vw, 4rem);
  max-width: 22ch;
  margin-bottom: var(--space-md);
}
.booking-hero h1 em { font-family: var(--font-italic); font-weight: 400; font-style: italic; font-stretch: 100%; color: var(--blue); }
.booking-hero h1 .accent { color: var(--blue); }
.booking-hero > .wrap > p {
  max-width: 56ch;
  font-size: 1.05rem;
  color: var(--text-muted);
  margin: 0;
}

.booking-calendar {
  margin-top: var(--space-xl);
  border: 1px solid var(--paper-rule);
  background: var(--paper-soft);
  min-height: 540px;
  display: flex; align-items: center; justify-content: center;
}
.booking-calendar.hidden { display: none; }
.calendar-placeholder {
  text-align: center;
  padding: var(--space-xl);
}
.calendar-placeholder strong {
  display: block;
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 500;
  font-size: 1.3rem;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.calendar-placeholder p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  max-width: 44ch;
}

.program-switcher {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--paper-rule);
}
.program-switcher h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
  font-weight: 500;
  margin-bottom: var(--space-md);
}
.program-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.program-chip {
  padding: 12px 18px;
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  border: 1px solid var(--paper-rule);
  background: var(--paper);
  color: var(--text);
  transition: all var(--dur) var(--easing);
  min-height: 44px;
}
.program-chip:hover { border-color: var(--text); }
.program-chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.expect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.expect-card {
  padding: var(--space-lg);
  background: var(--paper-soft);
  border: 1px solid var(--paper-rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.expect-card .icon-wrap {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink);
  color: var(--paper);
}
.expect-card .icon-wrap svg { width: 24px; height: 24px; }
.expect-card h4 {
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  line-height: 1;
}
.expect-card p { margin: 0; font-size: 0.95rem; color: var(--text-muted); line-height: 1.55; }

.booking-footer {
  padding-block: var(--space-lg);
  background: var(--paper-soft);
  border-top: 1px solid var(--paper-rule);
}
.booking-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.booking-footer .footer-bottom a { color: var(--text-muted); }
.booking-footer .footer-bottom a:hover { color: var(--blue); }
.booking-footer .powered-by .accent-blue { color: var(--blue); }

@media (max-width: 880px) { .expect-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Reveal animations
============================================================ */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 800ms var(--easing), transform 800ms var(--easing);
  }
  [data-reveal].in {
    opacity: 1;
    transform: translateY(0);
  }
  [data-reveal-img] {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1100ms var(--easing-deep);
  }
  [data-reveal-img].in {
    clip-path: inset(0 0 0 0);
  }
  [data-reveal-line] > * {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.4em);
    transition: opacity 700ms var(--easing), transform 700ms var(--easing);
  }
  [data-reveal-line].in > * {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Utilities
============================================================ */
.center-text { text-align: center; }
.flex-row { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.full-rule { display: block; height: 1px; background: var(--paper-rule); width: 100%; }

/* Lineage strip */
.lineage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  padding: var(--space-xl);
  border: 1px solid var(--paper-rule);
  background: var(--paper-soft);
}
.lineage h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
  font-weight: 500;
}
.lineage-chain {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  letter-spacing: -0.015em;
}
.lineage-chain .arrow {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  color: var(--blue);
  font-size: 1.4rem;
}
.lineage-chain .terminal { color: var(--blue); }

/* Lineage stamp (kept compatibility) */
.lineage-stamp {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--paper-rule);
  background: var(--paper);
}
.lineage-stamp img { width: 32px; height: 32px; object-fit: contain; }
.lineage-stamp .text { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.lineage-stamp .text .top {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.lineage-stamp .text .bottom {
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: var(--text);
}

/* =============================================================
   CRO COMPONENTS v2 (audit pass)
   Mobile sticky CTA, mobile phone icon, offer banner,
   kinetic marquee, hero video, how-it-works, objection strip,
   closing CTA upsize, mobile polish, editorial principals
============================================================= */

/* —— Offer banner above nav (fixed, dismissible) —————————————— */
.offer-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--blue);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  z-index: 52;
}
.offer-banner.hidden { display: none; }
.offer-banner-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 10px calc(var(--gutter) + 38px) 10px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
  min-height: 40px;
}
.offer-banner-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.offer-banner-text strong {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.offer-banner-text .dot {
  width: 4px; height: 4px;
  background: var(--bone);
  opacity: 0.45;
  border-radius: 50%;
  display: inline-block;
}
.offer-banner-cta {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--bone);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  cursor: pointer;
  background: transparent;
}
.offer-banner-cta:hover { color: var(--paper); }
.offer-banner-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bone);
  opacity: 0.7;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.offer-banner-close:hover { opacity: 1; }
.offer-banner-close svg { width: 14px; height: 14px; }

body.has-offer-banner .nav { top: 40px; }
body.has-offer-banner .nav-mobile { top: calc(var(--nav-h) + 40px); }
body.has-offer-banner .cover,
body.has-offer-banner .page-cover { margin-top: calc(var(--nav-h) + 40px); }
body.has-offer-banner .scroll-progress { top: calc(var(--nav-h) + 40px); }

@media (max-width: 640px) {
  .offer-banner-inner { font-size: 0.64rem; padding-block: 8px; min-height: 36px; letter-spacing: 0.1em; }
  body.has-offer-banner .nav { top: 36px; }
  body.has-offer-banner .nav-mobile { top: calc(var(--nav-h) + 36px); }
  body.has-offer-banner .cover,
  body.has-offer-banner .page-cover { margin-top: calc(var(--nav-h) + 36px); }
  body.has-offer-banner .scroll-progress { top: calc(var(--nav-h) + 36px); }
  .offer-banner-text strong { font-size: 0.74rem; }
}

/* —— Mobile phone tap-to-call in nav —————————————————— */
.nav-phone {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  border: 1px solid var(--paper-rule);
  background: transparent;
  transition: background var(--dur) var(--easing), color var(--dur) var(--easing), border-color var(--dur) var(--easing);
}
.nav-phone:hover { background: var(--blue); color: var(--paper); border-color: var(--blue); }
.nav-phone svg { width: 18px; height: 18px; }

/* —— Mobile-visible Free Trial CTA (override the original display:none) —— */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-cta {
    display: inline-flex;
    padding: 10px 14px;
    font-size: 0.78rem;
    min-height: 40px;
    gap: 6px;
  }
  .nav-phone { display: inline-flex; }
  .nav-inner { gap: 8px; }
  .nav-brand .meta { display: none; }
  .nav-cta .full { display: none; }
  .nav-cta .compact { display: inline; }
  .nav-toggle { display: inline-flex; }
  .nav.open .nav-mobile { display: flex; }
}
@media (min-width: 981px) {
  .nav-cta .compact { display: none; }
  .nav-cta .full { display: inline; }
}
@media (max-width: 480px) {
  .nav-cta { padding: 8px 11px; font-size: 0.7rem; min-height: 38px; }
  .nav-phone { display: none; }
}

/* —— Sticky mobile bottom CTA bar —————————————————— */
.mobile-cta-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 48;
  background: var(--ink);
  border-top: 1px solid var(--ink-rule);
  padding: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(11,15,28,0.18);
  transform: translateY(110%);
  transition: transform var(--dur) var(--easing);
}
.mobile-cta-bar.in { transform: translateY(0); }
.mobile-cta-bar-inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 8px;
  max-width: 540px;
  margin-inline: auto;
}
.mobile-cta-bar .btn-call,
.mobile-cta-bar .btn-trial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  min-height: 52px;
  white-space: nowrap;
  cursor: pointer;
}
.mobile-cta-bar .btn-call {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--ink-rule);
}
.mobile-cta-bar .btn-call:hover { background: var(--ink-soft); }
.mobile-cta-bar .btn-call svg { width: 16px; height: 16px; flex: none; }
.mobile-cta-bar .btn-trial {
  background: var(--blue);
  color: var(--bone);
  border: 0;
}
.mobile-cta-bar .btn-trial:hover { background: var(--blue-deep); }
.mobile-cta-bar .btn-trial .arr { display: inline-block; transition: transform var(--dur) var(--easing); }
.mobile-cta-bar .btn-trial:hover .arr { transform: translateX(4px); }

@media (max-width: 880px) {
  .mobile-cta-bar { display: block; }
  body { padding-bottom: 76px; }
}
body[data-page="booking"] .mobile-cta-bar { display: none !important; }
body[data-page="booking"] { padding-bottom: 0 !important; }

/* —— Kinetic hero marquee —————————————————— */
.cover-marquee {
  position: relative;
  margin-top: var(--space-md);
  padding-block: 14px;
  border-top: 1px solid var(--ink-rule);
  border-bottom: 1px solid var(--ink-rule);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.cover-marquee-strip {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  white-space: nowrap;
  animation: cover-marquee-scroll 42s linear infinite;
  will-change: transform;
}
.cover-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9rem, 1.4vw, 1.15rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-on-dark);
}
.cover-marquee-item em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  color: var(--blue-bright);
  text-transform: none;
  letter-spacing: -0.01em;
}
.cover-marquee-sep {
  width: 6px; height: 6px;
  background: var(--blue-bright);
  border-radius: 50%;
  flex: none;
}
@keyframes cover-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .cover-marquee-strip { animation: none; }
}

/* —— Hero video support —————————————————— */
.cover-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0.55;
  filter: contrast(1.06) saturate(0.85);
  display: block;
}

/* —— Trust bar with stars + lineage stamp —————————————————— */
.cover-trust-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}
.cover-trust .stars-block {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cover-trust .stars {
  font-family: var(--font-display);
  font-weight: 600;
  color: #FFC940;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  line-height: 1;
}
.cover-trust .lineage-stamp {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--ink-rule);
}
.cover-trust .lineage-stamp .text .top { color: var(--text-quiet-on-dark); }
.cover-trust .lineage-stamp .text .bottom { color: var(--text-on-dark); }
.cover-trust .lineage-stamp img {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* —— How it works 1-2-3 strip —————————————————— */
.howitworks {
  position: relative;
  padding-block: clamp(56px, 7vw, 96px);
  background: var(--paper-soft);
  border-block: 1px solid var(--paper-rule);
}
.howitworks-inner {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2.6fr;
  gap: var(--space-xl);
  align-items: start;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.howitworks-lede .shead-meta {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin-bottom: var(--space-md);
}
.howitworks-lede h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0 0 12px;
}
.howitworks-lede h3 em {
  font-family: var(--font-italic);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
  text-transform: none;
}
.howitworks-lede p {
  color: var(--text-muted);
  margin: 0;
  max-width: 36ch;
  font-size: 1rem;
}
.howitworks-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--paper-rule);
  border: 1px solid var(--paper-rule);
}
.howitworks-step {
  background: var(--paper);
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
  border-right: 1px solid var(--paper-rule);
}
.howitworks-step:last-child { border-right: 0; }
.howitworks-step .num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
}
.howitworks-step h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  margin: 4px 0;
  line-height: 1.02;
}
.howitworks-step h4 em {
  font-family: var(--font-italic);
  font-stretch: 100%;
  font-style: italic;
  font-weight: 400;
}
.howitworks-step p {
  color: var(--text-muted);
  margin: 0;
  font-size: 1.025rem;
  line-height: 1.6;
}
.howitworks-step .step-icon {
  margin-top: auto;
  width: 32px; height: 32px;
  color: var(--blue);
  opacity: 0.5;
}
.howitworks-step .step-icon svg { width: 100%; height: 100%; }

@media (max-width: 880px) {
  .howitworks-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
  .howitworks-steps { grid-template-columns: 1fr; }
  .howitworks-step { min-height: auto; border-right: 0; border-bottom: 1px solid var(--paper-rule); }
  .howitworks-step:last-child { border-bottom: 0; }
}

/* —— Objection demolition strip —————————————————— */
.objection-strip {
  padding-block: clamp(56px, 7vw, 96px);
}
.objection-strip-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2.6fr;
  gap: var(--space-xl);
  align-items: start;
}
.objection-strip-lede .shead-meta {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin-bottom: var(--space-md);
}
.objection-strip-lede h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  letter-spacing: -0.03em;
  line-height: 0.96;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.objection-strip-lede h3 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  text-transform: none;
}
.objection-strip-lede p {
  color: var(--text-muted);
  margin: 0;
  max-width: 38ch;
}
.objections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.objection {
  position: relative;
  padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 4px);
  border-left: 2px solid var(--blue);
  background: var(--paper-soft);
}
.objection .q {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.objection .a {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}
.objection .a strong {
  color: var(--text);
  font-weight: 600;
}
@media (max-width: 880px) {
  .objection-strip-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .objections { grid-template-columns: 1fr; }
}

/* —— Closing CTA presence upgrade —————————————————— */
.closing.closing-loud .closing-title {
  font-size: clamp(3.4rem, 11vw, 10.5rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
}
.closing.closing-loud {
  padding-block: clamp(96px, 13vw, 180px);
  position: relative;
  overflow: hidden;
}
.closing.closing-loud::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 70% 30%, rgba(46, 84, 204, 0.16), transparent 55%);
  pointer-events: none;
}
.closing.closing-loud > .wrap { position: relative; z-index: 2; }
.closing.closing-loud .btn-bone {
  padding: 22px 38px;
  font-size: 1.05rem;
  min-height: 68px;
}
.closing.closing-loud .closing-meta {
  font-size: 0.78rem;
  margin-bottom: var(--space-xl);
}
.closing.closing-loud .closing-foot {
  margin-top: var(--space-xl);
  gap: var(--space-xl);
}

/* —— Mobile hero height fix (use dvh, reduce on small) —————————————— */
@media (max-width: 540px) {
  .cover {
    min-height: 76vh;
    min-height: 76dvh;
    padding-block: clamp(56px, 14vw, 100px) var(--space-md);
  }
  .cover-title { font-size: clamp(1.9rem, 9vw, 3rem); }
  .cover-foot { padding-top: var(--space-sm); gap: var(--space-md); }
  .cover-lede { font-size: 0.98rem; }
  .cover-trust { gap: 12px; font-size: 0.62rem; }
  .cover-trust .num { font-size: 0.92rem; }
  .cover-trust .stars { font-size: 0.85rem; }
  .cover-trust-row { gap: 10px; }
}

/* —— Horizontal spine eyebrow for mobile —————————————————— */
.spine-mobile {
  display: none;
  position: relative;
  z-index: 4;
  padding: 9px var(--gutter);
  background: var(--ink);
  color: var(--text-quiet-on-dark);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink-rule);
  text-align: center;
  margin-top: var(--nav-h);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spine-mobile .dot {
  display: inline-block;
  width: 3px; height: 3px;
  background: var(--blue-bright);
  border-radius: 50%;
  margin: 0 8px;
  vertical-align: middle;
}
@media (max-width: 980px) {
  .spine-mobile { display: block; }
  .spine-mobile + .cover,
  .spine-mobile + .page-cover { margin-top: 0; }
  body.has-offer-banner .spine-mobile { margin-top: 0; }
}

/* —— Tap target floors —————————————————— */
.geo-item,
.faq-row summary,
.program-chip { min-height: 44px; }

/* —— Unified image filter (editorial cohesion) —————————————————— */
.toc-feature .bg img,
.toc-row .thumb img,
.split-img img,
.dispatch-feature .img img,
.review img,
.principal .ph img,
.coach img {
  filter: contrast(1.04) saturate(0.94);
  transition: filter var(--dur) var(--easing), transform var(--dur) var(--easing);
}
.toc-feature:hover .bg img,
.toc-row:hover .thumb img {
  filter: contrast(1.06) saturate(1) brightness(1.02);
}

/* —— Team page: oversized editorial portraits —————————————————— */
.principal-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl) var(--space-xl);
  align-items: start;
  margin-top: var(--space-xl);
}
.principal-card {
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--space-md);
}
.principal-card .ph-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper-card);
  overflow: hidden;
}
.principal-card .ph-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.06) saturate(0.92);
  transition: filter var(--dur) var(--easing), transform var(--dur) var(--easing);
}
.principal-card:hover .ph-wrap img {
  filter: grayscale(0) contrast(1.08) saturate(1);
  transform: scale(1.02);
}
.principal-card .ph-wrap .badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  padding: 6px 10px;
  background: var(--blue);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.principal-card .ph-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
  padding-top: 10px;
  border-top: 1px solid var(--paper-rule);
}
.principal-card .role {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
  margin: 4px 0 8px;
  display: block;
}
.principal-card .name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  display: block;
}
.principal-card .name em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.015em;
}
.principal-card .pull-quote {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.4;
  color: var(--text);
  border-left: 2px solid var(--blue);
  padding-left: var(--space-md);
  margin: var(--space-md) 0;
  max-width: 36ch;
}
.principal-card .bio {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 var(--space-md);
}
.principal-card .stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--paper-rule);
  padding-top: var(--space-md);
}
.principal-card .stats-row .item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.principal-card .stats-row .v {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 80%;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.principal-card .stats-row .l {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
}

@media (max-width: 880px) {
  .principal-editorial { grid-template-columns: 1fr; gap: var(--space-xl); }
  .principal-card .ph-wrap { aspect-ratio: 1 / 1.05; }
}

/* —— Ticker mobile pause + slower —————————————————— */
@media (max-width: 720px) {
  .ticker-strip { animation-duration: 90s; }
}
.ticker.paused .ticker-strip { animation-play-state: paused; }

/* —— Booking page: inline phone collection card —————————————————— */
.booking-phone-card {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--paper-soft);
  border: 1px solid var(--paper-rule);
  border-left: 4px solid var(--blue);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.booking-phone-card.collected { display: none; }
.booking-phone-card .step-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
}
.booking-phone-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  letter-spacing: -0.02em;
  margin: 4px 0 8px;
  line-height: 1.05;
}
.booking-phone-card h3 em {
  font-family: var(--font-italic);
  font-stretch: 100%;
  font-style: italic;
  font-weight: 400;
}
.booking-phone-card p {
  color: var(--text-muted);
  margin: 0 0 var(--space-sm);
  font-size: 0.96rem;
  max-width: 48ch;
}
.booking-phone-form {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}
.booking-phone-form input {
  flex: 1;
  min-width: 200px;
  padding: 14px 16px;
  border: 1px solid var(--paper-rule);
  background: var(--bone);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  min-height: 52px;
  border-radius: 0;
  transition: border-color var(--dur) var(--easing);
}
.booking-phone-form input:focus { border-color: var(--blue); }
.booking-phone-form button {
  padding: 14px 26px;
  background: var(--blue);
  color: var(--bone);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  border: 0;
  min-height: 52px;
  cursor: pointer;
}
.booking-phone-form button:hover { background: var(--blue-deep); }
.booking-phone-success {
  display: none;
  padding: var(--space-md);
  background: rgba(20, 55, 162, 0.06);
  border: 1px solid var(--blue-tint);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
}
.booking-phone-success.in { display: block; }

/* —— Hide kids program chip default — adult-bjj is default —— */
/* No CSS change needed — logic lives in scripts.js */

/* ============================================================
   Team page — Read Bio button + Bio modal
============================================================ */
.coach-bio-btn {
  margin-top: 10px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--paper-rule);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
  transition: background var(--dur) var(--easing), color var(--dur) var(--easing), border-color var(--dur) var(--easing);
}
.coach-bio-btn:hover,
.coach-bio-btn:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.coach-bio-btn .arr {
  transition: transform var(--dur) var(--easing);
}
.coach-bio-btn:hover .arr { transform: translateX(3px); }

.bio-modal {
  position: fixed; inset: 0;
  display: none;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
.bio-modal.open { display: flex; }
.bio-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 16, 18, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.bio-modal__card {
  position: relative;
  z-index: 1;
  background: var(--paper);
  width: 100%;
  max-width: 680px;
  max-height: calc(100vh - 2 * var(--space-md));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--paper-rule);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.bio-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px; height: 36px;
  background: var(--paper);
  border: 1px solid var(--paper-rule);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--easing), color var(--dur) var(--easing);
}
.bio-modal__close:hover { background: var(--ink); color: var(--paper); }
.bio-modal__close svg { width: 18px; height: 18px; }
.bio-modal__body {
  padding: var(--space-lg);
  padding-right: calc(var(--space-lg) + 32px);
  overflow-y: auto;
  max-height: calc(100vh - 2 * var(--space-md));
}
.bio-modal__head {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  margin-bottom: var(--space-md);
}
.bio-modal__thumb {
  flex: 0 0 auto;
  width: 140px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-card);
  border: 1px solid var(--paper-rule-soft);
}
.bio-modal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.bio-modal__heading {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 6px;
}
.bio-modal__role {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin-bottom: 10px;
}
.bio-modal__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 80%;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.bio-modal__text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
}
.bio-modal__text p { margin: 0 0 0.85em; }
.bio-modal__text p:last-child { margin-bottom: 0; }
.bio-modal__text .bio-stats {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin: 0 0 1em;
  padding-bottom: 0.7em;
  border-bottom: 1px solid var(--paper-rule-soft);
}
.bio-modal__text h4 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin: 1.5em 0 0.55em;
}
.bio-modal__text h4:first-child,
.bio-modal__text .bio-stats + h4 { margin-top: 0.4em; }
.bio-modal__text ul {
  margin: 0 0 1em;
  padding-left: 1.1em;
  list-style: square;
}
.bio-modal__text li {
  margin-bottom: 0.3em;
  line-height: 1.45;
}
.bio-modal__text em { font-style: italic; }

@media (max-width: 540px) {
  .bio-modal__card { max-height: 92vh; }
  .bio-modal__body {
    padding: var(--space-md);
    padding-right: calc(var(--space-md) + 28px);
    max-height: none;
  }
  .bio-modal__thumb { width: 96px; }
}

/* Print clean-up */
@media print {
  .nav, .closing, .colophon, .ticker, .scroll-progress, .spine,
  .offer-banner, .mobile-cta-bar, .spine-mobile { display: none !important; }
  body { padding-bottom: 0 !important; }
}