/* Dark theme preview; responsive content order and chat styling stay intact. */
body {
  --color-ink: #f5f5f5;
  --color-ink-soft: #bfc2c7;
  --color-paper: #101215;
  --color-paper-2: #25282e;
  --color-paper-3: #ffffff;
  --color-board: #191c21;
  --color-board-2: #0b0d10;
  --color-rule: rgba(255,255,255,.14);
  --color-accent: #ed352b;
  --color-accent-dark: #c52520;
  --color-mat: #a72b26;
  --color-focus: #ffb1a9;
  background: #101215;
}
.site-header { background: rgba(11,13,16,.96); }
.brand small { color: #eee; }
.hero {
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 36px;
  min-height: calc(100svh - 78px);
  padding: 80px 8vw 44px;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  background-position: center 47%;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,rgba(7,9,12,.88),rgba(7,9,12,.65) 48%,rgba(7,9,12,.18)),linear-gradient(0deg,rgba(7,9,12,.6),transparent 60%);
}
.hero-content { max-width: 900px; width: 100%; }
.hero h1 { font-size: clamp(64px,7.5vw,128px); max-width: 950px; text-wrap: initial; }
.hero h1 em { color: #ff4035; }
.hero-copy { color: #eee; max-width: 730px; }
.hero .eyebrow { color: #eee; }
.hero-proof {
  align-self: flex-end;
  margin: 0;
  background: rgba(15,18,23,.95);
  border-left-width: 4px;
  width: min(340px,100%);
}
.section-dark .eyebrow { color: #c5c7cb; }
.program-card, .program-copy-card, .schedule-layout, .class-row,
.coach-card > div, .testimonial-card, .why-image span { background: #1b1e23; }
.program-copy-card { background: #8d2420; }
.program-overlay { background: rgba(15,18,23,.94); }
.day-tabs { background: #202329; }
.day-tab.active { background: #ed352b; color: white; }
.schedule-note span { background: #292023; color: #ffb1a9; }
.testimonial-card:first-child { background: #25292f; border-top: 3px solid #ed352b; }
.ticker { border-block: 1px solid rgba(255,255,255,.12); }
.ticker i, .value-list strong { color: #ff6359; }
footer { background: #080a0d; }
footer > small { color: #a3a7ae; }
.skip-link { background: #15181d; }
/* Keep the existing chat typography. */
.chat-widget { --color-ink: #171819; --color-ink-soft: #46413a; --color-focus: #174f87; }

/* Chat palette, re-hued onto BUMA red.
   The panel shipped on a rose/maroon ramp (#771229, hue 345) with pink controls
   (#e99ab0 send, #dd557b prompt icons) while the site runs fire red (#ed352b,
   hue 3). Side by side they read as two different brands. Same ramp, same
   lightness, hue moved onto the site accent. Structure and behaviour unchanged. */
.chat-widget {
  background: linear-gradient(180deg, #111416 0 16%, #7a201b 38%, #ada6a4 73%, #f6f7f8 100%);
}
.chat-welcome > p { color: #efe3e1; }
.chat-suggestions span { background: #ffe3e0; color: #c52520; }
.chat-form button { background: #ed352b; }
.chat-form button:hover { background: #c52520; }

/* Review stars were #c18b2d, a muddy ochre that sat too dark on near-black.
   Kept gold, because gold stars are what a Google review looks like, and
   brightened so they actually read. */
.stars,
.testimonial-stars { color: #f5b544; }
@media (max-width: 980px) {
  .hero { padding: 64px 6vw 36px; }
  .main-nav { background: #101215; }
}
@media (max-width: 600px) {
  .hero { min-height: calc(100svh - 72px); padding: 52px 6vw 30px; gap: 30px; }
  .hero h1 { font-size: clamp(58px,13vw,78px); }
  .hero-media { background-position: 58% center; }
  .hero::before { background: linear-gradient(90deg,rgba(7,9,12,.88),rgba(7,9,12,.55)),linear-gradient(0deg,rgba(7,9,12,.7),transparent); }
  .hero-proof { align-self: flex-start; width: 100%; }
  .hero-actions { gap: 12px; }
}