/* ==========================================================================
   Black Dog Fitness — Home of BD CrossFit
   Art direction: chrome + electric blue on black. Condensed athletic display
   type, V-shaped dividers from the Duke emblem, grit texture, skewed CTAs.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset, SIL OFL: see assets/fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("/assets/fonts/big-shoulders-display-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallbacks for the display face: local fonts scaled so headlines wrap the same before
   and after Big Shoulders loads (no layout shift on swap). size-adjust is the median uppercase width
   ratio to Big Shoulders 900; the overrides restore its ascent (0.984em) and descent (0.213em). */
@font-face {
  font-family: "Big Shoulders Fallback Impact";
  src: local("Impact");
  font-weight: 700 900;
  size-adjust: 95%;
  ascent-override: 103.58%;
  descent-override: 22.42%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Big Shoulders Fallback Narrow";
  src: local("Arial Narrow Bold"), local("ArialNarrow-Bold");
  font-weight: 700 900;
  size-adjust: 85%;
  ascent-override: 115.76%;
  descent-override: 25.06%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Big Shoulders Fallback Arial";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 700 900;
  size-adjust: 70%;
  ascent-override: 140.57%;
  descent-override: 30.43%;
  line-gap-override: 0%;
}
/* Android has none of the above; its system Roboto gets the same treatment. A single 700 weight pins
   the variable Roboto on newer Android to Bold, the width this face is tuned for. */
@font-face {
  font-family: "Big Shoulders Fallback Roboto";
  src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto");
  font-weight: 700;
  size-adjust: 76%;
  ascent-override: 129.47%;
  descent-override: 28.03%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks for the body face, so ledes and buttons keep their line breaks and widths when
   Archivo swaps in. Archivo is variable, so each weight band gets its own scale: the median width ratio
   to Archivo at that weight (mixed-case copy at 400-600, mostly uppercase buttons and labels at 800).
   The overrides restore Archivo's ascent (0.878em) and descent (0.21em). */
@font-face {
  font-family: "Archivo Fallback Arial";
  src: local("Arial"), local("ArialMT");
  font-weight: 400 500;
  size-adjust: 98.5%;
  ascent-override: 89.14%;
  descent-override: 21.32%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback Arial";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600;
  size-adjust: 96%;
  ascent-override: 91.46%;
  descent-override: 21.88%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback Arial";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 700;
  size-adjust: 100%;
  ascent-override: 87.80%;
  descent-override: 21.00%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback Arial";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 800;
  size-adjust: 104%;
  ascent-override: 84.42%;
  descent-override: 20.19%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback Roboto";
  src: local("Roboto"), local("Roboto-Regular");
  font-weight: 400 500;
  size-adjust: 99.5%;
  ascent-override: 88.24%;
  descent-override: 21.11%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback Roboto";
  src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto");
  font-weight: 600;
  size-adjust: 102%;
  ascent-override: 86.08%;
  descent-override: 20.59%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback Roboto";
  src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto");
  font-weight: 700;
  size-adjust: 105%;
  ascent-override: 83.62%;
  descent-override: 20.00%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback Roboto";
  src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto");
  font-weight: 800;
  size-adjust: 112%;
  ascent-override: 78.39%;
  descent-override: 18.75%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #050608;
  --ink-2: #0a0d12;
  --ink-3: #11151c;
  --ink-4: #1a1f28;
  --line: rgba(233, 237, 241, 0.12);
  --line-strong: rgba(233, 237, 241, 0.24);

  --chrome: #eef1f4;
  --text: #c9cfd6;
  --muted: #9aa3ad;

  --blue: #1e8bff;
  --blue-hi: #48adff;
  --blue-deep: #0a5fe0;
  --blue-glow: rgba(30, 139, 255, 0.35);
  --amber: #ffb020;
  --danger: #ff5c5c;

  --concrete: #e9ecef;
  --concrete-2: #d9dde2;
  --ink-on-light: #0b0e13;
  --muted-on-light: #4a525c;

  --chrome-grad: linear-gradient(180deg, #ffffff 0%, #e4e8ec 34%, #8f98a2 49%, #6f7882 51%, #c7cdd4 60%, #f7f8fa 82%, #a7aeb6 100%);
  --blue-grad: linear-gradient(180deg, #3aa8ff 0%, #1e8bff 40%, #0a5fe0 49%, #0a6cff 52%, #48b4ff 100%);
  /* Soft variants for accent words below hero size, where hard bevel stops read as a smudge */
  --chrome-soft: linear-gradient(180deg, #ffffff 0%, #e8ecf0 45%, #b9c1ca 62%, #f4f6f8 100%);
  --blue-soft: linear-gradient(180deg, #5bbaff 0%, #1e8bff 55%, #0a6cff 100%);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --font-display: "Big Shoulders Display", "Big Shoulders Fallback Impact", "Big Shoulders Fallback Narrow", "Big Shoulders Fallback Arial", "Big Shoulders Fallback Roboto", Impact, sans-serif;
  --font-body: "Archivo", "Archivo Fallback Arial", "Archivo Fallback Roboto", "Helvetica Neue", Arial, sans-serif;

  --max: 1320px;
  --gutter: clamp(16px, 4.5vw, 56px);
  --section-y: clamp(80px, 8vw, 120px);
  --v: clamp(28px, 5vw, 80px);
  --header-h: 76px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 4px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  color-scheme: dark;
}
body {
  min-height: 100vh;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, svg, iframe, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
a[href^="tel:"], .nowrap { white-space: nowrap; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { font-weight: inherit; line-height: 1; overflow-wrap: break-word; }
.display, .h2, h3, .faq-item summary { text-wrap: balance; }
p, .lede { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
/* `hidden` must win over component display rules (placeholders rely on it) */
[hidden] { display: none !important; }
::selection { background: var(--blue); color: #fff; }

:focus-visible {
  outline: 3px solid var(--blue-hi);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--light :focus-visible, .gear :focus-visible { outline-color: var(--blue-deep); }
/* Chrome never matches :focus on a cross-origin iframe, so main.js marks the embed's wrapper instead */
.has-frame-focus::before { content: ""; position: absolute; inset: 0; z-index: 2; box-shadow: inset 0 0 0 3px var(--blue-hi); pointer-events: none; }

/* Grit: a fixed film-grain layer across the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.07;
  background-image: var(--noise);
  mix-blend-mode: overlay;
}

/* ---------- Utilities ---------- */
.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s;
}
.skip-link:focus { transform: none; }

.chrome-text {
  background: var(--chrome-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.blue-text {
  background: var(--blue-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.h2 .chrome-text, .talk .chrome-text, .gear .chrome-text, .faq__intro .chrome-text { background-image: var(--chrome-soft); }
.h2 .blue-text, .talk .blue-text, .community-photo .blue-text, .book .blue-text, .lp-hero .blue-text { background-image: var(--blue-soft); }
.outline-text {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(238, 241, 244, 0.9);
}

/* Kicker / eyebrow label */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-hi);
}
.kicker__sep { opacity: 0.7; }
@media (max-width: 560px) {
  /* Triangle sits outside the flow so wrapped lines all start at the same indent */
  .kicker { flex-wrap: wrap; row-gap: 4px; position: relative; padding-left: 26px; }
  .kicker::before { position: absolute; left: 0; top: 4px; top: calc(0.5lh - 6px); }
  .kicker__sep { display: none; }
  .kicker > span + span:last-child { flex-basis: 100%; }
}
.kicker::before {
  content: "";
  width: 14px; height: 12px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  flex: none;
}

.display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.86;
  color: var(--chrome);
}
.h2 {
  font-size: clamp(3rem, 8.4vw, 7.5rem);
  margin-top: 18px;
}
.lede {
  font-size: clamp(1.08rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--text);
  max-width: 38em;
}

/* ---------- Buttons: skewed like the wordmark's italic letterforms ---------- */
.btn {
  --btn-bg: var(--blue-deep);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 28px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transform: skewX(-12deg);
  transition: background-color 0.25s, color 0.25s, box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  position: relative;
  isolation: isolate;
}
.btn > * { transform: skewX(12deg); }
.btn > span { display: inline-block; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary {
  /* Same bevel, deeper top stops: white 15px/800 labels hold 4.5:1 across the cap height */
  background: linear-gradient(180deg, #1f86f5 0%, #0a64ee 46%, #0752c8 52%, #1670ec 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 10px 30px -10px var(--blue-glow);
}
.btn--primary:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 16px 44px -10px rgba(30, 139, 255, 0.7);
  transform: skewX(-12deg) translateY(-2px);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--chrome);
  box-shadow: 0 0 0 1.5px var(--line-strong) inset;
}
.btn--ghost:hover { --btn-bg: rgba(238, 241, 244, 0.08); box-shadow: 0 0 0 1.5px var(--chrome) inset; }
.btn--chrome {
  --btn-fg: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #e6e9ed 46%, #b8bfc7 50%, #eef1f4 100%);
}
.btn--chrome:hover { transform: skewX(-12deg) translateY(-2px); }
.btn--dark { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--dark:hover { --btn-bg: var(--blue-deep); }
.btn--lg { min-height: 62px; padding: 0 36px; font-size: 1rem; }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 0.8rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; padding-left: 7px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--chrome);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color 0.2s;
}
.text-link:hover { color: var(--blue-hi); }

/* ---------- Announcement bar ---------- */
.announce {
  position: relative;
  z-index: 51;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 52px 8px 16px;
  background: var(--blue-deep);
  color: #fff;
  font-size: 0.88rem;
  line-height: 1.4;
  text-align: center;
}
.announce strong { font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.announce a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; white-space: nowrap; }
.announce__close {
  position: absolute;
  right: 4px; top: 50%;
  width: 44px; height: 44px;
  transform: translateY(-50%);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
}
.announce[data-enabled="false"], .announce-off .announce { display: none; }

@media (max-width: 380px) {
  .btn--lg { padding: 0 20px; letter-spacing: 0.08em; font-size: 0.92rem; }
  .btn { white-space: normal; text-align: center; }
}

@media (max-width: 560px) {
  .hero .btn-row, .final-cta .btn-row, .lp-hero .btn-row { flex-direction: column; align-items: stretch; padding-inline: 7px; }
  .hero .btn-row .btn, .final-cta .btn-row .btn, .lp-hero .btn-row .btn { width: 100%; }
}
@media (max-width: 900px) {
  .site-header:not(.is-scrolled):not(.is-solid) { background: linear-gradient(180deg, rgba(5, 6, 8, 0.88) 0%, rgba(5, 6, 8, 0.5) 60%, rgba(5, 6, 8, 0) 100%); }
  .lp-header { background: linear-gradient(180deg, rgba(5, 6, 8, 0.88) 0%, rgba(5, 6, 8, 0) 100%); }
}

/* ---------- Header ---------- */
/* Sticky (not fixed) so an announcement bar above it pushes it down; the hero slides up underneath */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  transition: background-color 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}
.site-header.is-scrolled,
.site-header.is-solid {
  background: rgba(5, 6, 8, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 var(--line);
}
.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}
.brand__emblem { width: 62px; height: auto; }
.brand__wordmark { width: 148px; height: auto; }

.primary-nav { margin-left: auto; }
.primary-nav ul { display: flex; gap: clamp(14px, 2vw, 30px); }
.primary-nav a {
  position: relative;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--chrome);
  padding: 8px 0;
  white-space: nowrap;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.primary-nav a:hover::after,
.primary-nav a[aria-current]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 22px; }
.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--chrome);
  text-decoration: none;
  white-space: nowrap;
}
.phone-link svg { width: 17px; height: 17px; color: var(--blue-hi); }
.phone-link:hover { color: var(--blue-hi); }

.menu-toggle {
  display: none;
  width: 48px; height: 48px;
  margin-left: auto;
  position: relative;
  z-index: 60;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  position: absolute;
  left: 12px;
  width: 24px; height: 2px;
  background: var(--chrome);
  transition: transform 0.35s var(--ease-out), opacity 0.2s;
}
.menu-toggle__bars { top: 23px; }
.menu-toggle__bars::before { content: ""; left: 0; top: -8px; }
.menu-toggle__bars::after { content: ""; left: 0; top: 8px; width: 16px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { width: 24px; transform: translateY(-8px) rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 24px) var(--gutter) 32px;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(30, 139, 255, 0.22), transparent 60%),
    var(--ink);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s linear 0.3s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s; }
.mobile-menu nav a {
  display: block;
  padding: 6px 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.8rem, 13vw, 4.5rem);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--chrome);
}
.mobile-menu nav a:hover { color: var(--blue-hi); }
.mobile-menu nav li { border-bottom: 1px solid var(--line); }
.mobile-menu__foot { margin-top: auto; padding-top: 32px; display: grid; gap: 18px; }
.mobile-menu__foot .btn { width: 100%; }
.mobile-menu__foot .phone-link { font-size: 1.15rem; justify-content: center; }
body.menu-open { overflow: hidden; }
body.menu-open .site-header { z-index: 70; }

@media (max-width: 1360px) { .header-actions .phone-link { display: none; } }
@media (max-width: 1280px) {
  .primary-nav { display: none; }
  .header-actions { margin-left: auto; }
  .menu-toggle { display: block; margin-left: 8px; }
}
@media (max-width: 720px) {
  :root { --header-h: 64px; }
  .header-actions { display: none; }
  .menu-toggle { margin-left: auto; }
  .brand__emblem { width: 50px; }
  .brand__wordmark { width: 118px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  min-height: min(100svh, 1000px);
  padding: calc(var(--header-h) + clamp(20px, 4vh, 64px)) 0 clamp(120px, 14vw, 200px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(70% 60% at 85% 30%, rgba(30, 139, 255, 0.18), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, rgba(30, 139, 255, 0.08), transparent 70%),
    var(--ink);
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: 0 var(--gutter);
}
.hero__copy { grid-column: 1 / span 7; grid-row: 1; align-self: start; padding-top: clamp(8px, 5vh, 72px); position: relative; z-index: 2; }
.hero__title {
  font-size: clamp(3.6rem, min(9.2vw, 15.5vh), 10.5rem);
  line-height: 0.82;
  margin: 16px 0 22px;
}
.hero__title .line { display: block; white-space: nowrap; }
.hero__title .kicker, #lp-title .kicker { display: flex; line-height: 1.4; margin-bottom: clamp(14px, 2vh, 22px); }
.lp-title__main { display: block; }
.hero__title .outline-text { -webkit-text-stroke-width: clamp(2px, 0.18vw, 2.5px); }
.hero__sub { max-width: 34em; margin-bottom: 22px; }
.hero__offer {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 30px;
  padding: 10px 16px 10px 12px;
  border-left: 3px solid var(--blue);
  background: linear-gradient(90deg, rgba(30, 139, 255, 0.16), rgba(30, 139, 255, 0.02));
  font-size: 0.92rem;
  color: var(--text);
}
.hero__offer strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--chrome);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 36px;
  font-size: 0.9rem;
  color: var(--muted);
}
.hero__meta a { color: var(--chrome); text-decoration: none; }
.hero__meta a:hover { color: var(--blue-hi); }
.hero__meta span, .hero__meta a { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta svg { width: 16px; height: 16px; color: var(--blue-hi); flex: none; }

.hero__media {
  grid-column: 7 / -1;
  grid-row: 1;
  position: relative;
  z-index: 1;
  margin-right: calc(var(--gutter) * -1);
}
.hero__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
}
.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 40% 12%;
  transform: scale(1.06);
}
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 6, 8, 0.7) 0%, transparent 45%),
    linear-gradient(0deg, var(--ink) 0%, rgba(5, 6, 8, 0.6) 18%, transparent 40%);
}
/* Chrome edge echoing the emblem's bevelled frame */
.hero__edge {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  pointer-events: none;
  background: var(--chrome-grad);
  clip-path: polygon(22% 0, calc(22% + 6px) 0, 6px 100%, 0 100%);
  opacity: 0.9;
  bottom: 12%;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}
@media (min-width: 901px) {
  .hero { min-height: 100svh; padding-bottom: clamp(64px, 6vw, 88px); }
  .hero__photo { aspect-ratio: auto; height: min(calc(100svh - var(--header-h) - 56px), 60vw, 1000px); }
  .hero__badge { bottom: 14%; }
}
.hero__badge {
  position: absolute;
  left: -2%;
  bottom: 8%;
  width: clamp(120px, 13vw, 176px);
  aspect-ratio: 1;
  z-index: 3;
}
.hero__badge svg.ring { position: relative; z-index: 1; width: 100%; height: 100%; animation: spin 60s linear infinite; }
.hero__badge svg.ring text {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 3.2px;
  fill: var(--chrome);
  text-transform: uppercase;
}
.hero__badge img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50%;
  z-index: 2;
}
.hero__badge::before {
  content: "";
  position: absolute;
  inset: 19%;
  border-radius: 50%;
  background: rgba(5, 6, 8, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px var(--line-strong);
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 901px) and (max-height: 940px) {
  .hero { align-items: flex-start; }
  .hero__copy { padding-top: 0; }
  .hero__title { font-size: clamp(3.6rem, min(9.2vw, 13vh), 10.5rem); margin: 12px 0 18px; }
  .hero__sub { margin-bottom: 16px; }
  .hero__offer { margin-bottom: 20px; }
  .hero__meta { margin-top: 18px; }
  .hero__badge { width: 148px; }
  .hero__badge svg.ring text { font-size: 12.5px; letter-spacing: 2.6px; }
}

/* Giant V watermark behind the hero */
.hero__v {
  position: absolute;
  z-index: -1;
  right: -8vw;
  top: -6vw;
  width: min(78vw, 1100px);
  aspect-ratio: 1.15;
  background: linear-gradient(180deg, rgba(238, 241, 244, 0.07), rgba(238, 241, 244, 0.01));
  clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0, 9% 5%, 50% 88%, 91% 5%, 9% 5%);
}

/* Page-load choreography */
.js .hero [data-load] {
  animation: rise 0.9s var(--ease-out) both;
  animation-delay: calc(var(--d, 0) * 80ms);
}
.js .hero .hero__media[data-load] { animation-name: slide-in; animation-duration: 1.2s; }
@keyframes rise { from { transform: translateY(24px); } to { transform: none; } }
@keyframes slide-in { from { transform: translateX(32px); } to { transform: none; } }

@media (max-width: 900px) {
  .hero { padding: 0 0 72px; min-height: 0; align-items: flex-start; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { grid-column: 1; grid-row: 1; align-self: end; padding-top: min(27vh, 240px); }
  .hero__sub { font-size: 1.02rem; margin-bottom: 16px; }
  .hero__offer { margin-bottom: 22px; }
  .hero__offer span { display: block; font-size: 0.78rem; margin-top: 4px; }
  .hero__title { font-size: min(19.5vw, 8.5rem); }
  .hero__media {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin: 0 calc(var(--gutter) * -1);
  }
  .hero__photo { aspect-ratio: auto; height: min(62vh, 560px); clip-path: none; }
  .hero__photo img { object-position: 55% 8%; transform: none; }
  .hero__photo::after { background: linear-gradient(180deg, rgba(5, 6, 8, 0.55) 0%, rgba(5, 6, 8, 0.35) 22%, rgba(5, 6, 8, 0.6) 55%, var(--ink) 96%); }
  .hero__edge, .hero__badge { display: none; }
  .hero__v { display: none; }
  .js .hero .hero__media[data-load] { transform: none; }
}

/* ---------- Marquee (crossed tape) ---------- */
.tape-wrap {
  position: relative;
  z-index: 5;
  margin-top: calc(clamp(70px, 9vw, 130px) * -1);
  height: clamp(110px, 12vw, 170px);
  overflow: hidden;
  pointer-events: none;
}
.tape {
  position: absolute;
  left: -5%;
  width: 110%;
  top: 50%;
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 4.4vw, 3.7rem);
  line-height: 1;
  text-transform: uppercase;
  padding: 0.28em 0 0.24em;
}
.tape--blue {
  background: var(--blue-grad);
  color: var(--ink);
  transform: translateY(-50%) rotate(-3deg);
  z-index: 2;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
}
.tape__track {
  display: flex;
  flex: none;
  gap: 0.6em;
  padding-right: 0.6em;
  animation: marquee 48s linear infinite;
}
.tape__track span { display: inline-flex; align-items: center; gap: 0.6em; }
.tape__track span::after {
  content: "";
  width: 0.5em; height: 0.42em;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- Generic section ---------- */
.section { position: relative; padding-block: var(--section-y); }
/* Neighbouring sections on the same background: halve the shared gap */
.section--tight-top { padding-top: calc(var(--section-y) * 0.5); }
.section--tight-bottom { padding-bottom: calc(var(--section-y) * 0.6); }
.section-head { display: grid; gap: 24px; margin-bottom: clamp(48px, 6vw, 88px); }
.section-head--split {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: 32px var(--gutter);
}
@media (max-width: 860px) { .section-head--split { grid-template-columns: 1fr; } }
.section-head--center { justify-items: center; text-align: center; }
.section-head--row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px var(--gutter);
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.section-head--row .lede { margin-top: 14px; }
.h2--compact { font-size: clamp(2.6rem, 5vw, 4.5rem); }
@media (max-width: 720px) { .section-head--row { grid-template-columns: 1fr; } }

/* Dark surface with a faint concrete grain */
.section--grain { position: relative; isolation: isolate; background: linear-gradient(180deg, var(--ink-2), var(--ink)); }
.section--grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  background-size: 260px 260px;
  opacity: 0.06;
  pointer-events: none;
}

/* Light "concrete" section with V-cut top + chevron bottom */
.section--light {
  background:
    var(--noise-dark),
    radial-gradient(80% 60% at 20% 0%, #f3f5f7 0%, transparent 70%),
    var(--concrete);
  background-size: 260px 260px, auto, auto;
  color: var(--muted-on-light);
  padding-block: calc(var(--section-y) + var(--v) * 0.6) calc(var(--section-y) * 0.6 + var(--v));
  clip-path: polygon(0 0, 50% var(--v), 100% 0, 100% calc(100% - var(--v)), 50% 100%, 0 calc(100% - var(--v)));
  margin-block: calc(var(--v) * -0.25);
}
.section--light .display { color: var(--ink-on-light); }
.section--light .kicker { color: var(--blue-deep); }
.section--light .lede { color: var(--muted-on-light); }

/* Blue chevron that sits at the top of a dark section */
.chevron-top { position: relative; }
.chevron-top::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: clamp(80px, 10vw, 140px);
  height: clamp(40px, 5vw, 70px);
  transform: translateX(-50%);
  background: var(--blue-grad);
  clip-path: polygon(0 0, 22% 0, 50% 62%, 78% 0, 100% 0, 50% 100%);
}

/* ---------- Classes (#classes) ---------- */
.classes__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.classes__intro { position: sticky; top: calc(var(--header-h) + 40px); }
.classes__intro .lede { margin-top: 28px; }
.classes__intro .btn-row { margin-top: 36px; }

.pillars { border-top: 1px solid var(--line); counter-reset: pillar; }
.pillar {
  position: relative;
  display: grid;
  grid-template-columns: clamp(84px, 11vw, 150px) minmax(0, 1fr);
  gap: 8px clamp(16px, 3vw, 40px);
  padding: clamp(32px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.4s;
}
.pillar::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  height: 2px; width: 0;
  background: var(--blue);
  transition: width 0.7s var(--ease-out);
}
.pillar:hover::before { width: 100%; }
.pillar__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--muted);
  transition: color 0.4s, -webkit-text-stroke-color 0.4s;
}
.pillar:hover .pillar__num { color: var(--blue); -webkit-text-stroke-color: var(--blue); }
.pillar__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--chrome);
  margin-bottom: 12px;
}
.pillar p { max-width: 36em; }
/* Homepage pillars aren't a sequence: icon chips instead of numerals (those belong to How it works) */
.pillars--icons .pillar { grid-template-columns: 54px minmax(0, 1fr); }
.pillar__icon { margin-bottom: 0; }
@media (max-width: 560px) {
  .pillars--icons .pillar { grid-template-columns: minmax(0, 1fr); }
  .pillar__icon { margin-bottom: 10px; }
}
.pillars--wide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); border-top: 0; }
.pillars--wide .pillar { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; align-content: start; border-top: 1px solid var(--line); }
.pillars--wide .pillar > div { display: contents; }
@media (max-width: 860px) { .pillars--wide { grid-template-columns: 1fr; } }

.gear {
  margin-top: clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  background: var(--noise-dark), var(--concrete);
  background-size: 260px 260px, auto;
  color: var(--muted-on-light);
}
.gear .kicker { color: var(--blue-deep); }
.gear .display { color: var(--ink-on-light); }
.gear .chrome-text { background-image: none; color: var(--blue-deep); -webkit-text-fill-color: currentColor; }
.gear__mosaic {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: var(--ink);
  min-height: 420px;
}
.gear__tile { position: relative; overflow: hidden; }
.gear__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.gear__tile:hover img { transform: scale(1.05); }
.gear__tile--lead { grid-row: 1 / -1; }
.gear__tile--lead img { object-position: 45% 50%; }
.gear__body { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.gear__body h3 { font-size: clamp(2rem, 3.6vw, 3.1rem); margin: 14px 0 22px; }
.gear__list { display: grid; gap: 0; }
.gear__list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(11, 14, 19, 0.28);
  font-weight: 700;
  color: var(--ink-on-light);
}
.gear__list li span:last-child { color: var(--muted-on-light); font-weight: 500; font-size: 0.9rem; text-align: right; }

@media (max-width: 960px) {
  .classes__grid { grid-template-columns: 1fr; }
  .classes__intro { position: static; }
  .gear { grid-template-columns: 1fr; }
  .gear__mosaic { min-height: 0; aspect-ratio: 1 / 1; }
}

/* ---------- First visit steps (light) ---------- */
/* One connected strip, like a WOD written on the whiteboard */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.step {
  position: relative;
  padding: 34px 28px 36px;
  background: rgba(244, 246, 248, 0.82);
  border: 2px solid var(--ink-on-light);
  transition: background-color 0.3s;
}
.step + .step { border-left: 0; }
.step:hover { background: #fff; }
.step::before {
  content: "";
  position: absolute;
  top: -2px; left: -2px; right: -2px;
  height: 8px;
  background: var(--blue-grad);
}
.step__num {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(5rem, 7vw, 7rem);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink-on-light);
}
.step__num small {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-deep);
  -webkit-text-stroke: 0;
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  text-transform: uppercase;
  color: var(--ink-on-light);
  margin: 22px 0 10px;
}
.step p { font-size: 0.98rem; color: var(--muted-on-light); }
.steps__cta { margin-top: clamp(40px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.steps__cta p { color: var(--ink-on-light); font-weight: 600; }
.steps__cta a:not(.btn) { color: var(--ink-on-light); text-decoration-color: var(--blue-deep); }

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .step + .step { border-left: 2px solid var(--ink-on-light); border-top: 0; }
  .step__num { font-size: 4rem; }
}

/* ---------- Schedule ---------- */
.frame {
  position: relative;
  border: 1px solid var(--line-strong);
  background: var(--ink-2);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 0 0 6px rgba(238, 241, 244, 0.03);
}
.frame__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink-4), var(--ink-3));
}
.frame__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chrome);
}
.live-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--blue-hi);
  box-shadow: 0 0 0 0 var(--blue-glow);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(72, 173, 255, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(72, 173, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(72, 173, 255, 0); }
}
.frame__body { position: relative; background: var(--ink-3); }
.frame__body iframe {
  width: 100%;
  border: 0;
  position: relative;
  z-index: 1;
  display: block;
  opacity: 0;
  transition: opacity 0.5s;
}
.frame__body iframe.is-loaded { opacity: 1; }
html:not(.js) .frame__body iframe { opacity: 1; }
html:not(.js) .frame__body iframe[data-pp-src] { display: none; }
.frame__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}
.frame__loading img { width: 90px; opacity: 0.6; }
.iframe-calendar { height: clamp(720px, 90vh, 980px); }
.frame__fallback {
  padding: 14px 18px;
  font-size: 0.88rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: var(--ink-3);
}
.frame__fallback a { color: var(--chrome); font-weight: 700; }
@media (max-width: 640px) {
  .iframe-calendar { height: 720px; }
  .frame { margin-inline: calc(var(--gutter) * -1); border-inline: 0; }
}

/* ---------- Memberships ---------- */
/* Memberships and Book share one surface, fading in from the schedule and out into the FAQ */
.memberships {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-3) 30%, var(--ink-3) 100%);
  padding-bottom: calc(var(--section-y) * 0.6);
}
.memberships + .book { padding-top: calc(var(--section-y) * 0.7); }
.memberships .talk { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.talk {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(32px, 5vw, 72px);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(30, 139, 255, 0.35), transparent 60%),
    linear-gradient(135deg, var(--ink-4), var(--ink-2));
  border: 1px solid var(--line-strong);
  overflow: hidden;
  isolation: isolate;
}
.talk::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -60px; bottom: -120px;
  width: 420px; height: 360px;
  background: rgba(238, 241, 244, 0.04);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.talk .h2 { margin-top: 16px; }
.talk p { margin-top: 20px; max-width: 32em; }
.talk__actions { display: grid; gap: 14px; min-width: 0; padding-inline: 8px; }
.talk__actions .btn { width: 100%; min-width: 0; justify-content: flex-start; padding-left: 28px; white-space: normal; text-align: left; }
.talk__actions .btn small { font-weight: 600; letter-spacing: 0.04em; text-transform: none; opacity: 0.85; margin-left: auto; font-size: 0.85rem; }
@media (max-width: 860px) {
  .talk, .memberships .talk { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; }
  /* On a narrow card only the triangle's flat top shows, as a stray band behind the buttons */
  .talk::after { display: none; }
}
@media (max-width: 480px) { .talk, .memberships .talk { padding: 28px 20px; } }
@media (max-width: 420px) {
  .talk__actions .btn { letter-spacing: 0.08em; padding-left: 20px; }
  .talk__actions .btn small { display: none; }
}

.tiers {
  margin-top: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.tier {
  position: relative;
  padding: 32px 28px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tier--featured { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset, 0 30px 60px -40px var(--blue-glow); }
.tier__flag {
  position: absolute;
  top: -1px; right: 24px;
  padding: 6px 10px 10px;
  background: var(--blue-deep);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}
.tier h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.3rem;
  text-transform: uppercase;
  color: var(--chrome);
}
.tier__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--blue-hi);
}
.tier ul { display: grid; gap: 8px; font-size: 0.95rem; flex: 1; }
.tier li { display: flex; gap: 10px; }
.tier li::before {
  content: "";
  flex: none;
  width: 10px; height: 8px;
  margin-top: 0.55em;
  background: var(--blue);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tier .text-link { margin-top: 8px; }
.tiers-note { margin-top: 18px; font-size: 0.85rem; color: var(--muted); }
/* The pricing card already says this; only show the note under real tiers */
.tiers[hidden] ~ .tiers-note { display: none; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }

/* Placeholder content: visible but honest */
[data-placeholder] .ph,
.ph {
  color: var(--muted);
  font-style: italic;
}

/* ---------- Duke / community ---------- */
.duke {
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 15% 50%, rgba(30, 139, 255, 0.2), transparent 70%),
    var(--ink);
}
.duke__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.duke__art { position: relative; }

/* Duke card: ring type + emblem, tilted toward the pointer by main.js (--rx/--ry, glare at --mx/--my) */
.duke__card {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
  margin-inline: auto;
  perspective: 900px;
}
.duke__card::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30, 139, 255, 0.28), rgba(30, 139, 255, 0.06) 70%, transparent);
  box-shadow: 0 0 0 1px var(--line-strong), inset 0 0 0 10px rgba(238, 241, 244, 0.03);
}
.duke__tilt {
  position: absolute;
  inset: 0;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-out);
}
.duke__card.is-tilting .duke__tilt { transition-duration: 0.12s; }
.duke__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 90s linear infinite; }
.duke__ring text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 25px;
  letter-spacing: 3px;
  text-transform: uppercase;
  fill: var(--chrome);
}
.duke__emblem {
  position: absolute;
  inset: 22% 14%;
  display: grid;
  place-items: center;
  transform: translateZ(60px);
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.75));
}
.duke__emblem > picture { display: block; width: 100%; }
.duke__emblem img { display: block; width: 100%; height: auto; }
/* Chrome glare, clipped to the emblem's own shape */
.duke__glare {
  position: absolute;
  /* Same box as the emblem img (which fills the width, centred), so the mask lines up with the art */
  inset: 50% 0 auto 0;
  transform: translateY(-50%);
  aspect-ratio: 640 / 432;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 45%);
  mix-blend-mode: soft-light;
  -webkit-mask: url("/assets/img/opt/duke-emblem-640.webp") center / 100% 100% no-repeat;
  mask: url("/assets/img/opt/duke-emblem-640.webp") center / 100% 100% no-repeat;
  opacity: 0.85;
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .duke__tilt { transform: none; }
  .duke__glare { opacity: 0.4; }
}
.duke__art::before {
  content: "DUKE";
  position: absolute;
  z-index: -1;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(10rem, 26vw, 24rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(238, 241, 244, 0.09);
  pointer-events: none;
}
.duke__copy .lede { margin-top: 26px; }
.duke__copy p + p { margin-top: 18px; }
/* Duke's rules: skewed chrome tags that stamp in on reveal */
.rules__title {
  margin-top: 36px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-hi);
}
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.rules li { display: grid; gap: 10px; align-content: start; }
.rules strong {
  justify-self: start;
  padding: 8px 16px 6px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #e6e9ed 46%, #b8bfc7 50%, #eef1f4 100%);
  transform: skewX(-12deg);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.9);
}
.rules span { font-size: 0.9rem; color: var(--muted); }
.js .rules.is-in li { animation: stamp 0.55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 120ms + 150ms); }
@keyframes stamp {
  from { opacity: 0; transform: scale(1.4) rotate(-8deg); }
  60% { opacity: 1; transform: scale(0.96) rotate(1deg); }
  to { opacity: 1; transform: none; }
}

.community-photo {
  position: relative;
  margin-top: clamp(64px, 9vw, 120px);
  overflow: hidden;
  /* V-notch kept off-centre so it never bites into the lifter */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 18% calc(100% - 26px), 14% 100%, 0 100%);
}
.community-photo img { width: 100%; height: clamp(300px, 30vw, 460px); object-fit: cover; object-position: 50% 44%; filter: contrast(1.06) saturate(0.92); }
.community-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--noise);
  opacity: 0.24;
  mix-blend-mode: overlay;
}
.community-photo figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(24px, 5vw, 64px);
  padding-bottom: clamp(48px, 6vw, 80px);
  background: linear-gradient(0deg, rgba(5, 6, 8, 0.9) 0%, rgba(5, 6, 8, 0.4) 55%, transparent 100%);
}
/* Wide screens: caption on the right so it clears her face */
@media (min-width: 1200px) {
  .community-photo figcaption {
    left: auto; right: 0; width: 52%;
    text-align: right;
    background: none;
    isolation: isolate;
  }
  /* Side gradient, faded out at the top so the caption box has no hard edge */
  .community-photo figcaption::before {
    content: "";
    position: absolute;
    inset: -60% 0 0 0;
    z-index: -1;
    background: linear-gradient(270deg, rgba(5, 6, 8, 0.88) 0%, rgba(5, 6, 8, 0.6) 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(0deg, #000 60%, transparent 100%);
    mask-image: linear-gradient(0deg, #000 60%, transparent 100%);
  }
  .community-photo blockquote { text-shadow: 0 2px 24px rgba(5, 6, 8, 0.6); }
  .community-photo blockquote { margin-left: auto; }
}
.community-photo blockquote {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 5.4rem);
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--chrome);
  max-width: 14ch;
}
@media (max-width: 900px) {
  .duke__grid { grid-template-columns: 1fr; }
  .duke__card { width: min(88%, 420px); }
}
@media (max-width: 480px) { .rules { grid-template-columns: 1fr; } .rules li { grid-template-columns: auto 1fr; align-items: center; gap: 16px; } }

/* ---------- Testimonials (placeholders) ---------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.quote {
  position: relative;
  padding: 36px 30px 30px;
  background: var(--ink-2);
  border: 1px dashed var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.quote::before {
  content: "\201C";
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 5.5rem;
  line-height: 1;
  height: 0.5em;
  background: var(--blue-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.quote p { font-size: 1.05rem; flex: 1; }
.quote footer { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; color: var(--muted); }
.quote footer::before {
  content: "";
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ink-4);
  box-shadow: 0 0 0 1px var(--line-strong) inset;
  flex: none;
}
.quotes-note { margin-top: 22px; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.faq__intro { position: sticky; top: calc(var(--header-h) + 40px); }
.faq__intro p { margin-top: 24px; }
.faq__intro .h2:not(.h2--compact) { font-size: clamp(3rem, 6vw, 6rem); }
.faq__list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--chrome);
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue-hi); }
.faq-item summary .icon {
  position: relative;
  flex: none;
  width: 40px; height: 40px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  transition: transform 0.4s var(--ease-out), background-color 0.3s, border-color 0.3s;
}
.faq-item summary .icon::before,
.faq-item summary .icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px; height: 2px;
  background: currentColor;
}
.faq-item summary .icon::after { transform: rotate(90deg); transition: transform 0.4s var(--ease-out); }
.faq-item[open] summary .icon { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; transform: rotate(180deg); }
.faq-item[open] summary .icon::after { transform: rotate(0deg); }
.faq-item__body { padding: 0 64px 28px 0; max-width: 46em; }
.faq-item__body p + p { margin-top: 12px; }
.faq-item__body a { color: var(--chrome); font-weight: 700; text-decoration-color: var(--blue); text-underline-offset: 4px; }
.faq-item__body a:hover { color: var(--blue-hi); }
@media (max-width: 900px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__intro { position: static; }
  .faq-item__body { padding-right: 0; }
}

/* ---------- Book a free intro ---------- */
.book {
  background:
    radial-gradient(70% 50% at 0% 18%, rgba(30, 139, 255, 0.28), transparent 70%),
    var(--ink-3);
  overflow: clip; /* hidden would make .book a scroll container and break the sticky details column */
  isolation: isolate;
}
/* Soft edges: the glow fades in from the section above and the base fades out into the next one */
.book::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--ink-3) 0, transparent 200px, transparent calc(100% - 160px), var(--ink) 100%);
  pointer-events: none;
}
.book__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "head frame" "details frame";
  grid-template-rows: auto 1fr;
  gap: 0 clamp(40px, 5vw, 80px);
  align-items: start;
}
.book__head { grid-area: head; }
.book__form { grid-area: frame; }
.book__details { grid-area: details; position: sticky; top: calc(var(--header-h) + 40px); }
.book__head .h2 { font-size: clamp(3.2rem, 6vw, 6rem); }
.book__head .lede { margin-top: 24px; }
.book__promise { margin-top: 14px; font-weight: 700; color: var(--chrome); }
.checks { display: grid; gap: 14px; margin: 32px 0 36px; }
.checks li { display: flex; gap: 14px; align-items: flex-start; color: var(--chrome); font-weight: 600; }
.checks svg { flex: none; width: 24px; height: 24px; color: var(--blue-hi); margin-top: 1px; }
.book__alt { font-size: 0.95rem; color: var(--muted); }
.book__alt a { color: var(--chrome); font-weight: 700; }
@media (max-width: 960px) {
  .book__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "frame" "details"; gap: 0; }
  .book__head { margin-bottom: 24px; }
  .book__details { position: static; margin-top: 8px; }
  .book .h2 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .book .lede { margin-top: 12px; }
}

/* ---------- Lead form (native; posts to the Worker, with or without JS) ---------- */
.lead-form {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  padding: clamp(22px, 3vw, 36px);
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--blue);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
.lead-form > * { grid-column: 1 / -1; min-width: 0; }
.lead-form > .field { grid-column: auto; }
/* Inset by the skew's overhang (as .btn-row does) so the corners line up with the inputs */
.lead-form .btn { width: calc(100% - 14px); margin: 4px 7px 0; }
.lead-form > .field__hint { margin-top: -8px; }
/* Sending (lead-form.js adds .is-submitting): the copy can't change, so a shine runs across the button.
   The label sits above the shine at full strength so it keeps 4.5:1 */
.btn:disabled { cursor: progress; }
.lead-form.is-submitting .btn > span, .slots.is-submitting > .btn > span { position: relative; z-index: 2; }
.lead-form.is-submitting .btn::after,
.slots.is-submitting > .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70% 100%) 0 0 / 250% 100%;
  animation: btn-sending 1.1s linear infinite;
}
@keyframes btn-sending { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
  .lead-form.is-submitting .btn::after, .slots.is-submitting > .btn::after { animation: none !important; background: rgba(0, 0, 0, 0.22); }
}
@media (max-width: 560px) {
  .lead-form { grid-template-columns: minmax(0, 1fr); }
  .lead-form > .field { grid-column: 1 / -1; }
}
.field { display: grid; gap: 8px; min-width: 0; }
.field label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome);
}
.field .opt { font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: var(--muted); }
.field input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  font: inherit;
  color: var(--chrome);
  background: var(--ink);
  border: 1.5px solid rgba(233, 237, 241, 0.4); /* 3.4:1 on ink-2: a field boundary needs 3:1 */
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input::placeholder { color: var(--muted); }
.field input:hover { border-color: rgba(233, 237, 241, 0.6); }
.field input:focus-visible { outline: none; border-color: var(--blue-hi); box-shadow: 0 0 0 2px var(--blue-hi), 0 0 0 6px var(--blue-glow); }
.field input:user-invalid { border-color: var(--danger); }
/* A server re-render marks the field the error is about (render.ts / views.ts) */
.field input[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 4px 0 0 var(--danger); }
.field input[aria-invalid="true"]:focus-visible { box-shadow: inset 4px 0 0 var(--danger), 0 0 0 2px var(--blue-hi), 0 0 0 6px var(--blue-glow); }
.field:has(input[aria-invalid="true"]) label { color: #ffb3b3; }
.field__hint { font-size: 0.88rem; color: var(--muted); }
/* The phone-or-email rule sits above the two fields it governs (both are aria-describedby it) */
.lead-form > .field__hint--group, .slots__contact > .field__hint--group { margin: 0 0 -6px; color: var(--chrome); font-weight: 600; }
.consent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
}
.consent { padding-top: 18px; border-top: 1px solid var(--line); }
/* Drawn box: accent-color only themes the checked state, and Chrome's unchecked box reads as disabled on ink */
.consent input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  cursor: pointer;
  background: var(--ink);
  border: 1.5px solid rgba(233, 237, 241, 0.4);
  border-radius: var(--radius);
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.consent input::before {
  content: "";
  width: 12px;
  height: 12px;
  background: #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform 0.15s var(--ease-out);
}
.consent:hover input { border-color: rgba(233, 237, 241, 0.6); }
.consent input:checked { background: var(--blue-deep); border-color: var(--blue-hi); }
.consent input:checked::before { transform: scale(1); }
.consent input:focus-visible { outline: none; border-color: var(--blue-hi); box-shadow: 0 0 0 2px var(--blue-hi), 0 0 0 6px var(--blue-glow); }
@media (forced-colors: active) { .consent input { appearance: auto; } }
.consent a { color: var(--chrome); font-weight: 700; text-decoration-color: var(--blue); text-underline-offset: 3px; }
/* Turnstile is interaction-only: keep it out of the grid (no row, no gap) until it needs the visitor.
   lead-form.js adds .is-challenging from Turnstile's before/after-interactive callbacks. */
.turnstile:not(.is-challenging) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.turnstile.is-challenging { min-height: 65px; }
.form-error {
  padding: 12px 16px;
  border: 1px solid var(--danger);
  border-left-width: 4px;
  background: rgba(255, 92, 92, 0.08);
  color: #ffb3b3;
  font-weight: 600;
  font-size: 0.95rem;
}
/* Honeypot: off-screen for people, present for bots. Not display:none, so naive bots still fill it. */
.hp { position: absolute !important; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Foundations (the offer after the intro) and its live spots count ---------- */
.foundations { margin: 0 0 28px; padding: 22px 24px; border: 1px solid var(--line-strong); background: rgba(5, 6, 8, 0.4); }
.foundations__title { font-family: var(--font-display); font-weight: 900; font-size: 2.2rem; text-transform: uppercase; color: var(--chrome); margin: 10px 0 8px; }
.foundations p { font-size: 0.95rem; }
.foundations .spots { margin-top: 16px; }
.talk .foundations { margin: 26px 0 0; max-width: 36em; }
/* Phones: inside the pricing card a third nested box squeezes the copy; read it as the card's next beat */
@media (max-width: 560px) { .talk .foundations { padding: 22px 0 0; border: 0; border-top: 1px solid var(--line-strong); background: none; } }
/* The Worker swaps [data-spots] text from KV and sets data-spots-state; the static numbers are the fallback */
.spots {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 14px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--blue);
  background: rgba(30, 139, 255, 0.08);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--chrome);
}
.spots__count strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--blue-hi);
  vertical-align: -0.1em;
  margin-right: 2px;
}
.spots__full { display: none; }
.spots[data-spots-state="full"] .spots__count { display: none; }
.spots[data-spots-state="full"] .spots__full { display: inline; }
.spots[data-spots-state="low"] { border-left-color: var(--amber); background: rgba(255, 176, 32, 0.1); }
.spots[data-spots-state="low"] .spots__count strong { color: var(--amber); }

/* ---------- Location / contact ---------- */
.visit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  border: 1px solid var(--line-strong);
  background: var(--ink-2);
}
.visit__info { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 28px; }
.visit__info h3 { font-size: clamp(2.4rem, 4.6vw, 4rem); }
.contact-list { display: grid; gap: 0; }
.contact-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start; }
.contact-list li:first-child { border-top: 1px solid var(--line); }
.contact-list .ico {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--ink-4);
  color: var(--blue-hi);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
.contact-list .ico svg { width: 20px; height: 20px; margin-top: -4px; }
.contact-list .label { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.contact-list a, .contact-list address, .contact-list .val { color: var(--chrome); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--blue-hi); }
.visit__areas { font-size: 0.92rem; color: var(--muted); }
.visit__map { position: relative; min-height: 460px; background: var(--ink-3); }
.visit__map iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(1) invert(0.92) contrast(0.95) brightness(0.95);
}
.visit__map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(30, 139, 255, 0.12);
  mix-blend-mode: color;
}
@media (max-width: 900px) {
  .visit__grid { grid-template-columns: 1fr; }
  .visit__info { padding: 28px 20px; }
  .contact-list a[href^="mailto:"] { font-size: 0.94rem; }
  .visit__map { min-height: 380px; }
}

/* ---------- Final CTA band ---------- */
.final-cta {
  position: relative;
  padding-block: clamp(90px, 12vw, 170px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--blue-deep);
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(72, 180, 255, 0.55), transparent 70%),
    linear-gradient(160deg, #1677f0 0%, #0a6cff 45%, #0647b8 100%);
}
.final-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: 0;
  width: min(1100px, 140vw);
  aspect-ratio: 1.15;
  transform: translateX(-50%);
  background: rgba(5, 6, 8, 0.18);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.final-cta__texture { position: absolute; inset: 0; z-index: -1; opacity: 0.08; mix-blend-mode: luminosity; }
.final-cta__texture img { width: 100%; height: 100%; object-fit: cover; }
.final-cta .display { font-size: clamp(3.4rem, 11vw, 10rem); color: #fff; }
.final-cta .display .dim { color: var(--ink); }
.final-cta p { margin: 24px auto 40px; max-width: 34em; color: #fff; font-size: 1.15rem; }
.final-cta .btn-row { justify-content: center; }
.final-cta .btn--ghost { --btn-fg: #fff; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6) inset; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  padding: clamp(72px, 9vw, 120px) 0 32px;
  background: var(--ink);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.footer__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding-bottom: clamp(40px, 5vw, 64px);
  margin-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}
.footer__cta-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--chrome);
}
.footer__cta .btn-row { gap: 14px 28px; }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px var(--gutter);
}
.footer__brand img { width: 120px; }
.footer__brand p { margin-top: 18px; font-size: 0.92rem; color: var(--muted); max-width: 26em; }
.footer__heading {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-hi);
  margin-bottom: 18px;
}
.footer__col ul { display: grid; gap: 10px; }
.footer__col a { color: var(--chrome); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.footer__col a:hover { color: var(--blue-hi); }
.footer__col address, .footer__col p { font-size: 0.95rem; color: var(--text); }
.footer__social { display: flex; gap: 10px; margin-top: 16px; }
.footer__social span {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
}
.footer__social svg { width: 18px; height: 18px; }
.footer__giant {
  margin-top: clamp(56px, 8vw, 100px);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 19.5vw, 19rem);
  line-height: 0.78;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.01em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(238, 241, 244, 0.16);
  user-select: none;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}
.footer__bottom a { color: var(--muted); }
@media (max-width: 1100px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }
/* Phones: the long Explore list runs down the left while Visit and Contact stack beside it */
@media (max-width: 720px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "brand brand" "explore visit" "explore contact"; align-items: start; gap: 32px 20px; }
  .footer__brand { grid-area: brand; }
  .footer__col:nth-child(2) { grid-area: explore; }
  .footer__col:nth-child(3) { grid-area: visit; }
  .footer__col:nth-child(4) { grid-area: contact; }
}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: none;
  gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(5, 6, 8, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.4s var(--ease-out);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { flex: 1; min-height: 50px; padding: 0 14px; font-size: 0.82rem; }
.sticky-cta .btn--ghost { flex: 0 0 auto; }
@media (max-width: 720px) {
  .sticky-cta { display: flex; }
  .has-sticky-cta .site-footer { padding-bottom: 100px; }
  /* Keyboard focus scrolled into view stops above the bar, not under it */
  html:has(body.has-sticky-cta) { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ---------- Scroll reveal ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
  animation: reveal-fallback 0s 4s forwards;
}
.js [data-reveal].is-in { opacity: 1; transform: none; animation: none; }
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }

/* ==========================================================================
   Landing page (/free-intro/) + utility pages
   ========================================================================== */
.lp-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  padding: 18px 0;
}
.lp-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lp-header .phone-link { font-size: 0.95rem; }
@media (max-width: 480px) { .lp-header .phone-link span { display: none; } .lp-header .phone-link { padding: 11px; margin: -11px; } .lp-header .phone-link svg { width: 22px; height: 22px; } }

.lp-hero {
  position: relative;
  padding: clamp(110px, 12vw, 150px) 0 clamp(48px, 6vw, 90px);
  overflow: hidden;
  isolation: isolate;
}
/* Desktop: a tall hero that still lets the form's top rule peek above a laptop fold */
@media (min-width: 901px) {
  .lp-hero { min-height: min(100svh, 720px); display: flex; align-items: center; padding-bottom: clamp(32px, 4vw, 56px); }
  .lp-hero__grid { flex: 1; }
  .book--lp { padding-top: calc(var(--section-y) * 0.7); }
}
/* Keep both hero buttons on one row on desktop (there's room beside the text column), so a font swap
   can never push the call button onto a second row */
@media (min-width: 901px) { .lp-hero .btn-row { flex-wrap: nowrap; } }
.lp-hero__bg { position: absolute; inset: 0; z-index: -2; }
.lp-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, var(--ink-3) 0%, transparent 30%),
    linear-gradient(90deg, rgba(5, 6, 8, 0.96) 0%, rgba(5, 6, 8, 0.82) 42%, rgba(5, 6, 8, 0.25) 75%, rgba(5, 6, 8, 0.4) 100%);
}
.lp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.lp-hero h1 { font-size: clamp(3.8rem, 10vw, 9rem); margin: 20px 0 24px; }
/* Sized so "class is on us." fits the text column: two lines, no orphaned "CLASS" */
@media (min-width: 901px) { .lp-hero h1 { font-size: clamp(3.8rem, 7.8vw, 7rem); } }
.lp-hero .lede { margin-bottom: 32px; }
@media (min-width: 901px) and (max-height: 940px) {
  .lp-hero { padding-top: clamp(88px, 11vh, 120px); }
  .lp-hero h1 { font-size: clamp(3.8rem, min(13vh, 7.8vw), 7rem); margin: 12px 0 18px; }
  .lp-hero .lede { margin-bottom: 24px; }
}
.lp-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 30px;
  font-size: 0.9rem;
  color: var(--muted);
}
.lp-proof span { display: inline-flex; align-items: center; gap: 8px; }
.lp-proof svg { width: 16px; height: 16px; color: var(--blue-hi); }
@media (max-width: 900px) {
  .lp-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .lp-hero::before { background: linear-gradient(180deg, rgba(5, 6, 8, 0.45) 0%, rgba(5, 6, 8, 0.7) 55%, var(--ink-3) 100%); }
}

.benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.benefit { padding: clamp(28px, 3.5vw, 44px); background: var(--ink); }
.benefit__icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  margin-bottom: 22px;
  background: var(--blue-grad);
  color: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
.benefit__icon svg { width: 24px; height: 24px; margin-top: -6px; }
.benefit h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; text-transform: uppercase; color: var(--chrome); margin-bottom: 10px; }
@media (max-width: 860px) { .benefits { grid-template-columns: 1fr; } }

.lp-footer { padding: 40px 0 40px; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--muted); }
.has-sticky-cta .lp-footer { padding-bottom: 120px; }
.lp-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; }
/* A ~43px hit area on the 15px-tall links. The padding sets the line pitch, so wrapped lines' boxes
   can't overlap; the row's negative margin keeps a one-line footer where it was */
.lp-footer a { display: inline-block; padding: 10px 4px; margin: 0 -4px; color: var(--chrome); }
.lp-footer span:has(> a) { margin-block: -10px; }
@media (min-width: 721px) { .has-sticky-cta .lp-footer { padding-bottom: 40px; } }

/* Legal pages (privacy) */
.legal { padding: calc(var(--header-h) + 64px) 0 96px; }
.legal .container { max-width: calc(760px + var(--gutter) * 2); }
.legal h1 { font-size: clamp(3.4rem, 9vw, 6.5rem); margin: 16px 0 12px; }
.legal__date { color: var(--muted); font-size: 0.92rem; margin-bottom: 36px; }
.legal h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; text-transform: uppercase; color: var(--chrome); margin: 36px 0 10px; }
.legal p + p { margin-top: 14px; }
.legal a:not(.btn) { color: var(--chrome); font-weight: 700; text-decoration-color: var(--blue); text-underline-offset: 4px; }
.legal__back { margin-top: 44px; }

/* Simple centered pages (thank-you, 404) */
.center-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + 40px) 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(30, 139, 255, 0.25), transparent 70%),
    var(--ink);
}
.center-page .hero__v { left: 50%; right: auto; transform: translateX(-50%); top: -10vw; }
.center-page img.emblem { width: clamp(160px, 22vw, 260px); margin: 0 auto 28px; }
/* Explicit line breaks, and a floor low enough that "WELCOME TO" fits at 320px: the wrap can't change when the font swaps */
.center-page h1 { font-size: clamp(3.2rem, 11vw, 9rem); margin: 18px 0 22px; }
/* Measures that leave each lede clear of a line-count boundary, so it wraps the same in either font */
.center-page .lede { margin: 0 auto 36px; max-width: 32em; text-wrap: balance; }
@media (max-width: 480px) { .center-page .lede { max-width: 18em; } }
.center-page .btn-row { justify-content: center; }
.referral { max-width: 640px; margin: 56px auto 0; padding: 32px; border: 1px solid var(--line-strong); background: var(--ink-2); }
.referral .display { font-size: clamp(2.4rem, 6vw, 3.6rem); margin-bottom: 14px; }
.referral p { margin-bottom: 22px; }
.follow { margin-top: 28px; }
.follow a { color: var(--chrome); font-weight: 700; }
.footer__review { margin-top: 16px; }
.footer__review a { color: var(--blue-hi); font-weight: 700; text-decoration: none; }
/* The page's own button row only: the booking summary's row sits in a padded card and stacks instead */
@media (max-width: 480px) { .center-page > .container > .btn-row .btn { min-width: 280px; } }
.center-page .next-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 900px;
  margin: 56px auto 0;
  text-align: left;
}
.center-page .next-steps li { padding: 22px; border: 1px solid var(--line); border-top: 3px solid var(--blue); background: var(--ink-2); }
.center-page .next-steps strong { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; text-transform: uppercase; color: var(--chrome); margin-bottom: 6px; }
.center-page .next-steps span { font-size: 0.92rem; }
.center-page .next-steps a { color: var(--chrome); font-weight: 700; }
@media (max-width: 760px) { .center-page .next-steps { grid-template-columns: 1fr; } }
.center-page .next-steps + .btn-row { margin-top: 40px; }
/* With the picker on the page it is the hero: a smaller headline puts the first times above a laptop fold */
@media (min-width: 761px) {
  .center-page:has(.slots) h1 { font-size: clamp(3.2rem, 7vw, 6rem); margin-bottom: 18px; }
  .center-page:has(.slots) .ty-duke { width: 96px; margin-bottom: 12px; }
  .center-page:has(.slots) .lede { margin-bottom: 28px; }
}

/* ---------- Intro booking: the Worker fills [data-booking] with the slot picker (markup in C5) ---------- */
.booking { width: 100%; max-width: 900px; margin: 0 auto 40px; text-align: left; }
.booking__fallback { padding: 22px 24px; border: 1px dashed var(--line-strong); text-align: center; color: var(--text); }
.booking__fallback a { color: var(--chrome); font-weight: 700; }
.slots {
  display: grid;
  gap: 22px;
  padding: clamp(18px, 3vw, 32px);
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--blue);
}
/* Three tracks so the range stays centred whether or not Earlier/Later are present */
.slots__nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.slots__nav > :first-child { justify-self: start; }
.slots__nav > :last-child { justify-self: end; }
/* Coach picker: a separate GET form before .slots, shown only when more than one coach is active */
.slots__coach { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 0.95rem; color: var(--muted); }
.slots__coach select { min-height: 44px; background: var(--ink-3); color: var(--text); border: 1px solid rgba(233, 237, 241, 0.4); border-radius: var(--radius); padding: 8px 10px; font: inherit; }

.slots__range { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; text-transform: uppercase; color: var(--chrome); text-align: center; }
/* Phones and tablets: a stacked day list, each day a grid of times; >=900px: one column per day */
.slots__days { display: grid; gap: 0; }
.slots__day { min-width: 0; padding: 16px 0; border-top: 1px solid var(--line); }
.slots__day:first-child { border-top: 0; padding-top: 0; }
.slots__date {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-hi);
  white-space: nowrap;
  margin-bottom: 10px;
}
.slots__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slots__day:has(.slot--none) { display: flex; align-items: baseline; gap: 14px; }
.slots__day:has(.slot--none) .slots__date { margin: 0; color: var(--muted); }
/* The first time after a real break (views.ts adds it) starts a fresh row: an AM | PM split */
.slot--gap { grid-column-start: 1; }
.slot {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--chrome);
  background: var(--ink);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.slot:hover { border-color: var(--blue-hi); background: rgba(30, 139, 255, 0.08); }
.slot:focus-visible { outline: 3px solid var(--blue-hi); outline-offset: 3px; }
.slot:active { transform: translateY(1px); }
.slot span { display: block; }
.slot input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.slot:has(input:checked) { background: var(--blue-deep); border-color: var(--blue-hi); color: #fff; }
.slot:has(input:focus-visible) { outline: 3px solid var(--blue-hi); outline-offset: 3px; }
/* One-tap slots (known lead): the tapped time lights up while the rest dim */
.slots.is-submitting .slot { opacity: 0.45; cursor: progress; }
.slot.is-chosen, .slots.is-submitting .slot.is-chosen { opacity: 1; background: var(--blue-deep); border-color: var(--blue-hi); color: #fff; box-shadow: 0 10px 30px -10px var(--blue-glow); }
.slot--none { padding: 0; font-size: 0.9rem; font-style: italic; color: var(--muted); text-align: left; }
.slots__contact {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  min-width: 0;
  margin: 0;
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.slots__contact > * { grid-column: 1 / -1; min-width: 0; }
.slots__contact > .field { grid-column: auto; }
.slots__contact legend { padding: 0 0 14px; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; color: var(--chrome); }
.slots > .btn { justify-self: start; }
.slots > .form-error:first-of-type { margin-bottom: -6px; }
@media (min-width: 900px) {
  .slots__days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
  .slots__day, .slots__day:first-child { padding: 0; border-top: 0; }
  .slots__date { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .slots__list { grid-template-columns: minmax(0, 1fr); }
  .slots__day:has(.slot--none) { display: block; }
  .slots__day:has(.slot--none) .slots__date { margin-bottom: 10px; }
  .slot--none { padding: 10px 0; text-align: center; }
  .slot { font-size: 0.85rem; padding-inline: 4px; }
  .slot--gap { margin-top: 14px; }
}
@media (max-width: 560px) {
  .slots__contact { grid-template-columns: minmax(0, 1fr); }
  .slots__contact > .field { grid-column: 1 / -1; }
  .slots > .btn { width: calc(100% - 14px); margin-inline: 7px; }
  /* No room for the range between the buttons: it takes its own centred row above them */
  .slots__nav { grid-template-columns: 1fr 1fr; }
  .slots__range { grid-row: 1; grid-column: 1 / -1; }
}
/* /booked/: the Worker fills [data-booking-summary] with the time, coach and change links */
.booking-summary {
  max-width: 640px;
  margin: 0 auto 36px;
  padding: 24px 28px;
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--blue);
  background: var(--ink-2);
  text-align: left;
}
.booking-summary strong { color: var(--chrome); }
.booking-summary p + p, .booking-summary dl { margin-top: 12px; }
.booking-summary a:not(.btn) { color: var(--chrome); font-weight: 700; }
.booking-summary .btn-row { justify-content: flex-start; margin-top: 20px; }
/* The one fact the page exists for: when to show up */
.booking-summary__when {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  color: var(--chrome);
  margin-bottom: 14px;
}
.booking-summary__when span { display: block; color: var(--blue-hi); }
/* Cancel is a quiet text link, not a peer of Reschedule (a. beats .booking-summary a:not(.btn)) */
.booking-summary a.booking-summary__cancel { color: var(--muted); font-weight: 600; font-size: 0.9rem; text-underline-offset: 3px; padding: 12px 4px; }
.booking-summary a.booking-summary__cancel:hover { color: var(--chrome); }
.booking-summary .btn-row + p { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 480px) {
  .booking-summary .btn-row { flex-direction: column; align-items: stretch; padding-inline: 7px; }
  .booking-summary .btn-row .btn { width: 100%; }
  .booking-summary .btn-row .booking-summary__cancel { align-self: flex-start; }
}
@media (max-width: 400px) { .booking-summary { padding: 20px 18px; } }
/* Each digit gets Big Shoulders' advance width, so the centred "404" can't move when the font swaps */
.big-404__d { display: inline-block; width: 0.511em; }
.big-404__o { display: inline-block; vertical-align: -0.04em; margin: 0 0.02em; }
.big-404__o img { height: 0.78em; width: auto; transform-origin: 50% 80%; animation: head-tilt 3.2s ease-in-out infinite alternate; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.7)); }
@keyframes head-tilt { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.ty-duke { display: block; width: 120px; margin: 0 auto 18px; }
.ty-duke img { width: 100%; animation: stamp 0.7s var(--ease-out) 0.15s both; }
.big-404 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(9rem, 34vw, 26rem);
  line-height: 0.8;
  background: var(--chrome-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal], .js .hero [data-load] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .tape__track { animation: none !important; }
  .hero__badge svg.ring { animation: none !important; }
}

/* ---------- Print ---------- */
@media print {
  body::after, .site-header, .sticky-cta, .tape-wrap, iframe { display: none !important; }
  body { background: #fff; color: #000; }
}