/* ============================================================
   BOMAYE GYM MUNICH — style.css
   Dark Luxury Boxing: Black / Gold / White
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --ink:        #0A0A0A;
  --ink2:       #141414;
  --smoke:      #1a1a1a;
  --smoke2:     #212121;
  --white:      #ffffff;
  --off-white:  #f0ede8;
  --gold:       #C6A45A;
  --gold-dark:  #A67C2E;
  --gold-light: #d4b472;
  --muted:      rgba(255,255,255,0.65);
  --border:     rgba(198,164,90,0.25);

  --font-display: 'Bebas Neue', 'Oswald', sans-serif;
  --font-head:    'Oswald', sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --radius:    6px;
  --radius-lg: 12px;
  --nav-h:     96px;

  --anthracite: #1d1d1d;
  --ink-deep:   #131313;

  /* Disc-stack card offset: how much of the previous card peeks above
     the incoming one, creating the staggered card-deck fan effect.    */
  --disc-peek: 52px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  background: linear-gradient(160deg, #141414 0%, #111111 48%, #12141a 100%);
  background-attachment: fixed;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── WhatsApp float: disabled ──────────────────────────────── */
.wa-float { display: none !important; }

/* ── Noise overlay ─────────────────────────────────────────── */
.noise {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  opacity: 0.4;
}

/* ── Preloader ─────────────────────────────────────────────── */
#preloader {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
  will-change: opacity, transform;
  transform: translateY(0) translateZ(0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
#preloader.loader-exit { opacity: 0; transform: translateY(-10px) translateZ(0); pointer-events: none; }
.loader-logo { font-family: var(--font-display); font-size: clamp(2.5rem, 8vw, 5rem); letter-spacing: 0.15em; color: var(--gold); }
.loader-line  { width: 220px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform 0.8s var(--ease-expo); will-change: transform; }
.loader-sub   { font-family: var(--font-head); font-size: 0.62rem; letter-spacing: 4px; color: var(--muted); text-transform: uppercase; }

/* ── Layout ────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* Fixed header offset: sections linked via anchor / scrollIntoView
   get enough top margin so they aren't hidden under the nav bar  */
section[id],
.diff-block[id] {
  scroll-margin-top: var(--nav-h);
}
.sec--dark  { background: var(--ink2); }
.sec--smoke { background: var(--smoke); }
.sec--white { background: #1a1a1a; }
.sec--ink2  { background: var(--smoke2); }
.sec--light { background: #f9f7f4; }
.sec--light-2 { background: #f4f1ed; }
section { padding: clamp(80px, 8vw, 120px) 0; }
.sec-header { text-align: center; margin-bottom: clamp(24px, 4vw, 56px); }
.sec-header > p { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-display); text-transform: uppercase; line-height: 1.05; letter-spacing: 0.02em; }
h1 { font-size: clamp(3rem, 8vw, 6.5rem); }
h2 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); }
h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h4 { font-size: 0.8rem; letter-spacing: 3px; }
p  { color: rgba(255,255,255,0.7); line-height: 1.85; font-size: 1rem; }

.gold { color: var(--gold); }
.shimmer {
  background: linear-gradient(90deg, var(--gold-dark) 0%, var(--gold-light) 40%, var(--gold) 60%, var(--gold-dark) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer      { to { background-position: 200% center; } }
@keyframes shimmer-move { to { background-position: 200% center; } }

/* ── Tags ──────────────────────────────────────────────────── */
.tag { display: inline-block; font-family: var(--font-head); font-size: 0.62rem; letter-spacing: 3px; text-transform: uppercase; padding: 4px 13px; border-radius: 999px; }
.tag--dark  { background: rgba(197,160,89,0.12); color: var(--gold); border: 1px solid rgba(197,160,89,0.3); }
.tag--light { background: rgba(197,160,89,0.08); color: var(--gold); border: 1px solid rgba(197,160,89,0.2); }
.tag--gold      { background: var(--gold); color: var(--ink); }
.tag--light-inv { background: rgba(8,8,8,0.08); color: var(--smoke); border: 1px solid rgba(8,8,8,0.15); }
.gold-dark  { color: var(--gold-dark); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-head); font-size: 1rem; letter-spacing: 3px; text-transform: uppercase;
  padding: 0.9rem 2.2rem; border-radius: 12px; border: 1px solid transparent;
  transition: all 0.28s var(--ease-out); white-space: nowrap; text-decoration: none;
}
.btn--gold {
  background: linear-gradient(135deg, #C6A45A 0%, #d4b472 52%, #A67C2E 100%);
  color: #0A0A0A; border-color: transparent; font-weight: 700;
  box-shadow: 0 0 20px rgba(198,164,90,0.30), 0 4px 14px rgba(0,0,0,0.40);
}
.btn--gold:hover {
  background: linear-gradient(135deg, #d4b472 0%, #C6A45A 52%, #A67C2E 100%);
  border-color: transparent;
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.08);
  box-shadow: 0 0 40px rgba(198,164,90,0.65), 0 10px 32px rgba(198,164,90,0.32);
}
.btn--outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn--outline-light:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.9); color: var(--white); transform: translateY(-1px); }
.btn--outline-dark  { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.28); }
.btn--outline-dark:hover  { background: rgba(198,164,90,0.1); border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
.btn--outline-gold  { background: transparent; color: var(--gold); border-color: rgba(198,164,90,0.55); }
.btn--outline-gold:hover  { background: rgba(198,164,90,0.08); border-color: var(--gold); color: var(--gold-light); transform: translateY(-1px); }
.btn--sm   { font-size: 0.8rem; padding: 0.65rem 1.4rem; letter-spacing: 2px; border-radius: 10px; }
.btn--full { width: 100%; }

/* ── Header ────────────────────────────────────────────────── */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  transition: background 300ms ease, backdrop-filter 300ms ease, -webkit-backdrop-filter 300ms ease, border-bottom 300ms ease;
  border-bottom: 1px solid transparent;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: background, backdrop-filter;
  isolation: isolate;
}
#header.scrolled {
  background: rgba(10,10,10,0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(197,160,89,0.15);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

/* Legal pages: centered single-logo header */
.header-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
  height: 100%; display: flex; align-items: center; justify-content: center;
}

/* Logo */
.logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; flex-shrink: 0; }
.logo-img {
  width: 200px; height: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.logo-img.hidden { display: none; }
.logo-text {
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.12em; color: var(--gold);
  line-height: 1;
  display: none; /* shown only as fallback when image fails */
}
.logo-text.visible { display: block; }
.logo-text-sub { display: none; }

.nav-links { display: flex; align-items: center; gap: 0.15rem; }
.nav-link {
  font-family: var(--font-head); font-size: 0.7rem; letter-spacing: 2px;
  color: rgba(255,255,255,0.65); padding: 0.5rem 0.8rem; border-radius: 4px;
  transition: color 0.2s; white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--gold); }
.burger { display: none; color: var(--white); font-size: 1.25rem; padding: 0.5rem; line-height: 1; }
.back-btn {
  display: none; align-items: center; gap: 0.5rem;
  font-family: var(--font-head); font-size: 0.7rem; letter-spacing: 2px;
  color: rgba(255,255,255,0.55); padding: 0.5rem 0.75rem; border-radius: 4px; transition: color 0.2s;
}
.back-btn.visible { display: flex; }
.back-btn:hover { color: var(--gold); }

/* ── Mobile Nav ────────────────────────────────────────────── */
#mobile-nav {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(8,8,8,0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  transform: translateX(100%); transition: transform 0.5s var(--ease-expo);
}
#mobile-nav.open { transform: translateX(0); }
#mobile-nav .nav-link { font-size: 0.88rem; letter-spacing: 3px; padding: 0.85rem 2rem; }
.mob-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  font-size: 1.5rem; color: var(--muted); transition: color 0.2s;
}
.mob-close:hover { color: var(--gold); }


/* ── Views ─────────────────────────────────────────────────── */
.view { display: none; }
.view.active { display: block; }

/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
#hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #0a0a0a 0%, #141414 40%, #0d0d0d 100%);
  background-image: url('../images/community.webp');
  background-size: cover; background-position: center 30%;
  animation: heroBgZoom 7s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
  transform-origin: center center;
}
@keyframes heroBgZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1.00); }
}
.hero-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,0.65) 100%),
    linear-gradient(180deg,
      rgba(8,8,8,0.72) 0%,
      rgba(8,8,8,0.52) 42%,
      rgba(8,8,8,0.88) 78%,
      rgba(8,8,8,1.00) 100%
    );
}
.hero-content {
  position: relative; z-index: 1;
  text-align: center; padding: calc(var(--nav-h) + 0.75rem) 1.5rem 4rem;
  max-width: 900px; width: 100%;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  font-family: var(--font-head); font-size: 0.55rem; letter-spacing: 4px; color: var(--gold);
  margin-bottom: 1.75rem;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  /* Gold badge frame */
  background: rgba(10,8,4,0.68);
  border: 1px solid rgba(197,160,89,0.55);
  border-radius: 999px;
  padding: 0.45rem 1.3rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 20px rgba(197,160,89,0.10), inset 0 0 12px rgba(197,160,89,0.04);
  opacity: 0; transform: translateY(10px) scale(0.98); will-change: opacity, transform;
  transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s var(--ease-out), border-color 0.25s;
}
.hero-eyebrow:hover {
  border-color: rgba(197,160,89,0.85);
  box-shadow: 0 0 32px rgba(197,160,89,0.22), inset 0 0 16px rgba(197,160,89,0.07);
}
.hero-h1 {
  font-size: clamp(3.75rem, 9.5vw, 7.5rem);
  line-height: 0.9; color: var(--white); margin-bottom: 2.5rem;
  opacity: 0; transform: translateY(10px) scale(0.98); will-change: opacity, transform;
  transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1);
}
.hero-subtitle {
  font-family: var(--font-body); font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: rgba(255,255,255,0.82); margin-bottom: 1.5rem; margin-top: -1.25rem;
  opacity: 0; transform: translateY(10px) scale(0.98); will-change: opacity, transform;
  transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1);
}
.hero-eb-counter {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(10,8,4,0.78);
  border: 1px solid rgba(197,160,89,0.58);
  border-radius: 999px; padding: 0.5rem 1.3rem; margin-bottom: 1.75rem;
  font-family: var(--font-head); font-size: 0.65rem; letter-spacing: 2px;
  color: rgba(255,255,255,0.92); text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 16px rgba(197,160,89,0.14), 0 0 0 1px rgba(197,160,89,0.08);
  opacity: 0; transform: translateY(10px) scale(0.98); will-change: opacity, transform;
  cursor: pointer; touch-action: manipulation; transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1), border-color 0.2s, box-shadow 0.2s;
}
.hero-eb-counter:hover {
  border-color: rgba(197,160,89,0.9);
  box-shadow: 0 4px 24px rgba(197,160,89,0.28), 0 0 0 1px rgba(197,160,89,0.18);
}
.hero-eb-counter strong { color: var(--gold-light); }
.hero-brand-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.8vw, 1.7rem);
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  opacity: 0; transform: translateY(10px); will-change: opacity, transform;
  transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1);
}
@media (min-width: 769px) {
  .hero-brand-tagline {
    font-size: clamp(1.38rem, 3.2vw, 1.95rem);
    letter-spacing: 0.18em;
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
  }
}
.hero-ctas {
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 3rem;
  opacity: 0; transform: translateY(10px) scale(0.98); will-change: opacity, transform;
  transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1);
}
.hero-trust {
  display: flex; align-items: center; justify-content: center; gap: 1.25rem; flex-wrap: wrap;
  opacity: 0; transform: translateY(10px) scale(0.98); will-change: opacity, transform;
  transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1);
}
.hero-trust-item {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-head); font-size: 0.6rem; letter-spacing: 2px; color: rgba(255,255,255,0.5);
}
.hero-trust-item i { color: var(--gold); }
.trust-divider { width: 1px; height: 14px; background: rgba(255,255,255,0.2); }
.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-family: var(--font-head); font-size: 0.52rem; letter-spacing: 3px; color: rgba(255,255,255,0.3);
  opacity: 0; will-change: opacity;
  transition: opacity 700ms cubic-bezier(0.22,1,0.36,1);
}
.scroll-hint-line {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, rgba(197,160,89,0.5), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes fadeUpHero  { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }

/* ── Hero Reveal — JS-triggered after preloader fades ─────────── */
#hero.hero-revealed .hero-eyebrow    { opacity:1; transform:none; transition-delay:0ms; }
#hero.hero-revealed .hero-h1         { opacity:1; transform:none; transition-delay:60ms; }
#hero.hero-revealed .hero-subtitle   { opacity:1; transform:none; transition-delay:120ms; }
#hero.hero-revealed .hero-eb-counter { opacity:1; transform:none; transition-delay:180ms; }
#hero.hero-revealed .hero-brand-tagline { opacity:1; transform:none; transition-delay:180ms; }
#hero.hero-revealed .hero-ctas         { opacity:1; transform:none; transition-delay:240ms; }
#hero.hero-revealed .hero-trust        { opacity:1; transform:none; transition-delay:300ms; }
#hero.hero-revealed .hero-credentials  { opacity:1; transform:none; transition-delay:300ms; }
#hero.hero-revealed .scroll-hint       { opacity:1; transition-delay:380ms; }

/* ── Differentiator Block ──────────────────────────────────── */
.diff-block {
  background: var(--anthracite); border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05); padding: 2.75rem 0;
}
.diff-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap;
}
.diff-item {
  display: flex; align-items: flex-start; gap: 1rem;
  flex: 1 1 280px; max-width: 340px; padding: 1.25rem 1.5rem;
}
.diff-item i {
  font-size: 1.5rem; color: var(--gold); flex-shrink: 0; margin-top: 2px;
}
.diff-item div { display: flex; flex-direction: column; gap: 0.25rem; }
.diff-item strong {
  font-family: var(--font-head); font-size: 0.7rem; letter-spacing: 2px;
  color: var(--white); text-transform: uppercase;
}
.diff-item span { font-size: 0.82rem; color: var(--muted); }
.diff-divider {
  width: 1px; height: 60px; background: rgba(255,255,255,0.08); flex-shrink: 0;
}
@media (max-width: 768px) {
  .diff-divider { display: none; }
  .diff-inner   { gap: 0; flex-direction: column; }
  .diff-item    { max-width: 100%; padding: 1rem 0; }
}

/* ── Trust Strip ───────────────────────────────────────────── */
.trust-strip {
  background: rgba(197,160,89,0.06); border-top: 1px solid rgba(197,160,89,0.12);
  border-bottom: 1px solid rgba(197,160,89,0.12); padding: 0.85rem 1.5rem;
}
.trust-strip-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 2rem; flex-wrap: wrap;
}
.trust-strip-item {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-head); font-size: 0.6rem; letter-spacing: 2px;
  color: rgba(255,255,255,0.5); white-space: nowrap;
}
.trust-strip-item i { color: var(--gold); font-size: 0.75rem; }
.trust-strip-divider { width: 1px; height: 16px; background: rgba(197,160,89,0.2); }

/* ══════════════════════════════════════════════════════════════
   DNA INTRO SECTION
══════════════════════════════════════════════════════════════ */
#intro { background: var(--ink); }
.intro-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
.intro-text h2 { margin: 1.2rem 0 1.5rem; }
.intro-text p  { margin-bottom: 1.5rem; max-width: 58ch; }
.intro-brand {
  background: linear-gradient(140deg, #1a1a1a, #0a0a0a);
  border: 1px solid rgba(197,160,89,0.2); border-radius: var(--radius-lg);
  padding: 3.5rem 2.5rem; text-align: center; position: relative; overflow: hidden;
}
.intro-brand::before {
  content: ''; position: absolute; top: -40%; right: -20%;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(197,160,89,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.intro-brand-logo {
  max-height: 160px; width: auto; margin: 0 auto;
  filter: drop-shadow(0 0 40px rgba(197,160,89,0.2));
}
.intro-brand-wordmark {
  font-family: var(--font-display); font-size: 4rem; color: var(--gold); line-height: 1;
  margin-bottom: 0.5rem;
}
.intro-brand-sub {
  font-family: var(--font-head); font-size: 0.62rem; letter-spacing: 4px;
  color: rgba(255,255,255,0.35);
}
.intro-brand-divider {
  width: 40px; height: 1px; background: rgba(197,160,89,0.4);
  margin: 1.5rem auto;
}
.intro-brand-tagline {
  font-family: var(--font-head); font-size: 0.58rem; letter-spacing: 3px;
  color: rgba(197,160,89,0.5);
}

/* ══════════════════════════════════════════════════════════════
   QUOTE
══════════════════════════════════════════════════════════════ */
#quote {
  padding: clamp(56px, 7vw, 96px) 0;
  background-image: url('../images/quote-bg.webp');
  background-size: cover; background-position: center;
  position: relative;
}
#quote::before { content: ''; position: absolute; inset: 0; background: rgba(8,8,8,0.86); }
#quote .container { position: relative; text-align: center; }
.quote-text {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 1.25; color: var(--white); letter-spacing: 0.02em;
}
.quote-source {
  margin-top: 1.5rem; font-family: var(--font-head); font-size: 0.66rem;
  letter-spacing: 3px; color: var(--muted);
}

/* ══════════════════════════════════════════════════════════════
   DNA PHILOSOPHY
══════════════════════════════════════════════════════════════ */
#dna { background: var(--smoke); }
.dna-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.dna-text h2 { margin: 1.2rem 0 1.5rem; }
.dna-text p  { margin-bottom: 1.2rem; }
.dna-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--border);
}
.stat-num { font-family: var(--font-display); font-size: 2.8rem; color: var(--gold); line-height: 1; }
.stat-lbl {
  font-family: var(--font-head); font-size: 0.6rem; letter-spacing: 2px;
  color: #3A3A3A; margin-top: 0.35rem; text-transform: uppercase;
}
.dna-visual {
  background: linear-gradient(140deg, #1a1a1a, #0a0a0a);
  border: 1px solid rgba(197,160,89,0.25); border-radius: var(--radius-lg);
  padding: 3rem 2rem; text-align: center; position: relative;
  overflow: hidden;
  min-height: 340px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dna-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(197,160,89,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.dna-visual-logo {
  max-height: 180px; width: auto; margin: 0 auto 1.5rem;
  filter: drop-shadow(0 0 24px rgba(197,160,89,0.5)) drop-shadow(0 0 8px rgba(197,160,89,0.3));
  position: relative; z-index: 1;
}
.dna-visual-wordmark { font-family: var(--font-display); font-size: 3.5rem; color: var(--gold); line-height: 1; margin-bottom: 0.5rem; position: relative; z-index: 1; }
.dna-visual-sub { font-family: var(--font-head); font-size: 0.6rem; letter-spacing: 4px; color: rgba(255,255,255,0.35); position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════
   COMMUNITY
══════════════════════════════════════════════════════════════ */
#community {
  padding: 7rem 0;
  background-image: url('../images/community.webp');
  background-size: cover; background-position: center; background-attachment: fixed;
  text-align: center; position: relative;
}
#community::before { content: ''; position: absolute; inset: 0; background: rgba(8,8,8,0.78); }
#community .container { position: relative; z-index: 1; }
#community h2 { font-size: clamp(2.5rem, 6vw, 5rem); }
#community p  { font-family: var(--font-head); font-size: 0.68rem; letter-spacing: 5px; color: var(--muted); margin-top: 1rem; }

/* ══════════════════════════════════════════════════════════════
   SERVICES GRID
══════════════════════════════════════════════════════════════ */
#services { background: var(--ink2); }

/* Desktop: original 4×2 grid — all programs visible at once */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 320px);
  gap: 2px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Tablet: 2×4 grid */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 280px); }
}
/* Mobile: horizontal carousel — shows multiple programs exist */
@media (max-width: 768px) {
  .services-grid {
    display: flex !important;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding: 0 1.25rem 1rem;
    background: transparent;
    border-radius: 0;
    grid-template-rows: unset;
    scrollbar-width: none;
  }
  .services-grid::-webkit-scrollbar { display: none; }
}
.service-card {
  position: relative; overflow: hidden; cursor: pointer; background: #0d0d0d;
  transition: box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
@media (max-width: 768px) {
  .service-card {
    flex: 0 0 85vw;
    max-width: 380px;
    min-width: 220px;
    height: 280px;
    scroll-snap-align: start;
    border-radius: var(--radius-lg);
    transform: none !important;
  }
}
@media (max-width: 480px) {
  .service-card { flex: 0 0 88vw; height: 258px; }
}
.service-card:hover {
  box-shadow: 0 0 0 1px rgba(197,160,89,0.30), 0 12px 40px rgba(0,0,0,0.55);
  transform: translateY(-3px);
}
.service-card-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform 0.7s var(--ease-expo), filter 0.4s; filter: brightness(0.38);
}
.service-card:hover .service-card-bg { transform: scale(1.06); filter: brightness(0.32); }
.service-card-arrow {
  position: absolute; top: 1rem; right: 1rem; z-index: 1;
  width: 34px; height: 34px;
  background: rgba(197,160,89,0.1); border: 1px solid rgba(197,160,89,0.3);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; color: var(--gold); transition: all 0.3s;
}
.service-card:hover .service-card-arrow {
  background: var(--gold); color: var(--ink); transform: rotate(45deg);
  box-shadow: 0 0 16px rgba(197,160,89,0.50);
}
.service-card-body {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 1;
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(8,8,8,0.95) 0%, transparent 100%);
}
.service-card-body h3 { font-size: 1.2rem; color: var(--white); margin-bottom: 0.3rem; margin-top: 0.5rem; }
.service-card-body p  { font-size: 0.78rem; color: rgba(255,255,255,0.5); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════
   TEAM
══════════════════════════════════════════════════════════════ */
#team { background: #f9f7f4; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.coach-card {
  display: grid; grid-template-columns: 240px 1fr; gap: 0;
  background: var(--smoke); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06); transition: border-color 0.3s;
}
.coach-card:hover { border-color: var(--border); }
.coach-photo { position: relative; min-height: 300px; }
.coach-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.coach-creds {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; flex-direction: column; gap: 3px; padding: 0.85rem;
  background: linear-gradient(to top, rgba(8,8,8,0.92), transparent);
}
.coach-cred {
  display: inline-block; width: fit-content;
  font-family: var(--font-head); font-size: 0.55rem; letter-spacing: 2px; color: var(--gold);
  background: rgba(197,160,89,0.1); border: 1px solid rgba(197,160,89,0.3);
  padding: 2px 7px; border-radius: 3px;
}
.coach-info { padding: 2rem; display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; }
.coach-info h3   { font-size: 1.3rem; }
.coach-title     { font-family: var(--font-head); font-size: 0.63rem; letter-spacing: 2px; color: var(--gold); }
.coach-info h4   { font-size: 0.65rem; letter-spacing: 2px; color: var(--muted); margin-top: -0.15rem; }
.coach-info p    { font-size: 0.88rem; }

/* ── Coach social links ─────────────────────────────────────── */
.coach-socials {
  display: flex; align-items: center; gap: 0.45rem; margin: 0.2rem 0 0.1rem;
}
.coach-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.38); font-size: 0.72rem;
  text-decoration: none; flex-shrink: 0;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.coach-social-link:hover, .coach-social-link:focus-visible {
  background: rgba(197,160,89,0.14);
  border-color: rgba(197,160,89,0.45);
  color: var(--gold);
}

/* ══════════════════════════════════════════════════════════════
   SCHEDULE SECTION — light premium background + mobile fixes
══════════════════════════════════════════════════════════════ */
#schedule {
  background: #FAF7F2;
  padding-top: 5rem;
  padding-bottom: 5rem;
  overflow-x: hidden; /* prevent section-level bleed */
}

/* ── Back button — shown by JS when Bsport enters a detail view ── */
/* Hidden on desktop; JS adds --visible class on mobile only.       */
.schedule-back-btn {
  display: none; /* hidden by default everywhere */
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 0.65rem 1.2rem;
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  margin: 1rem 1rem 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
  min-height: 44px;
  min-width: 44px;
  transition: background 0.15s, box-shadow 0.15s;
  position: relative;
  z-index: 10;
}
.schedule-back-btn:hover  { background: #f5f0e8; box-shadow: 0 3px 14px rgba(0,0,0,0.13); }
.schedule-back-btn:active { background: #eee; }
/* Only reveal on mobile (≤768px) — back btn always shown when JS adds --visible */
.schedule-back-btn--visible { display: inline-flex; }

/* ── Widget frame: outer wrapper ─────────────────────────────────────────────
   isolation:isolate  → new stacking context; Bsport z-index values stay inside
   position:relative  → containing block for Bsport's absolute children
   No overflow set    → any overflow:hidden ancestor traps the inline detail panel
   scroll-margin-top  → programmatic scrollIntoView() clears fixed nav            */
.schedule-frame {
  margin-top: 2rem;
  position: relative;
  isolation: isolate;
  min-height: 420px;
  scroll-margin-top: var(--nav-h);
}

/* ── Widget frame: inner layer (holds mount point + noscript fallback) ── */
.schedule-frame__widget {
  position: relative;
  width: 100%;
  min-height: 420px;
}

/* ── Loading shimmer on the Bsport mount point ───────────────────────────────
   :empty matches before BsportWidget injects its React root.
   Disappears automatically once content is injected.                          */
#bsport-widget-172485:empty {
  display: block;
  min-height: 420px;
  background: linear-gradient(
    90deg,
    #ede8e0 0%, #e4dfd6 35%, #ede8e0 65%, #e4dfd6 100%
  );
  background-size: 300% 100%;
  animation: bsport-shimmer 1.8s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes bsport-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ══════════════════════════════════════════════════════════════
   BSPORT WIDGET — STRUCTURAL CSS
   Strategy:
   - Widget root: sizing only, zero overflow restrictions
   - .cleanslate: fill to 100%, no padding offset
   - Card layout: explicit named-class rules only
     NO wildcards that touch Bsport's flex children
     (wildcards like [class*="content"] match __left/__right
      and forced width:100% on both, collapsing the side-by-side
      desktop layout — that class of rule is removed entirely)
   - Detail view: overflow:visible + scroll-margin for fixed nav
   - Mobile: scoped breakpoints, no root-level overflow trap
══════════════════════════════════════════════════════════════ */

/* ── Widget root: sizing only. No overflow — it traps the detail panel ── */
#bsport-widget-172485 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  scroll-margin-top: var(--nav-h); /* clear fixed nav on Bsport auto-scroll */
}
/* Universal box-model correction — does NOT force widths */
#bsport-widget-172485 *,
#bsport-widget-172485 *::before,
#bsport-widget-172485 *::after {
  box-sizing: border-box;
}

/* ── Cleanslate root: fill the widget, flush to left edge ── */
#bsport-widget-172485 .cleanslate {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* ── Bsport internal sticky bar: offset below our fixed nav (72px desktop) ── */
#bsport-widget-172485 .cleanslate [class*="sticky"],
#bsport-widget-172485 .cleanslate [class*="Sticky"] {
  top: var(--nav-h) !important;
}

/* ── Touch-friendly tap targets ── */
#bsport-widget-172485 button,
#bsport-widget-172485 [role="button"],
#bsport-widget-172485 select,
#bsport-widget-172485 input[type="text"],
#bsport-widget-172485 input[type="search"] {
  min-height: 40px;
}
#bsport-widget-172485 [class*="close"],
#bsport-widget-172485 [class*="Close"],
#bsport-widget-172485 [class*="back"],
#bsport-widget-172485 [class*="Back"],
#bsport-widget-172485 [class*="return"],
#bsport-widget-172485 [class*="Return"] {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* ── Filter / date nav bar: horizontal scroll, hidden scrollbar ── */
#bsport-widget-172485 .cleanslate [class*="filter"],
#bsport-widget-172485 .cleanslate [class*="Filter"],
#bsport-widget-172485 .cleanslate [class*="filters"],
#bsport-widget-172485 .cleanslate [class*="toolbar"],
#bsport-widget-172485 .cleanslate [class*="Toolbar"],
#bsport-widget-172485 .cleanslate [class*="search-bar"],
#bsport-widget-172485 .cleanslate [class*="header-row"] {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
#bsport-widget-172485 .cleanslate [class*="filter"]::-webkit-scrollbar,
#bsport-widget-172485 .cleanslate [class*="toolbar"]::-webkit-scrollbar {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   CARD LIST LAYOUT
   Only named Bsport class names — no wildcards that match
   Bsport's internal flex children (left/right columns).
   Each card is:  .bs-offer-list-item
                    └─ ..__content
                         └─ ..__offer (flex row)
                              ├─ ..__left  (grows)
                              └─ ..__right (fits content)
══════════════════════════════════════════════════════════════ */

/* Card wrapper: reset spacing */
#bsport-widget-172485 .cleanslate .bs-offer-list-item {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Card flex row ── */
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100% !important;
  padding: 1rem 1.5rem !important;
  gap: 1rem !important;
  box-sizing: border-box !important;
  overflow: visible !important; /* never clip right-column BUCHEN button */
}

/* Left column: title, time, trainer, location — grows to fill */
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left {
  flex: 1 1 0% !important;   /* grows; flex-basis 0 = share space fairly */
  min-width: 0 !important;   /* allows text-overflow truncation */
  width: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
  overflow: visible !important; /* allow all metadata rows to render fully */
}

/* Right column: level badge + BUCHEN button — fixed to content width */
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right {
  flex: 0 0 auto !important;        /* never grows or shrinks */
  min-width: max-content !important; /* always as wide as widest child */
  width: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0.4rem !important;
  overflow: visible !important;     /* BUCHEN must never be clipped */
}
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right__top {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.35rem !important;
  overflow: visible !important;
}

/* ── BUCHEN button: explicit no-clip ── */
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right button,
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right a,
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right [role="button"] {
  white-space: nowrap !important;
  overflow: visible !important;
  min-width: max-content !important;
  width: auto !important;
}

/* ── Card text sizing: scoped to the left column only ──────────────────────
   Scoping prevents these small sizes from leaking into the detail view,
   where titles and metadata should render at their natural/Bsport-set sizes. */
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="name"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Name"] {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="time"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Time"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="duration"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Duration"] {
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
}
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="meta"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Meta"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="coach"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Coach"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="location"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Location"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="instructor"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="spots"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Spots"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="capacity"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Capacity"] {
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
}

/* ── Hairline separators between cards ── */
#bsport-widget-172485 .cleanslate [class*="separator"],
#bsport-widget-172485 .cleanslate [class*="Separator"],
#bsport-widget-172485 .cleanslate [class*="divider"],
#bsport-widget-172485 .cleanslate [class*="Divider"] {
  margin: 0 !important;
  opacity: 0.45 !important;
}

/* ── Day / date group headings ── */
#bsport-widget-172485 .cleanslate [class*="date-header"],
#bsport-widget-172485 .cleanslate [class*="DateHeader"],
#bsport-widget-172485 .cleanslate [class*="day-header"],
#bsport-widget-172485 .cleanslate [class*="DayHeader"],
#bsport-widget-172485 .cleanslate [class*="day-label"],
#bsport-widget-172485 .cleanslate [class*="DayLabel"] {
  padding: 0.5rem 1rem !important;
  font-size: 0.72rem !important;
  letter-spacing: 1.5px !important;
}

/* ══════════════════════════════════════════════════════════════
   BOOKING DETAIL VIEW
   dialogMode:1 + fullScreenPopup:false = inline panel expansion.
   The widget grows vertically. Must never be overflow-clipped.
   scroll-margin-top clears the 72px fixed nav on auto-scroll.
══════════════════════════════════════════════════════════════ */

#bsport-widget-172485 .cleanslate [class*="detail"],
#bsport-widget-172485 .cleanslate [class*="Detail"],
#bsport-widget-172485 .cleanslate [class*="session-view"],
#bsport-widget-172485 .cleanslate [class*="SessionView"],
#bsport-widget-172485 .cleanslate [class*="activity-detail"],
#bsport-widget-172485 .cleanslate [class*="ActivityDetail"],
#bsport-widget-172485 .cleanslate [class*="booking-panel"],
#bsport-widget-172485 .cleanslate [class*="BookingPanel"],
#bsport-widget-172485 .cleanslate [class*="booking-view"],
#bsport-widget-172485 .cleanslate [class*="BookingView"] {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  scroll-margin-top: var(--nav-h);
}

/* Detail view hero / cover image ── */
#bsport-widget-172485 .cleanslate [class*="cover"],
#bsport-widget-172485 .cleanslate [class*="Cover"],
#bsport-widget-172485 .cleanslate [class*="banner"],
#bsport-widget-172485 .cleanslate [class*="Banner"],
#bsport-widget-172485 .cleanslate [class*="header-image"],
#bsport-widget-172485 .cleanslate [class*="HeaderImage"],
#bsport-widget-172485 .cleanslate [class*="class-image"],
#bsport-widget-172485 .cleanslate [class*="ClassImage"],
#bsport-widget-172485 .cleanslate [class*="hero-image"],
#bsport-widget-172485 .cleanslate [class*="HeroImage"],
#bsport-widget-172485 .cleanslate [class*="slot-image"],
#bsport-widget-172485 .cleanslate [class*="activity"][class*="image"],
#bsport-widget-172485 .cleanslate [class*="offer"][class*="image"] {
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  line-height: 0;
}
#bsport-widget-172485 .cleanslate [class*="cover"] img,
#bsport-widget-172485 .cleanslate [class*="Cover"] img,
#bsport-widget-172485 .cleanslate [class*="banner"] img,
#bsport-widget-172485 .cleanslate [class*="Banner"] img,
#bsport-widget-172485 .cleanslate [class*="header-image"] img,
#bsport-widget-172485 .cleanslate [class*="class-image"] img,
#bsport-widget-172485 .cleanslate [class*="hero-image"] img,
#bsport-widget-172485 .cleanslate [class*="slot-image"] img,
#bsport-widget-172485 .cleanslate [class*="activity"][class*="image"] img,
#bsport-widget-172485 .cleanslate [class*="offer"][class*="image"] img {
  width: 100% !important;
  height: auto !important;
  max-height: 240px !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

/* ── CTA below widget ── */
.schedule-cta {
  text-align: center;
  margin-top: 2.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
.schedule-cta-note {
  font-family: var(--font-head); font-size: 0.62rem; letter-spacing: 1.5px;
  color: #888; margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════════════════════ */

/* ── Tablet compact: ≤900px — side-by-side columns, tighter padding ── */
@media (max-width: 900px) {
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer {
    padding: 0.75rem 1rem !important;
    gap: 0.6rem !important;
  }
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left {
    gap: 0.25rem !important;
  }
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right {
    gap: 0.35rem !important;
  }
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right__top {
    gap: 0.3rem !important;
  }
}

/* ── Tablet: ≤768px ── */
@media (max-width: 768px) {
  #schedule { padding-top: 3rem; padding-bottom: 3rem; }
  .schedule-frame {
    border-radius: 0;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    min-height: 380px;
  }
  .schedule-frame__widget { min-height: 380px; }
  #bsport-widget-172485:empty { min-height: 380px; }
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer {
    padding: 0.6rem 1rem !important;
    gap: 0.5rem !important;
  }
  /* Date navigation: wrap on narrow viewports */
  #bsport-widget-172485 .cleanslate [class*="date"],
  #bsport-widget-172485 .cleanslate [class*="Date"],
  #bsport-widget-172485 .cleanslate [class*="nav"],
  #bsport-widget-172485 .cleanslate [class*="Nav"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* ── Mobile card field order: Activity → Time → Participants → Facility → Coach → Level ──
     The __left column is already flex-direction:column, so `order` controls vertical sequence.
     All metadata is visible (display:none removed by fixSchedule JS); these rules ensure
     the correct reading order on narrow screens. Desktop unaffected (outside this breakpoint). */

  /* 1. Activity / Class Name */
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="name"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Name"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="title"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Title"] {
    order: 1 !important;
  }

  /* 2. Time / Duration */
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="time"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Time"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="duration"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Duration"] {
    order: 2 !important;
  }

  /* 3. Participants / Capacity / Spots */
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="spot"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Spot"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="capacity"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Capacity"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="participant"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Participant"] {
    order: 3 !important;
  }

  /* 4. Facility / Location / Venue */
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="facility"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Facility"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="location"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Location"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="venue"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Venue"] {
    order: 4 !important;
  }

  /* 5. Coach / Instructor / Trainer / Teacher */
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="teacher"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Teacher"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="coach"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Coach"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="instructor"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Instructor"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="trainer"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Trainer"] {
    order: 5 !important;
  }

  /* 6. Level / Niveau / Difficulty */
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="level"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Level"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="difficulty"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Difficulty"] {
    order: 6 !important;
  }
}

/* ── Phone: ≤480px — stacked card layout ── */
@media (max-width: 480px) {
  .schedule-frame {
    border-radius: 0;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    min-height: 340px;
  }
  .schedule-frame__widget { min-height: 340px; }
  #bsport-widget-172485:empty { min-height: 340px; }

  /* Stack columns: left (title/meta) on top, right (button) below */
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer {
    flex-wrap: wrap !important;
    padding: 0.6rem 0.75rem !important;
    gap: 0.4rem !important;
    overflow: visible !important;
  }
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left {
    flex: 1 1 100% !important;
    width: 100% !important;
    overflow: visible !important;
  }
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right {
    flex: 1 1 100% !important;
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    min-width: 0 !important;
  }

  /* Phone compact text */
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="name"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Name"] {
    font-size: 0.82rem !important;
  }
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="time"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Time"] {
    font-size: 0.76rem !important;
  }
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="meta"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="coach"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="location"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="spots"],
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="capacity"] {
    font-size: 0.7rem !important;
  }

  /* Phone viewport safety: prevent horizontal scroll.
     Root widget excluded — overflow on root traps the detail panel. */
  #bsport-widget-172485 .cleanslate,
  #bsport-widget-172485 .cleanslate [class*="wrap"],
  #bsport-widget-172485 .cleanslate [class*="container"],
  #bsport-widget-172485 .cleanslate [class*="inner"],
  #bsport-widget-172485 .cleanslate [class*="offer-list"]:not([class*="item"]) {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Phone meta icon row */
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right__top,
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right__top__group,
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right__top__gender {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  /* Phone filters: tap-friendly */
  #bsport-widget-172485 .cleanslate [class*="filter"],
  #bsport-widget-172485 .cleanslate [class*="Filter"] {
    min-height: 44px !important;
    padding: 0.5rem 0.875rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   EARLY BIRD
══════════════════════════════════════════════════════════════ */
#early-bird {
  background: linear-gradient(165deg, #0a0906 0%, #0f0d0a 35%, var(--ink) 60%, #0a0906 100%);
  border-top: none;
  border-bottom: none;
  position: relative;
  overflow: hidden;
}
/* Ambient gold glow — sits behind content, creates depth without a box */
#early-bird::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 72% 50%, rgba(197,160,89,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(197,160,89,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.early-bird-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.early-bird-inner h2 { margin: 1.25rem 0; }
.eb-checklist { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 2rem; }
.eb-check { display: flex; align-items: flex-start; gap: 12px; color: rgba(255,255,255,0.75); font-size: 0.92rem; }
.eb-check i { color: var(--gold); width: 18px; flex-shrink: 0; margin-top: 3px; }
/* eb-card: no hard box — just ambient separation via subtle top-line */
.eb-card {
  background: transparent;
  border: none;
  border-top: 1px solid rgba(197,160,89,0.18);
  border-radius: 0;
  padding: 2.5rem 0;
  text-align: center;
  position: relative;
}
/* Gold glow halo behind the big number */
.eb-card::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(197,160,89,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.eb-card:hover { border-top-color: rgba(197,160,89,0.40); }
.eb-card-label { font-family: var(--font-head); font-size: 0.62rem; letter-spacing: 3px; color: var(--muted); margin-bottom: 0.75rem; }
.eb-card-number {
  font-family: var(--font-display); font-size: 5rem; color: var(--gold); line-height: 1;
  text-shadow: 0 0 80px rgba(197,160,89,0.30), 0 0 30px rgba(197,160,89,0.18);
  position: relative; z-index: 1;
}
.eb-card-sublabel { font-family: var(--font-head); font-size: 0.65rem; letter-spacing: 2px; color: var(--muted); margin-bottom: 2rem; }
.eb-prices {
  display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap;
  padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.07);
}
.eb-price-item { text-align: center; }
.eb-price-age    { font-family: var(--font-head); font-size: 0.58rem; letter-spacing: 2px; color: var(--muted); }
.eb-price-amount { font-family: var(--font-display); font-size: 2rem; color: var(--gold); }
.eb-price-unit   { font-family: var(--font-head); font-size: 0.54rem; color: rgba(255,255,255,0.28); }
.eb-notice {
  margin-top: 1.5rem; padding: 0.8rem;
  background: rgba(197,160,89,0.08); border: 1px solid rgba(197,160,89,0.2);
  border-radius: var(--radius); font-family: var(--font-head); font-size: 0.62rem;
  letter-spacing: 1.5px; color: var(--gold);
}

/* ── Spots remaining badge ──────────────────────────────────── */
.spots-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(197,160,89,0.12); border: 1px solid rgba(197,160,89,0.35);
  border-radius: 999px; padding: 0.45rem 1rem; margin-bottom: 1rem;
  font-family: var(--font-head); font-size: 0.65rem; letter-spacing: 2px; color: var(--gold);
}
.spots-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.75)} }

/* ══════════════════════════════════════════════════════════════
   PRICING
══════════════════════════════════════════════════════════════ */
#pricing { background: var(--smoke2); }

/* Age category toggle */
.age-toggle {
  display: flex; justify-content: center; gap: 0.4rem;
  margin-bottom: 2.5rem; flex-wrap: wrap;
}
.atab {
  font-family: var(--font-head); font-size: 0.68rem; letter-spacing: 2px;
  color: var(--muted); background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 999px;
  padding: 0.6rem 1.5rem; transition: all 0.3s; cursor: pointer;
}
.atab:hover, .atab.active {
  background: rgba(197,160,89,0.15); border-color: var(--gold); color: var(--gold);
}

/* Enrollment fee notice */
.enrollment-notice {
  text-align: center; margin-bottom: 2.5rem;
  padding: 1rem; background: rgba(197,160,89,0.06); border: 1px solid var(--border);
  border-radius: var(--radius); font-family: var(--font-head); font-size: 0.68rem;
  letter-spacing: 1.5px; color: rgba(255,255,255,0.5);
}
.enrollment-notice strong { color: var(--gold); }

/* Programs grid */
.programs-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 2rem;
}
.prog-card {
  background: var(--smoke); border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg); padding: 2.25rem 2rem;
  display: flex; flex-direction: column; gap: 0.7rem;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.prog-card:hover { border-color: var(--border); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.5); }
.prog-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(197,160,89,0.4), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.prog-card:hover::before { opacity: 1; }
.prog-icon { font-size: 1.1rem; color: var(--gold); margin-bottom: 0.25rem; }
.prog-name { font-family: var(--font-display); font-size: 1.1rem; color: var(--white); letter-spacing: 0.02em; }
.prog-price {
  display: flex; align-items: baseline; gap: 0.35rem; margin-top: 0.25rem;
}
.prog-price-amount { font-family: var(--font-display); font-size: 2rem; color: var(--gold); }
.prog-price-unit   { font-family: var(--font-head); font-size: 0.62rem; letter-spacing: 1px; color: var(--muted); }
.prog-price-label  { font-family: var(--font-display); font-size: 1.6rem; color: var(--gold); } /* for PT/corp */
.prog-note { font-size: 0.8rem; color: var(--muted); }
.prog-card .btn { margin-top: auto; }

/* Special cards (PT, Corporate) */
.prog-card.special {
  background: linear-gradient(140deg, #1a1a1a, #0f0f0f);
  border-color: rgba(197,160,89,0.2);
}

/* Pricing footer */
.pricing-footer {
  text-align: center; margin-top: 2rem; padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.pricing-footer p { font-size: 0.82rem; color: rgba(255,255,255,0.52); }

/* ── Weitere Preise (expandable) ───────────────────────────── */
.mehr-preise-wrap { margin-top: 2rem; }
.mehr-preise-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 0 auto;
  font-family: var(--font-head); font-size: 0.7rem; letter-spacing: 2px; color: var(--muted);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px; padding: 0.65rem 1.5rem; transition: all 0.3s; cursor: pointer;
}
.mehr-preise-btn:hover { border-color: var(--gold); color: var(--gold); }
.mehr-preise-btn i { transition: transform 0.3s; }
.mehr-preise-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.mehr-preise-panel {
  max-height: 0; overflow: hidden;
  transition: max-height 0.5s var(--ease-expo);
}
.mehr-preise-panel.open { max-height: 800px; }
.mehr-preise-table-wrap {
  margin-top: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; overflow-x: auto;
}
.mehr-preise-table {
  width: 100%; border-collapse: collapse; font-size: 0.83rem;
  min-width: 540px;
}
.mehr-preise-table thead tr {
  background: rgba(197,160,89,0.1); border-bottom: 1px solid var(--border);
}
.mehr-preise-table th {
  font-family: var(--font-head); font-size: 0.6rem; letter-spacing: 2px;
  color: var(--gold); padding: 0.8rem 1rem; text-align: left; white-space: nowrap;
}
.mehr-preise-table td {
  padding: 0.75rem 1rem; color: rgba(255,255,255,0.65);
  border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: middle;
}
.mehr-preise-table tbody tr:last-child td { border-bottom: none; }
.mehr-preise-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.mehr-preise-table td strong { color: var(--white); font-weight: 600; }
.mehr-preise-table td .price-em { color: var(--gold); font-family: var(--font-head); font-weight: 600; }
.mehr-preise-table td a { color: var(--gold); text-decoration: none; font-family: var(--font-head); font-size: 0.68rem; letter-spacing: 1.5px; }
.mehr-preise-table td a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   BOOKING SECTION
══════════════════════════════════════════════════════════════ */
#booking { background: var(--ink2); }
.booking-head { text-align: center; margin-bottom: 2.5rem; }
.booking-head h2 { margin-bottom: 0.75rem; }

/* ══════════════════════════════════════════════════════════════
   LOCATION / MAP
══════════════════════════════════════════════════════════════ */
#location { padding: 0; }
.location-wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: 500px; }
.location-info {
  background: #ffffff; padding: 4rem 3.5rem;
  display: flex; flex-direction: column; justify-content: center;
}
.location-info h2 { margin: 1.2rem 0 2rem; color: var(--ink); }
.location-detail  { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.location-detail > i { color: var(--gold-dark); font-size: 1rem; margin-top: 4px; flex-shrink: 0; }
.location-detail-text { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.88rem; }
.location-detail-text strong { color: var(--ink); font-family: var(--font-head); font-size: 0.68rem; letter-spacing: 1.5px; }
.location-detail-text span   { color: rgba(8,8,8,0.62); line-height: 1.7; }
.hours-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1.25rem; color: rgba(8,8,8,0.62); font-size: 0.86rem; }
.hours-grid .day { color: rgba(8,8,8,0.78); font-weight: 500; }
.location-btns { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }
.location-address-link { text-decoration: none; color: inherit; }
.location-address-link:hover span { color: var(--gold-dark); }
.map-wrapper { position: relative; background: #f0ede8; min-height: 400px; }
.map-gate {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem; padding: 2rem; text-align: center; background: rgba(240,237,232,0.96);
}
.map-gate p { font-size: 0.85rem; color: rgba(8,8,8,0.55); max-width: 280px; }
.map-gate.hidden { display: none; }
#map-frame { width: 100%; height: 100%; border: none; min-height: 500px; display: block; }

/* ══════════════════════════════════════════════════════════════
   WHY BOMAYE
══════════════════════════════════════════════════════════════ */
#why-bomaye .sec-header h2 { color: var(--ink); }
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.why-card {
  background: #fff; border: 1px solid rgba(8,8,8,0.08);
  border-radius: var(--radius-lg); padding: 2.25rem 2rem;
  text-align: center;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.why-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
.why-card-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 1.5rem;
  background: rgba(197,160,89,0.1); border: 1px solid rgba(197,160,89,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: var(--gold);
}
.why-card h3 {
  font-size: 1rem; color: var(--ink); margin-bottom: 0.85rem;
}
.why-card p { font-size: 0.9rem; color: rgba(8,8,8,0.6); line-height: 1.8; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════════════════ */
.testimonial-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.testimonial-card {
  background: #fff; border: 1px solid rgba(8,8,8,0.08);
  border-radius: var(--radius-lg); padding: 2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  display: flex; flex-direction: column; gap: 1.25rem;
}
.testimonial-stars { color: var(--gold); font-size: 1.05rem; letter-spacing: 2px; }
.testimonial-card p { font-size: 0.92rem; color: rgba(8,8,8,0.65); line-height: 1.85; flex: 1; }
.testimonial-author {
  display: flex; align-items: center; gap: 0.85rem;
  padding-top: 1.25rem; border-top: 1px solid rgba(8,8,8,0.07);
}
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 0.9rem; font-weight: 700;
}
.testimonial-author strong { display: block; font-size: 0.88rem; color: var(--ink); }
.testimonial-author span  { font-family: var(--font-head); font-size: 0.6rem; letter-spacing: 1.5px; color: rgba(8,8,8,0.45); }
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ══════════════════════════════════════════════════════════════
   DEIN WEG ZU BOMAYE — STEPS
══════════════════════════════════════════════════════════════ */
.steps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  position: relative;
}
.steps-grid::before {
  content: '';
  position: absolute; top: 2.75rem; left: calc(16.66% + 1rem); right: calc(16.66% + 1rem);
  height: 1px; background: linear-gradient(90deg, transparent, rgba(197,160,89,0.35), transparent);
  pointer-events: none;
}
.step-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg); padding: 2.25rem 2rem; text-align: center;
  position: relative;
}
.step-card:hover { border-color: var(--border); }
.step-num {
  font-family: var(--font-display); font-size: 3.5rem; color: var(--gold);
  opacity: 0.35; line-height: 1; margin-bottom: 1rem;
}
.step-card h3 { font-size: 1rem; color: var(--white); margin-bottom: 0.85rem; }
.step-card p  { font-size: 0.88rem; color: var(--muted); line-height: 1.8; }
.steps-cta { text-align: center; margin-top: 3rem; }
@media (max-width: 900px) {
  .steps-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .steps-grid::before { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════════════════ */
#faq { background: var(--smoke); }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.07); }
.faq-q {
  width: 100%; text-align: left; padding: 1.35rem 0;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-head); font-size: 0.92rem; letter-spacing: 1px; color: var(--white); transition: color 0.2s;
}
.faq-q:hover { color: var(--gold); }
.faq-icon { font-size: 0.82rem; transition: transform 0.3s; color: var(--gold); flex-shrink: 0; margin-left: 1rem; }
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-expo); }
.faq-a-inner { padding: 0 0 1.35rem; font-size: 0.9rem; color: var(--muted); line-height: 1.85; }

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
footer { background: var(--ink); border-top: 1px solid var(--border); padding: 4.5rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3rem; margin-bottom: 3.5rem; }
/* Footer brand column — centered brand mark:
   logo emblem and BOMAYE wordmark are center-aligned as a single
   intentional brand unit; all content in the column centers under it */
.footer-brand               { display: flex; flex-direction: column; align-items: center; }
.footer-logo-link           { display: inline-block; line-height: 0; }
.footer-brand .logo-img     { height: 72px; width: auto; display: block; }
.footer-brand .logo-text    { display: block; text-align: center; margin-top: 0.5rem;
                               margin-bottom: 1rem; font-size: 1.8rem; line-height: 1;
                               letter-spacing: 0.12em; }
.footer-brand p             { font-size: 0.86rem; color: var(--muted);
                               margin-bottom: 0.4rem; text-align: center; }
.footer-brand .footer-socials { justify-content: center; }
.brand-line { font-family: var(--font-head); font-size: 0.62rem; letter-spacing: 2px; }
.footer-socials { display: flex; gap: 0.6rem; margin-top: 1.5rem; flex-wrap: wrap; }
.social-icon {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; color: var(--muted); transition: all 0.3s;
}
.social-icon:hover { background: rgba(197,160,89,0.15); border-color: var(--gold); color: var(--gold); }
.footer-col h4 { font-family: var(--font-head); font-size: 0.62rem; letter-spacing: 3px; color: var(--muted); margin-bottom: 1.2rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-links button, .footer-links a {
  font-size: 0.86rem; color: rgba(255,255,255,0.45); text-align: left; transition: color 0.2s; display: block;
}
.footer-links button:hover, .footer-links a:hover { color: var(--gold); }
.footer-contact-item { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; font-size: 0.86rem; }
.footer-contact-item i { color: var(--gold); width: 16px; flex-shrink: 0; }
.footer-contact-item a { color: var(--muted); transition: color 0.2s; }
.footer-contact-item a:hover { color: var(--gold); }
.footer-contactbar {
  text-align: center; padding: 1.25rem 0; margin-bottom: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05);
  font-family: var(--font-head); font-size: 0.65rem; letter-spacing: 2px; color: var(--muted);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 0.5rem;
}
.footer-contactbar a { transition: color 0.2s; }
.footer-contactbar a:hover { color: var(--gold); }
.footer-contactbar .dot { color: var(--border); padding: 0 0.5rem; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  font-family: var(--font-head); font-size: 0.58rem; letter-spacing: 2px; color: rgba(255,255,255,0.22);
}
.footer-legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-legal a {
  font-family: var(--font-head); font-size: 0.58rem; letter-spacing: 2px;
  color: rgba(255,255,255,0.22); transition: color 0.2s;
}
.footer-legal a:hover { color: var(--gold); }

/* ══════════════════════════════════════════════════════════════
   BOOKING MODAL
══════════════════════════════════════════════════════════════ */
#booking-modal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(8,8,8,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform 0.5s var(--ease-expo);
  pointer-events: none; /* prevent stray taps on off-screen modal */
}
#booking-modal.open {
  transform: translateY(0);
  pointer-events: auto;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
  position: relative; z-index: 10; /* stay above any Bsport sub-overlays */
}
.modal-header-title { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold); }
.modal-close {
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: var(--muted); transition: all 0.3s;
}
.modal-close:hover { border-color: var(--gold); color: var(--gold); }
.modal-body {
  flex: 1; overflow-y: auto; padding: 2rem;
  -webkit-overflow-scrolling: touch; /* iOS momentum scroll inside modal */
}

/* ══════════════════════════════════════════════════════════════
   DETAIL VIEWS
══════════════════════════════════════════════════════════════ */
.detail-hero-wrap {
  position: relative; height: 55vh; min-height: 380px; margin-top: var(--nav-h);
}
.detail-hero-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
}
.detail-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,8,0.25) 0%, rgba(8,8,8,0.8) 100%);
}
.detail-hero-content {
  position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 1200px; padding: 0 1.5rem;
}
.detail-body { padding: 4.5rem 0; background: var(--ink); }
.detail-body-inner { max-width: 700px; }
.detail-tagline {
  font-family: var(--font-head); font-size: 0.68rem; letter-spacing: 4px; color: var(--gold); margin-bottom: 1.5rem;
}
.detail-desc { margin-bottom: 1.2rem; font-size: 0.98rem; }
.detail-features { margin: 2rem 0; display: flex; flex-direction: column; gap: 0.65rem; }
.detail-features li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.93rem; color: rgba(255,255,255,0.72); }
.detail-features i { color: var(--gold); font-size: 0.9rem; }
.target-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 2.5rem; }
.target-tag {
  font-family: var(--font-head); font-size: 0.62rem; letter-spacing: 1.5px;
  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.1); padding: 5px 13px; border-radius: 999px;
}
.detail-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════
   LEGAL PAGES
══════════════════════════════════════════════════════════════ */
.legal-page { padding-top: calc(var(--nav-h) + 3rem); padding-bottom: 5rem; background: var(--ink); min-height: 100vh; }
.legal-notice {
  background: rgba(197,160,89,0.08); border: 1px solid rgba(197,160,89,0.2); border-radius: var(--radius);
  padding: 0.9rem 1.25rem; margin-bottom: 2.5rem;
  font-size: 0.82rem; color: var(--muted); font-family: var(--font-head); letter-spacing: 1px;
}
.legal-notice i { color: var(--gold); margin-right: 0.5rem; }
.legal-content h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 0.5rem; }
.legal-content .legal-tag { margin-bottom: 2.5rem; display: block; }
.legal-content h2 {
  font-size: 1rem; font-family: var(--font-head); letter-spacing: 2px; color: var(--gold);
  margin: 2.5rem 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
}
.legal-content h3 { font-size: 0.9rem; font-family: var(--font-head); letter-spacing: 1.5px; color: rgba(255,255,255,0.7); margin: 1.5rem 0 0.5rem; }
.legal-content p  { font-size: 0.92rem; color: var(--muted); margin-bottom: 1rem; }
.legal-content ul { margin: 0.75rem 0 1rem 1.25rem; }
.legal-content ul li { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.4rem; list-style: disc; }
.legal-content a { color: var(--gold); text-decoration: underline; }
.legal-content a:hover { color: var(--gold-light); }
.legal-back { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; font-family: var(--font-head); font-size: 0.7rem; letter-spacing: 2px; color: var(--muted); transition: color 0.2s; }
.legal-back:hover { color: var(--gold); }

/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.55s var(--ease-expo), transform 0.55s var(--ease-expo); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.12s !important; }
.delay-2 { transition-delay: 0.22s !important; }
.delay-3 { transition-delay: 0.34s !important; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 1100px
══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  /* services-grid 1100px handled in base section above */
  .programs-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid   { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .team-grid     { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 900px (Tablet)
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root { --nav-h: 84px; }
  section { padding: clamp(60px, 6vw, 96px) 0; }

  .nav-links { display: none; }
  .burger    { display: flex; }

  .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .logo   { grid-column: 2; justify-self: center; }
  .burger { grid-column: 3; justify-self: end; }

  .intro-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .dna-inner   { grid-template-columns: 1fr; gap: 2rem; }
  .dna-visual  { display: none; }

  .early-bird-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .location-wrap    { grid-template-columns: 1fr; }
  .location-info    { padding: 3rem 1.5rem; }
  #map-frame        { min-height: 360px; }

  .coach-card { grid-template-columns: 1fr; }
  .coach-photo { height: 280px; min-height: auto; }
  .coach-info { padding: 1.5rem; }

  .hero-trust { gap: 0.75rem; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .footer-grid   { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-contactbar { flex-direction: column; gap: 0.4rem; }
  .footer-contactbar .dot { display: none; }
  .dna-stats { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .eb-prices { gap: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — 480px (Mobile)
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  :root { --nav-h: 150px; }
  section { padding: clamp(48px, 5vw, 72px) 0; }
  .container { padding: 0 1.25rem; }
  .logo-img { height: 130px !important; width: auto; }

  .hero-h1  { font-size: clamp(2.6rem, 11vw, 4rem); }
  .hero-content { padding-top: calc(var(--nav-h) + 0.75rem); padding-bottom: 3rem; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }
  .hero-eb-counter { font-size: 0.6rem; }
  .trust-divider { display: none; }
  .hero-trust { flex-direction: column; gap: 0.6rem; }

  .service-card  { height: 220px; }

  .dna-stats { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
  .stat-num  { font-size: 2rem; }

  .location-info { padding: 2.5rem 1.25rem; }
  .location-btns { flex-direction: column; }
  .location-btns .btn { width: 100%; }

  .detail-ctas { flex-direction: column; }
  .detail-ctas .btn { width: 100%; }

  .early-bird-inner .btn { width: 100%; }

  .footer-legal { flex-wrap: wrap; justify-content: center; gap: 1rem; }

  /* #quote and #community background-attachment:scroll moved to ≤900px block above */
}

/* ── Mobile logo sizing ─────────────────────────────────────── */
@media (max-width: 900px) {
  .logo-img { width: 195px; }
  .trust-strip-divider { display: none; }
  .trust-strip-inner  { gap: 1rem; }
  .trust-strip-item   { font-size: 0.58rem; }

  /* Disable fixed backgrounds on touch devices — iOS Safari never supported
     background-attachment:fixed on non-viewport elements; causes blur/jank */
  #quote, #community { background-attachment: scroll; }
}

@media (max-width: 480px) {
  .trust-strip-inner { flex-direction: column; gap: 0.6rem; }
  .trust-strip-item  { justify-content: center; }
}

/* ── Android / mobile: disable backdrop-filter to avoid rendering bugs ─── */
/* backdrop-filter is GPU-intensive and causes white-flash / blank rendering
   on older Android Chrome (Galaxy S20 and below). Safe to disable on mobile. */
@media (max-width: 900px) {
  #services, #intro, #booking, #faq {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--ink2) !important;
  }
  #intro  { background: var(--smoke) !important; }
  #faq    { background: var(--smoke) !important; }
  #faq.sec--faq-white { background: #f9f7f4 !important; } /* light variant keeps light bg on mobile */
  #booking{ background: var(--ink2)  !important; }
  .coach-card, .step-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ── Wide-screen (iMac / 4K) — expand nav + containers ─────── */
/* At 1440 CSS px the standard 1200px max-width leaves the logo
   visually far from the left edge. Step up gracefully.          */
@media (min-width: 1600px) {
  .nav-inner  { max-width: 1440px; }
  .container  { max-width: 1440px; }
  .logo-img   { width: 225px; }
}

/* ── Desktop hero: reorder text hierarchy (tagline above main headline) ── */
@media (min-width: 901px) {
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-eyebrow       { align-self: center; order: 0; }
  .hero-h1            { order: 1; }
  .hero-brand-tagline { order: 2; margin-top: 2.8rem; margin-bottom: 2rem; font-size: clamp(1.5rem, 3.5vw, 2.15rem); letter-spacing: 0.14em; }
  .hero-subtitle      { order: 3; }
  .hero-ctas          { order: 4; }
  .hero-credentials   { order: 5; }
}

/* ── 375px fine-tuning ──────────────────────────────────────── */
@media (max-width: 375px) {
  .hero-h1 { font-size: 2.8rem; }
  .logo-text { font-size: 1.3rem; }
  .eb-card-number { font-size: 4rem; }
}

/* ══════════════════════════════════════════════════════════════
   EARLY BIRD — PROGRESS BAR
══════════════════════════════════════════════════════════════ */
.eb-progress { margin: 1.5rem 0 0.5rem; }
.eb-progress-bar {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.eb-progress-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  transition: width 1.2s var(--ease-expo);
}
.eb-progress-meta {
  display: flex; justify-content: space-between; margin-top: 0.5rem;
  font-family: var(--font-head); font-size: 0.55rem; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.3);
}
.eb-progress-meta span:nth-child(2) { color: var(--gold); }

/* ══════════════════════════════════════════════════════════════
   MOBILE SCROLL-SNAP SLIDERS
   Services grid + Pricing grid both become horizontal sliders
   on mobile. CSS-only snap, no JS library needed.
══════════════════════════════════════════════════════════════ */

/* prog-tag: small inline sizing */
.prog-tag { font-size: 0.58rem !important; padding: 3px 10px !important; width: fit-content; }

/* Services grid is now always flex — breakpoint sizes handled in the base section */

/* ── Pricing slider (mobile) ───────────────────────────────── */
@media (max-width: 768px) {
  .programs-grid {
    display: flex !important;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 0 1.25rem 1rem;
    grid-template-columns: unset;
    scrollbar-width: none;
  }
  .programs-grid::-webkit-scrollbar { display: none; }
  .prog-card {
    flex: 0 0 78vw;
    max-width: 300px;
    min-width: 230px;
    scroll-snap-align: start;
  }
  .prog-cta { margin-top: auto; }
}

/* ── Slider dots ───────────────────────────────────────────── */
.slider-dots {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 1rem; min-height: 20px;
}
.slider-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.2); border: none; padding: 0;
  cursor: pointer; transition: background 0.25s, transform 0.25s;
}
.slider-dot.active {
  background: var(--gold); transform: scale(1.3);
}
/* Dots always show — carousel is universal now */
/* Hide dots only on very large screens if desired; currently kept visible */

/* ══════════════════════════════════════════════════════════════
   PRICING SECTION — mobile toggle overflow
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .age-toggle { overflow-x: auto; justify-content: flex-start; padding-bottom: 0.5rem; flex-wrap: nowrap; }
  .age-toggle::-webkit-scrollbar { display: none; }
  .atab { flex-shrink: 0; font-size: 0.62rem; }
  .enrollment-notice { font-size: 0.62rem; }
  .mehr-preise-btn { font-size: 0.64rem; }
  .mehr-preise-table { font-size: 0.78rem; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE NAV — CENTERED LOGO
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --nav-h: 150px; }

  .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    position: relative;
  }

  .logo-img { width: auto; height: 130px; }

  .burger {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    grid-column: 3;
    justify-self: end;
  }

  .back-btn.visible {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ══════════════════════════════════════════════════════════════
   HERO — MOBILE VERTICAL POSITIONING + SUBTITLE READABILITY
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #hero { align-items: flex-start; }
  .hero-content {
    padding-top: calc(var(--nav-h) + 0.25rem);
    padding-bottom: 2rem;
  }
  .hero-h1 { margin-bottom: 1.25rem; }
}
@media (max-width: 480px) {
  /* Remove vertical centering and section padding so content sits close under the header */
  #hero { align-items: flex-start; padding-top: 0; }
  .hero-content { padding-top: calc(var(--nav-h) + 1.25rem); padding-bottom: 2rem; }
}
/* Subtitle readability over background image */
.hero-subtitle {
  text-shadow: 0 1px 14px rgba(0,0,0,0.95), 0 0 32px rgba(0,0,0,0.7);
  color: rgba(255,255,255,0.92);
}

/* ══════════════════════════════════════════════════════════════
   DIFF BLOCK — REDUCE MOBILE WHITESPACE
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .diff-block { padding: 1.5rem 0; }
  .diff-item  { padding: 0.6rem 0; flex: none; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   INTRO SECTION — CENTER BUTTON ON MOBILE
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .intro-text .btn { display: block; max-width: 340px; margin: 0 auto; }
}

/* ══════════════════════════════════════════════════════════════
   TEAM — HORIZONTAL SCROLL SLIDER ON MOBILE
   scroll-snap-type: x proximity → soft, premium settling
   scroll-behavior: smooth → buttery native scroll
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .team-grid {
    display: flex !important;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 0 1.25rem 1.25rem;
    grid-template-columns: unset;
    scrollbar-width: none;
  }
  .team-grid::-webkit-scrollbar { display: none; }
  .coach-card {
    flex: 0 0 85vw;
    max-width: 400px;
    min-width: 280px;
    scroll-snap-align: start;
    grid-template-columns: 1fr;
  }
  /* Show upper body clearly — enough height for shoulders + face */
  .coach-photo { height: 300px; min-height: auto; }
}

/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS — HORIZONTAL SCROLL SLIDER ON TABLET + MOBILE
   scroll-snap-type: x proximity → softer, non-jerky settling
   will-change: transform → GPU layer for buttery motion
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .testimonial-grid {
    display: flex !important;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x proximity;  /* softer than mandatory */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 16px;
    padding: 0 1.25rem 1.5rem;
    grid-template-columns: unset;
    scrollbar-width: none;
  }
  .testimonial-grid::-webkit-scrollbar { display: none; }
  .testimonial-card {
    flex: 0 0 82vw;
    max-width: 420px;
    min-width: 280px;
    scroll-snap-align: center;   /* center snap feels less abrupt */
    will-change: transform;       /* GPU acceleration for smooth motion */
    scroll-snap-stop: normal;
  }
}
/* Testimonials dots — white dots on dark section */
#testimonials .slider-dot        { background: rgba(255,255,255,0.22); }
#testimonials .slider-dot.active { background: var(--gold); }

/* ══════════════════════════════════════════════════════════════
   PRICING — MEMBERSHIP CARD (NEW LAYOUT)
══════════════════════════════════════════════════════════════ */
#pricing-display { margin-bottom: 2rem; }

.membership-card {
  max-width: 560px; margin: 0 auto;
  background: var(--smoke); border: 1px solid rgba(198,164,90,0.25);
  border-radius: var(--radius-lg); padding: 2.75rem 2.75rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(198,164,90,0.08);
}
.membership-duration-tabs {
  display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.dtab-inner {
  font-family: var(--font-head); font-size: 0.65rem; letter-spacing: 1.5px;
  color: var(--muted); background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 999px;
  padding: 0.5rem 1.1rem; cursor: pointer; transition: all 0.25s; white-space: nowrap;
}
.dtab-inner:hover, .dtab-inner.active {
  background: rgba(197,160,89,0.15); border-color: var(--gold); color: var(--gold);
}
.membership-price-display {
  text-align: center; margin-bottom: 2rem;
}
.membership-price-main {
  display: flex; align-items: baseline; gap: 0.4rem; justify-content: center; margin-bottom: 0.75rem;
}
.mp-amount { font-family: var(--font-display); font-size: 4.5rem; color: var(--gold); line-height: 1; }
.mp-unit   { font-family: var(--font-head); font-size: 0.72rem; letter-spacing: 1.5px; color: var(--muted); }
.mp-savings {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(197,160,89,0.12); border: 1px solid rgba(197,160,89,0.25);
  border-radius: 999px; padding: 0.35rem 0.9rem;
  font-family: var(--font-head); font-size: 0.62rem; letter-spacing: 1.5px; color: var(--gold);
}
.mp-savings-empty { height: 1.5rem; } /* keeps layout stable when no savings badge */
.mp-regular-price-row {
  display: flex; align-items: baseline; gap: 0.3rem; justify-content: center; margin-bottom: 0.25rem;
}
.mp-regular-price {
  font-family: var(--font-display); font-size: 1.4rem; color: var(--muted);
  text-decoration: line-through; opacity: 0.6; line-height: 1;
}
.mp-regular-unit {
  font-family: var(--font-head); font-size: 0.65rem; letter-spacing: 1.5px; color: var(--muted); opacity: 0.6;
}
.mp-early-bird-label {
  font-family: var(--font-head); font-size: 0.6rem; letter-spacing: 2px;
  color: var(--gold); background: rgba(197,160,89,0.12); border: 1px solid rgba(197,160,89,0.3);
  border-radius: 999px; padding: 0.2rem 0.6rem; margin-left: 0.35rem; white-space: nowrap;
  align-self: center;
}
.membership-benefits {
  list-style: none; display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.75rem;
}
.membership-benefits li {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.9rem; color: rgba(255,255,255,0.75);
}
.membership-benefits li i { color: var(--gold); font-size: 0.78rem; flex-shrink: 0; }
.membership-enrollment {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-head); font-size: 0.64rem; letter-spacing: 1px;
  color: var(--muted); padding: 0.7rem 0.9rem; margin-bottom: 1.5rem;
  background: rgba(255,255,255,0.04); border-radius: var(--radius);
}
.membership-enrollment i { color: var(--gold); }

/* Addon cards (PT + Corporate) below family benefit block */
.membership-addon-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
  max-width: 560px; margin: 2.5rem auto 0;
}
.addon-card {
  background: var(--smoke); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg); padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.addon-icon { color: var(--gold); font-size: 1.2rem; }
.addon-name { font-family: var(--font-display); font-size: 0.95rem; color: var(--white); }
.addon-price {
  font-family: var(--font-display); font-size: 1.4rem; color: var(--gold); line-height: 1;
}
.addon-price span { font-family: var(--font-head); font-size: 0.6rem; color: var(--muted); }
.addon-card p   { font-size: 0.8rem; color: var(--muted); flex: 1; }
.addon-card .btn { margin-top: auto; }

/* Mehr-preise nav button */
.mehr-preise-nav { text-align: center; margin-top: 1.5rem; }
.mehr-preise-nav .mehr-preise-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.mehr-preise-nav .mehr-preise-btn i { font-size: 0.8rem; transition: transform 0.25s; }
.mehr-preise-nav .mehr-preise-btn:hover i { transform: translateX(4px); }

@media (max-width: 580px) {
  .membership-card { padding: 1.75rem 1.25rem; }
  .mp-amount { font-size: 2.75rem; }
  .membership-addon-grid { grid-template-columns: 1fr; }
  .membership-duration-tabs { gap: 0.3rem; }
  .dtab-inner { font-size: 0.6rem; padding: 0.45rem 0.85rem; }
}

/* ══════════════════════════════════════════════════════════════
   WEITERE PREISE PAGE VIEW
══════════════════════════════════════════════════════════════ */
.mehr-preise-page {
  min-height: 100vh;
  background: #f5f4f1;
  padding: calc(var(--nav-h) + 3.5rem) 0 5rem;
}
.mehr-preise-page h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--ink);
}
.mehr-preise-page p { color: rgba(8,8,8,0.55); }
.mehr-preise-page .legal-back { color: rgba(8,8,8,0.8); font-size: 0.78rem; margin-bottom: 2.5rem; }
.mehr-preise-page .legal-back:hover { color: var(--gold-dark); }
.mehr-preise-page .tag--dark {
  background: rgba(8,8,8,0.07);
  color: rgba(8,8,8,0.6);
  border-color: rgba(8,8,8,0.12);
}
/* Table on light bg */
.mehr-preise-page .mehr-preise-table-wrap {
  border-color: rgba(8,8,8,0.10);
  background: #fff;
  box-shadow: 0 4px 32px rgba(0,0,0,0.06);
}
.mehr-preise-page .mehr-preise-table thead tr {
  background: rgba(160,124,58,0.08);
  border-bottom-color: rgba(8,8,8,0.08);
}
.mehr-preise-page .mehr-preise-table th { color: var(--gold-dark); }
.mehr-preise-page .mehr-preise-table td {
  color: rgba(8,8,8,0.70);
  border-bottom-color: rgba(8,8,8,0.06);
}
.mehr-preise-page .mehr-preise-table tbody tr:hover td {
  background: rgba(160,124,58,0.04);
}
.mehr-preise-page .mehr-preise-table td strong { color: var(--ink); }
.mehr-preise-page .mehr-preise-table td .price-em { color: var(--gold-dark); }
.mehr-preise-page .mehr-preise-table td a { color: var(--gold-dark); }

/* ══════════════════════════════════════════════════════════════
   LAYOUT STABILITY — overflow & CLS fixes
══════════════════════════════════════════════════════════════ */
/* Prevent horizontal overflow from sliders affecting page width.
   NOTE: overflow-x:hidden removed from .view — it created a scroll container
   that broke position:sticky on disc-panels. body{overflow-x:hidden} handles
   horizontal overflow protection at the viewport level instead. */
.view { min-height: 100vh; }
/* Stable image containers — prevent CLS */
.coach-photo img  { background: var(--smoke); }
.intro-brand-logo { background: transparent; }

/* ══════════════════════════════════════════════════════════════
   PREMIUM LAYOUT — SECTION RHYTHM & CONTRAST
   Hero (#0b0b0b) → Diff/Features (anthracite) → …
   Meet the Champions (deep black) → Pricing (off-white #f7f7f7)
   → Testimonials (anthracite) → Footer (deep black)
══════════════════════════════════════════════════════════════ */

/* ── Hero — deep black ───────────────────────────────── */
#hero { background: var(--ink-deep); }

/* ── Pricing Section → Off-White Premium ───────────── */
#pricing { background: #f7f7f7 !important; }

/* Section header — premium gold badge for membership */
#pricing .sec-header .tag {
  background: rgba(197,160,89,0.12);
  color: var(--gold-dark);
  border-color: rgba(197,160,89,0.45);
}

/* Divider above membership section */
#pricing .sec-header::before {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: rgba(197,160,89,0.4);
  margin: 0 auto 1.75rem;
}
#pricing .sec-header h2 { color: var(--ink) !important; }
#pricing .sec-header .gold { color: var(--gold-dark) !important; }
#pricing .sec-header p { color: rgba(8,8,8,0.5) !important; }

/* Age toggle tabs on light bg */
#pricing .atab {
  color: rgba(8,8,8,0.55);
  background: rgba(8,8,8,0.05);
  border-color: rgba(8,8,8,0.1);
}
#pricing .atab:hover,
#pricing .atab.active {
  background: rgba(160,124,58,0.1);
  border-color: var(--gold-dark);
  color: var(--gold-dark);
}

/* Enrollment notice on light bg */
#pricing .enrollment-notice {
  background: rgba(160,124,58,0.07);
  border-color: rgba(160,124,58,0.18);
  color: rgba(8,8,8,0.5);
}
#pricing .enrollment-notice strong { color: var(--gold-dark); }

/* Membership card on light bg */
#pricing .membership-card {
  background: #ffffff;
  border-color: rgba(197,160,89,0.22);
  box-shadow: 0 4px 32px rgba(0,0,0,0.07);
}
#pricing .dtab-inner {
  color: rgba(8,8,8,0.5);
  background: rgba(8,8,8,0.05);
  border-color: rgba(8,8,8,0.1);
}
#pricing .dtab-inner:hover,
#pricing .dtab-inner.active {
  background: rgba(160,124,58,0.1);
  border-color: var(--gold-dark);
  color: var(--gold-dark);
}
#pricing .mp-amount { color: var(--gold-dark); }
#pricing .mp-unit   { color: rgba(8,8,8,0.45); }
#pricing .mp-regular-price { color: rgba(8,8,8,0.55); }
#pricing .mp-regular-unit  { color: rgba(8,8,8,0.45); }
#pricing .mp-early-bird-label {
  color: var(--gold-dark); background: rgba(160,124,58,0.1); border-color: rgba(160,124,58,0.25);
}
#pricing .mp-savings {
  background: rgba(160,124,58,0.1);
  border-color: rgba(160,124,58,0.22);
  color: var(--gold-dark);
}
#pricing .mp-savings-empty { height: 1.5rem; }
#pricing .membership-benefits li { color: rgba(8,8,8,0.72); }
#pricing .membership-benefits li i { color: var(--gold-dark); }
#pricing .membership-enrollment {
  background: rgba(8,8,8,0.04);
  color: rgba(8,8,8,0.55);
}
#pricing .membership-enrollment i { color: var(--gold-dark); }

/* Addon cards on light bg */
#pricing .addon-card {
  background: #ffffff;
  border-color: rgba(8,8,8,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
#pricing .addon-icon  { color: var(--gold-dark); }
#pricing .addon-name  { color: var(--ink); }
#pricing .addon-price { color: var(--gold-dark); }
#pricing .addon-price span { color: rgba(8,8,8,0.4); }
#pricing .addon-card > p { color: rgba(8,8,8,0.55); }

/* Outline button fix on light bg */
#pricing .btn--outline-light {
  color: var(--ink);
  border-color: rgba(8,8,8,0.2);
}
#pricing .btn--outline-light:hover {
  background: rgba(8,8,8,0.06);
  border-color: var(--gold-dark);
  color: var(--gold-dark);
}

/* Mehr-Preise nav button on light bg */
#pricing .mehr-preise-nav { margin-top: 2rem; }
#pricing .mehr-preise-btn {
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(8,8,8,0.68);
  background: rgba(160,124,58,0.07);
  border: 1.5px solid rgba(160,124,58,0.38);
  border-radius: 999px;
  padding: 0.7rem 1.75rem;
  cursor: pointer;
  transition: all 0.25s;
}
#pricing .mehr-preise-btn:hover {
  background: rgba(160,124,58,0.13);
  border-color: var(--gold-dark);
  color: var(--gold-dark);
  transform: translateY(-1px);
}

/* Pricing footer on light bg */
#pricing .pricing-footer { border-top-color: rgba(8,8,8,0.08); }
#pricing .pricing-footer p { color: rgba(8,8,8,0.4); }

/* ── Family Benefit Trigger ─────────────────────────────── */
.family-benefit-trigger {
  margin: 1.5rem 0;
  padding: 1rem 1.1rem 1rem 0.9rem;
  background: rgba(197,160,89,0.10);
  border: 1px solid rgba(160,124,58,0.40);
  border-left: 3px solid rgba(160,124,58,0.65);
  border-radius: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fbt-label {
  font-family: var(--font-head);
  font-size: 0.62rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(160,124,58,0.12);
  border: 1px solid rgba(160,124,58,0.32);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  align-self: flex-start;
  white-space: nowrap;
}
.fbt-desc {
  font-size: 0.86rem;
  color: rgba(8,8,8,0.68);
  line-height: 1.55;
}
.fbt-cta {
  font-family: var(--font-head);
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
  opacity: 0.9;
  transition: opacity 0.2s;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(160,124,58,0.45);
}
.fbt-cta:hover { opacity: 1; }

/* ── Corporate Boxing Modal Overlay ─────────────────────── */
#corporate-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(8,8,8,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
#corporate-modal.open {
  opacity: 1;
  pointer-events: auto;
}
#corporate-modal.open .family-modal-card {
  transform: translateY(0);
}

/* ── Family Modal Overlay ────────────────────────────────── */
#family-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(8,8,8,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
#family-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.family-modal-card {
  position: relative;
  background: #faf9f6;
  border: 1px solid rgba(160,124,58,0.28);
  border-radius: 1.25rem;
  box-shadow: 0 24px 72px rgba(0,0,0,0.18), 0 4px 16px rgba(160,124,58,0.1);
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 3rem 2.5rem 2.5rem;
  transform: translateY(20px);
  transition: transform 0.35s var(--ease-expo);
  -webkit-overflow-scrolling: touch;
}
#family-modal.open .family-modal-card {
  transform: translateY(0);
}
.family-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,8,8,0.06);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(8,8,8,0.45);
  font-size: 0.85rem;
  transition: background 0.2s, color 0.2s;
}
.family-modal-close:hover {
  background: rgba(8,8,8,0.1);
  color: rgba(8,8,8,0.75);
}
.family-modal-header { text-align: center; margin-bottom: 1.75rem; }
.family-modal-body   { margin-bottom: 2rem; }

/* ── Shared: modal uses existing family-* typography classes ── */
.family-label {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.67rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(160,124,58,0.1);
  border: 1px solid rgba(160,124,58,0.22);
  border-radius: 999px;
  padding: 0.3rem 1rem;
  margin-bottom: 1.25rem;
}
.family-headline {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.55rem;
}
.family-sub {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(8,8,8,0.38);
  margin: 0 0 1.75rem;
}
.family-desc {
  font-size: 0.9rem;
  color: rgba(8,8,8,0.58);
  line-height: 1.75;
  max-width: 420px;
  margin: 0 auto 1.75rem;
}
.family-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: center;
}
.family-bullets li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-size: 0.73rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(8,8,8,0.62);
}
.family-bullets li i { color: var(--gold-dark); font-size: 0.72rem; }

/* ── Family Inquiry Form ────────────────────────────────────── */
.family-inquiry-form { display: flex; flex-direction: column; gap: 1rem; }
.fif-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fif-field { display: flex; flex-direction: column; gap: 0.35rem; }
.fif-field label {
  font-family: var(--font-head);
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(8,8,8,0.5);
}
.fif-field input,
.fif-field select,
.fif-field textarea {
  background: #ffffff;
  border: 1px solid rgba(8,8,8,0.14);
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.fif-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a07c3a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2rem;
}
.fif-field input:focus,
.fif-field select:focus,
.fif-field textarea:focus {
  border-color: rgba(160,124,58,0.5);
  box-shadow: 0 0 0 3px rgba(160,124,58,0.08);
}
.fif-field textarea { resize: vertical; min-height: 80px; }
.fif-field--radio .fif-radio-group {
  display: flex;
  gap: 0.75rem;
  padding: 0.35rem 0;
}

/* Card-style radio option */
.fif-radio-card {
  flex: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Hide the native radio but keep it accessible */
.fif-radio-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* The visible box */
.fif-radio-card__box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 1rem;
  background: #ffffff;
  border: 1.5px solid rgba(8,8,8,0.14);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  user-select: none;
  -webkit-user-select: none;
  min-height: 2.75rem;
  width: 100%;
  box-sizing: border-box;
}

/* Checkmark — hidden by default */
.fif-radio-card__check {
  display: none;
  color: var(--gold-dark);
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 700;
}

/* Hover state */
.fif-radio-card:hover .fif-radio-card__box {
  border-color: rgba(160,124,58,0.45);
}

/* Selected state — triggered when the hidden radio is checked */
.fif-radio-card input[type="radio"]:checked + .fif-radio-card__box {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(160,124,58,0.12);
  background: rgba(160,124,58,0.04);
}

.fif-radio-card input[type="radio"]:checked + .fif-radio-card__box .fif-radio-card__check {
  display: inline;
}

/* Focus ring for keyboard users */
.fif-radio-card input[type="radio"]:focus-visible + .fif-radio-card__box {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
}

.fif-required {
  color: var(--gold-dark);
  margin-left: 0.15em;
}
.fif-error {
  display: block;
  font-size: 0.73rem;
  color: #c0392b;
  min-height: 1em;
  line-height: 1.3;
}
.fif-field input.fif-input-error,
.fif-field textarea.fif-input-error {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192,57,43,0.08);
}
.fif-trust {
  font-size: 0.78rem;
  color: rgba(8,8,8,0.45);
  text-align: center;
  margin: 0.25rem 0 0;
}
.fif-pflichtfelder {
  font-size: 0.7rem;
  color: rgba(8,8,8,0.35);
  text-align: right;
  margin: 0;
}
.fif-success {
  text-align: center;
  padding: 2rem 1rem 1rem;
}
.fif-success-icon {
  font-size: 2.5rem;
  margin: 0 0 0.75rem;
}
.fif-success-title {
  font-family: var(--font-head);
  font-size: 1.2rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.75rem;
}
.fif-success-text {
  font-size: 0.9rem;
  color: rgba(8,8,8,0.58);
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 540px) {
  .family-modal-card { padding: 2.5rem 1.5rem 2rem; }
  .fif-row { grid-template-columns: 1fr; }
  .family-benefit-trigger { padding: 0.9rem 0.9rem 0.9rem 0.75rem; }
}

/* ── Modal Card Wrapper (scroll-fade container) ──────────── */
.modal-card-wrapper {
  position: relative;
  max-width: 540px;
  width: 100%;
}

/* Bottom gradient fade — signals scrollable content below */
.modal-scroll-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: linear-gradient(to bottom, rgba(250,249,246,0) 0%, rgba(250,249,246,0.96) 100%);
  border-radius: 0 0 1.25rem 1.25rem;
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0.7rem;
  transition: opacity 0.35s;
}
.modal-scroll-fade__hint {
  font-family: var(--font-head);
  font-size: 0.58rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(160,124,58,0.72);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
/* Hide fade when user has scrolled to bottom */
.modal-card-wrapper.at-bottom .modal-scroll-fade {
  opacity: 0;
}

/* ── Family Form: dynamic member-name fields ─────────────── */
.fif-member-names {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── Family Form: conditional address section ────────────── */
.fif-address-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  background: rgba(160,124,58,0.04);
  border: 1px solid rgba(160,124,58,0.2);
  border-radius: 8px;
}
.fif-address-label {
  font-family: var(--font-head);
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(8,8,8,0.5);
  margin: 0;
}

/* ── Testimonials Section → Cream (unified with FAQ / Team) ─────────── */
#testimonials { background: #f9f7f4 !important; }
#testimonials::before { background: transparent !important; }

#testimonials .tag--light-inv {
  background: rgba(197,160,89,0.1);
  color: var(--gold-dark);
  border-color: rgba(197,160,89,0.25);
}
#testimonials .sec-header h2 { color: var(--ink) !important; }
#testimonials .sec-header .gold-dark { color: var(--gold-dark) !important; }
#testimonials .sec-header p { color: rgba(20,20,20,0.6) !important; }

#testimonials .testimonial-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
#testimonials .testimonial-stars { color: var(--gold); }
#testimonials .testimonial-card > p { color: rgba(20,20,20,0.65); }
#testimonials .testimonial-author { border-top-color: rgba(0,0,0,0.08); }
#testimonials .testimonial-author strong { color: var(--ink); }
#testimonials .testimonial-author span  { color: rgba(20,20,20,0.45); }
#testimonials .testimonial-avatar { background: var(--gold); color: var(--ink); }

/* Slider dots — dark on cream */
#testimonials .slider-dot        { background: rgba(0,0,0,0.18); }
#testimonials .slider-dot.active { background: var(--gold); }

/* Google Bewertung badge — readable on cream */
#testimonials .google-rating {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
}
#testimonials .google-rating-stars { color: #e8a000; }
#testimonials .google-rating-score { color: var(--ink); }
#testimonials .google-rating-label { color: rgba(20,20,20,0.55); }

/* ── Subtle section separators for visual rhythm ────── */
#intro     { border-bottom: 1px solid rgba(255,255,255,0.04); }
#dna       { border-bottom: 1px solid rgba(255,255,255,0.04); }
#services  { border-bottom: 1px solid rgba(255,255,255,0.04); }
#team      { border-bottom: 1px solid rgba(0,0,0,0.06); }
/* Team on cream — suppress dark top-gradient, darken section-header text */
#team::before { background: transparent !important; }
#team .sec-header h2 { color: var(--ink); }
#team .sec-header h2 .gold { color: var(--gold-dark); }
/* Force coach cards to use a solid dark background so white/gold text
   remains fully readable against the cream section canvas */
#team .coach-card {
  background: var(--smoke) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#weg       { border-bottom: 1px solid rgba(255,255,255,0.04); }
#early-bird{ border-bottom: none; } /* section flows without hard line */

/* ── Slightly brighter body text in dark sections ────── */
#intro p, #dna p, #services p, #weg p, #early-bird p,
#faq .faq-a-inner { color: rgba(255,255,255,0.72); }

/* ── Mobile: compact diff-block already set above;
   ensure pricing sec-header adjusts on small screens ── */
@media (max-width: 580px) {
  #pricing .membership-card { padding: 1.5rem 1rem; }
  #pricing .mp-amount { font-size: 2.5rem; }
}

/* ── Why-bomaye card hover shadow stays crisp on light bg */
#why-bomaye .why-card { box-shadow: 0 2px 16px rgba(0,0,0,0.07); }
#why-bomaye .why-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.12); }

/* ══════════════════════════════════════════════════════════════
   GLASS SECTIONS — premium layered aesthetic
   Applied to alternating sections; solid sections kept for
   contrast rhythm: dna / team / testimonials / early-bird stay
   opaque to anchor the visual weight.
══════════════════════════════════════════════════════════════ */

/* intro — first content section after hero */
#intro {
  background: rgba(0,0,0,0.60) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

/* services — softer charcoal glass */
#services {
  background: rgba(0,0,0,0.60) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* booking — CTA block above footer */
#booking {
  background: rgba(0,0,0,0.60) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(198,164,90,0.12);
}

/* faq — premium glass */
#faq {
  background: rgba(0,0,0,0.60) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(198,164,90,0.10);
  border-bottom: 1px solid rgba(198,164,90,0.10);
}

/* Glass cards within solid sections for layered depth */
.coach-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.step-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* early-bird-inner: no glass box — content flows open into the section */

/* ══════════════════════════════════════════════════════════════
   DISCIPLINES SECTION — Basement-style Stacked Card Scroll
   Pattern: floating rounded cards with staggered sticky offsets.
   ─ Each card sticks at: navH + (index × --disc-peek)
   ─ This creates a card-deck fan: as Card N+1 rises, Card N's
     top strip (--disc-peek px) remains visible above it.
   ─ Cards are compact (~62svh) — immersive, not full-screen.
   ─ Side margins on .disc-stack let the dark background show,
     reinforcing the "floating card" shape with rounded corners.
   No scroll-jacking. Purely CSS-driven depth.
══════════════════════════════════════════════════════════════ */
#disciplines {
  background: var(--ink);
  padding-bottom: 3rem;
}

/* ── Stack container: side padding creates card floating margins ── */
.disc-stack {
  position: relative;
  padding: 0 1rem; /* left/right margins so cards float off the edge */
}

/* ── Individual card ── */
.disc-panel {
  position: sticky;
  /* Premium card height — compact editorial, 44vh sweet spot */
  height: 44svh;
  height: 44vh; /* svh fallback */
  overflow: hidden;
  border-radius: 18px;              /* card shape */
  box-shadow: 0 16px 56px rgba(0,0,0,0.60); /* ambient card lift shadow */
  transform-origin: top center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Staggered sticky tops — the card-deck fan effect:
   Card 1 sticks at navH.
   Card 2 sticks at navH + peekH, so Card 1's top peekH strip is visible.
   Card 3 sticks at navH + 2×peekH, so Card 2's top strip is visible.  */
.disc-panel:nth-child(1) { top: var(--nav-h);                                      z-index: 1; }
.disc-panel:nth-child(2) { top: calc(var(--nav-h) + var(--disc-peek));             z-index: 2; }
.disc-panel:nth-child(3) { top: calc(var(--nav-h) + var(--disc-peek) * 2);        z-index: 3; }

/* Dwell margin: scroll distance before the next card begins rising */
.disc-panel:not(:last-child) { margin-bottom: 14vh; }

/* Compositor layer promotion for JS-driven scale/opacity */
.disc-panel:not(:last-child) { will-change: transform, opacity; }

/* ── Background image layer ── */
.disc-panel__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
}
/* Gradient overlay:
   Bottom-to-top — strong at text zone, fades toward top for image impact.
   Left-edge darkener — consistent dark backdrop for kicker/title. */
.disc-panel__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,8,8,0.50) 0%, rgba(8,8,8,0.00) 55%),
    linear-gradient(to top,
      rgba(8,8,8,0.97) 0%,
      rgba(8,8,8,0.75) 25%,
      rgba(8,8,8,0.32) 58%,
      rgba(8,8,8,0.18) 100%
    );
}

/* ── Content layer — bottom-left aligned, cinematic ── */
.disc-panel__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem clamp(1.25rem, 4.5vw, 3rem) clamp(1.75rem, 3.5vh, 3rem);
  z-index: 1;
}

/* ── Panel counter / kicker ── */
.disc-panel__kicker {
  display: block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

/* ── Discipline title — compact editorial scale ── */
.disc-panel__title {
  font-family: var(--font-display);
  /* Reduced from clamp(3rem,7.5vw,6rem) — proportionate for compact card */
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  color: #fff;
  line-height: 0.92;
  letter-spacing: 0.02em;
  margin: 0 0 0.75rem;
  text-shadow: 0 4px 24px rgba(0,0,0,0.50);
}
/* Gold accent bar beneath title */
.disc-panel__title::after {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--gold);
  margin-top: 0.75rem;
}

/* ── Description ── */
.disc-panel__desc {
  font-size: clamp(0.85rem, 1.2vw, 0.975rem);
  color: rgba(255,255,255,0.80);
  line-height: 1.65;
  max-width: 400px;
  margin-bottom: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.40);
}

/* ── Post-stack CTA ── */
.disciplines-cta { padding: 2.5rem 0; }

/* ── Tablet (481px – 768px): slightly shorter cards, same sticky logic ── */
@media (max-width: 768px) {
  .disc-panel {
    height: 46svh;
    height: 46vh;
    /* Reduce dwell slightly on narrower screens */
    margin-bottom: 12vh;
  }
  .disc-panel__content { padding-bottom: clamp(1.5rem, 3vh, 2.5rem); }
}

/* ── Phone (≤480px): disable sticky — sequential tall cards ──
   Reason: iOS momentum scroll with sticky full-height cards causes
   address-bar resize jank and scroll trapping. Cards shown as
   vertical list with border-radius and 1rem gap between them.       */
@media (max-width: 480px) {
  :root { --disc-peek: 0px; } /* no sticky offset on mobile */
  .disc-stack { padding: 0 0.875rem; }
  .disc-panel {
    position: relative;
    top: auto;
    height: auto;
    min-height: 46svh;
    min-height: 46vh;
    border-radius: 14px;
    /* Replace dwell margin with a tight card gap */
    margin-bottom: 1rem !important;
  }
  .disc-panel__title { font-size: clamp(2.2rem, 10.5vw, 2.8rem); }
  .disc-panel__desc  { font-size: 0.9rem; }
  .disc-panel__content { padding: 1.5rem 1.25rem 2rem; }
}

/* ══════════════════════════════════════════════════════════════
   GOOGLE RATING BADGE
══════════════════════════════════════════════════════════════ */
.google-rating {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: rgba(8,8,8,0.06); border: 1px solid rgba(8,8,8,0.1);
  border-radius: 999px; padding: 0.55rem 1.4rem;
  margin: 1rem auto 0; flex-wrap: wrap; justify-content: center;
}
.google-rating-stars { color: #f4b400; font-size: 1.05rem; letter-spacing: 2px; }
.google-rating-score {
  font-family: var(--font-display); font-size: 1.4rem; color: var(--ink);
  line-height: 1;
}
.google-rating-label {
  font-family: var(--font-head); font-size: 0.6rem; letter-spacing: 2px;
  color: rgba(8,8,8,0.5); text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════
   BOOKING SECTION — trust list + CTA
══════════════════════════════════════════════════════════════ */
.booking-trust {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; flex-wrap: wrap; margin: 1.5rem 0 0;
}
.booking-trust-item {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-head); font-size: 0.65rem; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.55);
}
.booking-trust-item i { color: var(--gold); }
.booking-cta-btn {
  margin-top: 2rem !important;
  font-size: 0.88rem !important;
  padding: 1rem 2.5rem !important;
  box-shadow: 0 8px 32px rgba(197,160,89,0.25);
}
.booking-cta-btn:hover {
  box-shadow: 0 12px 40px rgba(197,160,89,0.45) !important;
}
@media (max-width: 600px) {
  .booking-trust { flex-direction: column; gap: 0.75rem; }
  .booking-cta-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   SECTION TRANSITIONS — gradient fades & gold dividers
══════════════════════════════════════════════════════════════ */

/* Shared pseudo-element base for section edge fades.
   #early-bird is excluded — it has its own ::before (ambient gold glow)
   and already has position:relative in its own rule. */
#disciplines::before,
#intro::before, #dna::before,
#services::before, #bomaye-standard::before, #team::before,
#testimonials::before, #weg::before,
#faq::before, #booking::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(8,8,8,0.45), transparent);
  pointer-events: none;
  z-index: 0;
}
#disciplines,
#intro, #dna, #services, #bomaye-standard, #team,
#testimonials, #weg,
#faq, #booking {
  position: relative;
}

/* Gold divider lines — between major section groups */

/* After hero diff-block → before intro */
.diff-block::after,
#dna::after,
#team::after,
#early-bird::after,
#faq::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: min(640px, 80%);
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(197,160,89,0.38),
    transparent
  );
  pointer-events: none;
}
.diff-block { position: relative; }

/* Bottom fade-out on image-backed sections so they melt into next */
#quote::after,
#community::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100px;
  background: linear-gradient(to bottom, transparent, rgba(8,8,8,0.92));
  pointer-events: none;
}

/* Hero section itself gets a stronger bottom fade via the overlay —
   already handled above. Extra pixel-perfect seal: */
#hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #080808);
  pointer-events: none;
}

/* Keep section content above pseudo-elements */
#disciplines > *,
#intro > *, #dna > *, #services > *, #team > *,
#testimonials > *, #weg > *, #early-bird > *,
#faq > *, #booking > * {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   DIFF BLOCK — MOBILE CENTER ALIGNMENT
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .diff-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 1.5rem;
  }
  .diff-item div { align-items: center; }
  .diff-item i   { margin-top: 0; }
}

/* ══════════════════════════════════════════════════════════════
   COACH CARDS — MOBILE IMAGE FRAMING
   Use !important to beat the team-slider height (240px) set earlier.
   object-position: 50% 0% (= top) ensures head + upper body visible.
══════════════════════════════════════════════════════════════ */
#team-slider { scroll-behavior: smooth; }
@media (max-width: 900px) {
  .coach-photo          { height: 340px !important; min-height: 340px !important; }
  .coach-photo img      { object-fit: cover; object-position: 50% 0% !important; }
}
@media (max-width: 600px) {
  .coach-photo          { height: 300px !important; min-height: 300px !important; }
}
@media (max-width: 380px) {
  .coach-photo          { height: 270px !important; min-height: 270px !important; }
}

/* ══════════════════════════════════════════════════════════════
   GOOGLE RATING — CREAM SECTION (testimonials is now #f9f7f4)
══════════════════════════════════════════════════════════════ */
#testimonials .google-rating {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.12);
}
#testimonials .google-rating-score {
  color: var(--ink) !important;
}
#testimonials .google-rating-label {
  color: rgba(20,20,20,0.7) !important;
}

/* ══════════════════════════════════════════════════════════════
   PRICING TABS — MOBILE GRID (no horizontal scroll)
   Applied at ≤640px so tabs never need horizontal swiping.
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .age-toggle {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible !important;
    flex-wrap: unset;
    gap: 0.35rem;
    padding-bottom: 0;
    justify-content: unset;
  }
  .atab {
    font-size: 0.58rem !important;
    padding: 0.65rem 0.3rem !important;
    letter-spacing: 0.75px !important;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
  }
}
/* Fine-tune even smaller screens */
@media (max-width: 360px) {
  .atab {
    font-size: 0.52rem !important;
    padding: 0.55rem 0.2rem !important;
    letter-spacing: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   QUOTE SECTION — MOBILE SCROLL REVEAL ANIMATION
   Desktop uses background-attachment:fixed (parallax).
   Mobile uses an IntersectionObserver-driven class 'in-view'
   that triggers a premium fade + subtle scale reveal.
══════════════════════════════════════════════════════════════ */
#quote .container { transition: opacity 0.9s var(--ease-expo), transform 0.9s var(--ease-expo); }

@media (max-width: 768px) {
  #quote .container {
    opacity: 0;
    transform: scale(0.97) translateY(16px);
  }
  #quote.quote-visible .container {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  /* Add a subtle gold glow line that appears below the quote */
  #quote.quote-visible::after {
    opacity: 0.7;
  }
}

/* ══════════════════════════════════════════════════════════════
   TEAM SLIDER DOTS — SHOW AT ≤900px
   The team slider activates at ≤900px; dots should follow.
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #team-dots { display: flex !important; }
}

/* ══════════════════════════════════════════════════════════════
   HERO TRUST ITEMS — SLIGHTLY HIGHER OPACITY FOR READABILITY
══════════════════════════════════════════════════════════════ */
.hero-trust-item {
  color: rgba(255,255,255,0.70) !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO CTA — SMALL SCREEN (≤375px) PREVENT CLIPPING
══════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  .hero-ctas .btn {
    font-size: 0.68rem !important;
    letter-spacing: 1.2px !important;
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   CINEMATIC SECTION DIVIDERS
   Glowing gold hairlines at key section transitions
══════════════════════════════════════════════════════════════ */
#why-bomaye, #services, #pricing { position: relative; }

/* hero → services (placed after #why-bomaye, last section before #services) */
#why-bomaye::after,
/* services → membership */
#services::after,
/* membership → testimonials path */
#pricing::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: min(720px, 88%);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(197,160,89,0.22) 15%,
    rgba(197,160,89,0.70) 40%,
    rgba(214,178,108,0.90) 50%,
    rgba(197,160,89,0.70) 60%,
    rgba(197,160,89,0.22) 85%,
    transparent 100%
  );
  box-shadow: 0 0 14px rgba(197,160,89,0.35);
  pointer-events: none;
  z-index: 2;
}

/* ── Social proof notification (added by UI pass) ──────────── */
#social-proof-toast {
  position: fixed;
  bottom: 1.75rem;
  left: 1.5rem;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(14,12,8,0.92);
  border: 1px solid rgba(197,160,89,0.35);
  border-radius: 12px;
  padding: 0.75rem 1.1rem;
  max-width: 280px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(197,160,89,0.08);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s var(--ease-expo), transform 0.45s var(--ease-expo);
  pointer-events: none;
}
#social-proof-toast.sp-visible {
  opacity: 1;
  transform: translateY(0);
}
.sp-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; color: var(--ink);
}
.sp-text {
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.88);
}
.sp-text strong {
  display: block;
  color: var(--gold-light);
  font-size: 0.68rem;
  font-family: var(--font-head);
  letter-spacing: 1px;
  margin-bottom: 0.1rem;
}
@media (max-width: 480px) {
  #social-proof-toast { max-width: 240px; left: 1rem; bottom: 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════
   BOMAYE STANDARD — AUTHORITY SECTION
══════════════════════════════════════════════════════════════ */
.standard-subtext {
  max-width: 680px; margin: 1.25rem auto 0;
  color: var(--muted); font-size: 0.95rem; line-height: 1.85; text-align: center;
}
.standard-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
  margin-top: 3.5rem;
}
.standard-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg); padding: 2.5rem 2rem;
  text-align: center; position: relative; overflow: hidden;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
}
.standard-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.standard-card:hover { border-color: rgba(197,160,89,0.35); transform: translateY(-4px); }
.standard-card:hover::before { opacity: 1; }
.standard-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(197,160,89,0.1); border: 1px solid rgba(197,160,89,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--gold);
  transition: background 0.3s, box-shadow 0.3s;
  flex-shrink: 0;
}
.standard-card:hover .standard-icon {
  background: rgba(197,160,89,0.2);
  box-shadow: 0 0 28px rgba(197,160,89,0.18);
}
.standard-card h3 { font-size: 0.95rem; color: var(--white); margin: 0; }
.standard-card p  { font-size: 0.88rem; color: var(--muted); line-height: 1.8; margin: 0; }
/* Gold divider below authority section → before pricing */
#bomaye-standard::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: min(720px, 88%);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(197,160,89,0.22) 15%,
    rgba(197,160,89,0.70) 40%,
    rgba(214,178,108,0.90) 50%,
    rgba(197,160,89,0.70) 60%,
    rgba(197,160,89,0.22) 85%,
    transparent 100%
  );
  box-shadow: 0 0 14px rgba(197,160,89,0.35);
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 900px) {
  .standard-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .standard-card  { padding: 2rem 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM MEMBERSHIP CARD — 12M FEATURED HIGHLIGHT
══════════════════════════════════════════════════════════════ */
.membership-card--featured {
  position: relative;
  border-color: rgba(197,160,89,0.65) !important;
  box-shadow:
    0 0 0 1px rgba(197,160,89,0.30),
    0 0 28px rgba(197,160,89,0.18),
    0 6px 40px rgba(0,0,0,0.12) !important;
}
.membership-featured-badge {
  position: absolute;
  top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 52%, var(--gold) 100%);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 0.58rem; letter-spacing: 2px;
  padding: 0.35rem 1.1rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(197,160,89,0.45);
  pointer-events: none;
}
/* Light-bg override (inside #pricing) */
#pricing .membership-card--featured {
  border-color: rgba(160,124,58,0.75) !important;
  box-shadow:
    0 0 0 1px rgba(160,124,58,0.28),
    0 0 32px rgba(160,124,58,0.18),
    0 6px 40px rgba(0,0,0,0.09) !important;
}

/* ══════════════════════════════════════════════════════════════
   INLINE BSPORT WIDGET SECTIONS
   "Book Your Free Trial"  (#free-trial)
   "Choose Your Membership" (#membership-widget)
   White background · Gold accents · Rounded cards · No dark overlay
══════════════════════════════════════════════════════════════ */

/* Shared section background — matches existing .sec--light-alt pattern */
#free-trial,
#membership-widget {
  background: #fff;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Widget card wrapper: white surface, gold border, rounded */
.bw-widget-wrap {
  margin-top: 2.5rem;
  background: #fff;
  border-radius: 20px;
  padding: 2rem 1.5rem;
  box-shadow: 0 4px 32px rgba(0,0,0,0.07);
  border: 1px solid rgba(197,160,89,0.22);
  min-height: 520px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Widget inner — stretch to fill the card */
.bw-widget-inner {
  width: 100%;
  min-height: 480px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  contain: layout;
}

/* ── Override Bsport internals: force white background, no dark overlay ── */

/* Widget roots */
#bsport-widget-trial,
#bsport-widget-subscription {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#bsport-widget-trial *,
#bsport-widget-subscription * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Suppress any full-screen / darkened backdrop the widget renders */
#bsport-widget-trial [class*="overlay"],
#bsport-widget-trial [class*="Overlay"],
#bsport-widget-trial [class*="backdrop"],
#bsport-widget-trial [class*="Backdrop"],
#bsport-widget-trial [class*="modal-bg"],
#bsport-widget-subscription [class*="overlay"],
#bsport-widget-subscription [class*="Overlay"],
#bsport-widget-subscription [class*="backdrop"],
#bsport-widget-subscription [class*="Backdrop"],
#bsport-widget-subscription [class*="modal-bg"] {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: static !important;
}

/* Force white background on all widget panels */
#bsport-widget-trial .cleanslate,
#bsport-widget-trial [class*="panel"],
#bsport-widget-trial [class*="Panel"],
#bsport-widget-trial [class*="container"],
#bsport-widget-trial [class*="Container"],
#bsport-widget-trial [class*="wrap"],
#bsport-widget-trial [class*="Wrap"],
#bsport-widget-subscription .cleanslate,
#bsport-widget-subscription [class*="panel"],
#bsport-widget-subscription [class*="Panel"],
#bsport-widget-subscription [class*="container"],
#bsport-widget-subscription [class*="Container"],
#bsport-widget-subscription [class*="wrap"],
#bsport-widget-subscription [class*="Wrap"] {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
}

/* Rounded cards */
#bsport-widget-trial [class*="card"],
#bsport-widget-trial [class*="Card"],
#bsport-widget-trial [class*="item"],
#bsport-widget-trial [class*="Item"],
#bsport-widget-trial [class*="slot"],
#bsport-widget-trial [class*="Slot"],
#bsport-widget-subscription [class*="card"],
#bsport-widget-subscription [class*="Card"],
#bsport-widget-subscription [class*="item"],
#bsport-widget-subscription [class*="Item"],
#bsport-widget-subscription [class*="offer"],
#bsport-widget-subscription [class*="Offer"] {
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid rgba(197,160,89,0.2) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Gold accent: primary action buttons */
#bsport-widget-trial [class*="btn-primary"],
#bsport-widget-trial [class*="BtnPrimary"],
#bsport-widget-trial [class*="button-primary"],
#bsport-widget-trial [class*="cta"],
#bsport-widget-subscription [class*="btn-primary"],
#bsport-widget-subscription [class*="BtnPrimary"],
#bsport-widget-subscription [class*="button-primary"],
#bsport-widget-subscription [class*="cta"] {
  background-color: var(--gold) !important;
  color: #0c0c0c !important;
  border-color: var(--gold) !important;
  border-radius: 6px !important;
}
#bsport-widget-trial [class*="btn-primary"]:hover,
#bsport-widget-subscription [class*="btn-primary"]:hover {
  background-color: var(--gold-dark) !important;
  border-color: var(--gold-dark) !important;
}

/* Gold accent: selected/active states, highlights */
#bsport-widget-trial [class*="selected"],
#bsport-widget-trial [class*="Selected"],
#bsport-widget-trial [class*="active"],
#bsport-widget-trial [class*="Active"],
#bsport-widget-subscription [class*="selected"],
#bsport-widget-subscription [class*="Selected"],
#bsport-widget-subscription [class*="active"],
#bsport-widget-subscription [class*="Active"] {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

/* Keep heading text dark on white background */
#bsport-widget-trial h1,
#bsport-widget-trial h2,
#bsport-widget-trial h3,
#bsport-widget-trial h4,
#bsport-widget-subscription h1,
#bsport-widget-subscription h2,
#bsport-widget-subscription h3,
#bsport-widget-subscription h4 {
  color: #1a1a1a !important;
}

/* Filter/toolbar rows — horizontal scroll, tap-friendly */
#bsport-widget-trial [class*="filter"],
#bsport-widget-trial [class*="Filter"],
#bsport-widget-subscription [class*="filter"],
#bsport-widget-subscription [class*="Filter"] {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  min-height: 44px !important;
}
#bsport-widget-trial [class*="filter"]::-webkit-scrollbar,
#bsport-widget-subscription [class*="filter"]::-webkit-scrollbar {
  display: none;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  #free-trial,
  #membership-widget { padding-top: 3.5rem; padding-bottom: 3.5rem; }

  .bw-widget-wrap {
    border-radius: 12px;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    border-radius: 0;
    padding: 1.25rem 1rem;
  }
  .bw-widget-inner { min-height: 400px; }
}
@media (max-width: 480px) {
  .bw-widget-wrap {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 1rem 0.75rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   TARGETED IMPROVEMENTS — v2 polish
══════════════════════════════════════════════════════════════ */

/* ── Hero: single centered CTA ── */
.hero-ctas--single {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn--hero-primary {
  font-size: 1rem;
  padding: 1rem 2.5rem;
  letter-spacing: 2px;
  min-width: 280px;
  text-align: center;
}
@media (max-width: 480px) {
  .btn--hero-primary {
    width: 100%;
    min-width: unset;
    padding: 1.1rem 1.5rem;
    font-size: 0.95rem;
  }
}

/* ── Diff-block: hover depth & card effect ── */
.diff-block {
  transition: box-shadow 0.3s ease;
}
.diff-item {
  padding: 1.25rem 1rem;
  border-radius: 12px;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  cursor: default;
}
.diff-item:hover {
  background: rgba(197,160,89,0.07);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}

/* ── Discipline cards: hover lift ── */
.discipline-card--photo {
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
  cursor: pointer;
}
.discipline-card--photo:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 16px 48px rgba(0,0,0,0.38);
}

/* ── Quote: shimmer-style animation matching hero ── */
#quote .quote-text {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.15;
  letter-spacing: 2px;
  color: #fff;
  text-align: center;
}
#quote .quote-text .gold {
  background: linear-gradient(90deg, var(--gold-light) 0%, var(--gold) 40%, var(--gold-light) 70%, var(--gold-dark) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-move 3s linear infinite;
}

/* ── Bomaye Standard: white section ── */
.sec--standard-white {
  background: #ffffff;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.standard-card--light {
  background: #f8f6f2;
  border: 1px solid rgba(197,160,89,0.15);
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.standard-card--light:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.standard-icon--light {
  background: rgba(197,160,89,0.12);
  color: var(--gold);
}

/* ── FAQ: white section ── */
.sec--faq-white {
  background: #ffffff;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.faq-list--light .faq-item {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.faq-q--light {
  color: var(--ink) !important;
  background: transparent;
}
.faq-q--light:hover {
  color: var(--gold-dark) !important;
}
.faq-q--light[aria-expanded="true"] {
  color: var(--gold-dark) !important;
}
.faq-q--light .faq-icon {
  color: var(--gold);
}

/* ── FAQ white variant: override ALL inherited dark-section rules ──────────
   #faq.sec--faq-white has specificity (1,1,0) — beats plain #faq (1,0,0)
   even when the dark rules carry !important.
   ───────────────────────────────────────────────────────────────────────── */
#faq.sec--faq-white {
  background: #f9f7f4 !important;          /* warm off-white */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top:    1px solid rgba(0,0,0,0.07) !important;
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}
/* Remove the dark gradient overlay injected by the dark-section ::before rule */
#faq.sec--faq-white::before {
  content: none !important;
}
/* Ensure answer text is readable on the light background */
#faq.sec--faq-white .faq-a-inner {
  color: rgba(8,8,8,0.70) !important;
}

/* ── Schedule CTA: stack on mobile ── */
@media (max-width: 600px) {
  .schedule-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .schedule-cta .btn {
    margin-left: 0 !important;
    width: 100%;
    justify-content: center;
  }
}

/* ── Disciplines CTA button spacing ── */
.disciplines-cta {
  margin-top: 2.5rem;
}

/* ── FAQ CTA spacing ── */
.faq-cta {
  margin-top: 2.5rem;
}

/* ── FAQ white section: dark-ink outline button ── */
#faq.sec--faq-white .btn--outline-dark {
  color: var(--ink) !important;
  border-color: rgba(8,8,8,0.25) !important;
}
#faq.sec--faq-white .btn--outline-dark:hover {
  color: var(--gold-dark) !important;
  border-color: var(--gold-dark) !important;
}

/* ── Why cards: hover polish (already exist, ensure lift) ── */
.why-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.why-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

/* ══════════════════════════════════════════════════════════════
   DIFF-BLOCK — PREMIUM CARD REDESIGN
   Apple / Nike / High-end boxing aesthetic
   Three cards: dark glass surface, gold icon badge, hover lift
══════════════════════════════════════════════════════════════ */
.diff-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

.diff-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem 1.75rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s var(--ease-expo), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  cursor: default;
  /* Override any previously appended diff-item rules */
  flex: unset;
  max-width: unset;
}
.diff-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.055);
  border-color: rgba(197,160,89,0.3);
  box-shadow: 0 20px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(197,160,89,0.12);
}

.diff-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(197,160,89,0.18) 0%, rgba(197,160,89,0.07) 100%);
  border: 1px solid rgba(197,160,89,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}
.diff-card-icon i {
  font-size: 1.25rem;
  color: var(--gold);
}
.diff-card:hover .diff-card-icon {
  background: linear-gradient(135deg, rgba(197,160,89,0.28) 0%, rgba(197,160,89,0.12) 100%);
  transform: scale(1.08);
}

.diff-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.diff-card-body strong {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 2.5px;
  color: var(--white);
  text-transform: uppercase;
  line-height: 1.3;
}
.diff-card-body span {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
}

@media (max-width: 900px) {
  .diff-inner { grid-template-columns: 1fr; gap: 1rem; }
  .diff-card  { flex-direction: row; align-items: flex-start; padding: 1.4rem 1.5rem; gap: 1.25rem; }
  .diff-card:hover { transform: translateY(-3px); }
}
@media (max-width: 480px) {
  .diff-card { padding: 1.2rem 1.25rem; }
  .diff-card-icon { width: 44px; height: 44px; border-radius: 11px; }
  .diff-card-icon i { font-size: 1.05rem; }
}

/* ══════════════════════════════════════════════════════════════
   DEIN WEG ZU BOMAYE — PREMIUM STEP CARDS
   Clear onboarding flow with icon badges and subtle lift
══════════════════════════════════════════════════════════════ */
.step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.step-num-badge {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 2px;
  color: var(--gold);
  background: rgba(197,160,89,0.1);
  border: 1px solid rgba(197,160,89,0.22);
  border-radius: 8px;
  padding: 0.25rem 0.65rem;
  line-height: 1;
}

.step-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
}
.step-icon i {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.5);
}
.step-card:hover .step-icon {
  background: rgba(197,160,89,0.12);
  border-color: rgba(197,160,89,0.22);
  transform: scale(1.1);
}
.step-card:hover .step-icon i { color: var(--gold); }

/* Override existing step-card to add premium elevation */
.step-card {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 18px !important;
  padding: 2rem 1.75rem !important;
  text-align: left !important;
  transition: transform 0.3s var(--ease-expo), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease !important;
}
.step-card:hover {
  transform: translateY(-6px) !important;
  background: rgba(255,255,255,0.045) !important;
  border-color: rgba(197,160,89,0.25) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.3) !important;
}
.step-card h3 {
  font-size: 1.05rem !important;
  letter-spacing: 1.5px;
  margin-bottom: 0.75rem !important;
}
.step-card p {
  font-size: 0.875rem !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.8 !important;
  margin-bottom: 1.25rem;
}

.step-cta-hint {
  font-family: var(--font-head);
  font-size: 0.62rem;
  letter-spacing: 2px;
  color: var(--gold);
  opacity: 0.75;
  text-transform: uppercase;
  border-top: 1px solid rgba(197,160,89,0.15);
  padding-top: 1rem;
  margin-top: auto;
}

/* Remove the old step-num display (replaced by step-num-badge in header) */
.step-num { display: none !important; }

/* Steps grid: keep 3-col on desktop, single col on mobile */
@media (max-width: 900px) {
  .steps-grid { grid-template-columns: 1fr !important; gap: 1.1rem !important; }
  .steps-grid::before { display: none !important; }
  .step-card { text-align: left !important; padding: 1.6rem 1.5rem !important; }
  .step-card:hover { transform: translateY(-3px) !important; }
}

/* ── Mobile cleanup: remove orphan references ── */
#free-trial, #membership-widget { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   HERO CREDENTIALS STRIP
   Premium trainer proof — no icons, clean typographic badges
══════════════════════════════════════════════════════════════ */
.hero-credentials {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 2.25rem;
  opacity: 0; transform: translateY(10px) scale(0.98); will-change: opacity, transform;
  transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1);
}

.hero-cred-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  padding: 0.65rem 1.4rem;
  text-align: center;
}

.hero-cred-label {
  font-family: var(--font-head);
  font-size: 0.58rem;
  letter-spacing: 2.5px;
  color: var(--gold-light);
  text-transform: uppercase;
  line-height: 1;
}

.hero-cred-sub {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.3px;
  line-height: 1.3;
}

/* Dividers via adjacent-sibling — perfectly symmetrical for any item count */
.hero-cred-item + .hero-cred-item {
  border-left: 1px solid rgba(255,255,255,0.12);
}

@media (max-width: 768px) {
  .hero-credentials {
    gap: 0;
    margin-top: 1.75rem;
  }
  .hero-cred-item + .hero-cred-item { border-left: none; }
  .hero-cred-item {
    padding: 0.5rem 1rem;
    flex: 0 0 50%;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .hero-cred-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.06); }
  .hero-cred-item:nth-last-child(-n+2) { border-bottom: none; }
  .hero-cred-item:last-child { border-right: none; }
  /* 5 items: last item alone in row — stretch it to full width so it doesn't sit off-centre */
  .hero-cred-item:nth-child(5):last-child {
    flex: 0 0 100%;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
}

@media (max-width: 400px) {
  .hero-cred-label { font-size: 0.54rem; letter-spacing: 1.8px; }
  .hero-cred-sub   { font-size: 0.68rem; }
}

/* ══════════════════════════════════════════════════════════════
   PROOF STRIP
   Minimal Apple-style qualifier row between diff-block and disciplines
══════════════════════════════════════════════════════════════ */
.proof-strip {
  background: #0f0f0f;
  border-top: 1px solid rgba(197,160,89,0.1);
  border-bottom: 1px solid rgba(197,160,89,0.1);
  padding: 2.5rem 0;
}

.proof-strip-inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.75rem 2.25rem;
  text-align: center;
  flex: 1 1 200px;
  max-width: 280px;
}

.proof-title {
  font-family: var(--font-head);
  font-size: 0.6rem;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
  line-height: 1;
}

.proof-body {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

.proof-sep {
  width: 1px;
  background: rgba(255,255,255,0.07);
  align-self: stretch;
  min-height: 40px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .proof-strip { padding: 2rem 0; }
  .proof-sep   { display: none; }
  .proof-item  {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .proof-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.05); }
  /* Last row: no bottom border */
  .proof-item:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 400px) {
  .proof-item  { flex: 0 0 100%; max-width: 100%; }
  .proof-item:nth-child(odd) { border-right: none; }
  .proof-item:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.05); }
  .proof-item:last-child { border-bottom: none; }
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM MICRO-INTERACTIONS
   Refined button press, service card lift, discipline hover
══════════════════════════════════════════════════════════════ */

/* Gold button: stronger active/press feedback */
.btn--gold:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 0 12px rgba(197,160,89,0.25), 0 2px 8px rgba(0,0,0,0.4);
  transition-duration: 0.08s;
}

/* Outline buttons */
.btn--outline-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.btn--outline-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(197,160,89,0.18), 0 6px 20px rgba(0,0,0,0.2);
}

/* Service cards: stronger depth on hover */
.service-card {
  transition: transform 0.32s var(--ease-expo), box-shadow 0.32s ease !important;
}
.service-card:hover {
  transform: translateY(-6px) scale(1.015) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,0.55) !important;
}

/* Why-cards on light background: richer shadow */
.why-card {
  transition: transform 0.28s var(--ease-expo), box-shadow 0.28s ease, border-color 0.28s ease !important;
}
.why-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.13) !important;
  border-color: rgba(197,160,89,0.25) !important;
}

/* Coach cards: subtle lift */
.coach-card {
  transition: box-shadow 0.3s ease, transform 0.3s var(--ease-expo);
}
.coach-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.22);
}

/* Standard cards: lift on white bg */
.standard-card--light {
  transition: transform 0.28s var(--ease-expo), box-shadow 0.28s ease, border-color 0.28s ease !important;
}
.standard-card--light:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.09) !important;
  border-color: rgba(197,160,89,0.28) !important;
}

/* ══════════════════════════════════════════════════════════════
   COMMUNITY SECTION — stronger presence + tagline upgrade
══════════════════════════════════════════════════════════════ */
#community {
  padding: 0;
  min-height: clamp(55vh, 65vh, 75vh);
  display: flex;
  align-items: center;
  justify-content: center;
}
#community::before {
  background: rgba(8,8,8,0.72);
}
#community h2 {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  letter-spacing: 3px;
}
#community p {
  letter-spacing: 6px;
  color: rgba(255,255,255,0.5);
  margin-top: 1.25rem;
}
/* Gold accent line under heading */
#community .container::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin: 1.5rem auto 0;
  opacity: 0.6;
}

/* ══════════════════════════════════════════════════════════════
   PERFORMANCE: reduce layout shifts on lazy sections
══════════════════════════════════════════════════════════════ */
.coach-photo img {
  /* Reserve space while lazy loading */
  min-height: 260px;
  background: var(--smoke);
}

@media (prefers-reduced-motion: reduce) {
  #bsport-widget-172485:empty { animation: none; background: #ede9e3; }
}

/* ══════════════════════════════════════════════════════════════
   LONG-SCROLL BUG FIX — overflow / stacking context conflicts
══════════════════════════════════════════════════════════════ */
/* Remove fixed bg from body — static gradient avoids compositing bugs */
body {
  background-attachment: scroll !important;
}
/* Contain paint in each section so transforms don't bleed.
   #schedule intentionally excluded: contain:layout traps Bsport's
   position:fixed booking dialogs inside the section, clipping them.
   #disciplines intentionally excluded: contain:layout can interfere
   with position:sticky children in some browser implementations.   */
#why-bomaye, #faq, #bomaye-standard, .diff-block {
  contain: layout style;
}
/* Remove excessive will-change that can exhaust GPU layers */
.testimonial-item {
  will-change: auto !important;
}
/* Ensure detail views don't contribute stacking context when hidden */
.view:not(.active) {
  visibility: hidden;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   WHY BOMAYE — premium depth / 3D card feel
══════════════════════════════════════════════════════════════ */
#why-bomaye {
  background: #f9f7f4;
  position: relative;
}
/* Subtle diagonal texture overlay */
#why-bomaye::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(197,160,89,0.025) 0px,
    rgba(197,160,89,0.025) 1px,
    transparent 1px,
    transparent 10px
  );
  pointer-events: none;
  z-index: 0;
}
#why-bomaye .container { position: relative; z-index: 1; }

/* Why-cards: premium 3D depth */
.why-card {
  background: #ffffff !important;
  border: 1px solid rgba(197,160,89,0.12) !important;
  border-radius: 18px !important;
  padding: 2.75rem 2.25rem !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9),
    0 4px 12px rgba(0,0,0,0.06),
    0 12px 32px rgba(0,0,0,0.05) !important;
  position: relative;
  overflow: hidden;
}
/* Gold top edge accent */
.why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 2rem; right: 2rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(197,160,89,0.55), transparent);
  border-radius: 0 0 4px 4px;
  transition: opacity 0.3s ease;
  opacity: 0;
}
.why-card:hover::before { opacity: 1; }
/* Deeper hover shadow */
.why-card:hover {
  transform: translateY(-8px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9),
    0 8px 24px rgba(0,0,0,0.09),
    0 24px 56px rgba(0,0,0,0.1) !important;
  border-color: rgba(197,160,89,0.28) !important;
}
/* Larger, more dramatic icon */
.why-card-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(197,160,89,0.18) 0%, rgba(197,160,89,0.08) 100%) !important;
  border: 1px solid rgba(197,160,89,0.35) !important;
  font-size: 1.5rem !important;
  margin-bottom: 1.75rem !important;
  box-shadow: 0 4px 16px rgba(197,160,89,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.why-card:hover .why-card-icon {
  transform: scale(1.1) rotate(-3deg);
  box-shadow: 0 6px 24px rgba(197,160,89,0.25);
}
.why-card h3 {
  font-size: 1.05rem !important;
  letter-spacing: 1.5px;
  color: var(--ink) !important;
  margin-bottom: 1rem !important;
}
.why-card p {
  font-size: 0.92rem !important;
  color: rgba(8,8,8,0.62) !important;
  line-height: 1.85 !important;
}
@media (max-width: 900px) {
  .why-card { padding: 2rem 1.75rem !important; }
  .why-card-icon { width: 56px !important; height: 56px !important; }
}
@media (max-width: 480px) {
  .why-card { padding: 1.75rem 1.5rem !important; border-radius: 14px !important; }
  .why-card-icon { width: 50px !important; height: 50px !important; margin-bottom: 1.25rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   QUOTE SECTION — premium hero-matched text treatment
══════════════════════════════════════════════════════════════ */
#quote { position: relative; overflow: hidden; }
#quote::before { background: rgba(8,8,8,0.88) !important; }

/* Decorative oversized opening mark */
#quote .container::before {
  content: '\201C';
  position: absolute;
  top: -2.5rem; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(8rem, 20vw, 16rem);
  line-height: 1;
  color: rgba(197,160,89,0.06);
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.05em;
}
#quote .container { position: relative; z-index: 1; }

/* Hero-scale text */
#quote .quote-text {
  font-size: clamp(2.2rem, 6.5vw, 4.5rem) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.15 !important;
  max-width: 900px;
  margin: 0 auto;
}

/* Per-line initial hidden state */
.quote-l1,
.quote-l2 {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease-expo), transform 0.8s var(--ease-expo);
}

/* Staggered reveal triggered by quote-visible (all devices) */
#quote.quote-visible .quote-l1 {
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
#quote.quote-visible .quote-l2 {
  opacity: 1;
  transform: none;
  transition-delay: 0.28s;
}

/* Shimmer override for quote-l2 — brighter, wider sweep than default */
#quote .quote-l2.shimmer {
  background: linear-gradient(90deg, var(--gold-dark) 0%, var(--gold-light) 35%, #e8c97a 55%, var(--gold) 70%, var(--gold-dark) 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* Source attribution */
.quote-source {
  margin-top: 2.5rem !important;
  font-size: 0.8rem;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}

/* Mobile: keep subtle scale reveal, let per-line opacity handle fade */
@media (max-width: 768px) {
  #quote .container {
    opacity: 1 !important;
    transform: scale(0.97);
    transition: transform 0.9s var(--ease-expo) !important;
  }
  #quote.quote-visible .container {
    transform: scale(1);
  }
}
@media (max-width: 600px) {
  #quote .quote-text { font-size: clamp(1.75rem, 8vw, 2.8rem) !important; }
  #quote .container::before { font-size: 8rem; top: -1.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   CONTRAST FIXES — ensure readability across all sections
══════════════════════════════════════════════════════════════ */
/* Disciplines: card text is readable on dark photo background */
.discipline-card h3 {
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.discipline-card p {
  color: rgba(255,255,255,0.88) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
/* FAQ white section — guarantee dark text */
.sec--faq-white h2,
.sec--faq-white .faq-q--light,
.sec--faq-white .faq-a-inner {
  color: var(--ink) !important;
}
.sec--faq-white .faq-a-inner {
  color: rgba(8,8,8,0.7) !important;
}
/* Bomaye Standard light section — all text clearly readable */
.sec--standard-white .standard-card--light h3,
.sec--standard-white .standard-card--light p {
  color: var(--ink) !important;
}
.sec--standard-white .standard-card--light p {
  color: rgba(8,8,8,0.65) !important;
}
/* Services section heading on dark background */
#services .sec-header h2 {
  color: #ffffff !important;
}
/* Proof strip on dark background */
.proof-strip .proof-title { color: #ffffff !important; }
.proof-strip .proof-body  { color: rgba(255,255,255,0.55) !important; }

/* ══════════════════════════════════════════════════════════════
   MOBILE FINISHING PASS
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Disciplines grid: ensure cards are full-width and legible */
  .disciplines-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  .discipline-card { min-height: 260px; }

  /* Why-bomaye: single column with better spacing */
  .why-grid { grid-template-columns: 1fr !important; gap: 1rem; }

  /* Quote: cinematic but compact on mobile */
  #quote { padding: 4rem 0; }
  #quote .container { padding: 0 1.25rem; }

  /* CTA bars: full-width stacked */
  .sp-cta-bar .btn,
  .booking-cta .btn,
  .disciplines-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Proof strip: single column on small screens */
  .proof-strip-inner {
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
  }
  .proof-sep { display: none; }
}
@media (max-width: 480px) {
  /* Discipline card text: slightly larger for readability */
  .discipline-card h3 { font-size: 1.35rem; }
  .discipline-card p  { font-size: 0.88rem; }

  /* Hero credentials: tighter padding on very small screens */
  .hero-cred-item { padding: 0.45rem 0.75rem; }
  .hero-cred-sep { display: none !important; }

  /* FAQ items: better padding */
  .faq-q--light { padding: 1rem 0; font-size: 0.9rem; }
  .faq-a-inner  { font-size: 0.88rem; }

  /* Standard cards: no horizontal overflow */
  .standard-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM PRODUCTION POLISH
   Final refinement pass — spacing, motion, visual hierarchy
══════════════════════════════════════════════════════════════ */

/* ── Lazy-loaded images: fade in on load ── */
/* Scoped to content images only — logos (.logo-img, .intro-brand-logo,
   .dna-visual-logo) are excluded to prevent invisible-until-JS bugs.  */
img[loading="lazy"]:not(.logo-img):not(.intro-brand-logo):not(.dna-visual-logo) {
  opacity: 0;
  transition: opacity 0.5s var(--ease-expo);
}
img[loading="lazy"]:not(.logo-img):not(.intro-brand-logo):not(.dna-visual-logo).loaded {
  opacity: 1;
}

/* ── Section header spacing: tighter for compact rhythm ── */
.sec-header { margin-bottom: clamp(20px, 3vw, 44px); }

/* ── Disc-panel title scale: more editorial on desktop ── */
@media (min-width: 769px) {
  .disc-panel__title {
    font-size: clamp(2.8rem, 5.5vw, 5rem);
  }
  /* Wider desc for immersive read */
  .disc-panel__desc {
    max-width: 480px;
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  }
}

/* ── Disc-stack horizontal padding: floating card margins scale with viewport ── */
@media (min-width: 1100px) {
  .disc-stack {
    padding-left: clamp(1rem, 3vw, 2.5rem);
    padding-right: clamp(1rem, 3vw, 2.5rem);
  }
}

/* ── Mobile horizontal padding: enforce 24px minimum ── */
@media (max-width: 480px) {
  .container { padding-left: 24px; padding-right: 24px; }
  /* Button font-size safety: prevent overflow on narrow screens */
  .btn { font-size: 0.875rem; letter-spacing: 2px; }
  .btn--sm { font-size: 0.78rem; letter-spacing: 1.5px; }
}

/* ── Button hover: lift + glow for all btn variants ── */
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── Section transition: smooth fade-up for section-level enter ── */
@keyframes sectionEnter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Disc-panel bg: subtle ken-burns on entry ── */
.disc-panel .disc-panel__bg {
  transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.disc-panel:hover .disc-panel__bg {
  transform: scale(1.03);
}

/* ── Community section: flex child centering ── */
#community .container {
  width: 100%;
}

/* ── Quote section: remove fixed attachment (mobile jank fix) ── */
@supports (background-attachment: fixed) {
  @media (min-width: 769px) {
    #quote { background-attachment: fixed; }
  }
}

/* ── Mobile section height constraints ── */
@media (max-width: 768px) {
  #community {
    min-height: clamp(55vh, 60vh, 70vh);
  }
}

/* ── Disc-stack: no side gap below 380px ── */
@media (max-width: 380px) {
  .disc-stack { padding: 0 0.5rem; }
  .disc-panel { border-radius: 10px; }
}

/* ── Reduce hero bottom padding on compact viewports ── */
@media (max-height: 700px) {
  .hero-content {
    padding-top: calc(var(--nav-h) + 1rem);
    padding-bottom: 2.5rem;
  }
}

/* prefers-reduced-motion: honour all animation removal */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  img[loading="lazy"] {
    opacity: 1 !important;
    transition: none !important;
  }
  .disc-panel .disc-panel__bg {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE REFINEMENT PASS
   Scope: ≤480px (phone) only unless noted.
   No changes to desktop layout, header, footer, booking logic.
══════════════════════════════════════════════════════════════ */

/* ── 1. Bsport card: desktop parity — same fields visible at all viewport widths ──

   Root causes fixed:
   a) overflow:visible on left column globally (was hidden, clipping at 481–768px)
   b) [style*="display:none"] — CSS attribute selector overrides Bsport's React
      inline style="display:none" applied at narrow widths. Per CSS spec a
      stylesheet !important declaration overrides inline styles without !important.
   c) Scoped to .bs-offer-list-item__content__offer__left — does NOT affect
      Bsport's booking detail panel, filter bar, or other widget internals.       */

#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left {
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
}

/* Un-hide elements Bsport hides via inline style="display:none" */
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [style*="display: none"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [style*="display:none"] {
  display: block !important;
}

/* Un-clip elements Bsport hides via inline style="overflow:hidden" */
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [style*="overflow: hidden"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [style*="overflow:hidden"] {
  overflow: visible !important;
}

/* Un-collapse elements hidden via inline max-height:0 or height:0 */
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [style*="max-height: 0"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [style*="max-height:0"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [style*="height: 0"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [style*="height:0"] {
  max-height: none !important;
  height: auto !important;
}

/* CSS class-based visibility: Bsport may toggle a compact-mode class that
   triggers display:none via their own injected stylesheet — not detectable
   by [style*] attribute selectors. These rules restore specific metadata
   field types, scoped strictly to the left column so Bsport's booking
   detail panel and filter bar are not affected.
   display:flex preserves the icon + text row layout used by each field row. */
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="facility"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Facility"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="location"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Location"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="venue"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Venue"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="teacher"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Teacher"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="coach"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Coach"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="instructor"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Instructor"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="trainer"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Trainer"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="level"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Level"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="difficulty"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Difficulty"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="spot"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Spot"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="capacity"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Capacity"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="participant"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Participant"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="duration"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left [class*="Duration"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

/* Level / spots / capacity also appear in right column's top area */
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right__top [class*="level"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right__top [class*="Level"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right__top [class*="spot"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right__top [class*="Spot"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right__top [class*="capacity"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right__top [class*="Capacity"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right__top [class*="participant"],
#bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right__top [class*="Participant"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
}

/* Mobile responsive layout: same info, adapted for narrow column */
@media (max-width: 768px) {
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer {
    flex-wrap: wrap !important;
    padding: 0.75rem 1rem !important;
    gap: 0.5rem !important;
  }
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__left {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #bsport-widget-172485 .cleanslate .bs-offer-list-item__content__offer__right {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    overflow: visible !important;
  }
}

/* ── 2. Disc-panels: restore sticky on mobile ── */
@media (max-width: 480px) {
  /* Override the previous "disable sticky on mobile" block.
     --disc-peek: 36px = tighter than desktop 52px for narrow viewports.
     The nth-child top values (which use --disc-peek) already have higher
     specificity than .disc-panel, so top values apply correctly.       */
  :root { --disc-peek: 36px; }

  .disc-panel {
    position: sticky !important;  /* restore — was set to relative */
    height: 44svh !important;
    height: 44vh !important;
    min-height: unset !important; /* remove min-height from previous pass */
    margin-bottom: 10vh !important; /* dwell between cards */
  }
  /* Last card: small bottom gap, no dwell */
  .disc-panel:last-child { margin-bottom: 2rem !important; }

  /* Extra top padding so CTA clears the last sticky card on exit */
  .disciplines-cta { padding-top: 3rem !important; }
}

/* ── 3. Bomaye Standard: mobile sticky card stack ── */
@media (max-width: 480px) {
  /* contain:layout on #bomaye-standard creates an isolated scroll-container
     boundary that breaks position:sticky for children. Remove on mobile. */
  #bomaye-standard { contain: none !important; }

  #bomaye-standard .standard-grid {
    display: block !important;
    position: relative;
  }

  /* Each card sticks with 44px peek above the next */
  #bomaye-standard .standard-card--light {
    position: sticky !important;
    border-radius: 14px !important;
    margin-bottom: 10vh !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
  }
  #bomaye-standard .standard-card--light:last-child { margin-bottom: 0 !important; }
  #bomaye-standard .standard-card--light:nth-child(1) { top: var(--nav-h);                   z-index: 1; }
  #bomaye-standard .standard-card--light:nth-child(2) { top: calc(var(--nav-h) + 44px);      z-index: 2; }
  #bomaye-standard .standard-card--light:nth-child(3) { top: calc(var(--nav-h) + 88px);      z-index: 3; }
}

/* ── 4. Dein Weg / Step-cards: mobile sticky card stack ── */
@media (max-width: 480px) {
  #weg .steps-grid {
    display: block !important;
    position: relative !important;
  }
  /* Solid background required: default rgba(255,255,255,0.025) is
     nearly transparent so card 2 would not cover card 1 visually.   */
  #weg .step-card {
    position: sticky !important;
    background: #1e1e1e !important;
    border-color: rgba(255,255,255,0.1) !important;
    border-radius: 14px !important;
    margin-bottom: 10vh !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.40) !important;
  }
  #weg .step-card:last-child { margin-bottom: 0 !important; }
  #weg .step-card:nth-child(1) { top: var(--nav-h);                   z-index: 1; }
  #weg .step-card:nth-child(2) { top: calc(var(--nav-h) + 44px);      z-index: 2; }
  #weg .step-card:nth-child(3) { top: calc(var(--nav-h) + 88px);      z-index: 3; }

  /* Steps CTA: breathing room after the sticky stack exits */
  .steps-cta { padding-top: 2rem !important; margin-top: 0 !important; }
}

/* ── 5. Booking section: clean entry after sticky storytelling flow ── */
@media (max-width: 480px) {
  #booking { padding-top: clamp(3rem, 8vw, 4rem) !important; }
}

/* ── 7. Group A — diff-block: mobile sticky card stack ── */
@media (max-width: 480px) {
  /* contain:layout style creates an isolated layout boundary that breaks
     position:sticky for children. Remove on mobile. */
  .diff-block { contain: none !important; }

  .diff-inner {
    display: block !important;
    position: relative;
  }

  /* Solid background: default rgba(255,255,255,0.03) is nearly transparent —
     replace with anthracite so card 2 visually covers card 1.             */
  .diff-card {
    position: sticky !important;
    background: #222222 !important;
    border-radius: 14px !important;
    margin-bottom: 10vh !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.50) !important;
    will-change: transform;
  }
  .diff-card:last-child { margin-bottom: 0 !important; }
  .diff-card:nth-child(1) { top: var(--nav-h);                   z-index: 1; }
  .diff-card:nth-child(2) { top: calc(var(--nav-h) + 44px);      z-index: 2; }
  .diff-card:nth-child(3) { top: calc(var(--nav-h) + 88px);      z-index: 3; }
}

/* ── 8. Group B — #why-bomaye: mobile sticky card stack ── */
@media (max-width: 480px) {
  /* Same contain isolation issue — remove on mobile */
  #why-bomaye { contain: none !important; }

  .why-grid {
    display: block !important;
    position: relative;
  }

  /* why-card already has solid #ffffff background — good for stacking
     on the #f9f7f4 section background without any color change.       */
  .why-card {
    position: sticky !important;
    margin-bottom: 10vh !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
    will-change: transform;
  }
  .why-card:last-child { margin-bottom: 0 !important; }
  .why-card:nth-child(1) { top: var(--nav-h);                   z-index: 1; }
  .why-card:nth-child(2) { top: calc(var(--nav-h) + 44px);      z-index: 2; }
  .why-card:nth-child(3) { top: calc(var(--nav-h) + 88px);      z-index: 3; }
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM REFINEMENTS — SPACING · HIERARCHY · INTERACTIONS · SEPARATION
   Four targeted passes — no structural or font changes.
   All animations respect prefers-reduced-motion.
══════════════════════════════════════════════════════════════ */

/* ══ 1. UNIFIED SECTION SPACING ══════════════════════════════
   Generous vertical rhythm — clamp-driven so it scales
   fluidly from mobile to wide desktop.
   --sv / --sv-m / --sv-s are the single source of truth.    */

:root {
  --sv:   clamp(72px, 8vw, 112px);  /* desktop  */
  --sv-m: clamp(56px, 7vw,  88px);  /* tablet   */
  --sv-s: clamp(44px, 6vw,  64px);  /* mobile   */
}

/* Base rhythm upgrade */
section { padding: var(--sv) 0; }

@media (max-width: 900px) {
  section { padding: var(--sv-m) 0; }
}
@media (max-width: 480px) {
  section { padding: var(--sv-s) 0; }
}

/* Harmonise fixed-5rem overrides so all sections share the same scale */
#schedule,
.sec--faq-white,
.sec--standard-white {
  padding-top:    var(--sv)   !important;
  padding-bottom: var(--sv)   !important;
}
#quote {
  padding-top:    var(--sv)   !important;
  padding-bottom: var(--sv)   !important;
}

@media (max-width: 900px) {
  #schedule,
  .sec--faq-white,
  .sec--standard-white {
    padding-top:    var(--sv-m) !important;
    padding-bottom: var(--sv-m) !important;
  }
  #quote {
    padding-top:    var(--sv-m) !important;
    padding-bottom: var(--sv-m) !important;
  }
}
@media (max-width: 480px) {
  #schedule,
  .sec--faq-white,
  .sec--standard-white {
    padding-top:    var(--sv-s) !important;
    padding-bottom: var(--sv-s) !important;
  }
  #quote {
    padding-top:    var(--sv-s) !important;
    padding-bottom: var(--sv-s) !important;
  }
}

/* Diff-block stays compact — it is a connector strip, not a full section */
.diff-block { padding: clamp(36px, 4vw, 60px) 0; }
@media (max-width: 768px) { .diff-block { padding: 1.5rem 0; } }

/* Section header: slightly more breathing room before grid content */
.sec-header { margin-bottom: clamp(28px, 3.5vw, 52px); }


/* ══ 2. CONSISTENT BUTTON HIERARCHY ══════════════════════════
   Gold filled  = primary CTA — elevated, glowing, impossible to miss.
   Outline      = secondary CTA — quiet, clearly supportive.            */

/* Primary: stronger ambient glow at rest — unmistakable lead action */
.btn--gold {
  box-shadow:
    0 0 22px rgba(197,160,89,0.34),
    0 3px 12px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.btn--gold:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 0 46px rgba(197,160,89,0.70),
    0 10px 30px rgba(197,160,89,0.28),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

/* Secondary: reduced visual weight — clearly subordinate */
.btn--outline-light { opacity: 0.84; }
.btn--outline-light:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}
.btn--outline-dark { opacity: 0.80; }
.btn--outline-dark:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(197,160,89,0.12), 0 4px 14px rgba(0,0,0,0.14);
}

/* Gold button on light bg (#pricing): use gold-dark tones */
#pricing .btn--gold {
  box-shadow:
    0 0 18px rgba(160,124,58,0.30),
    0 3px 12px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
#pricing .btn--gold:hover {
  box-shadow:
    0 0 38px rgba(160,124,58,0.58),
    0 8px 28px rgba(160,124,58,0.24),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

/* Location white-bg: restore full-opacity on outline so it reads clearly */
#location .btn--outline-dark,
#location .btn--outline-light {
  opacity: 1 !important;
  color: var(--ink) !important;
  border-color: rgba(8,8,8,0.22) !important;
}
#location .btn--outline-dark:hover,
#location .btn--outline-light:hover {
  border-color: var(--gold-dark) !important;
  color: var(--gold-dark) !important;
  box-shadow: 0 4px 14px rgba(160,124,58,0.14) !important;
}

/* Mobile / touch: remove opacity dimming — buttons must feel fully interactive */
@media (max-width: 900px) {
  .btn--outline-light,
  .btn--outline-dark { opacity: 1; }
}


/* ══ 3. SUBTLE MICRO-INTERACTIONS ═════════════════════════════
   All effects are gentle and fast. No distracting motion.     */

/* Coach photo: soft image zoom on card hover — image stays crisp */
.coach-photo { overflow: hidden; }
.coach-photo img {
  transition: transform 0.65s var(--ease-expo);
}
.coach-card:hover .coach-photo img {
  transform: scale(1.05);
}

/* Testimonial cards: light lift */
.testimonial-card {
  transition:
    transform    0.30s var(--ease-out),
    box-shadow   0.30s ease,
    border-color 0.30s ease;
}
.testimonial-card:hover {
  transform:    translateY(-4px);
  box-shadow:   0 12px 40px rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.10) !important;
}

/* Membership card: soft gold glow on hover */
.membership-card {
  transition: border-color 0.30s ease, box-shadow 0.30s ease;
}
.membership-card:hover {
  border-color: rgba(197,160,89,0.44) !important;
  box-shadow:
    0 8px 36px rgba(0,0,0,0.10),
    0 0 0 1px rgba(197,160,89,0.18) !important;
}

/* Addon cards: subtle lift */
.addon-card {
  transition:
    transform    0.28s var(--ease-out),
    box-shadow   0.28s ease,
    border-color 0.28s ease;
}
.addon-card:hover {
  transform:    translateY(-3px);
  box-shadow:   0 10px 32px rgba(0,0,0,0.09);
  border-color: rgba(197,160,89,0.22) !important;
}

/* Pricing prog-cards: box-shadow enhancement on hover */
.prog-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.14) !important;
}

/* Nav links: smooth gold underline on desktop nav bar only (not mobile overlay) */
.nav-links .nav-link {
  position: relative;
}
.nav-links .nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%; right: 50%;
  height: 1px;
  background: var(--gold);
  opacity: 0;
  transition: left 0.25s var(--ease-out), right 0.25s var(--ease-out), opacity 0.25s;
}
.nav-links .nav-link:hover::after,
.nav-links .nav-link.active::after {
  left: 0.8rem; right: 0.8rem;
  opacity: 0.7;
}

/* Honour prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .coach-photo img,
  .testimonial-card,
  .membership-card,
  .addon-card        { transition: none !important; }
  .coach-card:hover .coach-photo img { transform: none !important; }
  .nav-links .nav-link::after { transition: none !important; }
}

/* Disable card hover transforms on touch (no hover state) */
@media (max-width: 900px) {
  .testimonial-card:hover { transform: none; }
  .addon-card:hover       { transform: none; }
  .membership-card:hover  { border-color: rgba(197,160,89,0.20) !important; }
}


/* ══ 4. VISUAL SECTION SEPARATION ════════════════════════════
   Thin, elegant cues so users feel each section boundary
   without harsh breaks or colour clashes.                    */

/* Testimonials (cream #f9f7f4) → FAQ (cream): gold hairline divider */
#testimonials {
  border-bottom: 1px solid rgba(197,160,89,0.20);
}

/* FAQ white: slightly warmer cream than testimonials — subtle differentiation */
#faq.sec--faq-white {
  background: #f4f0eb !important;
}

/* Ensure FAQ text contrast is maintained on the warmer background */
#faq.sec--faq-white .faq-a-inner {
  color: rgba(8,8,8,0.68) !important;
}

/* Schedule section: soft top border when coming out of a dark section */
#schedule {
  border-top: 1px solid rgba(0,0,0,0.05) !important;
}

/* Booking section (dark) starts cleanly after cream sections */
#booking {
  border-top: 1px solid rgba(197,160,89,0.10);
}

/* Ensure light-section ::before dark gradient does not bleed onto cream */
#testimonials::before {
  background: transparent !important;
}


/* ══════════════════════════════════════════════════════════════
   PREMIUM NAV & UI POLISH
   Parts:
     1 · Fullscreen overlay (fade in/out)
     2 · Burger 3-line morph animation
     3 · Menu entrance stagger
     4 · Premium overlay typography
     5 · Image hover effects (desktop only)
     6 · Section spacing (120 / 90 / 70 px)
     7 · Scroll reveal enhancement
══════════════════════════════════════════════════════════════ */

/* ─── Parts 1 & 2: Burger icon — CSS 3-line morph ───────────── */
/* Reset the FA-icon based burger, replace with flex container   */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 36px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1001;
}

/* Hide the legacy FA icon if still present */
.burger > i { display: none !important; }

/* The three lines */
.burger-line {
  display: block;
  width: 36px;
  height: 3px;
  background: var(--white);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.3s var(--ease-expo), opacity 0.25s ease;
}

/* Morph to × when menu is open */
.burger.open .burger-line:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger.open .burger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.open .burger-line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Show burger at ≤ 900 px (already set in base, repeated here for clarity) */
@media (max-width: 900px) { .burger { display: flex; } }


/* ─── Part 1: Fullscreen overlay — smooth fade ──────────────── */
/* Overrides the slide-from-right translateX approach            */
.mobile-overlay-nav {
  /* Layout already set: position:fixed; inset:0; z-index:999; flex+center */
  transform: none !important;          /* cancel translateX slide          */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Hiding: opacity fades first, then visibility snaps hidden  */
  transition: opacity 0.35s var(--ease-expo), visibility 0s 0.35s;
}
.mobile-overlay-nav.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Showing: visibility snaps visible immediately, opacity fades in */
  transition: opacity 0.35s var(--ease-expo), visibility 0s 0s;
}

/* index.html uses #mobile-nav without the shared class — target directly */
#mobile-nav {
  transform: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-expo), visibility 0s 0.35s;
}
#mobile-nav.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s var(--ease-expo), visibility 0s 0s;
}


/* ─── Parts 3 & 4: Stagger entrance + premium typography ─────── */
/* .mn-item is added to every link/button inside the overlay nav */
.mn-item {
  font-family: var(--font-display) !important;
  font-size: clamp(1.9rem, 5.5vw, 2.6rem) !important;
  letter-spacing: 6px !important;
  color: rgba(255,255,255,0.78) !important;
  padding: 0.45rem 1.5rem !important;
  line-height: 1.15 !important;
  text-decoration: none;
  display: block;
  text-align: center;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  /* Entrance: each item starts hidden + offset                  */
  opacity: 0;
  transform: translateY(20px);
  /* Stagger via --mn-i custom property set inline in HTML       */
  transition:
    opacity    0.5s var(--ease-expo) calc(var(--mn-i, 0) * 80ms),
    transform  0.5s var(--ease-expo) calc(var(--mn-i, 0) * 80ms),
    color      0.2s !important;
}

/* When nav is open, items animate in */
.mobile-overlay-nav.open .mn-item,
#mobile-nav.open .mn-item {
  opacity: 1;
  transform: translateY(0);
}

/* Hover: gold + subtle nudge */
.mn-item:hover { color: var(--gold) !important; }

/* Gold CTA button inside overlay */
.mn-cta {
  margin-top: 1.75rem !important;
  padding: 0.9rem 2.8rem !important;
}


/* ─── Part 5: Premium image hover effects (desktop / mouse) ──── */
@media (hover: hover) and (pointer: fine) {
  /* Ensure containers clip the scale overflow */
  .service-card,
  .coach-photo,
  [class*="kp-img"],
  [class*="disc-slide"] { overflow: hidden; }

  /* Apply transition to images inside those containers */
  .service-card img,
  .coach-photo img,
  [class*="kp-img"] img,
  [class*="disc-slide"] img {
    transition: transform 0.4s ease, filter 0.4s ease !important;
  }

  /* Scale + darken on hover */
  .service-card:hover img,
  .coach-card:hover .coach-photo img,
  [class*="kp-img"]:hover img,
  [class*="disc-slide"]:hover img {
    transform: scale(1.02) !important;
    filter: brightness(0.95) !important;
  }
}


/* ─── Part 6: Section vertical spacing ──────────────────────── */
/* Update --sv / --sv-m / --sv-s to match spec targets           */
:root {
  --sv:   120px;   /* desktop  */
  --sv-m:  90px;   /* tablet   */
  --sv-s:  70px;   /* mobile   */
}


/* ─── Part 7: Scroll reveal ─────────────────────────────────── */
/* Tighten to match spec: 500ms, translateY 20px → 0            */
.reveal {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition:
    opacity   500ms var(--ease-expo),
    transform 500ms var(--ease-expo) !important;
}
.reveal.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* ─── Reduced motion: honour user preference ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .burger-line                          { transition: none !important; }
  .mobile-overlay-nav,
  #mobile-nav                           { transition: none !important; }
  .mn-item                              { transition: none !important; opacity: 1 !important; transform: none !important; }
  .mobile-overlay-nav.open .mn-item,
  #mobile-nav.open .mn-item            { opacity: 1 !important; transform: none !important; }
  .service-card img,
  .coach-photo img                      { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE TYPOGRAPHY OPTIMISATION
   Applied ONLY inside mobile breakpoints (≤768px / ≤480px)
   — No layout, desktop styles, colours, or positioning changed —
══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── Hero H1: +10–15% visual impact on tablet/mobile ── */
  .hero-h1 {
    font-size: clamp(3.2rem, 11.5vw, 4.6rem);
  }

  /* ── Hero subtitle: slightly larger + better line-height ── */
  .hero-subtitle {
    font-size: clamp(1.02rem, 2.6vw, 1.2rem);
    line-height: 1.68;
  }

  /* ── Body text: improved readability ── */
  .eb-check       { font-size: 0.97rem; line-height: 1.68; }
  .intro-text p,
  .dna-text p,
  .location-body,
  .why-desc,
  .coach-bio      { font-size: 1rem; line-height: 1.72; }

  /* ── Buttons: thumb-friendly tap targets ── */
  .btn {
    padding: 1rem 2.3rem;
  }
  .btn--sm {
    padding: 0.75rem 1.55rem;
  }
  .btn--hero-primary {
    padding: 1.15rem 2.5rem;
  }

  /* ── Tags / badges: less cramped, easier to read ── */
  .tag {
    font-size: 0.72rem;
    padding: 5px 16px;
  }
  .eb-card-label {
    font-size: 0.72rem;
    letter-spacing: 2.5px;
  }
  .eb-card-sublabel {
    font-size: 0.74rem;
    letter-spacing: 1.5px;
  }
}

@media (max-width: 480px) {
  /* ── Hero H1: maintain +10–12% on small phones ── */
  .hero-h1 {
    font-size: clamp(2.9rem, 12vw, 4.1rem);
  }

  /* ── Hero subtitle ── */
  .hero-subtitle {
    font-size: 1.03rem;
    line-height: 1.68;
  }

  /* ── Body text: bump +1–2px on small screens ── */
  .discipline-card p { font-size: 0.94rem; line-height: 1.68; }
  .faq-q--light      { font-size: 0.95rem; }
  .faq-a-inner       { font-size: 0.93rem; line-height: 1.67; }
  .eb-check          { font-size: 0.97rem; line-height: 1.68; }

  /* ── Buttons: larger tap area, safer letter-spacing ── */
  .btn {
    padding: 1rem 2rem;
    font-size: 0.92rem;
    letter-spacing: 2px;
  }
  .btn--sm {
    font-size: 0.82rem;
    letter-spacing: 1.5px;
  }
  .btn--hero-primary {
    padding: 1.15rem 2rem;
    font-size: 0.95rem;
  }

  /* ── Tags / badges ── */
  .tag {
    font-size: 0.73rem;
    padding: 5px 15px;
  }
  .eb-card-label    { font-size: 0.73rem; }
  .eb-card-sublabel { font-size: 0.75rem; }
}

/* ── 375px: keep hero title strong on smallest phones ── */
@media (max-width: 375px) {
  .hero-h1 { font-size: 3.1rem; }
}

/* ══════════════════════════════════════════════════════════════
   MEMBERSHIP SECTION — Premium black/gold conversion page
══════════════════════════════════════════════════════════════ */

/* Section background: deep dark gradient */
.membership-section {
  background: linear-gradient(160deg, #080808 0%, #1a1a1a 60%, #0f0f0f 100%);
  padding: 5rem 0 6rem;
  position: relative;
  overflow: hidden;
}

.membership-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(197,160,89,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 60% 30% at 80% 100%, rgba(197,160,89,0.04) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Membership tabs (Kids / Youth / Unlimited) ── */
.membership-tabs {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 2rem auto 2.5rem;
  max-width: 500px;
  background: rgba(197,160,89,0.1);
  border: 1px solid rgba(197,160,89,0.35);
  border-radius: 14px;
  padding: 6px;
}

.mtab {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 0.75rem 0.5rem;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.mtab-label {
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 2px;
  color: #222;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.mtab-age {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(0,0,0,0.55);
  transition: color 0.2s ease;
}

.mtab.active {
  background: linear-gradient(135deg, #C6A45A, #A67C2E);
  box-shadow: 0 4px 20px rgba(197,160,89,0.35);
}

.mtab.active .mtab-label {
  color: #080808;
  font-weight: 700;
}

.mtab.active .mtab-age {
  color: rgba(8,8,8,0.65);
}

.mtab:not(.active):hover {
  background: rgba(197,160,89,0.15);
}

.mtab:not(.active):hover .mtab-label {
  color: #111;
}

/* ── Trust badges — conversion boosters ── */
.membership-trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  max-width: 560px;
  margin: 0 auto 2rem;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(197,160,89,0.18);
  border: 1px solid rgba(197,160,89,0.45);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #111;
  line-height: 1.3;
  font-weight: 600;
}

.trust-badge i {
  color: #A67C2E;
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* ── Primary CTA row ── */
.membership-cta-row {
  text-align: center;
  margin-bottom: 3rem;
}

.membership-main-cta {
  min-width: 260px;
  padding: 1.1rem 2.5rem;
  font-size: 1rem;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #C6A45A 0%, #A67C2E 100%) !important;
  box-shadow: 0 6px 32px rgba(197,160,89,0.4);
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.membership-main-cta:hover {
  box-shadow: 0 8px 42px rgba(197,160,89,0.6);
  transform: translateY(-2px);
}

.plan-checkout-hint {
  margin-top: 0.75rem;
  font-family: var(--font-head);
  font-size: 0.6rem;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
}

/* ── Bsport widget container ── */
.membership-widget-wrap {
  max-width: 640px;
  margin: 0 auto;
}

.membership-widget-inner {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.12),
    0 24px 64px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,255,255,0.06);
  overflow: hidden;
}

/* Security note above widget */
.widget-header-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.55rem 1rem;
  background: rgba(8,8,8,0.04);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: rgba(8,8,8,0.45);
  letter-spacing: 0.02em;
}

.widget-header-note i {
  color: #4CAF50;
  font-size: 0.82rem;
}

/* Override Bsport widget to feel native */
#bsport-widget-78464 {
  min-height: 320px;
}

/* ── Plan panels ── */
.plan-panels {
  max-width: 480px;
  margin: 0 auto 2rem;
}

.plan-panel {
  display: none;
}

.plan-panel.active {
  display: block;
  animation: planPanelIn 0.3s ease both;
}

@keyframes planPanelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Plan card */
.plan-card {
  background: linear-gradient(145deg, #161616 0%, #1c1c1c 100%);
  border: 1px solid rgba(197,160,89,0.22);
  border-radius: 20px;
  padding: 2.25rem 2rem 1.5rem;
  cursor: pointer;
  position: relative;
  transition: transform 0.22s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 4px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(197,160,89,0.08);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 56px rgba(0,0,0,0.55), 0 0 0 1px rgba(197,160,89,0.45);
  border-color: rgba(197,160,89,0.55);
}

.plan-card:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}

.plan-card:focus-visible {
  outline: 2px solid rgba(197,160,89,0.8);
  outline-offset: 3px;
}

.plan-card--featured {
  border-color: rgba(198,164,90,0.65);
  border-width: 2px;
  background: linear-gradient(145deg, #181508 0%, #1e1a10 60%, #1c1c1c 100%);
  box-shadow: 0 8px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(198,164,90,0.12), 0 0 40px rgba(198,164,90,0.08);
  transform: scale(1.02);
}
.plan-card--featured:hover {
  transform: scale(1.02) translateY(-5px);
}

/* BELIEBTESTE WAHL ribbon — CSS-injected above the featured card */
.plan-panel#panel-unlimited .plan-card--featured::before {
  content: '★ BELIEBTESTE WAHL';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #C6A45A 0%, #A67C2E 100%);
  color: #080808;
  font-family: var(--font-head);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  padding: 5px 20px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(198,164,90,0.5);
  z-index: 2;
}
/* Shift the existing early-bird badge down to avoid overlap */
.plan-panel#panel-unlimited .plan-card--featured .plan-card-badge {
  top: 14px;
}

/* Early bird badge */
.plan-card-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #C6A45A, #A67C2E);
  color: #080808;
  font-family: var(--font-head);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  padding: 5px 16px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(197,160,89,0.35);
}

/* Icon */
.plan-card-icon {
  text-align: center;
  font-size: 2.25rem;
  color: #C6A45A;
  margin-bottom: 0.6rem;
  margin-top: 0.25rem;
}

/* Name */
.plan-card-name {
  text-align: center;
  font-family: var(--font-head);
  font-size: 2.2rem;
  letter-spacing: 3px;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0.3rem;
}

/* Age label */
.plan-card-age {
  text-align: center;
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 2.5px;
  color: rgba(197,160,89,0.72);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

/* Original (crossed-out) price */
.plan-card-original-price {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.2rem;
}

.plan-card-original-price s {
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.55);
}

/* Price row */
.plan-card-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  margin-bottom: 0.3rem;
}

.price-from {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

.price-value {
  font-family: var(--font-head);
  font-size: 4rem;
  color: #C6A45A;
  letter-spacing: 1px;
  line-height: 1;
}

.price-unit {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
}

/* Duration hint */
.plan-card-duration {
  text-align: center;
  font-family: var(--font-head);
  font-size: 0.62rem;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.32);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

/* Features list */
.plan-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 1.25rem;
}

.plan-card-features li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
  padding: 0.38rem 0;
  line-height: 1.3;
}

.plan-card-features li i {
  color: #C6A45A;
  font-size: 0.72rem;
  flex-shrink: 0;
}

/* CTA button inside card */
.plan-card-cta {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.plan-card-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #C6A45A 0%, #d4b472 50%, #A67C2E 100%);
  color: #080808;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  padding: 1rem 2.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(198,164,90,0.4);
  transition: box-shadow 0.25s ease, transform 0.2s ease, filter 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
  width: 100%;
  justify-content: center;
}

.plan-card:hover .plan-card-cta-btn {
  box-shadow: 0 8px 36px rgba(198,164,90,0.65);
  filter: brightness(1.08);
}

/* Security line */
.plan-card-security {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.02em;
}

.plan-card-security i {
  color: #4CAF50;
  margin-right: 4px;
}

/* ── Booking Modal ── */
.booking-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.booking-modal.open {
  display: flex;
}

.booking-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.booking-modal-card {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 18px;
  width: 100%;
  max-width: 740px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 96px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
  overflow: hidden;
  box-sizing: border-box;
}

.booking-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
  font-size: 1rem;
  transition: background 0.15s ease;
}

.booking-modal-close:hover {
  background: rgba(255,255,255,0.25);
}

.booking-modal-header {
  padding: 1rem 1.5rem;
  background: #080808;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.booking-modal-header-icon {
  color: #C6A45A;
  font-size: 0.85rem;
}

.booking-modal-title {
  font-family: var(--font-head);
  font-size: 0.88rem;
  letter-spacing: 3px;
  color: #C6A45A;
}

.booking-modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative; /* needed for loading overlay */
}

/* ── Bsport loading state ── */
.booking-modal-loading {
  position: absolute;
  inset: 0;
  background: #080808;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 2;
}

.booking-modal-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(198, 164, 90, 0.2);
  border-top-color: #C6A45A;
  border-radius: 50%;
  animation: bsport-spin 0.8s linear infinite;
}

@keyframes bsport-spin {
  to { transform: rotate(360deg); }
}

.booking-modal-loading-text {
  font-family: var(--font-head);
  font-size: 0.75rem;
  letter-spacing: 3px;
  color: rgba(198, 164, 90, 0.6);
  text-transform: uppercase;
  margin: 0;
}

.booking-modal-body iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 700px;
  min-height: 500px;
  border: none;
  box-sizing: border-box;
}

/* ── Responsive adjustments ── */
@media (max-width: 480px) {
  .membership-section { padding: 3.5rem 0 4rem; }

  .membership-tabs {
    max-width: 100%;
    gap: 4px;
    padding: 5px;
  }

  .mtab { padding: 0.65rem 0.35rem; }
  .mtab-label { font-size: 0.72rem; letter-spacing: 1px; }
  .mtab-age   { font-size: 0.62rem; }

  .plan-panels { max-width: 100%; }

  .plan-card {
    padding: 1.75rem 1.25rem 1.25rem;
  }

  .plan-card-name { font-size: 1.75rem; }
  .price-value    { font-size: 2.6rem; }

  .membership-trust {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .booking-modal {
    padding: 0;
    align-items: flex-end;
  }

  .booking-modal-card {
    max-height: 96vh;
    border-radius: 18px 18px 0 0;
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
  }

  .booking-modal-body {
    padding: 0;
    box-sizing: border-box;
  }

  .booking-modal-body iframe {
    height: 83vh;
    min-height: 520px;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .membership-trust { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM TRANSLUCENT DARK TREATMENT
   Mirrors the header glass-morphism style across dark sections.
   Applied to: Philosophy (#dna), Differentiator (.diff-block),
   Disciplines (#disciplines), Early Bird (#early-bird)
══════════════════════════════════════════════════════════════ */

/* Philosophy / Philosophie */
#dna {
  background: rgba(0,0,0,0.60) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(198, 164, 90, 0.10);
  border-bottom: 1px solid rgba(198, 164, 90, 0.10);
  position: relative;
}
#dna::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(197, 160, 89, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
#dna > * { position: relative; z-index: 1; }

/* Differentiator block */
.diff-block {
  background: rgba(0,0,0,0.60) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(198, 164, 90, 0.10) !important;
  border-bottom: 1px solid rgba(198, 164, 90, 0.10) !important;
}

/* Disciplines / Trainiere wie ein Kämpfer / Kurse */
#disciplines {
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(198, 164, 90, 0.10);
  border-bottom: 1px solid rgba(198, 164, 90, 0.10);
  position: relative;
}
#disciplines::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(197, 160, 89, 0.03) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
#disciplines > * { position: relative; z-index: 1; }

/* Early Bird — premium glass */
#early-bird {
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(198, 164, 90, 0.12);
  border-bottom: 1px solid rgba(198, 164, 90, 0.12);
  position: relative;
}
#early-bird::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(197, 160, 89, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
#early-bird > * { position: relative; z-index: 1; }

/* Legal pages header: always show the dark glass background */
.header-inner ~ * { }
#header:has(.header-inner) {
  background: rgba(10, 10, 10, 0.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(197, 160, 89, 0.15);
}

/* Disc-panel clickable cursor */
.disc-panel--clickable {
  cursor: pointer;
}
.disc-panel--clickable:hover .disc-panel__title {
  color: var(--gold-light);
  transition: color 0.25s ease;
}
.disc-panel--clickable .disc-panel__content::after {
  content: 'Mehr erfahren →';
  display: block;
  font-family: var(--font-head);
  font-size: 0.65rem;
  letter-spacing: 2px;
  color: rgba(197, 160, 89, 0.75);
  margin-top: 1rem;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
.disc-panel--clickable:hover .disc-panel__content::after {
  color: var(--gold-light);
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM REFINEMENT — Bomaye × Apple/Nike Level
   Visual hierarchy, spacing, contrast, mobile readability
══════════════════════════════════════════════════════════════ */

/* ── Reduce visual weight of secondary/caption text ──────── */
.tag, .hero-trust-item, .trust-strip-item, .diff-item span,
.coach-title, .plan-card-security, .plan-card-duration,
.plan-card-age, .plan-checkout-hint, .widget-header-note,
.loader-sub, .scroll-hint, .footer-col h4, .brand-line {
  opacity: 0.75;
}

/* ── Stronger section header sub-text contrast ───────────── */
.sec-header > p {
  color: rgba(255,255,255,0.6);
  font-size: 0.95rem;
  letter-spacing: 1.5px;
}

/* ── Stat numbers — bigger dominant prices ───────────────── */
.stat-num { font-size: 3.5rem; }
.eb-card-number { font-size: 6rem; }
.prog-price-amount { font-size: 2.75rem; }

/* ── Hero: tighter spacing, more breathing room ──────────── */
.hero-content {
  max-width: 980px;
}
.hero-ctas { gap: 1.25rem; margin-bottom: 3.5rem; }
.hero-ctas .btn--gold { padding: 1.05rem 2.75rem; font-size: 1.05rem; }

/* ── Section header: more top margin before h2 ───────────── */
.sec-header { margin-bottom: clamp(40px, 5vw, 72px); }

/* ── Plan card: more padding, stronger price dominance ───── */
.plan-card {
  padding: 2.75rem 2.25rem 2rem;
}
.plan-card-name { font-size: 2.6rem; }

/* ── Membership card on light bg — increased breathing room */
#pricing .membership-card { padding: 3rem 3rem; }
#pricing .mp-amount { font-size: 5rem; }

/* ── Addon cards: larger padding ────────────────────────── */
.addon-card { padding: 2rem 1.75rem; }
.addon-price { font-size: 1.7rem; }

/* ── Footer: more top padding ───────────────────────────── */
footer { padding: 5.5rem 0 2.5rem; }

/* ── Quote section: bigger text ─────────────────────────── */
.quote-text { font-size: clamp(2rem, 4vw, 3.2rem); }

/* ── Community section: more impressive h2 ───────────────── */
#community h2 { font-size: clamp(3rem, 7vw, 6rem); }

/* ── Trust strip: slightly more visible ─────────────────── */
.trust-strip {
  background: rgba(198,164,90,0.07);
  border-top: 1px solid rgba(198,164,90,0.15);
  border-bottom: 1px solid rgba(198,164,90,0.15);
}

/* ── Booking section header: stronger H2 ────────────────── */
.booking-head h2 { margin-bottom: 1rem; }

/* ── FAQ questions: slightly bigger for readability ─────── */
.faq-q { font-size: 1rem; }

/* ── Location section: brighter text on white ───────────── */
.location-detail-text span { color: rgba(8,8,8,0.72); }

/* ════════════════════════════════════════════════════════════
   MOBILE PREMIUM — ≤768px
   Larger fonts, full-width CTAs, max readability
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Section headers slightly larger on mobile */
  h2 { font-size: clamp(2.2rem, 6.5vw, 3.5rem); }
  h3 { font-size: clamp(1.4rem, 4.5vw, 1.9rem); }

  /* Hero bigger on mobile */
  .hero-h1 { font-size: clamp(3.2rem, 11vw, 5rem); }

  /* Full-width primary CTAs on mobile */
  .hero-ctas .btn { width: 100%; text-align: center; justify-content: center; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .steps-cta .btn, .booking-head + * .btn { width: 100%; }

  /* Plan card: full breathing room */
  .plan-card { padding: 2.25rem 1.75rem 1.75rem; }
  .plan-card-name { font-size: 2.2rem; }
  .price-value { font-size: 3.5rem; }

  /* Bigger body text for readability */
  p { font-size: 1.05rem; }
  .faq-q { font-size: 1rem; padding: 1.5rem 0; }

  /* Section header subtext readable */
  .sec-header > p { font-size: 0.9rem; }

  /* Membership card: full width comfortable padding */
  #pricing .membership-card { padding: 2rem 1.5rem; }
  #pricing .mp-amount { font-size: 4rem; }

  /* Diff items: more spacing */
  .diff-item { padding: 0.9rem 0; }

  /* Full width buttons in key conversion spots */
  .eb-card .btn { width: 100%; }
  .intro-text .btn { width: 100%; max-width: none; }

  /* Plan card cta full width already set — ensure scale doesn't cause overflow */
  .plan-card--featured { transform: scale(1.0); }
  .plan-card--featured:hover { transform: translateY(-4px); }

  /* Slightly reduce mobile section padding for featured plan panel extra spacing */
  .plan-panels { padding: 0 0.25rem; }
}

@media (max-width: 480px) {
  /* Extra small: max legibility */
  h2 { font-size: clamp(2rem, 8vw, 3rem); }
  .hero-h1 { font-size: clamp(2.8rem, 12vw, 4.2rem); }
  .stat-num { font-size: 2.5rem; }
  .eb-card-number { font-size: 4.5rem; }
  p { font-size: 1rem; }

  /* Buttons: full width everywhere on small screens */
  .detail-ctas .btn,
  .location-btns .btn,
  .hero-ctas .btn { width: 100%; }

  /* Plan card small screen */
  .plan-card { padding: 2rem 1.25rem 1.5rem; }
  .price-value { font-size: 3rem; }

  /* Membership card */
  #pricing .mp-amount { font-size: 3.5rem; }
}

/* ── Android mobile: disable backdrop for glass sections ─── */
@media (max-width: 768px) {
  #intro, #services, #booking, #faq, #dna, #disciplines, #early-bird {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Use solid dark fallback instead */
  #intro      { background: #0A0A0A !important; }
  #services   { background: #111111 !important; }
  #booking    { background: #0A0A0A !important; }
  #faq        { background: #111111 !important; }
  #dna        { background: #F8F6F1 !important; }
  #disciplines{ background: #F8F6F1 !important; }
  #early-bird { background: #0D0A06 !important; }
  .diff-block { background: #0A0A0A !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}


/* ── Unlimited panel: top clearance for BELIEBTESTE WAHL badge ── */
.plan-panel#panel-unlimited {
  padding-top: 1.5rem;
}

/* ── Plan card CTA: full width already (width:100% set above) ── */
.plan-card-cta { width: 100%; }

/* ══════════════════════════════════════════════════════════════
   DNA (AUTHORITY) + DISCIPLINES (KURSE) — LIGHT PREMIUM THEME
   Soft off-white cream background, dark text, gold accents kept.
══════════════════════════════════════════════════════════════ */

/* ── Authority / DNA Section ─────────────────────────────── */
#dna {
  background: #F8F6F1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid rgba(197,160,89,0.18) !important;
  border-bottom: 1px solid rgba(197,160,89,0.18) !important;
}
#dna::before { background: transparent !important; }

#dna h2            { color: var(--ink) !important; }
#dna h2 .gold      { color: var(--gold-dark) !important; }
#dna p             { color: rgba(8,8,8,0.65) !important; }
#dna strong        { color: var(--ink) !important; }

#dna .tag--light {
  background: rgba(197,160,89,0.12) !important;
  color: var(--gold-dark) !important;
  border-color: rgba(197,160,89,0.38) !important;
}

#dna .btn--outline-gold {
  color: var(--gold-dark) !important;
  border-color: rgba(197,160,89,0.55) !important;
}
#dna .btn--outline-gold:hover {
  color: var(--gold) !important;
  border-color: var(--gold) !important;
  text-decoration: underline;
  background: rgba(197,160,89,0.08) !important;
}

/* ── Disciplines / Kurse Section ─────────────────────────── */
#disciplines {
  background: #F8F6F1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid rgba(197,160,89,0.18) !important;
  border-bottom: 1px solid rgba(197,160,89,0.18) !important;
}
#disciplines::before { background: transparent !important; }

#disciplines .sec-header h2       { color: var(--ink) !important; }
#disciplines .sec-header .gold    { color: var(--gold-dark) !important; }
#disciplines .sec-header p        { color: rgba(8,8,8,0.55) !important; }

#disciplines .tag--dark {
  background: rgba(197,160,89,0.12) !important;
  color: var(--gold-dark) !important;
  border-color: rgba(197,160,89,0.38) !important;
}

/* ══════════════════════════════════════════════════════════════
   BSPORT REGISTRATION FORM — MOBILE LAYOUT FIX (v3)
   ──────────────────────────────────────────────────────────────
   Problem: On mobile the Bsport registration form (opened by the
   subscription widget with dialogMode:1) renders password fields
   side-by-side and consent checkboxes overlap each other.

   Root cause: Bsport's widget injects content into .cleanslate
   wrappers in the page DOM. The existing CSS targeted
   #bsport-widget-trial / #bsport-widget-subscription which do NOT
   exist in the HTML. The actual widget is #bsport-widget-78464.

   Fix: Target .cleanslate (Bsport's exclusive wrapper class) and
   #bsport-widget-78464 with forced single-column layout, full-
   width inputs, and correct checkbox row layout on mobile.
   Use !important throughout to beat Bsport's own inline styles.
══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Root: actual subscription widget + any Bsport portal dialog ── */
  #bsport-widget-78464,
  #bsport-widget-78464 * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── .cleanslate is Bsport's exclusive reset wrapper ── */
  /* It appears both inside #bsport-widget-78464 and in portal    */
  /* dialogs appended to <body> — target both.                    */

  /* 1. Force every flex/grid "row" to stack vertically */
  .cleanslate [class*="row"],
  .cleanslate [class*="Row"],
  .cleanslate [class*="grid"]:not([class*="filter"]),
  .cleanslate [class*="Grid"]:not([class*="filter"]),
  .cleanslate [class*="columns"],
  .cleanslate [class*="Columns"],
  .cleanslate [class*="fields"],
  .cleanslate [class*="Fields"],
  .cleanslate [class*="inputs"],
  .cleanslate [class*="Inputs"],
  .cleanslate [class*="two-col"],
  .cleanslate [class*="twoCol"],
  .cleanslate [class*="col-2"],
  .cleanslate [class*="form-line"],
  .cleanslate [class*="formLine"] {
    display:               flex !important;
    flex-direction:        column !important;
    flex-wrap:             nowrap !important;
    grid-template-columns: 1fr !important;
    width:                 100% !important;
    max-width:             100% !important;
    gap:                   0.75rem !important;
  }

  /* 2. Every form group / field / input wrapper → full width */
  .cleanslate [class*="form-group"],
  .cleanslate [class*="formGroup"],
  .cleanslate [class*="form-field"],
  .cleanslate [class*="formField"],
  .cleanslate [class*="field-wrap"],
  .cleanslate [class*="fieldWrap"],
  .cleanslate [class*="input-wrap"],
  .cleanslate [class*="inputWrap"],
  .cleanslate [class*="input-group"],
  .cleanslate [class*="inputGroup"],
  .cleanslate [class*="form-control"],
  .cleanslate [class*="formControl"],
  .cleanslate [class*="field"]:not(input):not(select):not(textarea) {
    width:     100% !important;
    max-width: 100% !important;
    flex:      0 0 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. Password fields — full width, stacked, no overlap */
  .cleanslate [class*="password"],
  .cleanslate [class*="Password"],
  .cleanslate [class*="pwd"],
  .cleanslate [class*="Pwd"],
  .cleanslate [class*="passwort"],
  .cleanslate [class*="Passwort"] {
    width:        100% !important;
    max-width:    100% !important;
    flex:         0 0 100% !important;
    display:      block !important;
    position:     relative !important;
    margin-bottom: 1rem !important;
    box-sizing:   border-box !important;
  }

  /* Password show/hide toggle icon stays inside the field */
  .cleanslate [class*="password"] [class*="toggle"],
  .cleanslate [class*="password"] [class*="Toggle"],
  .cleanslate [class*="password"] [class*="eye"],
  .cleanslate [class*="password"] [class*="Eye"],
  .cleanslate [class*="password"] [class*="icon"],
  .cleanslate [class*="Password"] [class*="toggle"],
  .cleanslate [class*="Password"] [class*="Eye"],
  .cleanslate [class*="Password"] [class*="icon"] {
    position:  absolute !important;
    right:     12px !important;
    top:       50% !important;
    transform: translateY(-50%) !important;
    z-index:   2 !important;
  }

  /* 4. All text inputs, selects, textareas → full width */
  .cleanslate input:not([type="checkbox"]):not([type="radio"]),
  .cleanslate select,
  .cleanslate textarea {
    width:      100% !important;
    max-width:  100% !important;
    min-width:  0 !important;
    box-sizing: border-box !important;
  }

  /* 5. Checkbox / consent rows — horizontal (checkbox left, text right) */
  .cleanslate [class*="checkbox"],
  .cleanslate [class*="Checkbox"],
  .cleanslate [class*="consent"],
  .cleanslate [class*="Consent"],
  .cleanslate [class*="agreement"],
  .cleanslate [class*="Agreement"],
  .cleanslate [class*="terms"]:not([class*="termsRow"]):not(h1):not(h2):not(h3),
  .cleanslate [class*="Terms"]:not(h1):not(h2):not(h3),
  .cleanslate [class*="gdpr"],
  .cleanslate [class*="GDPR"],
  .cleanslate [class*="legal"],
  .cleanslate [class*="Legal"],
  .cleanslate [class*="accept"],
  .cleanslate [class*="Accept"] {
    display:        flex !important;
    flex-direction: row !important;
    flex-wrap:      nowrap !important;
    align-items:    flex-start !important;
    gap:            0.65rem !important;
    margin-bottom:  1rem !important;
    width:          100% !important;
    max-width:      100% !important;
    box-sizing:     border-box !important;
    overflow:       visible !important;
  }

  /* Checkbox input: non-shrinking fixed-size square */
  .cleanslate input[type="checkbox"],
  .cleanslate input[type="radio"] {
    flex:       0 0 auto !important;
    width:      18px !important;
    height:     18px !important;
    min-width:  18px !important;
    min-height: 18px !important;
    margin:     3px 0 0 0 !important;
  }

  /* Checkbox / consent label text: wraps, readable */
  .cleanslate [class*="checkbox"] label,
  .cleanslate [class*="checkbox"] span,
  .cleanslate [class*="checkbox"] p,
  .cleanslate [class*="Checkbox"] label,
  .cleanslate [class*="Checkbox"] span,
  .cleanslate [class*="consent"] label,
  .cleanslate [class*="consent"] span,
  .cleanslate [class*="consent"] p,
  .cleanslate [class*="Consent"] label,
  .cleanslate [class*="Consent"] span,
  .cleanslate [class*="agreement"] label,
  .cleanslate [class*="agreement"] span,
  .cleanslate [class*="terms"] label,
  .cleanslate [class*="terms"] span,
  .cleanslate [class*="gdpr"] label,
  .cleanslate [class*="gdpr"] span,
  .cleanslate [class*="legal"] label,
  .cleanslate [class*="legal"] span {
    flex:            1 1 auto !important;
    white-space:     normal !important;
    word-wrap:       break-word !important;
    overflow-wrap:   break-word !important;
    line-height:     1.5 !important;
    min-width:       0 !important;
    max-width:       100% !important;
    display:         block !important;
  }

  /* 6. Form container: no overflow clipping that hides elements */
  .cleanslate form,
  .cleanslate [class*="form"]:not([class*="platform"]),
  .cleanslate [class*="Form"]:not([class*="Platform"]) {
    width:      100% !important;
    max-width:  100% !important;
    overflow:   visible !important;
    box-sizing: border-box !important;
  }

  /* 7. Step / section / panel containers → full width */
  .cleanslate [class*="step"],
  .cleanslate [class*="Step"],
  .cleanslate [class*="section"],
  .cleanslate [class*="Section"],
  .cleanslate [class*="panel"],
  .cleanslate [class*="Panel"],
  .cleanslate [class*="page"],
  .cleanslate [class*="Page"],
  .cleanslate [class*="group"],
  .cleanslate [class*="Group"] {
    width:      100% !important;
    max-width:  100% !important;
    box-sizing: border-box !important;
  }

  /* 8. Vertical spacing between form groups */
  .cleanslate [class*="group"] + [class*="group"],
  .cleanslate [class*="Group"] + [class*="Group"] {
    margin-top: 1.25rem !important;
  }

  /* 9. Widget dialog / popup / modal overlay → full width */
  .cleanslate [class*="popup"],
  .cleanslate [class*="Popup"],
  .cleanslate [class*="modal"],
  .cleanslate [class*="Modal"],
  .cleanslate [class*="dialog"],
  .cleanslate [class*="Dialog"],
  .cleanslate [class*="overlay"],
  .cleanslate [class*="Overlay"] {
    width:      100% !important;
    max-width:  100% !important;
    box-sizing: border-box !important;
  }

  /* 10. Inner popup/modal content box */
  .cleanslate [class*="popup-inner"],
  .cleanslate [class*="popupInner"],
  .cleanslate [class*="popup-content"],
  .cleanslate [class*="popupContent"],
  .cleanslate [class*="modal-inner"],
  .cleanslate [class*="modalInner"],
  .cleanslate [class*="modal-content"],
  .cleanslate [class*="modalContent"],
  .cleanslate [class*="dialog-inner"],
  .cleanslate [class*="dialogInner"],
  .cleanslate [class*="dialog-content"],
  .cleanslate [class*="dialogContent"] {
    width:      100% !important;
    max-width:  100vw !important;
    padding:    1rem !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* 11. Labels: prevent collision with icons/borders */
  .cleanslate label {
    display:       block !important;
    width:         100% !important;
    margin-bottom: 0.25rem !important;
    line-height:   1.4 !important;
    white-space:   normal !important;
    word-wrap:     break-word !important;
  }
}

/* ── 480px and below: extra-small phone adjustments ── */
@media (max-width: 480px) {

  /* Tighten popup padding on very small screens */
  .cleanslate [class*="popup-inner"],
  .cleanslate [class*="popupInner"],
  .cleanslate [class*="popup-content"],
  .cleanslate [class*="popupContent"],
  .cleanslate [class*="modal-inner"],
  .cleanslate [class*="modal-content"] {
    padding: 0.75rem !important;
  }

  /* Booking modal iframe: tall enough for multi-step form */
  .booking-modal-body iframe {
    height:     88vh !important;
    min-height: 620px !important;
  }

  /* Ensure Bsport widget dialog doesn't clip horizontally */
  .cleanslate {
    max-width:  100vw !important;
    overflow-x: hidden !important;
  }
}