/* ============================================
   fitness-static template (STEP 1)
   Fitness vertical (gym, strength & conditioning box, studio). Cloned + adapted
   from templates/personalcare-static: same trust-forward LIGHT theme engine
   (cool near-white body + a real brand color + a DARKENED brand-strong for AA
   text/CTAs + a confident brand accent), re-hued per prospect via
   deriveProPalette (template.json paletteMode="pro" — a dedicated bold fitness
   palette mode is a later step, not this one).

   Structure carries the base's bold, high-contrast, three-tier type system
   (Playfair Display display / Plus Jakarta Sans UI / Inter body — NEVER
   Fraunces/Lora), disciplined photo slots with graceful gradient fallbacks, and
   considered motion, pushed a step BOLDER + more energetic for the fitness
   vertical: heavier headline/button weights (h1/h2/h4 900, h3 800, buttons 800)
   and tighter, punchier tracking. Fitness specific: programs publish OPTIONAL
   membership-style pricing (not every program needs one), a beginner "onramp"
   pathway positioned right after the programs grid, a weekly class schedule
   table on programs.html, a dedicated gallery section (imagery-led — a gym
   sells on energy and real photos), and the shared sw-booking / sw-trust
   widgets (templates/frameworks/_base/widgets/, see WIDGETS.md) as the page's
   ONE booking form and ONE trust strip.
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Brand (real, verbatim) + derived AA-safe strong + refined accent */
  --color-brand:        #EC6E00;        /* real brand navy: eyebrows, icons, headings, accents */
  --color-brand-strong: #914808;  /* darkened navy (AA on light): button fills, links, small text */
  --color-accent:       #C3292E;       /* brass/gold, DECORATIVE: rules, stars, hero CTA, underlines */
  --color-brand-fg:     #FFFFFF;       /* text on brand/brand-strong fills (white) */
  --color-accent-soft:  rgba(236, 110, 0, 0.07);    /* faint brand tint for icon chips + hovers */
  --color-accent-ink:   #2B1604;      /* WIDGETS.md core var: text ON the accent fill (same dark ink .btn-accent already uses, not a plain white fallback) */

  /* Cool neutral surfaces (a restrained brand cast, corporate not warm) */
  --color-bg:        #F9F8F8;        /* page base, cool near-white */
  --color-surface:   #F5F4F3;   /* alt bands, cards */
  --color-surface-2: #F1EFEE;  /* monogram bg, nested cards */
  --color-muted:     #ECE9E7;     /* subtle fills */
  --color-border:    #E4E1DE;    /* hairline borders */

  /* Text */
  --color-ink:     #261D15;     /* deep navy-ink */
  --color-ink-dim: #7A6752;  /* secondary / captions (AA on the light base) */

  /* Deep brand-navy for hero panels, the booking CTA band + footer */
  --color-hero-ink:   #4B290B;
  --color-hero-ink-2: #2B1604;
  --color-hero-overlay: rgba(75, 41, 11, 0.82); /* navy wash over a hero photo */
  --color-hero-scrim:   rgba(24, 15, 6, 0.62);   /* bottom-up scrim for legibility */
  --color-footer:       #2E1907;      /* deep brand-navy footer */

  /* Shadows: soft, diffuse, premium (one shadow OR a hairline — never both at rest) */
  --color-border-accent: color-mix(in srgb, var(--color-brand) 13%, transparent);
  --color-border-accent-hover: color-mix(in srgb, var(--color-brand) 30%, transparent);
  --shadow-sm: 0 1px 2px rgba(12,20,38,0.05);
  --shadow-md: 0 20px 48px -30px rgba(12,20,38,0.34);
  --shadow-lg: 0 40px 90px -44px rgba(12,20,38,0.42);
  --shadow-hover: 0 28px 60px -34px rgba(12,20,38,0.36);

  /* Typography — three tiers. Playfair Display (elegant high-contrast serif) for
     display; Plus Jakarta Sans for the crisp UI layer (eyebrows/nav/buttons/
     labels); Inter for body. No Fraunces/Lora, ever. */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-accent: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing — a consistent scale with a generous editorial top end */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 6rem;
  --space-2xl: 7.5rem;

  /* Layout — SHARP, inherited from the base pack. Corners drive to 0 for a
     bold, high-authority read. A hair of radius (2px) survives only where a
     pure-square edge would look like a rendering bug on the smallest
     interactive chips; everything structural is a crisp rectangle. */
  --max-width: 1200px;
  --radius: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-chip: 2px;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-brand-strong); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-brand); }
button { cursor: pointer; font-family: var(--font-sans); }

:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 3px;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

/* --- Typography — pushed a step BOLDER + more energetic than the base pack
   for the fitness vertical: heavier weights, tighter tracking. --- */
h1, h2 { font-family: var(--font-accent); font-weight: 600; line-height: 1.08; color: var(--color-ink); letter-spacing: -0.01em; }
h3, h4 { font-family: var(--font-display); font-weight: 900; line-height: 1.14; color: var(--color-ink); letter-spacing: -0.018em; }
h1 { font-size: clamp(2.9rem, 6vw, 5rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.025em; }
h2 { font-size: clamp(2.2rem, 4vw, 3.3rem); font-weight: 900; line-height: 1.05; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 800; line-height: 1.2; }

.section-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-brand-strong);
  margin-bottom: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.section-label::before {
  content: '';
  width: 28px; height: 1.5px;
  background: var(--color-accent);
}

.section-title {
  color: var(--color-ink);
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

.section-desc {
  color: var(--color-ink-dim);
  font-size: 1.08rem;
  max-width: 640px;
  line-height: 1.75;
}

.section-head-center {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-xl);
}
.section-head-center .section-label { justify-content: center; }
.section-head-center .section-desc { margin-left: auto; margin-right: auto; }

/* --- Buttons — bold, uppercase, confident ("LET'S TRAIN" energy) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.05rem 2rem;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: var(--radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-brand-strong);
  color: var(--color-brand-fg);
}
.btn-primary:hover {
  filter: brightness(1.1);
  color: var(--color-brand-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Gold accent CTA — the marquee action (hero + booking band + close bands) */
.btn-accent {
  background: var(--color-accent);
  color: var(--color-hero-ink-2);
  border-color: var(--color-accent);
  font-weight: 700;
}
.btn-accent:hover {
  filter: brightness(1.06);
  color: var(--color-hero-ink-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  color: var(--color-brand-strong);
  border-color: var(--color-border);
}
.btn-outline:hover {
  background: var(--color-surface);
  border-color: var(--color-brand);
  color: var(--color-brand-strong);
  transform: translateY(-2px);
}

/* Hero/band outline: white on the deep navy */
.btn-hero-outline {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(4px);
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
.btn-hero-outline:hover {
  background: rgba(255,255,255,0.16);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}

/* --- Navigation --- */
/* Quality floor: transparent over the hero photo with a top scrim gradient for
   legibility, solidifying to an opaque white bar once scrolled past the hero
   (every hero background in this pack is dark — a real photo + scrim, or the
   brand-navy gradient fallback — so white nav text always has contrast here).
   Logo/wordmark/links/phone swap from a light/knockout treatment (over the
   photo) to the primary dark-ink treatment (once solid) via .nav.scrolled. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.05rem 0;
  background: linear-gradient(to bottom, rgba(8,10,16,0.58) 0%, rgba(8,10,16,0.22) 60%, rgba(8,10,16,0) 100%);
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease, border-color 0.25s ease;
}
.nav.scrolled {
  padding: 0.6rem 0;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 var(--color-border), var(--shadow-sm);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

/* Real logo lockup, or a clean wordmark when no logo asset exists. Quality
   floor: logo img >=48px height with a drop-shadow while it sits over the hero
   photo (the transparent nav state); once scrolled to the solid bar the shadow
   lifts and the mark steps down slightly. */
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo-img {
  height: 58px; width: auto; display: block; max-width: 250px; object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.55));
  transition: height 0.25s ease, filter 0.25s ease;
}
.nav.scrolled .nav-logo-img { height: 58px; filter: none; }
/* Dual logo: the knockout/light mark shows over the transparent photo nav; the
   primary dark-ink mark takes over once the bar is solid. */
.nav-logo-dark { display: block; }
.nav-logo-light { display: none; }
.nav.scrolled .nav-logo-dark { display: none; }
.nav.scrolled .nav-logo-light { display: block; }
.nav-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  line-height: 1;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.nav.scrolled .nav-wordmark { color: var(--color-ink); text-shadow: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.15rem;
  list-style: none;
}
/* Quality floor: nav links >=16px rendered (the vision gate reads full-page
   captures where small text shrinks further). */
.nav-links a {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
  padding: 0.25rem 0;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.nav.scrolled .nav-links a { color: var(--color-ink); text-shadow: none; }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1.5px;
  background: var(--color-accent);
  transition: width 0.3s;
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 1.1rem; }
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.nav.scrolled .nav-phone { color: var(--color-ink); text-shadow: none; }
.nav-phone svg {
  width: 16px; height: 16px;
  color: currentColor;
  flex-shrink: 0;
}
.nav-phone:hover { color: var(--color-accent); }
.nav.scrolled .nav-phone:hover { color: var(--color-brand); }

.nav-cta {
  padding: 0.7rem 1.5rem;
  background: var(--color-accent);
  color: var(--color-hero-ink-2) !important;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
}
.nav-cta:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: var(--shadow-sm); color: var(--color-hero-ink-2) !important; }
.nav-cta::after { display: none !important; }

/* Mobile menu toggle: white bars over the transparent/photo nav, dark once the
   bar is solid or once the (always-light) drawer is open. */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  border-radius: 1px;
  background: #fff;
  transition: all 0.3s;
}
.nav.scrolled .nav-toggle span { background: var(--color-ink); }
.nav-toggle.open span { background: var(--color-ink); }
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Deep brand-navy gradient fallback when no hero photo is staged */
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
}
/* A faint architectural grid over the gradient hero fallback — quiet texture so
   the no-photo hero never reads flat/empty. */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 120% at 15% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-media video { display: none; }
  .hero-video-poster { display: block; }
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: var(--color-hero-overlay);
  background:
    linear-gradient(0deg, var(--color-hero-scrim) 0%, transparent 63%),
    linear-gradient(97deg,
      color-mix(in srgb, var(--color-hero-ink) 95%, transparent) 0%,
      color-mix(in srgb, var(--color-hero-ink) 85%, transparent) 34%,
      color-mix(in srgb, var(--color-hero-ink) 61%, transparent) 66%,
      color-mix(in srgb, var(--color-hero-ink) 47%, transparent) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-content { max-width: 700px; padding: 4rem 0 4rem; }

/* Bold "RECORD-SETTING RESULTS" pill — a confident accent-bordered chip that
   sets the results-forward tone the moment the page loads. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-radius: var(--radius-chip);
  margin-bottom: var(--space-md);
}
.hero-badge::before { content: ''; width: 8px; height: 8px; background: var(--color-accent); }

/* Oversized hero result number. Content-gated (hero.resultStat), so a
   business without a headline number drops it cleanly. */
.hero-result {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
  padding-left: 1.15rem;
  border-left: 4px solid var(--color-accent);
}
.hero-result-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 5.25rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #fff;
}
.hero-result-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  max-width: 15ch;
  line-height: 1.35;
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.8rem, 5.6vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.012em;
  text-wrap: balance;
  text-shadow: 0 1px 30px rgba(0, 0, 0, 0.3);
  margin-bottom: var(--space-md);
}
/* The accent is the ONE phrase that carries the eye — set in Playfair ITALIC,
   in brass. A coloured italic key phrase reads editorial + premium and never
   collides with descenders. Keep it short at authoring time (2-4 words). */
.hero h1 em {
  font-style: italic;
  font-weight: 600;
  color: var(--color-accent);
}

.hero-sub {
  font-size: 1.18rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--space-lg);
  max-width: 590px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
/* In the hero, the primary action reads as the gold marquee CTA. A gentle
   saturate() lift (never a hardcoded color) enriches the accent so it pops
   against the dense scrim without leaving the palette-vars-only contract. */
.hero .btn-primary {
  background: var(--color-accent);
  color: var(--color-hero-ink-2);
  border-color: var(--color-accent);
  font-weight: 700;
  filter: saturate(1.18);
}
.hero .btn-primary:hover { filter: saturate(1.18) brightness(1.08); color: var(--color-hero-ink-2); }

/* Quality floor: exactly ONE dominant solid-accent CTA in the hero (the
   .btn-primary above) — every other hero action is a quiet underlined text
   link so nothing competes with it. Rating/years/area trust facts live ONLY in
   the sw-trust strip directly below the hero, never repeated here. */
.hero-call-link {
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,0.88);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.5);
  transition: color 0.2s, text-decoration-color 0.2s;
}
.hero-call-link:hover { color: #fff; text-decoration-color: #fff; }

/* Scroll cue on the gradient (no-media) hero — a quiet considered detail */
.hero-scrollcue {
  position: absolute; z-index: 2;
  left: 50%; bottom: 1.75rem;
  transform: translateX(-50%);
  width: 24px; height: 38px;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 14px;
  display: flex; justify-content: center;
}
.hero-scrollcue span {
  width: 3px; height: 8px; margin-top: 7px;
  border-radius: 2px;
  background: var(--color-accent);
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue { 0%,100% { opacity: 0.4; transform: translateY(0); } 50% { opacity: 1; transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .hero-scrollcue span { animation: none; } }

/* --- Hero archetypes: split + bandoverlay (fullbleed = the base above) --- */
.hero-split { min-height: auto; }
.hero-split .hero-inner {
  max-width: 100%;
  padding: 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  min-height: 90vh;
}
.hero-split .hero-content {
  max-width: none;
  padding: clamp(7.5rem, 9vw, 9rem) clamp(1.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 4.5rem);
  background: linear-gradient(160deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-figure {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-accent) 175%);
}
.hero-figure::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 3px; background: var(--color-accent); opacity: 0.85;
}
.hero-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bandoverlay: full-bleed photo + a solid brand CTA band low on the hero. */
.hero-bandoverlay .hero-inner {
  display: flex;
  align-items: flex-end;
  min-height: 92vh;
  padding: 7rem 0 clamp(2rem, 5vw, 3.5rem);
}
.hero-bandoverlay .hero-overlay { background: linear-gradient(0deg, var(--color-hero-scrim) 0%, transparent 68%); }
.hero-bandoverlay .hero-content {
  max-width: 920px;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.25rem);
  background: linear-gradient(140deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* --- Sections --- */
section {
  padding: clamp(2.125rem, 4vw, 3.75rem) 0;
  position: relative;
  scroll-margin-top: 72px;
}
.about-section { background: var(--color-bg); }
.programs-section { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.onramp-section { background: var(--color-bg); }
.team-section { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.coach-creds-section { background: var(--color-bg); }
.results-section { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.faq-section { background: var(--color-bg); }
.contact-section { background: var(--color-bg); border-top: 1px solid var(--color-border); }

/* --- Sub-niche variant emphasis (fillStatic reads templates/variants/fitness.json,
   resolves ONE variant per prospect off their real content, and hands the render
   `variantEmphasis.<key>`/`variantCompact.<key>` booleans for that variant's
   emphasize[]/deemphasize[], see resolveVariant in orchestrator/src/lib/variants.ts).
   Section-key mapping (only the keys actually authored in fitness.json's 7 variants
   -- gym-health-club, personal-trainer, crossfit-functional, yoga-pilates,
   boutique-studio, martial-arts, general -- are wired; none of them currently ship
   a deemphasize[], so [data-compact="1"] is dormant today but wired for when one does):
     about    -> #about        (why-us story: personal-trainer, crossfit, yoga-pilates, martial-arts)
     approach -> #onramp       ("your first two weeks" beginner pathway = the coaching approach: personal-trainer)
     gallery  -> #gallery      (real-photo energy grid: gym-health-club, crossfit, yoga-pilates, boutique-studio, martial-arts, general)
     pricing  -> #programs     (membership-style pricing lives inside program cards, no standalone pricing section: gym-health-club, boutique-studio, general)
     reviews  -> #results      (testimonials: every variant emphasizes reviews)
   [data-emph="1"] promotes the section the resolved variant cares about most:
   an edge-to-edge accent band, a deeper brand-tinted surface, extra vertical
   rhythm and a bumped-up title scale -- structurally distinct, not a color swap.
   [data-compact="1"] condenses a de-emphasized section: tighter rhythm, a
   smaller title, the long-form description dropped. Both hold up at the
   390px mobile floor (clamp()-based sizing, no fixed px that could overflow). --- */
[data-emph="1"] {
  position: relative;
  padding-top: clamp(3rem, 4vw + 1.5rem, 5.5rem);
  padding-bottom: clamp(3rem, 4vw + 1.5rem, 5.5rem);
  background-image: linear-gradient(180deg, var(--color-accent-soft) 0%, transparent 45%);
}
[data-emph="1"]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--color-accent);
}
[data-emph="1"] .section-title,
[data-emph="1"] .about-text .section-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.85rem); }
[data-emph="1"] .section-label { color: var(--color-brand-strong); }
[data-emph="1"] .section-head-center { margin-bottom: var(--space-xl); }

[data-compact="1"] {
  padding-top: clamp(1.25rem, 2vw + 0.5rem, 2rem);
  padding-bottom: clamp(1.25rem, 2vw + 0.5rem, 2rem);
}
[data-compact="1"] .section-title,
[data-compact="1"] .about-text .section-title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin-bottom: var(--space-xs); }
[data-compact="1"] .section-desc { display: none; }
[data-compact="1"] .section-head-center { margin-bottom: var(--space-md); }

/* --- About --- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.about-grid.no-media { grid-template-columns: 1.15fr 1fr; }
/* Editorial framed photo: the image sits on a soft shadow with a thin brass
   frame offset behind it toward the lower-right (a considered magazine detail). */
.about-media { position: relative; }
.about-media::before {
  content: '';
  position: absolute;
  inset: 20px -20px -20px 20px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-radius: var(--radius-lg);
  z-index: 0;
}
.about-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* Real-data credential badge overlapping the image corner (optional). */
.about-badge {
  position: absolute;
  z-index: 2;
  left: -14px; bottom: 26px;
  padding: 0.9rem 1.25rem;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.about-badge-value { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: #fff; }
.about-badge-label { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin-top: 0.2rem; max-width: 150px; }
.about-text p { color: var(--color-ink-dim); margin-bottom: var(--space-sm); line-height: 1.85; }

.proof-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: var(--space-md);
}
.proof-point {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.2s, transform 0.2s;
}
.proof-point:hover { border-color: color-mix(in srgb, var(--color-brand) 40%, var(--color-border)); transform: translateY(-2px); }
.about-section .proof-point { background: var(--color-surface); }
.proof-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius);
  background: var(--color-accent-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.proof-icon svg { width: 20px; height: 20px; color: var(--color-brand); }
.proof-point strong { display: block; color: var(--color-ink); font-family: var(--font-display); font-size: 0.95rem; margin-bottom: 0.15rem; }
.proof-point span { color: var(--color-ink-dim); font-size: 0.84rem; line-height: 1.5; }

.about-signature {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-md);
  padding-left: 1rem;
  border-left: 2px solid var(--color-accent);
}
.about-signature-name { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.15rem; color: var(--color-ink); }
.about-signature-role { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-dim); margin-top: 0.2rem; }

/* --- Programs (membership-style pricing shown on select programs only) --- */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
/* Refined card: a hairline border at rest (no resting shadow), a soft shadow +
   lift + an accent hairline that slides across the top on hover. */
.program-card {
  position: relative;
  padding: 2rem 1.85rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 14px 34px -26px rgba(12,20,38,0.32);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.program-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.program-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 64px -30px rgba(12,20,38,0.4);
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
}
.program-card:hover::before { transform: scaleX(1); }
.program-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.15rem;
}
.program-icon svg { width: 24px; height: 24px; color: var(--color-accent); }
.program-card h3 { margin-bottom: 0.55rem; }
.program-card p { color: var(--color-ink-dim); font-size: 0.96rem; line-height: 1.65; }
/* Soft background-image variant: a per-item `programs.items[].image` or the shared
   `programs.image` fallback turns a card photographic — the photo sits behind a
   brand scrim so the heading + copy stay legible. Icon-only cards are unaffected. */
.program-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.program-card-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-brand) 60%, transparent) 0%,
    color-mix(in srgb, var(--color-brand) 88%, transparent) 100%
  );
}
.program-card:has(.program-card-bg) { border-color: transparent; }
.program-card:has(.program-card-bg) > :not(.program-card-bg):not(.program-card-scrim) {
  position: relative;
  z-index: 2;
}
.program-card::before { z-index: 3; }
.program-card:has(.program-card-bg) .program-icon { background: rgba(255, 255, 255, 0.18); }
.program-card:has(.program-card-bg) .program-icon svg { color: #fff; }
.program-card:has(.program-card-bg) h3 { color: #fff; }
.program-card:has(.program-card-bg) p { color: rgba(255, 255, 255, 0.9); }
/* Real price, published up front where a program has one (membership-style,
   unlike quote-per-matter professional services; not every program needs one). */
.program-price {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-brand-strong);
}
.program-card:has(.program-card-bg) .program-price { color: #fff; }
.program-meta {
  margin-top: 0.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-brand-strong);
}
.program-card:not(:has(.program-price)) .program-meta { margin-top: 1.1rem; }
.programs-cta {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}

/* --- Onramp: your first two weeks, a beginner pathway (steps) --- */
.steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
/* Quiet connector line linking the numbered medallions (desktop only). */
@media (min-width: 901px) {
  .steps-grid::before {
    content: '';
    position: absolute;
    top: calc(2.85rem + 44px);
    left: 18%; right: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border) 15%, var(--color-border) 85%, transparent);
    z-index: 0;
  }
}
.step-card {
  padding: 3.1rem 2rem 2.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.step-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.3rem;
  letter-spacing: 0.01em;
  margin-bottom: 1.65rem;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 16px 34px -16px rgba(12,20,38,0.6);
}
.step-num::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent);
  opacity: 0.65;
}
.step-card h3 { margin-bottom: 0.6rem; }
.step-card p { color: var(--color-ink-dim); font-size: 0.96rem; line-height: 1.6; max-width: 34ch; }

/* --- Credibility / office statement band (deep-navy editorial moment) --- */
.credibility {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  color: #fff;
}
.credibility-media { position: absolute; inset: 0; z-index: 0; }
.credibility-media img { width: 100%; height: 100%; object-fit: cover; }
.credibility-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  opacity: 0.85;
}
.credibility::after {
  content: '';
  position: absolute; top: 0; left: 0; width: min(160px, 34%); height: 3px;
  background: var(--color-accent); z-index: 2;
}
.credibility .container { position: relative; z-index: 2; }
.credibility-inner { max-width: 940px; }
.credibility .section-label { color: var(--color-accent); }
.credibility-statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.85rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}
.credibility-statement em, .credibility-statement i { font-style: italic; color: var(--color-accent); }
.credibility-text {
  margin-top: var(--space-md);
  max-width: 640px;
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
  line-height: 1.75;
}
.credibility-markers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2.25rem;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.16);
}
.credibility-markers li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
}
.credibility-marker-icon { display: inline-flex; }
.credibility-marker-icon svg { width: 20px; height: 20px; color: var(--color-accent); }
.credibility .btn-accent { margin-top: var(--space-lg); }

/* --- Areas we serve (service-area / locations band, for multi-location
   fitness businesses). Fully content-gated on the serviceAreas key; a
   business without a service-area footprint drops the whole band. Bold, sharp
   location cards with a left accent edge and an address/note line. No image
   slots (never an empty image). --- */
.areas-section { background: var(--color-bg); border-top: 1px solid var(--color-border); }
.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-md);
  max-width: 1040px;
  margin: 0 auto;
}
.area-card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.6rem 1.7rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.area-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
}
.area-card svg { width: 24px; height: 24px; color: var(--color-accent); flex-shrink: 0; margin-top: 0.15rem; }
.area-card-body { display: flex; flex-direction: column; }
.area-name { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; color: var(--color-ink); letter-spacing: -0.01em; }
.area-note { color: var(--color-ink-dim); font-size: 0.88rem; line-height: 1.5; margin-top: 0.15rem; }
.areas-note { text-align: center; color: var(--color-ink-dim); font-size: 0.9rem; margin-top: var(--space-lg); }

/* --- Gallery (imagery-led — a gym sells on energy and real photos). A simple
   responsive grid of real photos; each tile is an image with an optional
   caption. --- */
.gallery-section { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.gallery-item { margin: 0; }
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-item:hover img { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.gallery-item figcaption {
  margin-top: 0.65rem;
  text-align: center;
  color: var(--color-ink-dim);
  font-size: 0.85rem;
}

/* --- Team --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: 1040px;
  margin: 0 auto;
}
/* Editorial portrait cards: a tall photo (or navy monogram panel) above the body. */
.team-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
}
.team-photo { margin: 0; }
.team-photo img {
  width: 100%;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
  display: block;
}
.team-monogram {
  width: 100%;
  aspect-ratio: 4 / 4.4;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  color: var(--color-brand-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.2rem;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
/* Quiet architectural texture (echoes the hero fallback grid) so the monogram
   panel reads as a considered brand moment, not a flat placeholder tile.
   Negative z-index keeps it behind the (unwrapped) initials text node, which
   paints in normal flow above any auto/negative-stacked positioned layer. */
.team-monogram::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(120% 120% at 50% 20%, #000 25%, transparent 80%);
}
.team-monogram::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--color-accent);
  z-index: 1;
}
.team-body { padding: 1.6rem 1.7rem 1.85rem; text-align: left; }
.team-body h3 { margin-bottom: 0.2rem; font-size: 1.18rem; }
.team-credentials {
  color: var(--color-brand-strong);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
.team-role {
  color: var(--color-ink-dim);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-bottom: 0.95rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}
.team-body p { color: var(--color-ink-dim); font-size: 0.92rem; line-height: 1.65; }

/* Stock-team placeholder: an honest, always-visible "this can be your team" demo
   card, shown ONLY when the firm has no real headshots. The stock photo is never
   passed off as real staff (no name, no title) — a permanent ribbon + body label
   read it unmistakably as a placeholder. */
.team-card--placeholder .team-photo { position: relative; }
.team-card--placeholder .team-photo img { filter: saturate(0.9) contrast(0.98); }
.team-ph-ribbon {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  display: inline-flex;
  align-items: center;
  background: var(--color-accent);
  color: var(--color-brand-fg);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.34rem 0.66rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}
.team-card--placeholder .team-ph-title { color: var(--color-brand-strong); margin-bottom: 0.3rem; }
.team-card--placeholder .team-ph-note { color: var(--color-ink-dim); font-size: 0.9rem; line-height: 1.65; }

/* --- Coach credentials / standards --- */
.coach-creds-wrap { max-width: 980px; margin: 0 auto; }
.coach-creds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-md);
}
.coach-cred-card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.5rem 1.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.2s, transform 0.2s;
}
.coach-cred-card:hover { border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); transform: translateY(-2px); }
.coach-cred-card svg { width: 26px; height: 26px; color: var(--color-accent); flex-shrink: 0; margin-top: 0.1rem; }
.coach-cred-card strong { display: block; color: var(--color-ink); font-family: var(--font-display); font-size: 1rem; margin-bottom: 0.2rem; }
.coach-cred-card span { color: var(--color-ink-dim); font-size: 0.88rem; line-height: 1.55; }
.coach-creds-note { text-align: center; color: var(--color-ink-dim); font-size: 0.92rem; margin-top: var(--space-lg); }

/* --- Results / testimonials --- */
.results-section .section-head-center { margin-bottom: var(--space-lg); }
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: var(--space-md);
  padding: 0.75rem 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--color-ink-dim);
  box-shadow: var(--shadow-sm);
}
.rating-score { font-family: var(--font-display); font-weight: 800; color: var(--color-ink); font-size: 1.8rem; line-height: 1; }
.rating-stars { color: var(--color-accent); letter-spacing: 0.14em; font-size: 1.15rem; }
.rating-meta { font-weight: 600; }

/* Confident lead pull-quote with an oversized brass quote mark */
.review-lead {
  position: relative;
  max-width: 860px;
  margin: 0 auto var(--space-xl);
  padding: 2.75rem 3rem 2.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.review-lead-mark {
  position: absolute;
  top: -0.3rem; left: 1.5rem;
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  color: color-mix(in srgb, var(--color-accent) 32%, transparent);
  pointer-events: none;
}
.review-lead .review-stars { justify-content: center; }
.review-lead p {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-ink);
  margin: 0.5rem 0 1.1rem;
  text-wrap: balance;
}
.review-lead footer { font-size: 0.92rem; }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.review-card {
  padding: 1.9rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); }
.review-stars { color: var(--color-accent); font-size: 0.9rem; letter-spacing: 0.1em; margin-bottom: 0.85rem; display: flex; }
.review-card blockquote { color: var(--color-ink); font-size: 0.98rem; line-height: 1.7; margin-bottom: var(--space-sm); }
.review-author { font-family: var(--font-display); font-weight: 700; color: var(--color-ink); font-size: 0.95rem; }
.review-source { color: var(--color-ink-dim); font-family: var(--font-sans); font-size: 0.8rem; }

/* --- FAQ (native <details> accordion) --- */
.faq-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.faq-intro { position: sticky; top: 100px; }
.faq-intro .section-desc { margin-bottom: var(--space-md); }
.faq-aside {
  margin-top: var(--space-md);
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.faq-aside p { color: var(--color-ink-dim); font-size: 0.95rem; margin-bottom: 1rem; }
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.4rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  color: var(--color-ink);
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-brand-strong); }
/* +/- indicator built from two accent bars */
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 20px; height: 20px;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-accent);
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after { width: 2px; height: 14px; }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-answer {
  padding: 0 0.25rem 1.5rem;
  max-width: 60ch;
}
.faq-answer p { color: var(--color-ink-dim); font-size: 1rem; line-height: 1.75; }

/* --- Shared form vocabulary (WIDGETS.md §2): generic form-row/form-group
   infrastructure, kept available for any hand-authored section even though the
   sw-booking widget below is fully self-contained and doesn't depend on it. --- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.form-group { margin-bottom: var(--space-sm); }
.form-group label {
  display: block;
  font-size: 0.7rem;
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-dim);
  margin-bottom: 0.4rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
  outline: none;
}
.form-group textarea { resize: vertical; min-height: 104px; }
.form-group select { cursor: pointer; }

/* --- Contact / Map --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: stretch;
}
.contact-details { display: flex; flex-direction: column; gap: 0.75rem; }
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.contact-detail svg { width: 22px; height: 22px; color: var(--color-brand); flex-shrink: 0; margin-top: 0.1rem; }
.contact-detail strong { display: block; color: var(--color-ink); font-family: var(--font-display); font-size: 0.98rem; margin-bottom: 0.15rem; }
.contact-detail span { color: var(--color-ink-dim); font-size: 0.9rem; line-height: 1.55; }
.contact-detail a { color: var(--color-brand-strong); font-weight: 600; }
.contact-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: var(--space-md); }
.contact-note { color: var(--color-ink-dim); font-size: 0.88rem; margin-top: var(--space-sm); }
.map-container {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  min-height: 400px;
}
.map-container iframe { width: 100%; height: 100%; min-height: 400px; border: 0; display: block; }

/* --- Page hero (programs.html) --- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: calc(5rem + var(--space-lg)) 0 var(--space-xl);
  text-align: center;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
}
.page-hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  opacity: 0.86;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .section-label { color: var(--color-accent); justify-content: center; }
.page-hero .section-title,
.page-hero h1 { color: #fff; font-size: clamp(2.2rem, 4.5vw, 3.5rem); }
.page-hero .section-desc { color: rgba(255,255,255,0.9); margin: 0 auto; max-width: 640px; }
.page-hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: var(--space-lg); }

/* --- Programs overview intro (programs.html) --- */
.programs-overview { background: var(--color-bg); padding: clamp(1.75rem, 3vw, 2.75rem) 0; border-bottom: 1px solid var(--color-border); }
.programs-overview-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.programs-overview-inner .section-label { justify-content: center; }
.programs-overview-lead {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.42;
  color: var(--color-ink);
  text-wrap: balance;
}

/* --- Full programs page --- */
.full-programs-section { padding: clamp(2.125rem, 4vw, 3.75rem) 0; background: var(--color-bg); }
.full-programs-category { margin-bottom: var(--space-2xl); }
.category-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.category-index {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}
.category-header h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); white-space: nowrap; }
.category-header .line { flex: 1; height: 1px; background: var(--color-border); }
.category-desc { color: var(--color-ink-dim); font-size: 1.02rem; max-width: 720px; margin-bottom: var(--space-lg); line-height: 1.7; }
.full-programs-section .program-card { background: var(--color-surface); }

/* --- Weekly class schedule (programs.html only). Token-driven schedule[] rows
   {day,time,class,coach}. Empty-safe: the whole section (and its nav link)
   drops when the schedule array is absent. A real table (not a div grid) for
   free semantics/accessibility; collapses to stacked label/value cards below
   620px instead of a cramped horizontal scroll. --- */
.schedule-section { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.schedule-wrap {
  max-width: 980px;
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.schedule-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.schedule-table thead th {
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  padding: 1rem 1.25rem;
}
.schedule-table tbody td {
  padding: 0.95rem 1.25rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-ink-dim);
  font-size: 0.94rem;
}
.schedule-table tbody tr:nth-child(even) { background: var(--color-surface); }
.schedule-table tbody td:first-child {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-ink);
  white-space: nowrap;
}
.schedule-table tbody td:nth-child(3) { color: var(--color-brand-strong); font-weight: 700; }

/* Closing CTA band on the programs page (now its own section, after the
   schedule — no extra top margin needed since the wrapping <section> already
   contributes standard top padding). */
.programs-close-section { background: var(--color-bg); }
.programs-close {
  margin-top: 0;
  padding: clamp(2.75rem, 5vw, 4.5rem) clamp(1.75rem, 4vw, 3.5rem);
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  border-radius: var(--radius-xl);
  border-top: 3px solid var(--color-accent);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.programs-close-inner { max-width: 680px; margin: 0 auto; }
.programs-close h2 { color: #fff; margin-bottom: var(--space-sm); }
.programs-close .section-desc { color: rgba(255,255,255,0.85); margin: 0 auto 0.5rem; }
.programs-cta-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-top: var(--space-md); }

/* --- Footer --- */
.footer {
  background: var(--color-footer);
  padding: calc(var(--space-xl) / 2 + 0.5rem) 0 var(--space-md);
  color: rgba(255,255,255,0.75);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.9fr 1fr 1.3fr 1.3fr;
  gap: var(--space-lg) clamp(2rem, 4vw, 3.5rem);
  margin-bottom: calc(var(--space-lg) + 1rem);
}
.footer-logo { height: 40px; width: auto; max-width: 240px; object-fit: contain; margin-bottom: var(--space-sm); display: block; }
.footer-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: #fff;
  display: inline-block;
  margin-bottom: var(--space-sm);
}
.footer-brand p { color: rgba(255,255,255,0.72); font-size: 0.88rem; max-width: 320px; line-height: 1.68; }
.footer-tag { margin-top: 0.85rem; color: var(--color-accent) !important; font-weight: 600; font-size: 0.85rem !important; }
.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-md);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-col ul { list-style: none; }
/* Clear link-vs-static hierarchy: real nav links get a brighter rest state +
   an accent underline cue on hover so they read as interactive, not just text. */
.footer-col li { margin-bottom: 0.65rem; font-size: 0.88rem; color: rgba(255,255,255,0.68); }
.footer-col a {
  color: rgba(255,255,255,0.82);
  font-size: 0.88rem;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.footer-col a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--color-accent); }
.footer-contact li { display: flex; align-items: flex-start; gap: 0.6rem; }
.footer-contact li svg { width: 15px; height: 15px; flex: none; margin-top: 0.2rem; color: var(--color-accent); }
.footer-hours { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-hours-row { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: 0.85rem; color: rgba(255,255,255,0.68); }
.footer-hours-row span:first-child { color: #fff; font-weight: 600; }
.footer-hours-row span:last-child { text-align: right; white-space: nowrap; }
.footer-bottom {
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
}

/* --- Modal --- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10,18,34,0.55);
  z-index: 250;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: all 0.3s;
  padding: var(--space-md);
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  transform: scale(0.95);
  transition: transform 0.3s;
}
.modal-overlay.open .modal { transform: scale(1); }
.modal-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-sm);
}
.modal-icon svg { width: 28px; height: 28px; color: var(--color-brand); }
.modal h3 { margin-bottom: var(--space-xs); }
.modal p { color: var(--color-ink-dim); margin-bottom: var(--space-md); font-size: 0.92rem; line-height: 1.6; }

/* --- Back to top --- */
.back-to-top {
  position: fixed;
  bottom: 2rem; right: 2rem;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: var(--color-brand-strong);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  z-index: 90;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { filter: brightness(1.1); transform: translateY(-2px); }
.back-to-top svg { width: 20px; height: 20px; }

/* --- Animations --- */
html.js-anim .fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js-anim .fade-up.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  .btn:hover, .back-to-top:hover, .program-card:hover, .team-card:hover, .review-card:hover, .coach-cred-card:hover, .proof-point:hover { transform: none; }
}

/* --- Preview disclosure badge (required on every preview) --- */
.preview-badge {
  position: fixed;
  left: 12px; bottom: 12px;
  z-index: 2000;
  display: inline-flex;
  align-items: stretch;
  background: rgba(10, 18, 34, 0.86);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  line-height: 1;
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0.92;
}
.preview-badge:hover, .preview-badge:focus-within { opacity: 1; }
.preview-badge a { display: inline-flex; align-items: center; padding: 7px 10px; text-decoration: none; white-space: nowrap; }
.preview-badge a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.preview-badge-info, .preview-badge-info:hover { color: #fff; }
.preview-badge-cta { background: var(--color-accent); color: var(--color-hero-ink-2); font-weight: 700; }
.preview-badge-cta:hover { background: var(--color-accent); filter: brightness(1.06); color: var(--color-hero-ink-2); }

/* --- Mobile sticky call bar (conversion kit, ported from trades-static; mobile
   only via the max-width:1024px query below, phoneDigits-gated in the markup so
   a business with no captured phone never renders an empty bar). The phone is
   the fastest path to booking a session and should never be more than a
   thumb-tap away. Two-way split: Call (accent fill, the fastest action) +
   Book/CTA (brand-strong fill, mirrors .btn-primary). Fixed at the very bottom
   with a safe-area inset; back-to-top, the preview-badge and the footer are all
   pushed clear of it in the same breakpoint below so it never overlaps them or
   the sw-booking signup form's own on-page actions. */
.mobile-call-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -8px 24px -12px rgba(12,20,38,0.35);
}
.mobile-call-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1rem;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mobile-call-btn { background: var(--color-accent); color: var(--color-hero-ink-2); }
.mobile-call-btn svg { width: 19px; height: 19px; }
.mobile-book-btn { background: var(--color-brand-strong); color: var(--color-brand-fg); }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 0; right: -100%;
    width: 280px; height: 100vh;
    background: var(--color-bg);
    flex-direction: column;
    align-items: flex-start;
    padding: 5rem var(--space-lg) var(--space-lg);
    gap: 1.5rem;
    transition: right 0.3s ease;
    box-shadow: var(--shadow-lg);
  }
  .nav-links.open { right: 0; }
  .nav:not(.scrolled) .nav-links a { color: var(--color-ink); text-shadow: none; }
  .nav-phone { display: none; }
  .faq-intro { position: static; }
  /* The nav phone pill is gone below this breakpoint -- the sticky call bar
     replaces it so the phone is never more than a tap away. */
  .mobile-call-bar { display: flex; }
  .back-to-top { bottom: calc(64px + 1rem); }
  .preview-badge { bottom: calc(64px + 12px); }
  .footer { padding-bottom: calc(64px + var(--space-md)); }
}

@media (max-width: 900px) {
  .about-grid, .about-grid.no-media { grid-template-columns: 1fr; }
  .about-media { max-width: 560px; }
  .about-media img { height: auto; min-height: 0; aspect-ratio: 4 / 3.4; }
  .about-media::before { inset: 14px -14px -14px 14px; }
  .programs-grid,
  .gallery-grid,
  .reviews-grid,
  .steps-grid,
  .team-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid,
  .faq-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  /* Split + bandoverlay collapse to a single column on smaller screens. */
  .hero-split .hero-inner { grid-template-columns: 1fr; min-height: auto; }
  .hero-split .hero-content { padding: 7rem clamp(1.5rem, 6vw, 2.5rem) 3rem; }
  .hero-split .hero-figure { order: 2; min-height: 44vh; }
  .hero-split .hero-figure::after { display: none; }
  .hero-bandoverlay .hero-content { max-width: none; }
}

@media (max-width: 620px) {
  /* On phones the mobile nav is logo + hamburger only; the drawer links + the
     prominent hero CTA carry the action, so the long nav CTA can drop and give
     a long wordmark room to breathe. */
  .nav-cta { display: none; }
  .hero { min-height: 100svh; }
  .hero-content { padding-top: 6.5rem; }
  .hero-split .hero-content { padding-top: 6.5rem; }
  .hero-bandoverlay .hero-inner { min-height: 100svh; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; }
  .programs-grid,
  .gallery-grid,
  .reviews-grid,
  .steps-grid,
  .team-grid,
  .proof-points { grid-template-columns: 1fr; }
  .team-grid { max-width: 380px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .contact-detail span br { display: none; }
  .about-badge { left: 0; }
  .review-lead { padding: 2.25rem 1.75rem; }
  /* Weekly schedule: stacked label/value cards instead of a cramped scroll. */
  .schedule-wrap { overflow-x: visible; border: none; background: none; box-shadow: none; }
  .schedule-table { min-width: 0; border: none; }
  .schedule-table thead { display: none; }
  .schedule-table, .schedule-table tbody, .schedule-table tr, .schedule-table td { display: block; width: 100%; }
  .schedule-table tr {
    margin-bottom: 0.85rem;
    padding: 1rem 1.1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
  }
  .schedule-table tbody tr:nth-child(even) { background: var(--color-bg); }
  .schedule-table td { border-top: 0; padding: 0.2rem 0; display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
  .schedule-table td::before {
    content: attr(data-label);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-dim);
  }
}

/* ============================================
   Shared widgets (templates/frameworks/_base/widgets/), appended verbatim per
   WIDGETS.md §5 step 1 ("include the widget CSS"). Do not hand-tune these rules
   per pack — that defeats the "one fix propagates to every pack" contract; they
   already theme correctly from this file's :root core vars (§1) above.
   ============================================ */

/* sw-booking — intake/booking form widget (WIDGETS.md §4).
   Styles reference ONLY core theme vars (§1) with fallbacks, so this drops into any
   pack. Quality floors baked in: 16px controls, ONE solid-accent primary CTA,
   ghost secondary. */
.sw-booking {
  padding: clamp(56px, 9vw, 104px) 20px;
  background: var(--color-bg, #fff);
}
.sw-booking-inner {
  max-width: 760px;
  margin: 0 auto;
}
.sw-booking-head { text-align: center; margin-bottom: 36px; }

/* Pack-local craft pass: a clear head -> form -> actions rhythm, an accent top
   edge (matches the pack's other deep-navy/accent card moments) and a real
   resting shadow so the form reads as one considered surface, not a flat box. */
.sw-booking-form {
  background: color-mix(in srgb, var(--color-brand, #1d2733) 4%, var(--color-bg, #fff));
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
  border-top: 3px solid var(--color-accent, #2f6bff);
  border-radius: var(--radius, 12px);
  padding: clamp(28px, 5vw, 44px);
  box-shadow: var(--shadow-md, none);
}
.sw-booking-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 640px) { .sw-booking-form .form-row { grid-template-columns: 1fr; } }
.sw-booking-form .form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
/* Label vocabulary matches the rest of the pack's form-group labels (eyebrow
   treatment: small, uppercase, tracked) instead of a plain 14px/600 line, so
   label -> input reads as a clear two-step hierarchy. */
.sw-booking-form label {
  font-family: var(--font-sans, inherit);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-dim, #5b6673);
}
.sw-booking-form input,
.sw-booking-form textarea {
  font: inherit;
  font-size: 1rem; /* 16px floor: no zoom-on-focus on iOS, readable in captures */
  color: var(--color-ink, #16202b);
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.14));
  border-radius: calc(var(--radius, 12px) * 0.66);
  padding: 14px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sw-booking-form input:focus,
.sw-booking-form textarea:focus {
  outline: 2px solid var(--color-accent, #2f6bff);
  outline-offset: 1px;
  border-color: var(--color-accent, #2f6bff);
}

.sw-booking-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
}
/* THE primary CTA: solid accent, 16px, generous hit area, subtle lift. Exactly one. */
.sw-btn-primary {
  font: 600 1rem/1.2 inherit;
  color: var(--color-accent-ink, #fff);
  background: var(--color-accent, #2f6bff);
  border: 0;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--color-accent, #2f6bff) 70%, transparent);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.sw-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
/* Secondary: quiet by design so it never competes with the primary. */
.sw-btn-ghost {
  font: 600 0.9375rem/1.2 inherit;
  color: var(--color-ink-dim, #5b6673);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sw-btn-ghost:hover { color: var(--color-ink, #16202b); }

/* sw-trust — single-instance trust strip (WIDGETS.md §4). Core vars + fallbacks only. */
.sw-trust {
  background: color-mix(in srgb, var(--color-brand, #1d2733) 92%, black);
  color: #fff;
  padding: 14px 20px;
}
.sw-trust-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vw, 72px);
  flex-wrap: wrap;
}
.sw-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.sw-trust-value {
  font: 700 clamp(1.125rem, 2.2vw, 1.375rem)/1.2 var(--font-display, inherit);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.sw-trust-label {
  font-size: 0.875rem;
  opacity: 0.82;
  white-space: nowrap;
}