/* ==========================================================================
   VOLT PILATES — Luxury Liquid-Glass Design System
   Fonts: San Francisco / system-ui — Apple's native system font (SF Pro on
   Apple devices, graceful sans fallback elsewhere). No web-font download.
   Themes: dark = pure black, light = pure white
   Glass: frost intensity driven by --frost (0–1), set from the header slider
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Type */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-hero: clamp(2.75rem, 7.5vw, 5.5rem);
  --fs-title: clamp(2rem, 4.5vw, 3.25rem);
  --fs-lead: clamp(1.0625rem, 1.6vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Spacing (8px grid) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-section: clamp(88px, 11vw, 152px);
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-glass: cubic-bezier(.4, 0, .2, 1);
  --t-theme: .3s;

  /* Frost (0–1), controlled by the header slider */
  --frost: .6;
  --glass-blur-max: 26px;

  /* Z-scale */
  --z-aurora: 0;
  --z-content: 10;
  --z-figures: 5;
  --z-header: 100;
  --z-menu: 200;
  --z-cta: 150;
}

/* Brand (matches the Volt landing page reference) */
:root {
  --brand: #03DAF8;        /* electric cyan — the Volt accent */
  --brand-rgb: 3, 218, 248;
  --brand-soft: #5FE6F5;   /* lighter cyan (reference "sculpt" tone) */
  --brand-deep: #008CFF;   /* deeper blue, used for glass/aurora depth */
}

/* Dark — pure black, white text, blue frosted glass, cyan accent */
:root[data-theme="dark"] {
  --bg: #000000;
  --text: #f2f3f5;
  --muted: rgba(242, 243, 245, .64);
  --faint: rgba(242, 243, 245, .48);
  --accent: var(--brand);
  --accent-text: var(--brand);      /* 12.4:1 on black — safe for any text size */
  --accent-strong: var(--brand-soft);
  --accent-ink: #04121a;            /* near-black ink on cyan fills */
  --hairline: rgba(255, 255, 255, .10);
  --glass-bg: linear-gradient(135deg, rgba(3, 218, 248, .10), rgba(0, 140, 255, .06) 45%, rgba(95, 230, 245, .08));
  --glass-solid: rgba(6, 18, 28, .5);
  --glass-border: rgba(255, 255, 255, .13);
  --glass-highlight: rgba(255, 255, 255, .22);
  --glass-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  --glass-tint-hover: rgba(3, 218, 248, .12);
  --img-filter: brightness(.88) saturate(.94);
  --aurora-a: rgba(3, 218, 248, .18);
  --aurora-b: rgba(0, 140, 255, .14);
  --aurora-c: rgba(95, 230, 245, .10);
  --field-bg: rgba(255, 255, 255, .05);
  --success: #7ddba3;
  --error: #ff8a8a;
  --scrim: rgba(0, 0, 0, .6);
}

/* Light — pure white, near-black text, clear glass with soft shadows */
:root[data-theme="light"] {
  --bg: #ffffff;
  --text: #111318;
  --muted: rgba(17, 19, 24, .64);
  --faint: rgba(17, 19, 24, .52);
  --accent: var(--brand);           /* fills, borders, glows, icons stay brand cyan */
  --accent-text: #087E97;           /* same 191° hue, darkened to 4.7:1 on white */
  --accent-strong: #00B4D4;
  --accent-ink: #04121a;
  --hairline: rgba(17, 19, 24, .10);
  --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .5));
  --glass-solid: rgba(255, 255, 255, .65);
  --glass-border: rgba(17, 19, 24, .09);
  --glass-highlight: rgba(255, 255, 255, .9);
  --glass-shadow: 0 20px 50px rgba(17, 19, 24, .09);
  --glass-tint-hover: rgba(3, 218, 248, .09);
  --img-filter: none;
  --aurora-a: rgba(3, 218, 248, .16);
  --aurora-b: rgba(0, 140, 255, .10);
  --aurora-c: rgba(95, 230, 245, .14);
  --field-bg: rgba(17, 19, 24, .03);
  --success: #1e7a45;
  --error: #c0392b;
  --scrim: rgba(17, 19, 24, .35);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  transition: background-color var(--t-theme) ease, color var(--t-theme) ease;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
main img { filter: var(--img-filter); transition: filter var(--t-theme) ease, opacity .6s ease, transform .8s var(--ease-out); }

a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.022em; }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-title); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: calc(var(--space-section) / 2); }
main > .section, #showcase, #hero { scroll-margin-top: 110px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: fixed; top: -60px; left: var(--space-2);
  z-index: 1000; padding: 12px 20px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: var(--space-2); }

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

::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- Aurora backdrop ---------- */
.aurora {
  position: fixed; inset: 0; z-index: var(--z-aurora);
  pointer-events: none; overflow: hidden;
}
.aurora-blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  transition: background var(--t-theme) ease;
}
.aurora-1 { width: 55vw; height: 55vw; top: -18vw; left: -12vw; background: var(--aurora-a); animation: aurora-drift 26s ease-in-out infinite alternate; }
.aurora-2 { width: 45vw; height: 45vw; top: 32%; right: -16vw; background: var(--aurora-b); animation: aurora-drift 32s ease-in-out infinite alternate-reverse; }
.aurora-3 { width: 38vw; height: 38vw; bottom: -14vw; left: 22vw; background: var(--aurora-c); animation: aurora-drift 38s ease-in-out infinite alternate; }

@keyframes aurora-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vw, 4vw, 0) scale(1.15); }
}

main, .site-footer { position: relative; z-index: var(--z-content); }

/* ---------- Glass system ---------- */
.glass, .glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: blur(calc(var(--frost) * var(--glass-blur-max))) saturate(1.35);
  backdrop-filter: blur(calc(var(--frost) * var(--glass-blur-max))) saturate(1.35);
  transition: background var(--t-theme) ease, border-color var(--t-theme) ease,
              box-shadow .35s var(--ease-glass), transform .35s var(--ease-glass),
              -webkit-backdrop-filter .4s var(--ease-glass);
  transition-property: background, border-color, box-shadow, transform, translate, backdrop-filter, -webkit-backdrop-filter;
}
.glass-card { border-radius: var(--radius-lg); }

/* Decorative interactive glass figures — click to frost / clear */
.glass-figure {
  position: absolute; z-index: var(--z-figures);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: blur(calc(var(--frost) * var(--glass-blur-max))) saturate(1.5);
  backdrop-filter: blur(calc(var(--frost) * var(--glass-blur-max))) saturate(1.5);
  cursor: pointer;
  transition: backdrop-filter .5s var(--ease-glass), -webkit-backdrop-filter .5s var(--ease-glass),
              background .5s var(--ease-glass), border-color var(--t-theme) ease, transform .5s var(--ease-glass), scale .4s var(--ease-glass);
}
.glass-figure.is-clear {
  -webkit-backdrop-filter: blur(0px) saturate(1);
  backdrop-filter: blur(0px) saturate(1);
  background: transparent;
}
.glass-figure:hover { scale: 1.06; }
.fig-orb { width: 130px; height: 130px; border-radius: 50%; }
.fig-orb.sm { width: 82px; height: 82px; }
.fig-ring { width: 150px; height: 150px; border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%); mask: radial-gradient(circle, transparent 52%, #000 54%); box-shadow: none; }
.fig-pill { width: 170px; height: 64px; border-radius: var(--radius-pill); rotate: -14deg; }

/* ---------- Floating (gentle breathing) ---------- */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(var(--float-dist, -12px)); }
}
.float-slow { --float-dist: -16px; animation: floaty 9s ease-in-out infinite; }
.float-med  { --float-dist: -12px; animation: floaty 7s ease-in-out infinite .8s; }
.float-fast { --float-dist: -9px;  animation: floaty 5.5s ease-in-out infinite .4s; }
/* card variants — subtle, staggered so grids breathe out of phase */
.float-a { --float-dist: -7px; animation: floaty 8s ease-in-out infinite; }
.float-b { --float-dist: -9px; animation: floaty 9.5s ease-in-out infinite 1.2s; }
.float-c { --float-dist: -6px; animation: floaty 7.2s ease-in-out infinite .6s; }

/* ---------- Bounce on hover (whole heading) ----------
   The entire heading lifts as one unit and settles with a soft spring, picking
   up a faint brand-cyan glow so the motion reads as part of the design rather
   than bolted on. Body copy, links and images stay still. The lift rides on
   `translate` (never `transform`) so it never fights the `floaty` breathing.
   FAQ questions are excluded — they wrap a button and must stay a still Q&A.
   Gated on `.js`, off under reduced-motion. */
@keyframes heading-bounce {
  0%   { translate: 0 0; }
  28%  { translate: 0 -0.28em; }
  60%  { translate: 0 0.03em; }
  100% { translate: 0 0; }
}
.js h1, .js h2, .js h3, .js h4, .js h5, .js h6 {
  transition: text-shadow .35s var(--ease-out);
}
/* Soft spring — a touch of overshoot on the lift, a gentle settle */
.js h1:hover, .js h2:hover, .js h3:hover,
.js h4:hover, .js h5:hover, .js h6:hover {
  animation: heading-bounce .55s cubic-bezier(.34, 1.42, .5, 1);
  text-shadow: 0 0 18px rgba(var(--brand-rgb), .38);
}
/* FAQ questions stay put — normal Q&A, no jump */
.js .faq-item h3:hover {
  animation: none;
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .js h1:hover, .js h2:hover, .js h3:hover,
  .js h4:hover, .js h5:hover, .js h6:hover { animation: none; }
}

/* ---------- Scroll reveal (hidden only when JS runs; slides via `translate`
   so the float animation, which owns `transform`, can't cancel it) ---------- */
.js .reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity .8s var(--ease-out), translate .8s var(--ease-out);
}
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }
.reveal.d4 { transition-delay: .4s; }
.js .reveal.is-in { opacity: 1; translate: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--fs-small); letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out),
              background-color .25s ease, color var(--t-theme) ease, border-color .25s ease;
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 26px rgba(3, 218, 248, .28);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(3, 218, 248, .4);
  background: var(--accent-strong);
}
.btn-ghost {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(calc(var(--frost) * 14px));
  backdrop-filter: blur(calc(var(--frost) * 14px));
  color: var(--text);
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 28px rgba(0,0,0,.14); }
.btn-lg { min-height: 56px; padding: 16px 36px; font-size: 1rem; }
.btn-sm { min-height: 44px; padding: 10px 22px; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  padding: 14px var(--gutter) 0;
  transition: transform .35s var(--ease-out);
}
.header-inner {
  max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  transition: padding .3s var(--ease-out), background var(--t-theme) ease, border-color var(--t-theme) ease;
}
.site-header.is-condensed .header-inner { padding: 7px 18px; }
.site-header.is-condensed { padding-top: 8px; }

.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .1em; text-decoration: none; color: var(--text);
}
.wordmark-mark { color: var(--accent-text); flex: none; }

.nav { display: flex; gap: clamp(14px, 2vw, 30px); }
.nav-link {
  position: relative; padding: 10px 2px;
  font-size: var(--fs-small); font-weight: 500; color: var(--muted);
  text-decoration: none; transition: color .25s ease;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px;
  height: 1.5px; background: var(--accent-text);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.nav-link:hover, .nav-link.is-active { color: var(--text); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 14px; }

/* Frost slider */
.frost-control {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted);
}
.frost-control input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 84px; height: 3px; border-radius: 2px;
  background: var(--hairline); outline-offset: 4px; cursor: pointer;
}
.frost-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: transform .2s ease;
}
.frost-control input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
.frost-control input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
}

/* Theme toggle */
.theme-toggle {
  position: relative; width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--glass-border);
  color: var(--text);
  transition: border-color .25s ease, transform .25s ease, background-color .25s ease;
}
.theme-toggle:hover { border-color: var(--accent); transform: rotate(15deg); }
.theme-toggle svg { grid-area: 1 / 1; transition: opacity .3s ease, transform .4s var(--ease-out); }
:root[data-theme="dark"] .icon-moon { opacity: 0; transform: rotate(-60deg) scale(.5); }
:root[data-theme="dark"] .icon-sun { opacity: 1; transform: none; }
:root[data-theme="light"] .icon-sun { opacity: 0; transform: rotate(60deg) scale(.5); }
:root[data-theme="light"] .icon-moon { opacity: 1; transform: none; }

/* Hamburger */
.hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 48px; height: 48px; align-items: center; }
.hamburger span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--text); transition: transform .3s var(--ease-out), opacity .3s ease;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(340px, 86vw);
  z-index: var(--z-menu);
  padding: 100px 36px 40px;
  border-radius: 0; border-right: 0;
  transform: translateX(105%);
  visibility: hidden;
  transition: transform .45s var(--ease-out), background var(--t-theme) ease, visibility 0s linear .45s;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--glass-solid);
}
.mobile-menu.is-open { transform: translateX(0); visibility: visible; transition: transform .45s var(--ease-out), background var(--t-theme) ease; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu nav a {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 500;
  text-decoration: none; color: var(--text);
  padding: 10px 0; border-bottom: 1px solid var(--hairline);
  transition: color .25s ease, padding-left .25s var(--ease-out);
}
.mobile-menu nav a:hover { color: var(--accent-text); padding-left: 8px; }
.mobile-menu nav a.mobile-menu-cta { color: var(--accent-text); border-bottom: 0; }
.mobile-menu-frost { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-small); color: var(--muted); }
.mobile-menu-frost input[type="range"] { width: 100%; accent-color: var(--accent-text); }
.menu-scrim {
  position: fixed; inset: 0; z-index: calc(var(--z-menu) - 1);
  background: var(--scrim); opacity: 0; transition: opacity .3s ease;
}
.menu-scrim.is-open { opacity: 1; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  padding: 140px var(--gutter) 100px;
}
#hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease .2s;
}
#hero-canvas.is-live { opacity: 1; }

.hero-content { position: relative; z-index: var(--z-content); max-width: 820px; }

.eyebrow {
  font-size: .8125rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent-text);
  margin-bottom: var(--space-2);
}
.hero-title { display: flex; flex-direction: column; margin-bottom: var(--space-3); }
.hero-title em, .section-title em {
  font-style: italic; font-weight: 500; color: var(--accent-text);
}
.hero-sub {
  font-size: var(--fs-lead); color: var(--muted);
  max-width: 560px; margin: 0 auto var(--space-4);
}
.hero-ctas { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }

.scroll-cue {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-content);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; color: var(--faint);
  font-size: .75rem; letter-spacing: .3em; text-transform: uppercase;
  transition: color .3s ease;
}
.scroll-cue:hover { color: var(--accent-text); }
.scroll-cue-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--accent-text), transparent);
  animation: cue-pulse 2.2s ease-in-out infinite;
}
@keyframes cue-pulse {
  0%, 100% { transform: scaleY(.5); transform-origin: top; opacity: .5; }
  50%      { transform: scaleY(1); opacity: 1; }
}

/* ---------- Showcase ---------- */
.showcase { padding-block: 0 calc(var(--space-section) / 2); }
.showcase-frame { padding: 12px; overflow: hidden; }
.showcase-frame .img-frame { border-radius: calc(var(--radius-lg) - 8px); }

/* ---------- Image frames (blur-up) ---------- */
.img-frame {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  background: linear-gradient(120deg, var(--hairline), transparent 40%, var(--hairline));
  background-size: 200% 100%;
  animation: img-shimmer 1.6s ease infinite;
}
.img-frame img { width: 100%; height: 100%; object-fit: cover; }
.js .img-frame img { opacity: 0; }
.img-frame img.loaded { opacity: 1; }
.img-frame.loaded { animation: none; }
@keyframes img-shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
.ratio-showcase { aspect-ratio: 1482 / 562; }
.ratio-portrait { aspect-ratio: 4 / 5; }
.ratio-landscape { aspect-ratio: 3 / 2; }

/* ---------- Section headings ---------- */
.section-title { max-width: 640px; margin-bottom: var(--space-2); }
.section-sub { color: var(--muted); max-width: 520px; margin-bottom: var(--space-6); font-size: var(--fs-lead); }
.lead { font-size: var(--fs-lead); color: var(--text); margin-bottom: var(--space-2); }

/* ---------- About ---------- */
.about-grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 6vw, 88px); align-items: center;
  margin-bottom: var(--space-8);
}
.about-copy p { color: var(--muted); }
.about-copy .lead { color: var(--text); }
.about-points { list-style: none; margin-top: var(--space-3); display: grid; gap: 14px; }
.about-points li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.about-points svg { color: var(--accent-text); flex: none; }

.about-media { position: relative; }
.about-media .img-frame { box-shadow: var(--glass-shadow); }
.about-badge {
  position: absolute; bottom: -22px; left: -22px;
  padding: 18px 24px; border-radius: var(--radius-md);
  display: flex; flex-direction: column;
}
.badge-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--accent-text); line-height: 1; }
.badge-label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Stats */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3); text-align: left;
}
.stat { border-top: 2px solid var(--accent-text); padding-top: var(--space-2); }
.stat dd {
  font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.counter-suffix { color: var(--accent-text); }
.stat dt { font-size: var(--fs-small); color: var(--muted); order: 2; margin-top: 6px; }
.stat { display: flex; flex-direction: column; }
.stat dd { order: 1; }

/* ---------- Classes & filters ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-6);
}
.filter-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.filter-label {
  font-size: .75rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); margin-right: 6px;
}
.chip {
  min-height: 44px; padding: 8px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(calc(var(--frost) * 10px));
  backdrop-filter: blur(calc(var(--frost) * 10px));
  font-size: var(--fs-small); font-weight: 500; color: var(--muted);
  transition: all .25s var(--ease-out);
}
.chip:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); }
.chip.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }

.class-grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.class-card {
  position: relative; padding: var(--space-4);
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
}
.class-card.is-hidden { display: none; }
.class-card:hover {
  translate: 0 -6px;
  border-color: var(--accent);
  box-shadow: 0 30px 70px rgba(0,0,0,.35), inset 0 1px 0 var(--glass-highlight);
}
:root[data-theme="light"] .class-card:hover { box-shadow: 0 26px 56px rgba(19,19,18,.14), inset 0 1px 0 var(--glass-highlight); }
.class-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.class-card h3 { font-size: 1.375rem; }
.class-tag {
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text); border: 1px solid var(--accent-text);
  padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
.class-meta { font-size: var(--fs-small); font-weight: 600; color: var(--accent-text); }
.class-desc { color: var(--muted); font-size: var(--fs-small); flex: 1; }
.class-times { font-size: var(--fs-small); color: var(--muted); }
.class-times span { font-weight: 600; color: var(--text); }

/* Instant booking CTA slides up on hover (always visible on touch) */
.class-book { margin-top: 6px; align-self: flex-start; }
@media (hover: hover) {
  .class-book { opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .25s ease, background-color .25s ease; }
  .class-card:hover .class-book, .class-card:focus-within .class-book { opacity: 1; transform: none; }
}
.filter-empty { color: var(--muted); text-align: center; padding: var(--space-6) 0; }

/* ---------- Instructors ---------- */
.instructor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.instructor-card { overflow: hidden; display: flex; flex-direction: column; }
.instructor-card .img-frame { border-radius: 0; }
.instructor-card:hover { translate: 0 -6px; }
.instructor-card:hover img { transform: scale(1.04); }
.instructor-body { padding: var(--space-3) var(--space-3) var(--space-4); }
.instructor-body h3 { font-size: 1.5rem; margin-bottom: 2px; }
.instructor-role {
  font-size: .75rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px;
}
.instructor-bio { color: var(--muted); font-size: var(--fs-small); margin-bottom: var(--space-2); }
.instructor-creds { list-style: none; display: grid; gap: 6px; }
.instructor-creds li {
  font-size: .8125rem; color: var(--muted);
  padding-left: 18px; position: relative;
}
.instructor-creds li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 1.5px; background: var(--accent-text);
}

/* ---------- Testimonials ---------- */
.testimonials .container { max-width: 900px; }
.carousel-viewport { overflow: hidden; border-radius: var(--radius-lg); }
.carousel-track {
  list-style: none; display: flex;
  transition: transform .55s var(--ease-out);
}
.t-card {
  flex: 0 0 100%; padding: clamp(28px, 5vw, 56px);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.t-stars { color: var(--accent-text); letter-spacing: 6px; font-size: 1.05rem; }
.t-card blockquote {
  font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 500; line-height: 1.4; font-style: italic;
}
.t-transform {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  font-size: .8125rem;
}
.t-transform svg { color: var(--accent-text); flex: none; }
.t-before { color: var(--muted); }
.t-after { color: var(--accent-text); font-weight: 600; }
.t-name { font-weight: 600; font-size: var(--fs-small); }
.t-name span { color: var(--faint); font-weight: 400; margin-left: 8px; }

.carousel-controls {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); margin-top: var(--space-3);
}
.carousel-btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--glass-border); color: var(--text);
  display: grid; place-items: center;
  transition: all .25s var(--ease-out);
}
.carousel-btn:hover { border-color: var(--accent); color: var(--accent-text); transform: scale(1.08); }
.carousel-dots { display: flex; gap: 10px; }
.carousel-dots button {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--hairline); padding: 0;
  transition: all .3s var(--ease-out);
}
.carousel-dots button.is-active { background: var(--accent); transform: scale(1.3); }
.carousel-dots button { position: relative; }
.carousel-dots button::after { content: ""; position: absolute; inset: -8px; }

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3); align-items: stretch;
}
.price-card {
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  position: relative;
}
.price-card:hover { translate: 0 -6px; border-color: var(--accent); }
.price-card.featured {
  border-color: var(--accent);
  box-shadow: 0 30px 80px rgba(3, 218, 248, .22), inset 0 1px 0 var(--glass-highlight);
}
.price-card.featured { transform: translateY(-14px); }
.price-card.featured:hover { transform: translateY(-20px); }
.price-flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--accent-ink);
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 16px; border-radius: var(--radius-pill); white-space: nowrap;
}
.price-tier { font-size: 1.25rem; }
.price { font-family: var(--font-display); }
.price-num { font-size: clamp(2.5rem, 4vw, 3.25rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.price-per { color: var(--muted); font-family: var(--font-body); font-size: var(--fs-small); }
.price-desc { color: var(--muted); font-size: var(--fs-small); }
.price-features { list-style: none; display: grid; gap: 10px; margin-block: var(--space-1) var(--space-2); flex: 1; }
.price-features li {
  font-size: var(--fs-small); padding-left: 26px; position: relative;
}
.price-features li::before {
  position: absolute; left: 0; top: 0; font-weight: 700;
}
.price-features li.yes::before { content: "✓"; color: var(--accent-text); }
.price-features li.no { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--hairline); }
.price-features li.no::before { content: "—"; color: var(--faint); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item:first-child { border-top: 1px solid var(--hairline); }
.faq-item h3 { font-size: inherit; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 22px 4px; text-align: left;
  font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; color: var(--text);
  transition: color .25s ease;
}
.faq-q:hover { color: var(--accent-text); }
.faq-icon { flex: none; color: var(--accent-text); transition: transform .35s var(--ease-out); }
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease-out);
}
.faq-a > p {
  overflow: hidden; color: var(--muted);
  max-width: 640px;
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-a > p { padding-bottom: 22px; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.blog-card { overflow: hidden; display: flex; flex-direction: column; }
.blog-card .img-frame { border-radius: 0; }
.blog-card:hover { translate: 0 -6px; border-color: var(--accent); }
.blog-card:hover img { transform: scale(1.04); }
.blog-body { padding: var(--space-3); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-tag {
  font-size: .6875rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-text);
}
.blog-body h3 { font-size: 1.25rem; line-height: 1.3; }
.blog-body h3 a { text-decoration: none; color: var(--text); transition: color .25s ease; }
.blog-body h3 a:hover { color: var(--accent-text); }
.blog-body h3 a::after { content: ""; position: absolute; inset: 0; }
.blog-card { position: relative; }
/* the description only — must not swallow .blog-tag / .blog-meta, which are
   also <p> children and were losing their color and gaining flex:1 */
.blog-body > p:not(.blog-tag):not(.blog-meta) { color: var(--muted); font-size: var(--fs-small); flex: 1; }
.blog-meta { color: var(--faint); font-size: .8125rem; }

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px; gap: var(--space-2);
}
.gallery-item { margin: 0; border-radius: var(--radius-md); }
.gallery-item.wide { grid-column: span 2; }
.gallery-item img { transition: transform .8s var(--ease-out), filter var(--t-theme) ease, opacity .6s ease; }
.gallery-item:hover img { transform: scale(1.05); }

/* ---------- Booking ---------- */
.booking-layout {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(32px, 6vw, 88px); align-items: start;
}
.booking-points { list-style: none; display: grid; gap: 12px; }
.booking-points li { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.booking-points li::before {
  content: ""; width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 1px solid var(--accent-text);
  background: radial-gradient(circle at center, var(--accent-text) 0 4px, transparent 5px);
}

.booking-form { padding: clamp(24px, 4vw, 44px); position: relative; }

.form-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.progress-dot {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: var(--hairline);
  transition: background .3s ease, box-shadow .3s ease;
}
.progress-dot.is-active { background: var(--accent); box-shadow: 0 0 0 4px rgba(3, 218, 248, .2); }
.progress-dot.is-done { background: var(--accent); }
.progress-bar { flex: 1; height: 2px; background: var(--hairline); border-radius: 2px; overflow: hidden; }
.progress-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width .5s var(--ease-out); }
.form-step-label { font-size: .8125rem; color: var(--muted); margin-bottom: var(--space-3); letter-spacing: .04em; }

.form-step { display: none; border: 0; }
.form-step.is-active { display: block; animation: step-in .45s var(--ease-out); }
@keyframes step-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

.field { margin-bottom: var(--space-3); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.field label, .field .field-label {
  display: block; font-size: var(--fs-small); font-weight: 600;
  margin-bottom: 8px;
}
.req { color: var(--accent-text); }
.optional { color: var(--faint); font-weight: 400; }

.input-wrap { position: relative; }
.input-wrap input, .input-wrap select, .input-wrap textarea {
  width: 100%; min-height: 52px; padding: 14px 44px 14px 16px;
  font: inherit; color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  transition: border-color .25s ease, box-shadow .25s ease, background-color var(--t-theme) ease;
}
.input-wrap textarea { resize: vertical; min-height: 88px; }
.input-wrap select { appearance: none; cursor: pointer; }
.input-wrap input::placeholder, .input-wrap textarea::placeholder { color: var(--faint); }
.input-wrap input:focus, .input-wrap select:focus, .input-wrap textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(3, 218, 248, .18);
}
.field.is-valid .input-wrap input, .field.is-valid .input-wrap select { border-color: var(--success); }
.field.is-invalid .input-wrap input, .field.is-invalid .input-wrap select { border-color: var(--error); }

.field-check {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%) scale(.4);
  color: var(--success); opacity: 0;
  transition: opacity .3s ease, transform .3s var(--ease-out);
  pointer-events: none;
}
.field.is-valid .field-check { opacity: 1; transform: translateY(-50%) scale(1); }

.field-error {
  min-height: 20px; margin-top: 6px;
  font-size: .8125rem; color: var(--error);
}

.radio-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-pill { position: relative; }
.radio-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-pill span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 10px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  font-size: var(--fs-small); font-weight: 500; color: var(--muted);
  transition: all .25s var(--ease-out); cursor: pointer;
}
.radio-pill:hover span { border-color: var(--accent); color: var(--text); }
.radio-pill input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.radio-pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

.booking-summary {
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3); font-size: var(--fs-small);
}
.booking-summary:empty { display: none; }
.booking-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; }
.booking-summary dt { color: var(--faint); }
.booking-summary dd { font-weight: 500; }

.form-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.form-hint { font-size: .8125rem; color: var(--faint); margin-top: var(--space-2); text-align: center; }

.btn-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite;
  display: none;
}
.btn.is-loading .btn-spinner { display: inline-block; }
.btn.is-loading .btn-label { opacity: .6; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Success */
.form-success { text-align: center; padding: var(--space-4) 0; animation: step-in .5s var(--ease-out); }
.form-success h3 { font-size: 1.75rem; margin: var(--space-3) 0 10px; }
.form-success p { color: var(--muted); max-width: 380px; margin: 0 auto var(--space-4); }
.success-mark { color: var(--success); }
.success-circle { stroke-dasharray: 190; stroke-dashoffset: 190; animation: draw 1s var(--ease-out) forwards; }
.success-check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s var(--ease-out) .7s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.success-actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  margin-top: calc(var(--space-section) / 2);
  padding-top: var(--space-8);
  transition: border-color var(--t-theme) ease;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-4); padding-bottom: var(--space-6);
}
.footer-brand p { color: var(--muted); font-size: var(--fs-small); }
.footer-wordmark { margin-bottom: var(--space-2); font-size: 1.1rem; }
.footer-col h3 {
  font-family: var(--font-body); font-size: .75rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
  margin-bottom: var(--space-2);
}
.footer-col p, .footer-col address { color: var(--muted); font-style: normal; font-size: var(--fs-small); line-height: 2; }
.footer-col a { color: var(--muted); text-decoration: none; transition: color .25s ease; }
.footer-col a:hover { color: var(--accent-text); }
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline); color: var(--muted);
  display: grid; place-items: center;
  transition: all .25s var(--ease-out);
}
.social-row a:hover { color: var(--accent-text); border-color: var(--accent); transform: translateY(-3px); }
.footer-legal {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-3);
  font-size: .8125rem; color: var(--faint);
}
.footer-legal nav { display: flex; gap: var(--space-3); }
.footer-legal a { color: var(--faint); text-decoration: none; transition: color .25s ease; }
.footer-legal a:hover { color: var(--accent-text); }

/* ---------- Sticky mobile booking CTA ---------- */
.mobile-book-cta {
  position: fixed; left: var(--space-2); right: var(--space-2); bottom: var(--space-2);
  z-index: var(--z-cta);
  display: none;
  transform: translateY(140%);
  visibility: hidden;
  transition: transform .4s var(--ease-out), visibility 0s linear .4s;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}
.mobile-book-cta.is-visible { transform: none; visibility: visible; transition: transform .4s var(--ease-out); }

/* ---------- Breadcrumbs (blog pages) ---------- */
.breadcrumbs { padding: 120px var(--gutter) 0; max-width: var(--container); margin-inline: auto; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; font-size: .8125rem; color: var(--faint); }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: var(--hairline); }
.breadcrumbs a { color: var(--muted); text-decoration: none; transition: color .25s ease; }
.breadcrumbs a:hover { color: var(--accent-text); }
.breadcrumbs [aria-current] { color: var(--text); }

/* ---------- Article (blog) ---------- */
.article { max-width: 720px; margin-inline: auto; padding: var(--space-6) var(--gutter) var(--space-8); }
.article-header { margin-bottom: var(--space-6); }
.article h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: var(--space-2); }
.article-meta { color: var(--faint); font-size: var(--fs-small); }
.article h2 { font-size: 1.625rem; margin: var(--space-6) 0 var(--space-2); }
.article p { color: var(--muted); margin-bottom: var(--space-3); }
.article strong { color: var(--text); }
.article ul, .article ol { color: var(--muted); margin: 0 0 var(--space-3) 22px; }
.article li { margin-bottom: 8px; }
.article .img-frame { margin-block: var(--space-4); }
.article-cta { margin-top: var(--space-6); text-align: center; padding: var(--space-6); }
.article-cta h2 { margin-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nav { display: none; }
  .hamburger { display: flex; }
  .frost-control { display: none; }
  .btn-book { display: none; }

  .class-grid, .instructor-grid, .blog-grid, .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .booking-layout { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-3); }
}

@media (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 440px; }
  .class-grid, .instructor-grid, .blog-grid, .pricing-grid { grid-template-columns: 1fr; }
  .price-card.featured { transform: none; }
  .price-card.featured:hover { transform: translateY(-6px); }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .mobile-book-cta { display: inline-flex; }
  body { padding-bottom: 76px; }

  /* Shorter hero, simpler figures on mobile */
  .hero { min-height: 88svh; padding-top: 120px; flex-direction: column; }
  .glass-figure { scale: .66; }
  .fig-ring { display: none; }
  .scroll-cue { position: static; transform: none; margin-top: var(--space-6); }
}

/* Honeypot — visually removed but present in the form for bots to fill */
.hp-field {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Fast-tap response on small controls */
.chip, .faq-q, .carousel-btn, .theme-toggle, .hamburger, .radio-pill span { touch-action: manipulation; }

/* Pages without the slide-in menu (blog) keep a Book button on mobile */
@media (max-width: 1024px) {
  .site-header--no-menu .btn-book { display: inline-flex; min-height: 44px; padding: 10px 18px; }
}
@media (max-width: 480px) {
  .site-header--no-menu .wordmark span { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal, .js .reveal.is-in { opacity: 1; translate: none; transform: none; }
  #hero-canvas { display: none; }
  .parallax { transform: none !important; translate: none !important; }
}