/* ============================================================
   Galaxy Gymnastics - Main Stylesheet
   ============================================================ */

/* ---------- Fonts (self-hosted: no third-party round trip) ----------
   Mulish variable font, 200-900 weights in a single file.
   Paths are root-relative so they resolve from any subdirectory. */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/mulish-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/mulish-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Variables ---------- */
:root {
  --primary:        #5C2D91;
  --primary-dark:   #3D1870;
  --primary-light:  #7B3FAE;
  --accent:         #00B4D8;
  /* Accessible companions to --accent: the bright cyan is only 2.46:1 on
     white, so anything carrying text uses these instead (5.1:1 / 6.7:1). */
  --accent-deep:    #00788F;
  --accent-deeper:  #00657A;
  --accent-light:   #48CAE4;
  --gold:           #F5C518;
  --white:          #FFFFFF;
  --off-white:      #F8F7FF;
  --light-gray:     #F0EFF8;
  --mid-gray:       #C8C4DC;
  --dark:           #1A1028;
  --text:           #2D2540;
  --text-muted:     #6B6480;
  --border:         #E2DEEF;
  --success:        #22C55E;
  --warning:        #F59E0B;
  --nav-height:     88px;
  --radius:         14px;
  --radius-sm:      8px;
  --radius-lg:      24px;
  --shadow-sm:      0 2px 8px rgba(61,24,112,0.10);
  --shadow:         0 4px 24px rgba(61,24,112,0.15);
  --shadow-lg:      0 12px 48px rgba(61,24,112,0.22);
  --transition:     0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Mulish', system-ui, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5 {
  font-family: 'Mulish', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  color: var(--primary-dark);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.8rem); }
h4 { font-size: 1.2rem; }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 80px 0; }
.section-sm { padding: 52px 0; }
.section-lg { padding: 110px 0; }

.section-header {
  text-align: center;
  margin-bottom: 56px;
}
.section-header h2 { margin-bottom: 12px; }
.section-header p {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
}
.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 10px;
}

/* ---------- Navigation ---------- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background: var(--primary-dark);
  display: flex;
  align-items: center;
  transition: box-shadow var(--transition), background var(--transition);
}
.site-nav.scrolled {
  background: rgba(61,24,112,0.98);
  box-shadow: 0 2px 24px rgba(0,0,0,0.3);
  backdrop-filter: blur(12px);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
}
.nav-logo { display: flex; align-items: center; line-height: 0; }
.nav-logo img {
  height: 48px;
  width: auto;
  display: block;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-item { position: relative; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active {
  color: var(--white);
  background: rgba(255,255,255,0.12);
}
.nav-link svg { width: 14px; height: 14px; transition: transform var(--transition); }
.nav-item:hover > .nav-link svg { transform: rotate(180deg); }

/* Dropdown */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 999;
}
.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 9px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.nav-dropdown a:hover {
  background: var(--off-white);
  color: var(--primary);
}
.nav-dropdown .dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

/* Mobile hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  /* min-height:44px is set later for tap targets; without these the bars stack
     at the top of that box and sit higher than the logo. */
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Hide mobile-only panel header on desktop */
.nav-mobile-header { display: none; }

/* Parent Portal CTA - lives inside nav-menu ul */
.nav-portal-item { margin-left: 8px; }
.nav-portal-btn {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--dark) !important;
  white-space: nowrap;
  transition: background var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 8px rgba(0,180,216,0.3);
}
.nav-portal-btn:hover {
  background: var(--accent-light);
  box-shadow: 0 4px 14px rgba(0,180,216,0.4);
}
.nav-drop-item { margin-left: 8px; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.38);
  color: var(--white) !important;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}
.nav-drop-btn:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.7);
}

/* Page body offset for fixed nav */
body { padding-top: var(--nav-height); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(92,45,145,0.35);
}
.btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 6px 20px rgba(92,45,145,0.45);
  transform: translateY(-2px);
}
.btn-accent {
  background: var(--accent);
  color: var(--dark);
  box-shadow: 0 4px 14px rgba(0,180,216,0.35);
}
.btn-accent:hover {
  background: var(--accent-light);
  box-shadow: 0 6px 20px rgba(0,180,216,0.45);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.7);
}
.btn-outline:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--white);
  transform: translateY(-2px);
}
.btn-outline-dark {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-outline-dark:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-sm { padding: 8px 18px; font-size: 0.8rem; }
.btn-lg { padding: 16px 36px; font-size: 1rem; }

/* ---------- Hero (Home) ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--dark);
}
.hero-slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s ease, transform 8s ease;
}
.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(12,3,30,0.92) 0%,
    rgba(30,10,65,0.72) 45%,
    rgba(12,3,30,0.28) 100%
  );
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1220px;
  margin: 0 auto;
  padding: 80px 52px;
  width: 100%;
}
.hero-content {
  max-width: 760px;
}
.hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
  display: block;
}
.hero-content h1 {
  color: var(--white);
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 200;
  line-height: 0.88;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  text-shadow: 0 4px 60px rgba(0,0,0,0.2);
}
.hero-content h1 .hero-line2 {
  color: var(--accent-light);
  display: block;
  font-weight: 800;
  font-size: 0.55em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  perspective: 700px;          /* gives the letter flip real depth */
}
.hero-content p {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 300;
  color: rgba(255,255,255,0.78);
  max-width: 520px;
  margin: 0 0 40px;
  line-height: 1.85;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-start;
  margin-bottom: 48px;
}
.hero-stats-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.hsr-item {
  padding: 0 24px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.hsr-item:first-child { padding-left: 0; }
.hsr-item strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1.15;
}
.hsr-div {
  width: 1px;
  height: 34px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}
.hero-scroll {
  display: none;
  animation: scrollBounce 2s infinite;
}
.hero-scroll svg { width: 20px; height: 20px; }
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ---------- Hero entrance animations ---------- */
@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(60px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.hero-anim {
  opacity: 0;
  animation: heroSlideUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-anim-1 { animation-delay: 0.08s; }
.hero-anim-2 { animation-delay: 0.22s; }
.hero-anim-3 { animation-delay: 0.38s; }
.hero-anim-4 { animation-delay: 0.54s; }

/* ---------- Page Header (inner pages) ---------- */
.page-header {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%);
  padding: 72px 24px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-header h1 { color: var(--white); position: relative; }
.page-header .breadcrumb {
  position: relative;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 12px;
}
.page-header .breadcrumb a { color: var(--accent-light); }
.page-header .breadcrumb a:hover { text-decoration: underline; }

/* Split header: page title on one side, the class photo on the other. Only used
   on pages that actually have a photo — the rest keep the centred header. */
.page-header-split { text-align: left; padding: 56px 24px; }
.page-header-split .ph-inner {
  position: relative;              /* clears the ::before pattern overlay */
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px);
  gap: 48px;
  align-items: center;
}
.page-header-split .ph-text { min-width: 0; }
/* The centred header shrink-wraps its H1 and centres it with auto margins;
   in the split header that pushes the title off the left edge the breadcrumb,
   badge and subtitle share. */
/* Double class so this outranks the later `.page-header h1 { margin: 0 auto }`. */
.page-header.page-header-split h1 { margin: 0; max-width: 22ch; }
/* Everything in the text column flushes left, including the accent rule and the
   subtitle, which centre themselves by default for the centred header. */
.page-header-split .breadcrumb,
.page-header-split .page-header-sub { text-align: left; }
.page-header-split .page-header-sub { max-width: 42ch; margin: 16px 0 0; }
.page-header-split .page-header-sub::before { margin: 0 0 16px; }
.page-header-split .ph-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  line-height: 0;
}
/* One ratio for every page so portrait and landscape source art still line up
   against the title block. */
.page-header-split .ph-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
@media (max-width: 860px) {
  /* Name first, photo underneath — still flush left. */
  .page-header-split { padding: 48px 24px 44px; }
  .page-header-split .ph-inner { grid-template-columns: 1fr; gap: 26px; }
  .page-header-split .ph-media { width: 100%; }
  .page-header-split .ph-media img { aspect-ratio: 16 / 10; }
}

/* "For ages 3–5" pill. Carries the audience so the H1 can just be the class
   name instead of a name-and-dash-and-description run-on. */
.ph-badge {
  position: relative;
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
}

/* ---------- Class Pages ---------- */
.class-intro {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding: 64px 24px 48px;
}
.class-intro h1 { margin-bottom: 20px; }
.class-intro p { font-size: 1.1rem; color: var(--text-muted); }
.class-intro p strong { color: var(--text); }

.class-image-container {
  max-width: 600px;
  margin: 0 auto 56px;
  padding: 0 24px;
}
.class-image-container .image-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--white);
  outline: 3px solid var(--primary-light);
}
.class-image-container img {
  width: 100%;
  height: 380px;
  object-fit: cover;
}
.img-placeholder {
  width: 100%;
  height: 380px;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--white);
  gap: 12px;
}
.img-placeholder svg { width: 48px; height: 48px; opacity: 0.7; }
.img-placeholder span { font-size: 0.9rem; font-weight: 600; opacity: 0.8; }

/* Jackrabbit embed placeholder */
/* ---------- Interactive Schedule Widget ---------- */
.sched-widget { background: var(--white); }
.sched-tabs {
  position: sticky;
  top: var(--nav-height);
  z-index: 90;
  background: var(--white);
  border-bottom: 2px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.sched-tabs-inner {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 0;
}
.sched-tabs-inner::-webkit-scrollbar { display: none; }
.sched-tab {
  flex-shrink: 0;
  padding: 16px 24px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: -2px;
}
.sched-tab:hover { color: var(--primary); }
.sched-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.sched-body { padding: 32px 24px 56px; }
.sched-list { display: flex; flex-direction: column; gap: 10px; }
.sched-item {
  display: grid;
  grid-template-columns: 4px 130px 1fr auto 20px;
  align-items: center;
  gap: 0 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 16px 16px 0;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
  overflow: hidden;
}
.sched-item:hover {
  box-shadow: var(--shadow);
  border-color: var(--primary-light);
  transform: translateY(-1px);
}
.sched-item-bar {
  align-self: stretch;
  border-radius: 4px 0 0 4px;
  min-width: 4px;
}
.sched-item-time {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
.sched-item-info { min-width: 0; }
.sched-item-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sched-item-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.sched-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--primary-dark);
  color: var(--white);
  padding: 2px 7px;
  border-radius: 99px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sched-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}
.sched-coach {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}
.sched-price {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--primary);
}
.sched-arrow {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.sched-recurring {
  background: var(--off-white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 24px;
}
.sched-recurring-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  max-width: 1100px;
  margin: 0 auto;
}
.sched-recurring-item { display: flex; flex-direction: column; gap: 2px; }
.sched-recurring-label { font-size: 0.75rem; font-weight: 800; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 0.06em; }
.sched-recurring-detail { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
@media (max-width: 768px) {
  .sched-item { grid-template-columns: 4px 100px 1fr 20px; }
  .sched-item-meta { display: none; }
  .sched-tab { padding: 14px 16px; font-size: 0.75rem; }
}
@media (max-width: 480px) {
  .sched-item { grid-template-columns: 4px 90px 1fr 16px; gap: 0 10px; }
  .sched-item-time { font-size: 0.72rem; }
}

/* ---------- Camp in-page subnav ---------- */
.camp-subnav {
  position: sticky;
  top: var(--nav-height);
  z-index: 90;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.camp-subnav-inner {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 4px;
}
.camp-subnav-inner::-webkit-scrollbar { display: none; }
.camp-subnav-link {
  flex-shrink: 0;
  padding: 14px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.camp-subnav-link:hover { color: var(--primary); }
.camp-subnav-link.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.jackrabbit-section {
  background: var(--off-white);
  border-top: 1px solid var(--border);
  padding: 64px 0;
}
.jackrabbit-embed-wrap {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  overflow-x: auto;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
/* Override Jackrabbit's inline width attributes */
.jackrabbit-embed-wrap table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  font-size: 0.875rem;
}
.jackrabbit-embed-wrap td,
.jackrabbit-embed-wrap th {
  word-break: break-word;
  overflow-wrap: break-word;
  padding: 8px 10px !important;
}
.jackrabbit-embed-wrap iframe {
  max-width: 100% !important;
}
.jackrabbit-embed-wrap a[href*="Register"],
.jackrabbit-embed-wrap a[href*="register"],
.jackrabbit-embed-wrap td a { font-weight: 700; }

/* Jackrabbit openings iframe. Height tracks the listing: --jr-rows is the class
   count for that category, and the table collapses to one stacked block per
   class under 768px, which needs far more room per row. Both are capped so a
   long listing scrolls inside the frame instead of running down the page. */
.jr-embed {
  display: block;
  width: 100%;
  border: 0;
  height: min(calc(96px + var(--jr-rows, 6) * 30px), 720px);
}
@media (max-width: 768px) {
  .jr-embed { height: min(calc(40px + var(--jr-rows, 6) * 235px), 900px); }
}
.jackrabbit-placeholder {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.jackrabbit-placeholder .placeholder-box {
  background: var(--white);
  border: 2px dashed var(--mid-gray);
  border-radius: var(--radius);
  padding: 48px 32px;
  text-align: center;
}
.jackrabbit-placeholder .placeholder-box h3 { color: var(--primary); margin-bottom: 8px; }
.jackrabbit-placeholder .placeholder-box p { color: var(--text-muted); font-size: 0.95rem; }
.jackrabbit-placeholder .placeholder-box code {
  display: inline-block;
  background: var(--light-gray);
  padding: 4px 12px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.85rem;
  color: var(--primary);
  margin-top: 12px;
}

/* Class page note */
.class-note {
  max-width: 780px;
  margin: 48px auto 0;
  text-align: center;
  padding: 0 24px;
}
.class-note p {
  font-size: 1rem;
  color: var(--text-muted);
}
.class-note strong { color: var(--primary); }
.class-note a { color: var(--accent-deep); font-weight: 600; }
.class-note a:hover { text-decoration: underline; }

/* ---------- Cards (Class Grid) ---------- */
.classes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 24px;
}
.class-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.class-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.class-card-img {
  height: 200px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-light), var(--accent));
}
.class-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.class-card:hover .class-card-img img { transform: scale(1.06); }
.class-card-body {
  padding: 22px 22px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.class-card-body h3 { font-size: 1.15rem; margin-bottom: 8px; color: var(--primary-dark); }
.class-card-body p { font-size: 0.88rem; color: var(--text-muted); flex: 1; margin-bottom: 16px; }
.class-card-body .age-tag {
  display: inline-block;
  background: var(--off-white);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}
.class-card-link {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition), color var(--transition);
}
.class-card-link:hover { gap: 10px; color: var(--primary); }

/* Compact class list (homepage) */
.class-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.class-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--white);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.class-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.28);
}
.class-card-photo {
  height: 160px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-dark), var(--accent));
  flex-shrink: 0;
}
.class-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s ease;
  display: block;
}
.class-card:hover .class-card-photo img { transform: scale(1.06); }
.class-card-body {
  padding: 22px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.class-card-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.class-card-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
}
.class-card-desc {
  font-size: 0.85rem;
  color: var(--white) !important;
  line-height: 1.6;
  margin: 4px 0 0;
  flex: 1;
}
.class-card-link {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-deep);
  letter-spacing: 0.04em;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.class-extra { display: none; }
.class-cards-grid.expanded .class-extra { display: flex; }
.class-see-more {
  text-align: center;
  margin-top: 32px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Homepage Sections ---------- */
/* Intro blurb */
.home-intro {
  background: var(--off-white);
  padding: 96px 24px 88px;
  overflow: hidden;
  position: relative;
}

/* Subtle radial glow behind the quote */
.home-intro::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(92, 45, 145, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

/* ---- Centered quote statement ---- */
.mission-quote-wrap {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 64px;
  position: relative;
}
.mission-quote-mark {
  display: block;
  font-size: 7rem;
  line-height: 0.7;
  color: var(--primary);
  opacity: 0.1;
  font-family: Georgia, 'Times New Roman', serif;
  margin-bottom: 8px;
  pointer-events: none;
  user-select: none;
}
.mission-quote {
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight: 900;
  color: var(--primary-dark);
  line-height: 1.25;
  font-style: italic;
  letter-spacing: -0.01em;
}
.mission-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 340px;
  margin: 28px auto 0;
}
.mission-divider::before,
.mission-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.mission-divider-star {
  color: var(--primary);
  font-size: 14px;
  opacity: 0.5;
}

/* ---- Two-column layout ---- */
.home-intro .intro-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
.intro-text p {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.85;
}
.home-intro strong { color: var(--primary-dark); }

/* ---- Value tags ---- */
.mission-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 32px;
}
.mission-tag {
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--primary-dark);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 20px;
}

/* ---- Image with offset frame ---- */
.intro-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow:
    18px 18px 0 rgba(92, 45, 145, 0.12),
    var(--shadow-lg);
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.intro-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Directional slide animations ---- */
.fade-in.slide-from-left  { transform: translateX(-44px); }
.fade-in.slide-from-right { transform: translateX(44px); }
.fade-in.bloom            { transform: scale(0.93); }

.fade-in.slide-from-left.visible  { transform: translateX(0); }
.fade-in.slide-from-right.visible { transform: translateX(0); }
.fade-in.bloom.visible            { transform: scale(1); }

/* Events section */
.events-section {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
}
.events-section h2 { color: var(--white); }
.events-section .section-label { color: var(--accent-light); }
.events-section p { color: rgba(255,255,255,0.75); }

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.event-card {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius);
  padding: 24px;
  transition: background var(--transition), transform var(--transition);
  backdrop-filter: blur(8px);
}
.event-card:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-4px);
}
.event-card h4 { color: var(--white); margin-bottom: 8px; }
.event-card p { color: rgba(255,255,255,0.75); font-size: 0.9rem; margin: 0; }
.event-card .event-date {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-light);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.events-placeholder {
  background: rgba(255,255,255,0.08);
  border: 2px dashed rgba(255,255,255,0.25);
  border-radius: var(--radius);
  padding: 48px 32px;
  text-align: center;
  margin-top: 32px;
}
.events-placeholder p { color: rgba(255,255,255,0.65); font-size: 0.95rem; margin: 0; }

/* Classes dark section */
.classes-section {
  background: var(--dark);
}
.classes-section .section-header h2 { color: var(--white); }
.classes-section .section-label { color: var(--accent-light); }
.classes-section .section-header p { color: rgba(255,255,255,0.6); }

/* Teams section */
.teams-section { background: var(--off-white); }
.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 32px;
}
.team-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.team-card-img {
  height: 240px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.team-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.team-card:hover .team-card-img img { transform: scale(1.06); }
.team-card-body { padding: 28px; }
.team-card-body h3 { margin-bottom: 10px; color: var(--primary-dark); }
.team-card-body p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 20px; }

/* Photo gallery */
.gallery-section { background: var(--white); padding: 72px 0; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 160px);
  gap: 8px;
  margin-top: 40px;
}
.gallery-item {
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--light-gray);
}
.gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-item:hover img { transform: scale(1.05); }

/* Testimonials */
.events-cal-section { background: var(--off-white); }
.events-cal-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--white);
  max-width: 960px;
  margin: 0 auto;
}

.testimonials-section {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: var(--white);
}
.testimonials-section h2 { color: var(--white); }
.testimonials-section .section-label { color: var(--accent-light); }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.testimonial-card {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  padding: 28px;
  backdrop-filter: blur(10px);
}
.testimonial-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}
.testimonial-stars svg { color: var(--gold); width: 18px; height: 18px; }
.testimonial-card p { color: rgba(255,255,255,0.88); font-size: 0.95rem; margin-bottom: 18px; font-style: italic; }
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: var(--white);
  flex-shrink: 0;
}
.testimonial-name { font-weight: 700; color: var(--white); font-size: 0.9rem; }
.testimonial-role { color: rgba(255,255,255,0.55); font-size: 0.78rem; }

/* Join team */
.join-team-section {
  background: var(--off-white);
  text-align: center;
}
.join-team-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 34px 38px 32px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.join-team-copy h2 { font-size: 1.5rem; margin-bottom: 8px; }
.join-team-copy p {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0;
}
.join-team-copy strong { color: var(--text); }

/* Button sits under the copy and lines up with it, rather than floating in a
   side column that squeezed the paragraph into an awkward three-line wrap. */
.join-team-cta {
  display: inline-flex;
  margin-top: 22px;
  font-size: 0.95rem;
  /* Short label, so the generous site-wide button padding left the box 62%
     empty. Tightened so it hugs "Apply Now". */
  padding: 11px 18px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .join-team-card { padding: 28px 22px 26px; }
  /* Was width:100%, which stretched a two-word label across the whole card.
     Keep it hugging its text and aligned with the copy above. */
  .join-team-cta { display: inline-flex; width: auto; }
}

/* Studios / Map */
.studios-section { background: var(--white); }
.studios-inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: stretch;
}
.studios-info h2 { margin-bottom: 20px; }
.studios-info p { color: var(--text-muted); margin-bottom: 10px; }
.studios-info .address {
  background: var(--off-white);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 24px 0;
  border-left: 4px solid var(--primary);
}
.studios-info .address strong { color: var(--primary-dark); display: block; margin-bottom: 4px; }
.studios-info .address p { color: var(--text-muted); font-size: 0.95rem; margin: 0; }
.map-container {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  height: 100%;
  min-height: 400px;
  background: var(--light-gray);
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-placeholder {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}
.map-placeholder svg { width: 48px; height: 48px; margin: 0 auto 12px; color: var(--primary-light); }
.map-placeholder p { font-size: 0.9rem; }
.map-container iframe { width: 100%; height: 100%; border: none; }

/* ---------- About Page ---------- */
.about-hero {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  padding: 88px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.about-hero h1 { color: var(--white); position: relative; }

.about-mission {
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 24px;
  text-align: center;
}
.about-mission p { font-size: 1.1rem; color: var(--text-muted); line-height: 1.85; }
.about-mission blockquote {
  margin: 32px 0;
  padding: 24px 32px;
  background: var(--off-white);
  border-radius: var(--radius);
  border-left: 4px solid var(--primary);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 600;
  color: var(--primary-dark);
}

/* ---- Commitments (About page) ---- */
.commitments-section {
  background: var(--white);
  padding: 88px 24px;
}
.commitments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.commitment-item {
  padding: 44px 36px;
  border-right: 1px solid var(--light-gray);
  transition: background var(--transition);
}
.commitment-item:last-child { border-right: none; }
.commitment-item:hover { background: var(--off-white); }
.commitment-num {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--primary);
  opacity: 0.18;
  margin-bottom: 20px;
  display: block;
}
.commitment-item h3,
.commitment-item h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 10px;
}
.commitment-item p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.75;
  margin: 0;
}
@media (max-width: 700px) {
  .commitments-grid {
    grid-template-columns: 1fr;
  }
  .commitment-item {
    border-right: none;
    border-bottom: 1px solid var(--light-gray);
  }
  .commitment-item:last-child { border-bottom: none; }
}

.facility-section { background: var(--off-white); padding: 88px 24px; }
.facility-inner {
  max-width: 900px;
  margin: 0 auto;
}
.facility-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 48px 0;
}
.stat-card {
  text-align: center;
  padding: 32px 16px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.stat-card .stat-number {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-card .stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}
.facility-text {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.facility-text p { font-size: 1rem; color: var(--text-muted); line-height: 1.8; }

/* ---------- About Page (enhanced) ---------- */
.about-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 60px 24px 56px;
  overflow: hidden;
  background: var(--primary-dark);
}
.about-hero-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%; height: 100%;
  opacity: 0.28;
}
.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,16,40,0.96) 0%, rgba(26,16,40,0.5) 60%, rgba(26,16,40,0.25) 100%);
}
.about-hero-content {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.about-hero-content .breadcrumb {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 16px;
}
.about-hero-content .breadcrumb a { color: var(--accent-light); text-decoration: none; }
.about-hero-content h1 { color: var(--white); font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; margin-bottom: 16px; }
.about-hero-tagline { font-size: 1.1rem; color: rgba(255,255,255,0.72); margin: 0; }

.about-stats-strip {
  display: flex;
  justify-content: center;
  background: var(--primary-dark);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.about-stat {
  flex: 1;
  max-width: 220px;
  text-align: center;
  padding: 36px 20px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.about-stat:last-child { border-right: none; }
.about-stat-num {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: var(--accent-light);
  line-height: 1;
  margin-bottom: 6px;
}
.about-stat-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.6);
}

.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.about-story-text blockquote {
  margin: 28px 0;
  padding: 20px 28px;
  border-left: 4px solid var(--primary);
  background: var(--light-gray);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 700;
  color: var(--primary-dark);
}
.about-story-text p { color: var(--text-muted); line-height: 1.85; margin-bottom: 16px; }
.about-story-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
}
.about-story-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.leader-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.leader-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition);
}
.leader-card:hover { transform: translateY(-6px); }
.leader-photo { height: 340px; overflow: hidden; }
.leader-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.leader-info { padding: 28px 24px; flex: 1; }
.leader-info h3 { font-size: 1.2rem; color: var(--primary-dark); margin-bottom: 4px; }
.leader-role {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent-deep);
  margin-bottom: 14px;
  display: block;
}
.leader-info p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.65; margin: 0; }
.leader-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .about-stats-strip { flex-wrap: wrap; }
  .about-stat { flex: 0 0 50%; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .about-story-grid { grid-template-columns: 1fr; gap: 40px; }
  .leader-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact Page ---------- */
.contact-page-intro {
  background: var(--white);
  text-align: center;
  padding: 72px 24px 64px;
  border-bottom: 1px solid var(--light-gray);
}
.contact-page-intro .breadcrumb { margin-bottom: 20px; }
.contact-page-intro h1 { font-size: clamp(2rem, 4vw, 3rem); color: var(--primary-dark); margin-bottom: 14px; }
.contact-page-intro p { color: var(--text-muted); font-size: 1.05rem; max-width: 480px; margin: 0 auto; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}
.contact-map {
  position: relative;
  min-height: 460px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(0.8);
}
.contact-info h2 { margin-bottom: 20px; }
.contact-info p { color: var(--text-muted); margin-bottom: 24px; }
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.contact-detail-icon {
  width: 44px; height: 44px;
  background: var(--off-white);
  border: 2px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}
.contact-detail-icon svg { width: 20px; height: 20px; }
.contact-detail-text strong { color: var(--primary-dark); display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.contact-detail-text p { color: var(--text); margin: 0; font-size: 0.95rem; }
.contact-detail-text a { color: var(--accent-deep); }
.contact-detail-text a:hover { text-decoration: underline; }

.contact-form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.required-star { color: #e53e3e; font-weight: 900; }

.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: max(16px, 0.95rem); /* 16px min prevents iOS auto-zoom on focus */
  color: var(--text);
  background: var(--off-white);
  transition: border-color var(--transition), background var(--transition);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  background: var(--white);
}
.form-group textarea { min-height: 130px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- Server-rendered class schedule ----------
   Replaces the Jackrabbit iframe on Cloudflare Pages (see functions/_middleware.js).
   Rows rather than a table so it reads on a phone without sideways scrolling,
   which the embed never managed. */
.jr-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.jr-row {
  display: grid;
  grid-template-columns: 1.3fr 1.6fr auto;
  align-items: center;
  gap: 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
}
.jr-row.is-full { background: var(--off-white); }
.jr-name {
  font-weight: 800;
  color: var(--primary-dark);
  margin: 0 0 2px;
  font-size: 0.98rem;
}
.jr-when { margin: 0; color: var(--text); font-size: 0.92rem; }
.jr-when strong { color: var(--primary); }
.jr-meta { display: flex; gap: 22px; margin: 0; }
.jr-meta dt {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.jr-meta dd { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--text); }
.jr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 22px;
  background: var(--primary);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--transition);
}
.jr-cta:hover { background: var(--primary-dark); }
.jr-cta.is-waitlist { background: transparent; color: var(--primary); border: 2px solid var(--border); }
.jr-cta.is-waitlist:hover { border-color: var(--primary); background: var(--off-white); }
.jr-note, .jr-empty {
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
}
.jr-empty a { color: var(--accent-deep); font-weight: 700; }
@media (max-width: 760px) {
  .jr-row { grid-template-columns: 1fr; gap: 12px; text-align: left; }
  .jr-meta { gap: 18px; flex-wrap: wrap; }
  .jr-cta { width: 100%; }
}

/* ---------- Direct-answer lede ----------
   The first crawlable prose on a page: a definitive 1–3 sentence answer to the
   question the page exists for. Search snippets and AI answer engines quote it,
   so it stays factual and front-loaded rather than scene-setting. */
/* Tag-qualified so it outranks the muted .section-header p / .class-intro p
   rules it sits inside — the direct answer should never be the faintest text. */
p.answer-lede {
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--text);
  max-width: 800px;
  margin: 0 auto;
}
p.answer-lede + p.answer-lede { margin-top: 14px; }
p.answer-lede strong { color: var(--primary-dark); }
p.answer-lede a { color: var(--accent-deep); font-weight: 700; }

/* ---------- At a Glance (scannable answer block) ---------- */
.glance-h3 {
  font-size: 1.15rem;
  color: var(--primary-dark);
  margin: 44px 0 16px;
}
#at-a-glance .section-header + .glance-h3 { margin-top: 0; }
.glance-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}
.glance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 620px;
}
.glance-table thead th {
  background: var(--primary-dark);
  color: var(--white);
  text-align: left;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 16px;
  white-space: nowrap;
}
.glance-table td,
.glance-table tbody th {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  color: var(--text);
  font-weight: 400;
}
.glance-table tbody th { font-weight: 700; color: var(--primary-dark); white-space: nowrap; }
.glance-table tbody th a { color: inherit; }
.glance-table tbody th a:hover { color: var(--primary); text-decoration: underline; }
.glance-table tbody tr:nth-child(even) { background: var(--off-white); }
.glance-list { margin: 0; padding-left: 22px; }
.glance-list li { margin-bottom: 10px; line-height: 1.7; color: var(--text); }
.glance-list li strong { color: var(--primary-dark); }
.glance-p { line-height: 1.8; color: var(--text); }
.glance-p a { color: var(--accent-deep); font-weight: 700; }

/* ---------- Class progression row ----------
   Where a class sits in the ladder: the step before, this one, the step after.
   Cards carry no photo, so the body stands on its own. */
.class-step-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.class-step { display: flex; }
.class-step .class-card-body { padding: 24px 22px; }
.class-step .age-tag {
  display: inline-block;
  background: var(--off-white);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 20px;
  margin-bottom: 12px;
}
/* The page you are on: filled in, and it does not lift on hover. */
.class-step.is-current {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary) inset, var(--shadow-sm);
}
.class-step.is-current:hover { transform: none; box-shadow: 0 0 0 2px var(--primary) inset, var(--shadow-sm); }
.class-step.is-current .age-tag { background: var(--primary); color: var(--white); }
@media (max-width: 760px) {
  .class-step-row { grid-template-columns: 1fr; }
}

/* Closing band on a class page. */
.class-cta {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}

/* ---------- Teams Pages ---------- */
.team-page-intro {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding: 64px 24px 48px;
}
.team-page-intro p { font-size: 1.1rem; color: var(--text-muted); }

.team-requirements {
  background: var(--off-white);
  padding: 64px 24px;
}
.requirements-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.requirement-item {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--primary);
}
.requirement-item h4 { color: var(--primary-dark); margin-bottom: 8px; }
.requirement-item p { color: var(--text-muted); font-size: 0.9rem; margin: 0; }

/* ---------- Events & Clinics ---------- */
.events-list-section { padding: 72px 0; }
.events-list-section .events-placeholder {
  background: var(--off-white);
  border: 2px dashed var(--mid-gray);
  border-radius: var(--radius);
  padding: 64px 40px;
  text-align: center;
}
.events-list-section .events-placeholder h3 { color: var(--primary); margin-bottom: 12px; }
.events-list-section .events-placeholder p { color: var(--text-muted); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--primary-dark);
  color: rgba(255,255,255,0.75);
}
.footer-top {
  padding: 64px 0 48px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-brand .footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.footer-brand .footer-logo img {
  /* White knockout on the purple footer - no white box behind it, or the logo
     disappears into its own backing. */
  height: 40px;
  width: auto;
  display: block;
}
.footer-brand p { font-size: 0.88rem; line-height: 1.75; max-width: 280px; }
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.footer-social a {
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  transition: background var(--transition), color var(--transition);
}
.footer-social a:hover { background: var(--accent-deep); color: var(--white); }
.footer-social svg { width: 18px; height: 18px; }

.footer-col h5,
.footer-col .footer-col-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  transition: color var(--transition);
}
.footer-col ul a:hover { color: var(--accent-light); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { font-size: 0.8rem; }
.footer-bottom a { color: var(--accent-light); text-decoration: underline; }
.footer-bottom a:hover { text-decoration: underline; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.text-white { color: var(--white); }
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-muted); }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.bg-light { background: var(--off-white); }
.bg-primary { background: var(--primary); }
.bg-dark { background: var(--dark); }

/* ---------- Animations ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }
.fade-in-delay-4 { transition-delay: 0.4s; }

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition);
  z-index: 900;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover { background: var(--primary-dark); transform: translateY(-3px); }
.back-to-top svg { width: 20px; height: 20px; }

/* ---------- Mobile / Responsive ---------- */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .studios-inner { grid-template-columns: 1fr; gap: 36px; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; }
  .gallery-item:first-child { grid-column: span 1; grid-row: span 1; }
  .facility-stats { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---------- Mobile nav backdrop (hidden on desktop) ---------- */
.nav-backdrop {
  display: none;
}

@media (max-width: 768px) {
  :root { --nav-height: 64px; }
  .section { padding: 56px 0; }
  .section-lg { padding: 72px 0; }

  /* Backdrop overlay */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(8, 2, 22, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }
  .nav-backdrop.open { opacity: 1; visibility: visible; }

  /* Slide-in panel from right */
  .nav-menu {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    left: auto;
    width: min(300px, 82vw);
    background: #0F0623;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0 0 40px;
    gap: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    transform: translateX(110%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -10px 0 60px rgba(0, 0, 0, 0.7);
    border-left: 1px solid rgba(255,255,255,0.07);
    z-index: 999;
  }
  .nav-menu.open { transform: translateX(0); }
  .nav-toggle { display: flex; }

  /* Portal + Drop a Class buttons inside slide panel on mobile */
  .nav-portal-item, .nav-drop-item {
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.09);
    padding: 10px 22px;
    margin-top: 0;
  }
  .nav-portal-item { padding-bottom: 4px; }
  .nav-drop-item { padding-top: 4px; padding-bottom: 20px; }
  .nav-portal-btn, .nav-drop-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 12px 16px;
    font-size: 0.88rem;
    border-radius: var(--radius-sm);
  }
  .nav-drop-btn { margin-left: 0; }

  /* Logo stays visible on mobile in the nav bar */
  .nav-logo { display: flex; }
  .nav-logo img { height: 34px; }

  /* Logo + close button row inside the slide panel */
  .nav-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.09);
    margin-bottom: 4px;
    flex-shrink: 0;
  }
  .nav-mobile-header img {
    height: 32px;
    width: auto;
    display: block;
  }
  .nav-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    border: none;
    transition: background var(--transition), color var(--transition);
    flex-shrink: 0;
  }
  .nav-close-btn:hover { background: rgba(255,255,255,0.16); color: var(--white); }
  .nav-close-btn svg { width: 18px; height: 18px; }

  /* Nav links */
  .nav-item { width: 100%; }
  .nav-link {
    padding: 15px 22px;
    font-size: 0.95rem;
    border-radius: 0;
    color: rgba(255,255,255,0.82);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    justify-content: space-between;
    white-space: normal;
  }
  .nav-link:hover {
    background: rgba(255,255,255,0.06);
    color: var(--white);
  }
  .nav-link.active {
    color: var(--accent-light);
    background: rgba(0,180,216,0.08);
  }
  .nav-item.expanded > .nav-link {
    color: var(--accent-light);
    background: rgba(0,180,216,0.06);
  }
  .nav-item.expanded > .nav-link svg { transform: rotate(180deg); }

  /* Mobile dropdown accordion */
  .nav-dropdown {
    position: static;
    background: rgba(0,0,0,0.35);
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 4px 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .nav-item.expanded .nav-dropdown { display: block; }
  .nav-dropdown a {
    padding: 12px 22px 12px 38px;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.58);
    border-radius: 0;
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background var(--transition), color var(--transition);
  }
  .nav-dropdown a:hover {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.9);
  }
  .nav-dropdown .dropdown-divider {
    margin: 2px 0;
    background: rgba(255,255,255,0.07);
  }

  /* Logo sizing on mobile */
  .nav-logo img { height: 52px; }

  /* Hide hero scroll on mobile, stacked buttons fill the space */
  .hero-scroll { display: none; }

  /* Layouts */
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .teams-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .facility-stats { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .hero-inner { padding: 60px 24px; }
  .hero-cta { flex-direction: column; align-items: flex-start; }
  .hero-content p { max-width: 100%; margin-bottom: 28px; }
  .hero-stats-row { gap: 0; row-gap: 16px; }
  .hsr-div { display: none; }
  .hsr-item { padding: 0 16px 0 0; }
  .classes-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .class-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .home-intro { padding: 64px 20px 56px; }
  .home-intro .intro-inner { grid-template-columns: 1fr; gap: 40px; }
  .intro-img { order: -1; aspect-ratio: 16/9; box-shadow: 10px 10px 0 rgba(92,45,145,0.12), var(--shadow); }
  .mission-quote-wrap { margin-bottom: 44px; }
  .mission-quote-mark { font-size: 5rem; }
  .mission-tags { margin-bottom: 24px; }
}

@media (max-width: 480px) {
  .classes-grid { grid-template-columns: 1fr; }
  .class-cards-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .facility-stats { grid-template-columns: 1fr 1fr; }
  .hero-inner { padding: 44px 20px; }
  .hero-stats-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hsr-item { padding: 0; }
}

/* ---------- Pricing Cards ---------- */
.pricing-section { padding: 80px 0; background: var(--white); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  max-width: 900px;
  margin: 0 auto;
}
.pricing-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 2px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
}
.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-light);
}
.pricing-card.featured {
  border-color: var(--primary);
  background: linear-gradient(160deg, var(--off-white), #EDE8FA);
}
.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 18px;
  border-radius: 30px;
  white-space: nowrap;
}
.pricing-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.pricing-price {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 4px;
  gap: 2px;
}
.pricing-price sup { font-size: 1.6rem; margin-top: 8px; }
.pricing-price span { font-size: 3.6rem; }
.pricing-duration { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 28px; }
.pricing-features { list-style: none; margin-bottom: 32px; text-align: left; }
.pricing-features li {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-check { width: 20px; height: 20px; color: var(--accent-deep); flex-shrink: 0; }

/* ---------- Bio / Athlete Spotlight ---------- */
.bio-section { background: var(--dark); padding: 88px 0; }
.bio-inner {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.bio-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: var(--shadow-lg), 0 0 0 5px rgba(0,180,216,0.25);
  flex-shrink: 0;
}
.bio-img img { width: 100%; height: 100%; object-fit: cover; }
.bio-img .img-placeholder { width: 100%; height: 100%; background: transparent; }
.bio-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
  display: block;
  margin-bottom: 10px;
}
.bio-content h2 { color: var(--white); margin-bottom: 6px; }
.bio-subtitle { color: rgba(255,255,255,0.6); font-size: 1rem; font-weight: 500; margin-bottom: 24px; }
.bio-credentials { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.bio-credential {
  background: rgba(0,180,216,0.15);
  border: 1px solid rgba(0,180,216,0.35);
  color: var(--accent-light);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 700;
}
.bio-text { color: rgba(255,255,255,0.72); line-height: 1.9; font-size: 1rem; }
.bio-text p { margin-bottom: 14px; }

/* ---------- Open Gym ---------- */
.open-gym-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.open-gym-intro-text h2 { margin-bottom: 16px; }
.open-gym-intro-text p { color: var(--text-muted); line-height: 1.8; margin-bottom: 8px; }
.open-gym-intro-img { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-lg); }
.fb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--white);
  /* Facebook's darker brand blue - #1877F2 is only 4.23:1 under white text. */
  background: #166FE5;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: opacity 0.2s;
}
/* Darken rather than fade: opacity 0.88 dropped the white label to ~3.9:1. */
.fb-link:hover { background: #0F5BBF; }
@media (max-width: 768px) {
  .open-gym-intro { grid-template-columns: 1fr; gap: 32px; }
  .open-gym-intro-img { order: -1; aspect-ratio: 16/9; }
}
/* ---------- Open Gym Cards ---------- */
.open-gym-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 32px;
  margin-top: 48px;
}
.open-gym-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition);
}
.open-gym-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.open-gym-card-header {
  padding: 32px 32px 24px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: var(--white);
}
.open-gym-card-header h3 { color: var(--white); margin-bottom: 10px; }
.open-gym-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-deep);
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 900;
  padding: 4px 18px;
  border-radius: 30px;
  margin-top: 6px;
}
.open-gym-card-body { padding: 28px 32px; }
.open-gym-detail { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.open-gym-detail svg { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.open-gym-detail p { margin: 0; color: var(--text); font-size: 0.95rem; }
.open-gym-detail strong { color: var(--primary-dark); }

/* ---------- Kristen Maloney Spotlight ---------- */
@media (max-width: 680px) {
  .kristen-grid { grid-template-columns: 1fr !important; }
  .kristen-grid img { max-width: 220px; margin: 0 auto; }
}

/* ---------- Birthday Intro Split ---------- */
.party-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.party-intro-img img {
  width: 100%;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 720px) {
  .party-intro { grid-template-columns: 1fr; gap: 32px; }
  .party-intro-img { order: -1; max-width: 260px; margin: 0 auto; }
}

/* ---------- Featured event ----------
   A one-off event on the special events page: flyer on one side, the details
   a parent needs on the other. */
.event-feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}
.event-feature-img img {
  width: 100%;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.event-facts {
  list-style: none;
  padding: 0;
  margin: 22px 0 28px;
}
.event-facts li {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 0.98rem;
}
.event-facts li:last-child { border-bottom: 0; }
.event-facts strong {
  color: var(--primary-dark);
  flex: 0 0 104px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 2px;
}
/* Every other event puts its flyer on the left, so a run of them zig-zags. */
.event-feature--flip { grid-template-columns: 1fr 1.05fr; }
.event-feature--flip .event-feature-img { order: -1; }
@media (max-width: 720px) {
  .event-feature,
  .event-feature--flip { grid-template-columns: 1fr; gap: 30px; }
  .event-feature-img { order: -1; max-width: 340px; margin: 0 auto; }
}

/* ---------- Birthday Pricing ---------- */
.party-price-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 24px;
}
.party-price-main {
  background: linear-gradient(160deg, var(--primary-dark), var(--primary));
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 190px;
}
.party-price-amount {
  font-size: 3.8rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
}
.party-price-desc {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.party-price-includes {
  padding: 32px 36px;
}
.party-price-includes-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.party-price-includes ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.party-price-includes ul li {
  font-size: 0.9rem;
  color: var(--primary-dark);
  font-weight: 600;
  padding-left: 20px;
  position: relative;
}
.party-price-includes ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #22c55e;
  font-weight: 900;
}
.party-price-extras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* The headline price sits in the same row as the add-ons, just louder. */
.party-price-extra.is-headline {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.party-price-extra.is-headline .party-extra-amount { font-size: 2rem; }
@media (max-width: 860px) {
  .party-price-extras { grid-template-columns: 1fr; }
}
.party-price-extra {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.party-extra-amount {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--primary);
  white-space: nowrap;
  line-height: 1.1;
  flex-shrink: 0;
}
.party-price-extra strong {
  display: block;
  font-size: 0.9rem;
  color: var(--primary-dark);
  margin-bottom: 4px;
}
.party-price-extra p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .party-price-card { grid-template-columns: 1fr; }
  .party-price-main { padding: 32px 24px; }
  .party-price-includes { padding: 24px; }
  .party-price-extras { grid-template-columns: 1fr; }
}

/* ---------- Party Times Grid ---------- */
.party-times-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 2px solid var(--primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.party-times-col { display: flex; flex-direction: column; }
.party-times-col + .party-times-col { border-left: 2px solid var(--primary); }
.party-times-header {
  background: var(--primary);
  color: var(--white);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 14px 16px;
  text-align: center;
  line-height: 1.4;
}
.party-times-row {
  padding: 14px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-dark);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.party-times-row span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}
/* Ninja gym slots share the same windows as the main gym, so they are marked. */
.party-times-row.is-ninja {
  background: rgba(0,180,216,0.08);
  box-shadow: inset 3px 0 0 var(--accent);
}
@media (max-width: 600px) {
  .party-times-grid { grid-template-columns: 1fr; }
  .party-times-col + .party-times-col { border-left: none; border-top: 2px solid var(--primary); }
}

/* ---------- Birthday Party Packages ---------- */
.birthday-packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 48px;
}
.birthday-package {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow);
  border: 2px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.birthday-package:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-light);
}
.birthday-package h3 { color: var(--primary-dark); margin-bottom: 8px; }
.birthday-package .package-price {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 20px;
  line-height: 1;
}
.birthday-includes { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.birthday-includes li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--text); }
.birthday-check { width: 18px; height: 18px; color: var(--accent-deep); flex-shrink: 0; margin-top: 2px; }

/* ---------- Clinic Banner ---------- */
.clinic-banner {
  position: relative;
  overflow: hidden;
}
.clinic-banner img {
  width: 100%;
  height: auto;
  display: block;
}
.clinic-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 20%, rgba(10,3,25,0.55));
}

/* ---------- Clinic Types Grid ---------- */
.clinic-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin: 48px 0;
}
.clinic-type-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  border-top: 4px solid var(--primary);
  transition: transform var(--transition), box-shadow var(--transition);
}
.clinic-type-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.clinic-type-card .clinic-level {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 10px;
  display: block;
}
.clinic-type-card h4 { color: var(--primary-dark); margin-bottom: 8px; font-size: 1rem; }
.clinic-type-card p { color: var(--text-muted); font-size: 0.875rem; margin: 0; }

/* ---------- Coming Soon Banner ---------- */
.coming-soon-section { text-align: center; padding: 80px 24px; }
.coming-soon-icon {
  width: 96px;
  height: 96px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32px;
  color: var(--white);
  box-shadow: var(--shadow-lg);
}
.coming-soon-icon svg { width: 48px; height: 48px; }

/* ---------- Info Highlight Cards ---------- */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 40px auto 0;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feature-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.feature-list-item .fl-check {
  flex-shrink: 0;
  margin-top: 1px;
}
.feature-list-item .fl-text strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 1px;
}
.feature-list-item .fl-text span {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.feature-list--dark .fl-text strong { color: var(--white); }
.feature-list--dark .fl-text span { color: rgba(255,255,255,0.78); }

/* ---------- Responsive (new sections) ---------- */
@media (max-width: 1024px) {
  .bio-inner { grid-template-columns: 300px 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .bio-inner { grid-template-columns: 1fr; }
  .bio-img { aspect-ratio: 4/3; max-width: 340px; margin: 0 auto; }
  .open-gym-cards { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
  .birthday-packages { grid-template-columns: 1fr; }
  .clinic-types-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Coaches Page ---------- */
/* Featured coaches card grid */
.coaches-featured-section {
  padding: 56px 0 72px;
}
.coaches-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
}
.coach-featured-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition);
}
.coach-featured-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.coach-featured-photo {
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.coach-featured-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.coach-featured-photo .img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.4);
}
.coach-featured-body { padding: 18px 20px 20px; }
.coach-featured-body .coach-role { margin-bottom: 4px; }
.coach-featured-body h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 0;
  line-height: 1.2;
}
.coach-featured-body .coach-tags { margin-top: 10px; }
.coach-accordion {
  margin-top: 14px;
  border-top: 1px solid var(--border);
}
.coach-accordion summary {
  padding: 12px 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  -webkit-user-select: none;
}
.coach-accordion summary::-webkit-details-marker { display: none; }
.coach-accordion summary::after { content: '+'; font-size: 1rem; font-weight: 900; color: var(--primary-light); }
.coach-accordion[open] summary::after { content: '−'; }
.coach-accordion .bio-text {
  padding: 4px 0 18px;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.coach-accordion .bio-text p { margin-bottom: 10px; }
.coach-accordion .bio-text p:last-child { margin-bottom: 0; }
@media (max-width: 540px) { .coaches-featured-grid { grid-template-columns: 1fr; } }

.coaches-intro {
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 24px 40px;
  text-align: center;
}
.coaches-intro p { font-size: 1.05rem; color: var(--text-muted); line-height: 1.85; }

.coach-bio-section {
  padding: 64px 0;
  border-bottom: 1px solid var(--border);
}
.coach-bio-section.bg-alt { background: var(--off-white); }
.coach-bio-inner {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 52px;
  align-items: start;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 24px;
}
.coach-bio-inner.flip { grid-template-columns: 240px 1fr; }
.coach-bio-inner.flip .coach-bio-photo { order: 0; }
.coach-bio-inner.flip .coach-bio-content { order: 1; }
.coach-bio-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--nav-height) + 24px);
}
.coach-bio-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.coach-bio-photo .img-placeholder {
  width: 100%; height: 100%;
  background: transparent;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  color: rgba(255,255,255,0.4); gap: 10px;
}
.coach-role {
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: block;
  margin-bottom: 8px;
}
.coach-bio-content h2 {
  color: var(--primary-dark);
  margin-bottom: 4px;
  font-size: clamp(1.4rem, 3vw, 2rem);
}
.coach-bio-text {
  color: var(--text-muted);
  font-size: 0.97rem;
  line-height: 1.88;
  margin-top: 18px;
}
.coach-bio-text p { margin-bottom: 12px; }
.coach-bio-text p:last-child { margin-bottom: 0; }

/* Coach credential tags */
.coach-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}
.coach-tag {
  background: var(--off-white);
  border: 1px solid var(--border);
  color: var(--primary);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
}

/* Coach staff grid */
.coaches-grid-section { padding: 72px 0; }
.coaches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.coach-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.coach-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.coach-card-photo {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-light), var(--accent));
}
.coach-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.coach-card-photo .no-photo {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary-light), var(--accent));
  color: rgba(255,255,255,0.6);
  font-size: 2.5rem;
  font-weight: 900;
  font-family: 'Montserrat', sans-serif;
}
.coach-card-body { padding: 16px 14px 20px; }
.coach-card-body h3,
.coach-card-body h4 { font-size: 0.95rem; color: var(--primary-dark); margin-bottom: 4px; }
.coach-card-body .coach-title-sm {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Coaches responsive */
@media (max-width: 900px) {
  .coach-bio-inner { grid-template-columns: 1fr 200px; gap: 36px; }
  .coach-bio-inner.flip { grid-template-columns: 200px 1fr; }
}
@media (max-width: 768px) {
  .coach-bio-inner,
  .coach-bio-inner.flip { grid-template-columns: 1fr; }
  .coach-bio-photo { aspect-ratio: 4/3; max-height: 300px; max-width: 280px; margin: 0 auto; position: static; }
  .coaches-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
  .coach-card-body { padding: 12px 10px 16px; }
  .coach-card-body h3,
  .coach-card-body h4 { font-size: 0.85rem; }
}

/* ---------- Team Program Cards ---------- */
.team-programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.team-prog-card {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.team-prog-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.team-prog-featured {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}
.team-prog-accent {
  height: 5px;
  flex-shrink: 0;
}
.team-prog-body {
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.team-prog-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-deep);
  margin-bottom: 8px;
  display: block;
}
.team-prog-card h3 {
  font-size: 1.25rem;
  color: var(--primary-dark);
  margin-bottom: 12px;
}
.team-prog-card > .team-prog-body > p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}
.team-prog-stats {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  overflow: hidden;
  flex: 1;
}
.team-prog-stats li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--light-gray);
  font-size: 0.875rem;
}
.team-prog-stats li:last-child { border-bottom: none; }
.tps-key {
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
  flex-shrink: 0;
}
.tps-val {
  color: var(--text-muted);
  text-align: right;
}
.team-prog-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 5px 12px;
  border-radius: 20px;
  align-self: flex-start;
}
@media (max-width: 768px) {
  .team-programs-grid { grid-template-columns: 1fr; }
  .team-prog-card:hover { transform: none; }
}

/* FAQ accordion (shared: .faq-item anywhere, .team-faq-item on teams page) */
.faq-item, .team-faq-item {
  border-bottom: 1px solid var(--light-gray);
  background: var(--white);
}
.faq-item:last-child, .team-faq-item:last-child { border-bottom: none; }
.faq-item summary, .team-faq-item summary {
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary-dark);
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: background var(--transition);
  user-select: none;
}
.faq-item summary::-webkit-details-marker,
.team-faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after,
.team-faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--primary);
  flex-shrink: 0;
  transition: transform var(--transition);
}
.faq-item[open] summary::after, .team-faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover,
.team-faq-item summary:hover { background: var(--off-white); }
.faq-item > p, .team-faq-item > p {
  padding: 0 24px 20px;
  color: var(--text-muted);
  line-height: 1.75;
  font-size: 0.95rem;
  margin: 0;
}

/* ============================================================
   COMPREHENSIVE MOBILE FIXES  (768px and below)
   ============================================================ */
@media (max-width: 768px) {
  /* Page headers — reduce excess vertical padding */
  .page-header { padding: 40px 20px; }
  .class-intro { padding: 36px 20px 24px; }
  .class-intro p { font-size: 1rem; }

  /* Class image — stop fixed height, use natural ratio */
  .class-image-container img { height: auto; aspect-ratio: 4/3; }

  /* About hero — tighter on mobile */
  .about-hero { min-height: 280px; padding: 40px 20px 40px; }
  .about-hero-tagline { font-size: 0.95rem; }

  /* About story image — portrait ratio is too tall on mobile, switch to landscape */
  .about-story-img { aspect-ratio: 16/9; }

  /* Leadership photos — 340px is huge on a phone */
  .leader-photo { height: 200px; }

  /* Commitments section — shrink padding, reduce big number */
  .commitments-section { padding: 56px 20px; }
  .commitment-num { font-size: 2.2rem; }
  .commitment-item { padding: 28px 24px; }

  /* Facility section has its own padding that won't respond to .section rule */
  .facility-section { padding: 56px 20px; }

  /* Jackrabbit embed section */
  .jackrabbit-section { padding: 48px 0; }
  .jackrabbit-placeholder { padding: 0 16px; }

  /* Contact form box padding on mobile */
  .contact-form { padding: 28px 20px; }

  /* Map sits under the form once the contact grid stacks */
  .contact-map { min-height: 320px; }

  /* Map in about page */
  .map-container { min-height: 260px !important; }

  /* Sections with hard-coded large padding */
  .about-mission { padding: 52px 20px !important; }
  .commitments-section .section-header { margin-bottom: 32px; }

  /* Events/team subnav tabs — already overflow-x auto, just reduce padding */
  .camp-subnav-link { padding: 12px 12px; font-size: 0.75rem; }

  /* Button groups — stack on small screens */
  .hero-cta,
  [style*="display: flex"][style*="gap: 14px"] { gap: 10px; }

  /* Feature list spacing on mobile */
  .feature-list { margin-top: 28px; }
  .feature-list-item { gap: 10px; }

  /* Gallery section */
  .gallery-section { padding: 48px 0; }

  /* Studios/map section - bottom stays 0 so the full-bleed map meets the footer */
  .studios-section { padding: 56px 0 !important; }

  /* Party times grid columns already handled at 600px */
  /* Open gym cards already handled */

  /* Summer camp good-to-know section inline grid — force single col at phone sizes */
}

@media (max-width: 480px) {
  /* Page headers — further reduce on very small phones */
  .page-header { padding: 28px 16px; }
  .class-intro { padding: 28px 16px 20px; }

  /* About stats strip — 2 columns start to feel tight, go 2x2 is fine but reduce font */
  .about-stat-num { font-size: 1.6rem; }
  .about-stat { padding: 24px 12px; }

  /* Leader card — reduce photo further */
  .leader-photo { height: 160px; }

  /* Section headers — tighten paragraph size */
  .section-header p { font-size: 0.95rem; }

  /* Commitment items full-width, less padding */
  .commitment-item { padding: 24px 18px; }
  .commitment-num { font-size: 1.8rem; margin-bottom: 14px; }

  /* Buttons — ensure they're a comfortable tap size */
  .btn { min-height: 44px; padding: 12px 20px; }

  /* Contact form */
  .contact-form { padding: 24px 16px; }

  /* Jackrabbit embed */
  .jackrabbit-embed-wrap { padding: 0 8px; }

  /* Camp subnav — tighter */
  .camp-subnav-link { padding: 10px 10px; font-size: 0.72rem; }

  /* Feature list text */
  .fl-text strong { font-size: 0.88rem; }
  .fl-text span { font-size: 0.82rem; }
}

/* Keep wide media from forcing horizontal page scroll */
img, iframe { max-width: 100%; }

/* ============================================================
   Accessibility
   ============================================================ */

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 2000;
  padding: 12px 20px;
  background: var(--white);
  color: var(--primary-dark);
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow);
  transition: top 0.15s ease-in;
}
.skip-link:focus {
  top: 0;
}

/* ---------- Visible keyboard focus ----------
   Only for keyboard/AT users (:focus-visible), so mouse clicks stay clean.
   Dark ring by default; light ring on the dark nav/footer/hero surfaces. */
:focus-visible {
  outline: 3px solid var(--dark);
  outline-offset: 2px;
  border-radius: 3px;
}
.site-nav :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.page-header :focus-visible,
.back-to-top:focus-visible {
  outline-color: var(--white);
}
/* Inputs already restyle their own focus ring - keep it, just make it thicker. */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 1px;
}

/* Interactive targets should reach the 24x24 CSS px minimum (WCAG 2.5.8). */
.nav-close-btn,
.nav-toggle,
.back-to-top { min-width: 44px; min-height: 44px; }

/* ---------- Reduced motion ----------
   Honour the OS "reduce motion" setting: no slide-ins, no hero drift,
   no smooth scrolling. Content must still be fully visible. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }

  /* Scroll-reveal elements must not stay hidden if the observer is skipped. */
  .fade-in,
  .fade-in.slide-from-left,
  .fade-in.slide-from-right,
  .fade-in.bloom {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-anim { opacity: 1 !important; transform: none !important; }
  .hero-slide { transform: none !important; }
  .class-card:hover,
  .btn:hover { transform: none !important; }
}

/* ---------- Class age filter ---------- */
.class-filter {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px 22px;
  text-align: center;
}
.class-filter-title {
  font-size: 1.05rem;
  color: var(--primary-dark);
  margin-bottom: 16px;
}
.class-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.age-chip,
.staff-chip {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 10px 18px;
  min-height: 44px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.age-chip:hover,
.staff-chip:hover { border-color: var(--primary); }
.age-chip.is-active,
.staff-chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
/* Count riding along inside each chip. */
.staff-chip .chip-count {
  opacity: 0.6;
  font-weight: 600;
  margin-left: 6px;
}
.staff-chip.is-active .chip-count { opacity: 0.75; }
.class-filter-status {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--text-muted);
  min-height: 1.4em;
}
/* Hidden by the filter - not just visually, so it leaves the a11y tree too. */
.class-tile[hidden],
.class-group[hidden],
.staff-group[hidden] { display: none !important; }

/* ---------- Sticky mobile action bar ----------
   Most "gymnastics near me" traffic is mobile, where the phone number
   otherwise only exists in the footer. Hidden on desktop, where the nav
   already carries Parent Portal and every page has its own CTAs. */
.mobile-cta-bar { display: none; }

@media (max-width: 768px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(61,24,112,0.12);
  }
  .mobile-cta-bar a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
    transition: background var(--transition);
  }
  .mobile-cta-call {
    background: var(--white);
    color: var(--primary-dark);
    border: 2px solid var(--primary);
  }
  .mobile-cta-call:hover { background: var(--off-white); }
  .mobile-cta-enroll {
    background: var(--accent);
    color: var(--dark);
  }
  .mobile-cta-enroll:hover { background: var(--accent-light); }
  .mobile-cta-bar svg { width: 18px; height: 18px; flex-shrink: 0; }

  /* Keep the bar from covering the end of the page or the back-to-top button. */
  body { padding-bottom: 76px; }
  .back-to-top { bottom: 88px; right: 16px; }

  /* The nav panel overlays everything; the bar must not float above it. */
  body.menu-open .mobile-cta-bar { display: none; }
}

/* ---------- Testimonial carousel ----------
   Native scroll-snap does the moving, so touch swipe and momentum come free
   and it degrades to a plain scroller if JS never runs. */
.tcar { margin-top: 48px; }

.tcar-viewport {
  overflow-x: auto;
  scroll-padding-left: 4px;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;
  border-radius: var(--radius);
}
.tcar-viewport::-webkit-scrollbar { display: none; }

.tcar-track {
  display: flex;
  gap: 24px;
  padding: 4px;
}
.tcar-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
}
.tcar-slide .testimonial-card {
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* Two at a time once there's room; still leaves something to navigate. */
@media (min-width: 860px) {
  .tcar-slide { flex-basis: calc(50% - 12px); }
}

.tcar-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
}
.tcar-arrow {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--white);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.34);
  transition: background var(--transition), border-color var(--transition);
}
.tcar-arrow:hover:not(:disabled) { background: rgba(255,255,255,0.24); }
.tcar-arrow:disabled { opacity: 0.35; cursor: default; }
.tcar-arrow svg { width: 20px; height: 20px; }

.tcar-dots { display: flex; align-items: center; gap: 10px; }
.tcar-dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Visible pill is drawn inside the 24px hit area so taps stay easy. */
.tcar-dot::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.42);
  transition: background var(--transition), width var(--transition);
}
.tcar-dot:hover::before { background: rgba(255,255,255,0.7); }
.tcar-dot.is-active::before {
  width: 26px;
  border-radius: 5px;
  background: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .tcar-viewport { scroll-behavior: auto; }
}

/* ---------- Mobile slide-panel footer buttons ----------
   Previously each button carried its own top border and uneven padding, which
   stacked two dividers a few px apart and left the pair looking inset. */
@media (max-width: 768px) {
  .nav-drop-item {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 22px 22px 10px;
  }
  .nav-portal-item {
    border-top: none;
    padding: 0 22px 28px;
  }
  .nav-portal-btn,
  .nav-drop-btn {
    min-height: 50px;
    padding: 14px 16px;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
  }
  .nav-drop-btn { border-color: rgba(255,255,255,0.45); }
  .nav-portal-btn { box-shadow: 0 4px 16px rgba(0,180,216,0.28); }
}

/* ---------- Jackrabbit calendar embed on small screens ----------
   The embedded calendar is a fixed 980px page with no media queries, and it is
   cross-origin so its styling can't be touched. Squeezing it into a phone
   viewport clipped Saturday and Sunday off the right edge. Instead let it
   render at its true width inside a horizontal scroller. */
.events-cal-hint,
.events-cal-open { display: none; }

@media (max-width: 900px) {
  .events-cal-frame {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .events-cal-frame iframe {
    width: 1000px;
    min-width: 1000px;
  }
  .events-cal-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
  }
  .events-cal-hint svg { width: 16px; height: 16px; flex-shrink: 0; }
  .events-cal-open {
    display: block;
    text-align: center;
    margin-top: 12px;
  }
  .events-cal-open a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 11px 20px;
    border: 2px solid var(--primary);
    border-radius: var(--radius-sm);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 0.9rem;
  }
  .events-cal-open a:hover { background: var(--off-white); }
}

/* ---------- Full-bleed map, flush against the footer ---------- */
/* The map now sits in the grid, not full-bleed against the footer, so the
   section keeps its normal bottom padding. */
/* Left column of the Find Us grid. Was a centred block above a full-bleed map. */
.studios-info { text-align: left; }
.studios-info .address { text-align: left; }
.studios-info > div:last-child { justify-content: flex-start; }

.map-full {
  width: 100%;
  height: 420px;
  line-height: 0;             /* kills the inline-descender gap under the iframe */
  background: var(--light-gray);
}
.map-full iframe {
  display: block;             /* removes the baseline gap entirely */
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 768px) {
  .map-full { height: 320px; }
  .studios-info { margin-bottom: 36px; }
}

/* ---------- Hero entrance: a tumbling pass ----------
   "Galaxy" vaults up and sticks the landing; the letters of "GYMNASTICS" tumble
   in after it. Transform-only, never opacity: an element faded from 0 is not a
   Largest Contentful Paint candidate, and animating opacity here pushed LCP from
   ~350ms to ~540ms. Keeping the letters painted from the first frame keeps the
   heading LCP-eligible while still animating. Compositor-only, so no load cost. */
.hero-logo img {
  transform-origin: 50% 100%;
  /* Transform only, never opacity: the logo is the LCP element and an element
     faded from zero is not a Largest Contentful Paint candidate. */
  animation: heroVault 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Rise, overshoot, settle - the shape of sticking a landing. */
@keyframes heroVault {
  0%   { transform: translate3d(0, 40px, 0) scale(0.95); }
  55%  { transform: translate3d(0, -9px, 0) scale(1.02); }
  78%  { transform: translate3d(0, 3px, 0) scale(0.996); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}


@media (prefers-reduced-motion: reduce) {
  .hero-logo img { transform: none !important; animation: none !important; }
}

/* The homepage class cards sit on a dark band, where the deep teal goes muddy
   and the bright cyan already clears contrast against it. */
.classes-section .class-card-link { color: var(--accent-light); }

/* Decorative step numerals rendered at 1.2:1 - the 0.18 opacity washed out
   whatever colour was set, so the opacity goes and the colour carries the
   lightness instead. Still subtle, now clears the 3:1 large-text threshold. */
.commitment-num {
  color: #9385AB;
  opacity: 1;
}

/* ---------- Page header refinements ----------
   Every inner page opened with a bare H1 on the same purple band. A one-line
   subtitle gives each page its own opening and removes the need for a section
   heading underneath that just restated the H1. */
.page-header h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin: 0 auto;
}
.page-header-sub {
  position: relative;
  max-width: 46ch;
  margin: 18px auto 0;
  color: rgba(255,255,255,0.82);
  font-size: 1.02rem;
  line-height: 1.6;
}
/* Short accent rule ties the pair together. */
.page-header-sub::before {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent-light);
  margin: 0 auto 18px;
}
@media (max-width: 768px) {
  .page-header { padding: 48px 20px 44px; }
  .page-header-sub { font-size: 0.95rem; margin-top: 14px; }
  .page-header-sub::before { margin-bottom: 14px; }
}

/* ============================================================
   White navigation
   The logo has a navy outline and a black script wordmark, so on the purple bar
   only a flat white knockout was ever legible. A white bar lets the real logo
   show in full colour.
   ============================================================ */
.site-nav {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.site-nav.scrolled {
  background: rgba(255,255,255,0.96);
  box-shadow: 0 2px 20px rgba(61,24,112,0.12);
  backdrop-filter: blur(12px);
}
.nav-link { color: var(--text); }
.nav-link:hover,
.nav-link.active { color: var(--primary-dark); background: var(--light-gray); }
.nav-toggle span { background: var(--primary-dark); }
.nav-drop-btn {
  border: 1.5px solid var(--border);
  color: var(--primary-dark) !important;
}
.nav-drop-btn:hover { background: var(--off-white); border-color: var(--primary); }
/* The nav is a light surface now, so the dark focus ring is the correct one. */
.site-nav :focus-visible { outline-color: var(--dark); }

@media (max-width: 768px) {
  .nav-menu { background: var(--white); }
  .nav-mobile-header { border-bottom: 1px solid var(--border); }
  .nav-item { border-bottom: 1px solid var(--light-gray); }
  /* The last two rows are buttons, not menu links - no divider under them. */
  .nav-drop-item, .nav-portal-item { border-bottom: none; }
  .nav-link { color: var(--text); }
  .nav-link:hover,
  .nav-link.active { background: var(--light-gray); color: var(--primary-dark); }
  /* The submenu panel kept its dark-theme surface (black 35% + white hairlines),
     which read as a grey slab inside the now-white menu. */
  .nav-dropdown { background: var(--off-white); }
  .nav-dropdown a {
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
  }
  .nav-dropdown a:hover { background: var(--light-gray); color: var(--primary-dark); }
  .nav-dropdown .dropdown-divider { background: var(--border); }
  /* The expanded parent was accent-light on a pale tint - barely 1.7:1 once the
     menu turned white. */
  .nav-item.expanded > .nav-link {
    color: var(--primary-dark);
    background: var(--light-gray);
  }
  .nav-close-btn { color: var(--primary-dark); }
  .nav-backdrop { background: rgba(26,16,40,0.5); }
}

/* ---------- Hero logo ----------
   Replaces the type-set wordmark. Source art is 400x252, so it is capped near
   its native width; scaling a raster past that only softens it. */
.hero-logo { margin-bottom: 26px; line-height: 0; }
.hero-logo img {
  width: min(400px, 78vw);
  height: auto;
  /* Three layers, not one: the tight dark edge keeps the star's silver ring and
     the white script readable when a hero slide is pale (slide 3 is a photo of
     the banner, which is nearly the same silver), then the soft lift for depth. */
  filter: drop-shadow(0 0 1px rgba(8,2,22,0.9))
          drop-shadow(0 1px 4px rgba(8,2,22,0.55))
          drop-shadow(0 6px 22px rgba(0,0,0,0.45));
}

/* Lighter than before so the gymnasts read through, but the left side keeps
   enough density for the body copy and stats to stay legible on the photo. */
.hero-overlay {
  background:
    /* Feathered pool of darkness behind the text column only. */
    radial-gradient(115% 85% at 8% 58%,
      rgba(8,2,22,0.92) 0%,
      rgba(8,2,22,0.80) 26%,
      rgba(8,2,22,0.42) 50%,
      rgba(8,2,22,0.00) 72%),
    /* Light overall wash so the gymnasts still read across the rest of the frame. */
    linear-gradient(105deg,
      rgba(12,3,30,0.30) 0%,
      rgba(12,3,30,0.14) 55%,
      rgba(12,3,30,0.04) 100%);
}
/* With a lighter wash the copy needs its own separation from the photo. */
.hero-content p,
.hsr-item,
.hsr-item strong { text-shadow: 0 2px 12px rgba(0,0,0,0.85); }

/* Slower, fully cross-faded slide changes: the old 1.4s opacity against an 8s
   scale meant one slide was still drifting when the next arrived. */
.hero-slide {
  transition: opacity 2.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 9s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none !important; }
}