/* ==========================================================================
   AERIAL SPORTSTUDIO — Design System
   Signature: the Beam (a vertical spotlight/pole line of light) and the
   Pass (ticket-style cards with a perforated edge, one per course/price).
   Type duality: a bold condensed grotesque (Kraft) paired with an italic
   high-contrast serif (Weiblichkeit) — the two pillars of the brand.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders:wght@400;500;600;700;800;900&family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---- Tokens -------------------------------------------------------------- */
:root{
  /* base surfaces */
  --void: #0a0712;
  --void-2: #120b1d;
  --void-3: #1c1229;
  --hairline: rgba(246,242,249,0.10);
  --hairline-strong: rgba(246,242,249,0.18);

  /* ink */
  --ink: #f6f2f9;
  --ink-muted: #b3a7c2;
  --ink-faint: #786c8c;

  /* brand defaults — unified site-wide, same as JGA & Feiern */
  --accent: #bd93e8;
  --accent-2: #c9a876;
  --accent-soft: #bd93e822;
  --gold: #c9a876;

  /* type */
  --font-display: 'Big Shoulders', sans-serif;
  --font-accent: 'Instrument Serif', serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* layout */
  --maxw: 1240px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 18px;
  --radius-sm: 10px;

  color-scheme: dark;
}

/* Per-course accent overrides removed — the whole site now shares one
   unified color scheme (JGA & Feiern's lilac/gold) via the :root tokens
   above. The body[data-accent="..."] attributes are still present in the
   markup (harmless) but no longer have matching CSS rules here. */

/* ---- Reset ---------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

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

.container{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ---- Ambient background: the Beam ----------------------------------------
   A soft vertical spotlight that recurs behind hero sections, referencing
   both the physical pole and stage lighting. */
.beam-field{
  position:relative;
  overflow:hidden;
}
.beam-field::before{
  content:"";
  position:absolute;
  inset:-10% -10% -10% -10%;
  background:
    radial-gradient(60% 45% at 78% 8%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 60%),
    radial-gradient(45% 40% at 15% 85%, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 65%);
  pointer-events:none;
  z-index:0;
}
.beam{
  position:absolute;
  top:-15%;
  bottom:-15%;
  width:2px;
  background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 85%, white 15%), var(--accent), transparent);
  filter: drop-shadow(0 0 24px var(--accent)) drop-shadow(0 0 60px var(--accent));
  opacity:0.65;
  z-index:0;
  pointer-events:none;
}
.beam.beam-right{ right:12%; }
.beam.beam-left{ left:8%; }
.beam.beam-center{ left:50%; }

/* ---- Top bar / promo strip -------------------------------------------- */
.promo-strip{
  background:var(--void-2);
  border-bottom:1px solid var(--hairline);
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-muted);
  text-align:center;
  padding:0.5rem var(--pad);
}
.promo-strip strong{ color:var(--ink); }

/* ---- Nav ------------------------------------------------------------------ */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb, var(--void) 97%, transparent);
  border-bottom:1px solid var(--hairline);
}
/* Note: intentionally no backdrop-filter here — it would establish a
   containing block for the fixed-position mobile .nav-links panel below,
   trapping it inside the header's own (short) box instead of the viewport. */
.nav{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:1.5rem;
  padding-block:1.05rem;
}
.brand{
  flex-shrink:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.35rem;
  letter-spacing:0.01em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:0.55rem;
}
.brand-mark{
  height:34px;
  width:auto;
  display:block;
}
.brand em{
  font-family:var(--font-accent);
  font-style:italic;
  font-weight:400;
  text-transform:none;
  color:var(--accent);
  font-size:1.05em;
}
.nav-links{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  flex-shrink:0;
  gap:0.85rem;
  margin-left:1.5rem;
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.nav-cta-mobile.btn{ display:none; }
.nav-links a:not(.btn){
  position:relative;
  white-space:nowrap;
  color:var(--ink-muted);
  padding-block:0.3rem;
  transition:color 0.2s ease;
}
.nav-links a:not(.btn):hover, .nav-links a:not(.btn)[aria-current="page"]{ color:var(--ink); }
.nav-links a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}

/* ---- Nav dropdown (Kurse +) ------------------------------------------------ */
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-item-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:0.15rem;
  background:none;
  border:none;
  font:inherit;
  color:var(--ink-muted);
  white-space:nowrap;
  padding-block:0.3rem;
  cursor:pointer;
  transition:color 0.2s ease;
}
.nav-item-row:hover,
.nav-item.is-open .nav-item-row,
.nav-item-row[aria-current="page"]{ color:var(--ink); }
.nav-item-row[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}
.nav-dropdown-btn{
  color:var(--ink-muted);
  font-family:var(--font-mono);
  font-size:0.9rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:color 0.2s ease, transform 0.2s ease;
}
.nav-item:hover .nav-dropdown-btn,
.nav-item.is-open .nav-dropdown-btn{ color:var(--accent); }
.nav-item.is-open .nav-dropdown-btn{ transform:rotate(45deg); }
.nav-dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  margin-top:0.9rem;
  display:flex;
  flex-direction:column;
  gap:0.15rem;
  min-width:220px;
  padding:0.6rem;
  background:var(--void-2);
  border:1px solid var(--hairline-strong);
  border-radius:var(--radius-sm);
  box-shadow:0 24px 48px -20px rgba(0,0,0,0.7);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index:50;
}
.nav-dropdown-menu a{
  padding:0.55rem 0.7rem;
  border-radius:7px;
  white-space:nowrap;
}
.nav-dropdown-menu a:hover{ background:color-mix(in srgb, var(--accent) 16%, transparent); }
.nav-item:hover .nav-dropdown-menu,
.nav-item.is-open .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nav-cta{
  flex-shrink:0;
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:0.74rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  white-space:nowrap;
  padding:0.68rem 1.15rem;
  border-radius:999px;
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  color:#0a0712;
  font-weight:700;
  box-shadow:0 8px 24px -8px color-mix(in srgb, var(--accent) 70%, transparent);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 30px -6px color-mix(in srgb, var(--accent) 80%, transparent); }

.nav-toggle{
  display:none;
  margin-left:auto;
  width:38px; height:38px;
  border:1px solid var(--hairline-strong);
  border-radius:8px;
  align-items:center;
  justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:"";
  display:block;
  width:18px; height:1.5px;
  background:var(--ink);
  position:relative;
  transition:all 0.2s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

@media (max-width: 1180px){
  .nav-links{
    position:fixed;
    inset:64px 0 0 0;
    background:var(--void);
    border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    flex-direction:column;
    align-items:flex-start;
    padding:2rem var(--pad);
    margin-left:0;
    gap:1.4rem;
    font-size:0.95rem;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease, transform 0.2s ease;
    overflow-y:auto;
  }
  .nav-links.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-toggle{ display:inline-flex; }
  .nav-cta{ display:none; }
  .nav-links .nav-cta-mobile{ display:inline-block; margin-top:0.5rem; }

  .nav-item{ flex-direction:column; align-items:flex-start; width:100%; }
  .nav-item-row{ gap:0.5rem; }
  .nav-dropdown-btn{ font-size:1rem; line-height:1; padding:0 0.3rem; }
  .nav-dropdown-menu{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    background:none;
    border:none;
    box-shadow:none;
    min-width:0;
    margin-top:0;
    padding:0 0 0 1rem;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.25s ease;
  }
  .nav-item.is-open .nav-dropdown-menu{ max-height:260px; }
  .nav-dropdown-menu a{ padding:0.6rem 0.5rem; }
  .nav-dropdown-menu a:first-child{ margin-top:0.6rem; }
}

/* ---- Buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  font-family:var(--font-mono);
  font-size:0.8rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  font-weight:600;
  padding:0.9rem 1.6rem;
  border-radius:999px;
  transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  color:#0a0712;
  box-shadow:0 14px 34px -12px color-mix(in srgb, var(--accent) 75%, transparent);
}
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{
  border:1px solid var(--hairline-strong);
  color:var(--ink);
  background:color-mix(in srgb, var(--void-2) 60%, transparent);
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--ink); }
.btn-arrow{ transition:transform 0.2s ease; }
.btn:hover .btn-arrow{ transform:translateX(3px); }

/* ---- Type scale -------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--accent);
}
h1, .h1{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  line-height:0.94;
  letter-spacing:-0.01em;
  font-size:clamp(2.8rem, 7vw, 6rem);
}
h1 em, .h1 em{
  font-family:var(--font-accent);
  font-style:italic;
  font-weight:400;
  text-transform:none;
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
h2, .h2{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  line-height:0.98;
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  letter-spacing:-0.005em;
}
h2 em, .h2 em{
  font-family:var(--font-accent);
  font-style:italic;
  font-weight:400;
  text-transform:none;
  color:var(--accent);
}
h3, .h3{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:1.5rem;
  letter-spacing:0.01em;
}
.lede{
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  color:var(--ink-muted);
  max-width:46ch;
  line-height:1.6;
}
.mono-label{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ---- Sections -------------------------------------------------------------- */
section{ position:relative; }
.section{ padding-block:clamp(4rem, 9vw, 8rem); }
.section-tight{ padding-block:clamp(2.5rem, 5vw, 4.5rem); }
.section-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  margin-bottom:clamp(2.5rem, 5vw, 4rem);
}

/* ---- Hero -------------------------------------------------------------- */
.hero{ padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem); }
.hero-video-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero-video-bg video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.5;
}
.hero-video-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 55%, transparent),
    transparent 50%,
    color-mix(in srgb, var(--accent-2) 45%, transparent));
  mix-blend-mode:color;
  opacity:0.75;
}
.hero-video-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(100deg, var(--void) 8%, color-mix(in srgb, var(--void) 55%, transparent) 42%, transparent 85%),
    linear-gradient(to bottom, transparent 55%, var(--void) 100%);
}
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  gap:2.5rem;
}
.hero-kicker{ margin-bottom:1.4rem; }
.hero h1{ margin-bottom:1.6rem; }
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2.2rem;
}
.hero-meta{
  display:grid;
  grid-template-columns:repeat(2, auto);
  column-gap:2.4rem;
  row-gap:1.4rem;
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid var(--hairline);
}
.hero-meta div{ font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-faint); }
.hero-meta strong{ display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--ink); text-transform:none; font-weight:700; }

/* ---- Stat row: glowing neon tiles --------------------------------------- */
.stat-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
  margin-top:3rem;
  max-width:480px;
}
@media (max-width: 640px){
  .stat-row{ grid-template-columns:repeat(2, 1fr) !important; max-width:270px !important; gap:0.65rem; }
  .stat-tile{ padding:0.5rem; gap:0.2rem; }
  .stat-tile strong{ font-size:2rem; }
  .stat-tile span{ font-size:0.72rem; }
}
.stat-tile{
  position:relative;
  aspect-ratio:1/1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:0.35rem;
  padding:0.6rem;
  border-radius:var(--radius-sm);
  background:linear-gradient(160deg, var(--void-3), var(--void-2));
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--hairline-strong));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent) inset,
    0 0 26px -6px color-mix(in srgb, var(--accent) 65%, transparent),
    0 0 54px -10px color-mix(in srgb, var(--accent-2) 55%, transparent);
}
.stat-tile strong{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.4rem, 3.4vw, 2.1rem);
  line-height:1;
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stat-tile span{
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-muted);
}

/* ---- Ticket / Pass card (signature component) --------------------------
   Used for course teasers and pricing. Perforated edge + torn-stub feel. */
.pass{
  position:relative;
  background:linear-gradient(165deg, var(--void-3), var(--void-2));
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:2rem;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  overflow:hidden;
  transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.pass::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  opacity:0.9;
}
a.pass:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--accent) 50%, var(--hairline));
  box-shadow:0 24px 48px -20px color-mix(in srgb, var(--accent) 45%, transparent);
}
/* Non-clickable pass cards: the glow stays on permanently instead of only on hover,
   since only actually clickable elements should react to hover. */
.pass:not(a){
  border-color:color-mix(in srgb, var(--accent) 50%, var(--hairline));
  box-shadow:0 24px 48px -20px color-mix(in srgb, var(--accent) 45%, transparent);
}
.pass-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.pass-title{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:1.55rem;
  line-height:1.05;
}
.pass-desc{ color:var(--ink-muted); font-size:0.95rem; line-height:1.55; }
.pass-tags{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.2rem; }
.pass-tag{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:0.3rem 0.6rem;
  border-radius:999px;
  border:1px solid var(--hairline-strong);
  color:var(--ink-muted);
}
.pass-foot{
  margin-top:auto;
  padding-top:1.1rem;
  border-top:1px dashed var(--hairline-strong);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.pass-price{ font-family:var(--font-mono); font-size:1rem; color:var(--ink); }
.pass-price span{ color:var(--ink-faint); font-size:0.75rem; }
.pass-link{
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex; align-items:center; gap:0.35rem;
}

.grid{ display:grid; gap:1.5rem; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width: 980px){
  .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .grid-2, .grid-3{ grid-template-columns:1fr; }
}

/* ---- Media placeholder (until real studio photos are added) ------------ */
.media{
  position:relative;
  aspect-ratio: 4 / 5;
  border-radius:var(--radius);
  overflow:hidden;
  background:
    radial-gradient(120% 100% at 20% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
    radial-gradient(120% 100% at 90% 100%, color-mix(in srgb, var(--accent-2) 28%, transparent), transparent 60%),
    linear-gradient(160deg, var(--void-3), var(--void-2));
  border:1px solid var(--hairline);
  display:flex;
  align-items:flex-end;
  padding:1.4rem;
}
.media.square{ aspect-ratio:1/1; }
.media.wide{ aspect-ratio:16/10; }

/* Real photos: duotone wash in the page's own accent colors so every
   photo — whichever course/page it sits on — reads as one lit family. */
.media.has-photo{ padding:0; background:var(--void-2); }
.media.has-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  filter:saturate(1.2) contrast(1.06) brightness(1.06);
}
.media.has-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 55%, transparent),
    transparent 50%,
    color-mix(in srgb, var(--accent-2) 45%, transparent));
  mix-blend-mode:color;
  opacity:0.6;
  pointer-events:none;
}
.media-tag{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  border:1px dashed var(--hairline-strong);
  border-radius:999px;
  padding:0.4rem 0.8rem;
  background:color-mix(in srgb, var(--void) 55%, transparent);
}

/* ---- Trainer card -------------------------------------------------------- */
.trainer-card{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.trainer-card .media.square{ perspective:900px; }
.trainer-card .media.square img{
  filter:grayscale(0);
  transition:filter 0.6s ease, transform 0.6s ease;
}
.trainer-card:hover .media.square img{
  filter:grayscale(1);
  transform:rotateY(180deg);
}
.trainer-steckbrief{
  position:absolute;
  left:0.8rem;
  right:0.8rem;
  bottom:0.8rem;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:0.3rem;
  padding:0.8rem 0.9rem;
  background:color-mix(in srgb, var(--void) 78%, transparent);
  border:1px solid var(--hairline-strong);
  border-radius:var(--radius-sm);
  backdrop-filter:blur(3px);
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.35s ease, transform 0.35s ease;
  pointer-events:none;
}
.trainer-card:hover .trainer-steckbrief{
  opacity:1;
  transform:translateY(0);
}
.trainer-name{ font-family:var(--font-display); text-transform:uppercase; font-weight:700; font-size:1.1rem; color:var(--ink); }
.trainer-role{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--accent);
}

/* ---- Quote / testimonial ------------------------------------------------- */
.quote{
  font-family:var(--font-accent);
  font-style:italic;
  font-size:clamp(1.4rem, 2.6vw, 2.1rem);
  line-height:1.35;
  color:var(--ink);
  max-width:38ch;
}
.quote-cite{ margin-top:1.2rem; font-family:var(--font-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); }

/* ---- Review card (real Google reviews) ------------------------------------ */
.review-card{
  background:linear-gradient(165deg, var(--void-3), var(--void-2));
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:1.8rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.review-stars{ color:#ffb92e; letter-spacing:0.12em; font-size:1rem; }
.review-text{ color:var(--ink); font-size:0.97rem; line-height:1.6; }
.review-foot{
  margin-top:auto;
  padding-top:1rem;
  border-top:1px dashed var(--hairline-strong);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.review-name{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:0.92rem; }
.review-source{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.04em; color:var(--ink-faint); }

/* ---- Reviews section layout ------------------------------------------- */
.reviews-grid{ grid-template-columns:1.6fr 1fr; align-items:stretch; }
.reviews-photos{ display:flex; flex-direction:column; gap:1.5rem; height:100%; }
.reviews-photos .media{ aspect-ratio:auto; flex:1; min-height:0; }
@media (max-width:640px){
  .reviews-grid{ grid-template-columns:1fr; }
  .reviews-photos{ flex-direction:row; height:auto; }
  .reviews-photos .media{ aspect-ratio:1/1; height:auto; }
}

/* ---- Steps / process list ------------------------------------------------ */
.steps{ display:grid; gap:1.4rem; counter-reset:step; }
.step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.2rem;
  padding-block:1.4rem;
  border-top:1px solid var(--hairline);
}
.step:first-child{ border-top:1px solid var(--hairline); }
.step-index{
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--accent);
  padding-top:0.2rem;
}
.step h4{ font-family:var(--font-display); text-transform:uppercase; font-size:1.15rem; margin-bottom:0.35rem; }
.step p{ color:var(--ink-muted); font-size:0.95rem; max-width:56ch; }

/* ---- Table (pricing) ------------------------------------------------------ */
.price-table{ width:100%; border-collapse:collapse; font-family:var(--font-body); }
.price-table th, .price-table td{
  text-align:left;
  padding:1rem 1.2rem;
  border-bottom:1px solid var(--hairline);
}
.price-table thead th{
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:500;
}
.price-table td.price{ font-family:var(--font-mono); color:var(--ink); white-space:nowrap; }
.price-table tbody tr:hover{ background:color-mix(in srgb, var(--accent) 6%, transparent); }
.table-wrap{ overflow-x:auto; border:1px solid var(--hairline); border-radius:var(--radius); }
.table-wrap .price-table{ min-width:520px; }

/* ---- CTA band -------------------------------------------------------------- */
.cta-band{
  position:relative;
  border-radius:var(--radius);
  padding:clamp(2.5rem,6vw,4.5rem);
  background:linear-gradient(150deg, var(--void-3), var(--void-2));
  border:1px solid var(--hairline);
  overflow:hidden;
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  align-items:center;
  justify-content:space-between;
}
.cta-band::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
  pointer-events:none;
}

/* ---- Poster hero: full-bleed photo with overlaid content ------------------ */
.poster-hero{
  position:relative;
  min-height:min(90vh, 920px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.poster-hero{ background:var(--void); }
.poster-hero > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter:saturate(1.15) contrast(1.05) brightness(0.92);
}
.poster-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--void) 96%, transparent) 0%, color-mix(in srgb, var(--void) 58%, transparent) 38%, color-mix(in srgb, var(--void) 12%, transparent) 68%, transparent 100%),
    linear-gradient(100deg, color-mix(in srgb, var(--void) 65%, transparent) 0%, transparent 58%),
    linear-gradient(150deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent 45%);
}
.poster-hero-content{
  position:relative;
  z-index:1;
  padding:clamp(2rem,6vw,4.5rem);
  max-width:560px;
}
.poster-hero .eyebrow{ margin-bottom:0.7rem; }
.poster-hero h1{ margin-bottom:0.5rem; }
.poster-sub{
  font-family:var(--font-mono);
  font-size:0.85rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--hairline-strong);
  margin-bottom:1.8rem;
}
.icon-list{ display:flex; flex-direction:column; gap:1.1rem; margin-bottom:2.2rem; }
.icon-list-item{ display:flex; align-items:center; gap:0.9rem; }
.icon-list-item .icon-circle{
  width:36px; height:36px; flex-shrink:0;
  border:1px solid color-mix(in srgb, var(--accent) 55%, var(--hairline-strong));
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
  box-shadow:0 0 16px -4px color-mix(in srgb, var(--accent) 70%, transparent);
}
.icon-list-item span{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink);
}
.poster-tagline{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:1.05rem;
  letter-spacing:0.02em;
  color:var(--ink);
}
.poster-tagline em{
  display:block;
  font-family:var(--font-accent);
  font-style:italic;
  font-weight:400;
  text-transform:none;
  font-size:1.35rem;
  color:var(--accent);
  margin-top:0.25rem;
}
.btn-outline{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  margin-top:1.8rem;
  padding:0.9rem 1.7rem;
  border:1px solid color-mix(in srgb, var(--accent) 65%, var(--hairline-strong));
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink);
  box-shadow:0 0 24px -8px color-mix(in srgb, var(--accent) 60%, transparent);
  transition:background 0.2s ease, transform 0.2s ease;
}
.btn-outline:hover{ background:color-mix(in srgb, var(--accent) 14%, transparent); transform:translateY(-2px); }
.poster-price{
  display:block;
  margin-top:0.9rem;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.05em;
  color:var(--ink-faint);
}

/* ---- Sticky mobile booking bar -------------------------------------------- */
.sticky-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  display:none;
  padding:0.85rem var(--pad);
  background:color-mix(in srgb, var(--void) 92%, transparent);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--hairline-strong);
}
.sticky-cta .btn{ width:100%; justify-content:center; }
@media (max-width: 640px){
  .sticky-cta{ display:block; }
  body{ padding-bottom:74px; }
  .cookie-banner{ bottom:calc(74px + 1rem); }
}

/* ---- Cookie consent banner -------------------------------------------------- */
.cookie-banner{
  position:fixed;
  left:1rem; right:1rem; bottom:1rem;
  max-width:640px;
  margin-inline:auto;
  z-index:90;
  background:var(--void-2);
  border:1px solid var(--hairline-strong);
  border-radius:var(--radius);
  padding:1.2rem 1.4rem;
  box-shadow:0 24px 48px -20px rgba(0,0,0,0.7);
  display:flex;
  flex-direction:column;
  gap:1rem;
  transform:translateY(130%);
  opacity:0;
  transition:transform 0.3s ease, opacity 0.3s ease;
  pointer-events:none;
}
.cookie-banner.is-visible{ transform:translateY(0); opacity:1; pointer-events:auto; }
.cookie-banner-text p{ font-size:0.86rem; color:var(--ink-muted); line-height:1.6; }
.cookie-banner-text a{ color:var(--accent); text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:0.75rem; justify-content:flex-end; flex-wrap:wrap; }
.cookie-banner-actions .btn{ padding:0.6rem 1.1rem; font-size:0.72rem; }
.cookie-settings-link{
  background:none;
  border:none;
  color:inherit;
  text-decoration:underline;
  cursor:pointer;
  font:inherit;
  font-size:inherit;
  padding:0;
}

/* ---- Footer ---------------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--hairline);
  padding-block:clamp(3rem,6vw,5rem) 2rem;
  background:var(--void-2);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:2.5rem;
}
.footer-col h5{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:1rem;
}
.footer-col ul{ display:flex; flex-direction:column; gap:0.65rem; }
.footer-col a{ color:var(--ink-muted); font-size:0.9rem; transition:color 0.2s ease; }
.footer-col a:hover{ color:var(--ink); }
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  padding-top:2rem;
  border-top:1px solid var(--hairline);
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--ink-faint);
}
@media (max-width: 880px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---- Utility ---------------------------------------------------------------- */
.text-muted{ color:var(--ink-muted); }
.mt-0{ margin-top:0; }
.center{ text-align:center; margin-inline:auto; }
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (min-width: 981px){
  .hero-grid{ grid-template-columns:1.15fr 0.85fr; align-items:center; }
}