/* ============================================================
   GR Web — styles.css
   Single stylesheet, mobile-first. Vanilla CSS, no preprocessor.
   Palette is neutral grey on near-black with cream text — placeholder
   identity. Accent colour and final type stack land with the identity
   commission (see STATUS.md "Blocked").
   ============================================================ */

/* ─── 0. cross-document view-transitions — Chromium/Safari morph trainer card → detail.
   Firefox + older browsers fall back automatically to standard nav (no morph).
   prefers-reduced-motion disables the morph via the §reduced-motion reset
   (`animation: none !important` on *, *::before, *::after) — view-transition
   pseudo-elements are caught by that universal selector. */
@view-transition { navigation: auto; }

::view-transition-group(*) {
  animation-duration: 320ms;
  animation-timing-function: var(--ease-entrance, cubic-bezier(0.16, 1, 0.3, 1));
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
}

/* Per-trainer view-transition-name. Locked roster of 7 (AGENTS.md V2
   §Trainers and on-site staff). Wired via data-vt-id on the trainer
   card image AND the trainer-detail hero image. */
[data-vt-id="robin-goldmann"]        { view-transition-name: trainer-image-robin-goldmann; }
[data-vt-id="stefani-ruseva"]        { view-transition-name: trainer-image-stefani-ruseva; }
[data-vt-id="julie-fryer"]           { view-transition-name: trainer-image-julie-fryer; }
[data-vt-id="dobrina-parichkova"]    { view-transition-name: trainer-image-dobrina-parichkova; }
[data-vt-id="andrzej-cibis"]         { view-transition-name: trainer-image-andrzej-cibis; }
[data-vt-id="monika-niederreiter"]   { view-transition-name: trainer-image-monika-niederreiter; }
[data-vt-id="carsten-lenz"]          { view-transition-name: trainer-image-carsten-lenz; }

/* ─── 0b. self-hosted variable fonts ────────────────────────────
   Playfair Display (display) + Inter (body). Self-hosted woff2 so the
   server CSP (font-src 'self') is satisfied — no fonts.gstatic.com.
   Variable axis = every weight from a single file each (~87 KB total).
   font-display: swap → no render-blocking first paint (AGENTS perf budget).
   Free OFL/SIL licences — no paid font (brief brand-lock). */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ─── 1. design tokens ──────────────────────────────────────────
   G6A redesign system (brief 2026-05-26). Tracksmith-warm editorial dark.
   Gold #E8C45A metallic accent; champagne #F8E59B highlight; #B88A2A deep shadow side.
   Strip-yellow #F2D544 lives only on the sticky announce strip.
   Legacy aliases (--bg, --fg, --gold, --bg-elev-*, --motion-*) are kept and
   remapped onto the new system so the existing component CSS keeps working. */
:root {
  /* Surfaces */
  --bg-primary: #0A0908;            /* warm black canvas */
  --surface-1: #141316;             /* default cards, panels */
  --surface-2: #1C1B1F;             /* featured card (Couple pricing) */
  --surface-3: #252429;             /* hover/active state */

  /* Atmosphere — V2 depth pools + halo (DESIGN.md). Static, never animated. */
  --atm-pool-1: #1f190f;            /* top-left depth pool */
  --atm-pool-2: #14110c;            /* bottom-right depth pool */
  --atm-halo: rgba(248, 229, 155, 0.06); /* contained champagne top halo */

  /* Gold system — V2 metallic (Stefani-approved 2026-05-29). ONE gold,
     never a flat fill across large areas — accent, metal, or light only. */
  --gold: #E8C45A;                  /* primary metallic accent */
  --champagne: #F8E59B;             /* highlight / specular */
  --gold-hi: var(--champagne);      /* alias for highlight role */
  --gold-deep: #B88A2A;             /* metallic shadow side */
  --gold-metal: linear-gradient(120deg, var(--champagne), var(--gold), var(--gold-deep));
  /* Struck-metal numeral fill (countdown digits, mockup camp-section-countdown-v5) */
  --metal-num: linear-gradient(180deg, #FDF1C8 0%, #F4DB8C 32%, #E2BC4C 52%, #B98E2C 66%, #F6DE8B 100%);
  --strip-yellow: #F2D544;          /* announce strip ONLY — never elsewhere */
  /* legacy gold aliases → remapped onto the one V2 gold */
  --gold-primary: var(--gold);
  --gold-bright: var(--gold);
  --ink: #241701;                   /* text on gold / metallic surfaces */

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-muted: rgba(255, 255, 255, 0.48);

  /* Functional accents (level indicators, capacity states) */
  --state-open: #50C878;            /* capacity >50 */
  --state-filling: #C9A84C;         /* capacity 20-50 — current state */
  --state-limited: #E8913A;         /* capacity 5-19 */
  --state-almost-full: #E8453A;     /* capacity <5 */
  --level-physio: #7A9E7E;          /* sage green for physio role badge */
  --level-mental: #6B7B8D;          /* slate blue for psych role badge */

  /* Typography */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing — 8pt micro / 16px macro */
  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 128px;

  /* Motion */
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* ── legacy aliases → mapped onto the new system ── */
  --bg: var(--bg-primary);
  --bg-elev-1: var(--surface-1);
  --bg-elev-2: var(--surface-2);
  --fg: var(--text-primary);
  --fg-muted: rgba(255, 255, 255, 0.74); /* AA-safe body-secondary on --bg */
  --fg-soft: rgba(255, 255, 255, 0.86);
  --muted:   rgba(255, 255, 255, 0.66);

  --gold-hover: var(--champagne);
  --gold-muted: var(--gold-deep);
  --gold-faint: rgba(232, 196, 90, 0.16);
  --gold-glow: rgba(232, 196, 90, 0.45); /* :focus-visible ring */

  --accent-color: var(--gold-primary);
  --accent-color-hover: var(--gold-bright);
  --hairline: rgba(232, 196, 90, 0.30);
  --hairline-strong: rgba(255, 255, 255, 0.20);
  --hairline-gold: rgba(232, 196, 90, 0.30);
  --danger: #E8453A;

  /* Glassmorphism — V2 recipe (DESIGN.md): cards, fact tiles, register
     steps, nav, chat, modals. Glass sits on its own lit surface. */
  --glass-fill: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03) 56%, rgba(255,255,255,0.05));
  --glass-bg: rgba(10, 9, 8, 0.66);  /* @supports-not fallback fill */
  --glass-blur: 30px;
  --glass-saturate: 140%;
  --glass-brightness: 1.05;
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

  /* layout */
  --max-width: 1200px;
  --max-width-prose: 68ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* type scale — G14: base raised 16→17px for a 40+ audience (legibility);
     steps keep the 1.25 ratio so the whole scale grows ~6% proportionally. */
  --type-scale: 1.25;
  --font-system: var(--font-body);

  --fs-base: 1.0625rem;            /* 17px (was 16px) */
  --fs-sm: calc(var(--fs-base) / var(--type-scale));   /* ~13.6px */
  --fs-md: var(--fs-base);
  --fs-lg: calc(var(--fs-base) * var(--type-scale));   /* ~21px */
  --fs-xl: calc(var(--fs-lg) * var(--type-scale));     /* ~27px */
  --fs-2xl: calc(var(--fs-xl) * var(--type-scale));    /* ~33px */
  --fs-3xl: calc(var(--fs-2xl) * var(--type-scale));   /* ~42px */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.65;                 /* G14: roomier body leading for 40+ */
  --lh-loose: 1.8;

  /* motion (legacy aliases) */
  --motion-fast: var(--duration-fast);
  --motion-base: var(--duration-normal);
  --motion-slow: var(--duration-slow);
  --ease: var(--ease-standard);

  /* focus */
  --focus-ring: 0 0 0 3px var(--gold-glow);

  /* entrance / stagger */
  --stagger-step: 60ms;
  --entrance-distance: 16px;
  --entrance-duration: 500ms;
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── 1a. (removed) Yellow announcement strip — G6A strips the old
   cadmium-yellow strip entirely. Urgency now lives in the sticky bottom
   CTA (capacity state) and the top push-down cookie banner. No element
   on the site uses that yellow any more. */

/* ─── 1b. Phosphor sprite icon sizing ──────────────────────────
   Single shared rule for sprite-rendered icons.
   Usage: <svg class="phi" aria-hidden="true"><use href="/assets/icons.svg#ic-strip-users"/></svg>
   Sizing variants apply via modifier classes; baseline 1em matches
   current line-height. */
.phi {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: currentColor;
  flex-shrink: 0;
}
.phi--sm { width: 0.875em; height: 0.875em; }
.phi--md { width: 1.25em; height: 1.25em; }
.phi--lg { width: 1.5em;  height: 1.5em;  }
.phi--xl { width: 2em;    height: 2em;    }

/* ─── 2. reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, picture, video, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
[hidden] { display: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ─── 3. base typography ────────────────────────────────────── */
html { font-size: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-system);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  position: relative;
}

/* ─── 3a. atmosphere — V2 depth (DESIGN.md). Behind ALL content
   (z-index:-1, position:fixed) so it never shifts foreground contrast —
   the G3 grain/vignette were removed for overlaying text; this layer
   stays strictly behind content. Static: no animation (reduced-motion
   safe; the universal animation reset can't reach a non-animated layer). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(80% 50% at 50% -10%, var(--atm-halo) 0%, transparent 70%),
    radial-gradient(120% 90% at 18% -6%, var(--atm-pool-1) 0%, transparent 60%),
    radial-gradient(120% 90% at 92% 110%, var(--atm-pool-2) 0%, transparent 60%),
    radial-gradient(140% 120% at 50% 40%, transparent 60%, rgba(0, 0, 0, 0.45) 100%),
    var(--bg);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='gr-noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gr-noise)'/%3E%3C/svg%3E");
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); letter-spacing: -0.01em; overflow-wrap: break-word; word-break: break-word; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-family: var(--font-display); font-weight: 400; line-height: var(--lh-snug); }
p { max-width: var(--max-width-prose); }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 0.18em; transition: text-decoration-color var(--motion-fast) var(--ease); }
a:hover { text-decoration-color: var(--fg); }
small { color: var(--muted); font-size: var(--fs-sm); }
hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--section-y) 0; }
::selection { background: var(--fg); color: var(--bg); }

/* ─── 4. layout primitives ──────────────────────────────────── */
.container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); }
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.5rem; }
.stack-xl > * + * { margin-top: 2.5rem; }
.cluster { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.grid { display: grid; gap: 1.5rem; }

/* prose-section: render-friendly defaults for marked-rendered copy.md */
.prose-section { padding-block: var(--section-y); }
.prose-container { max-width: var(--max-width-prose); }
.prose-container h2, .prose-container h3 { margin-top: 2rem; }
.prose-container p { margin-top: 1rem; }

/* ─── 5. components — site-header ───────────────────────────── */
.skip-link {
  position: absolute; top: -100px; left: 1rem;
  background: var(--bg); color: var(--fg);
  padding: 0.5rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-strong); z-index: 1000;
}
.skip-link:focus { top: 1rem; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 9, 8, 0.98);
  border-bottom: 1px solid var(--glass-border);
}
/* backdrop-filter on .site-header is intentionally absent: it degraded
   axe contrast on body content sliding behind during scrollIntoView.
   Glass is retained on .chat-panel + .modal-overlay where the surfaces
   never cover scrolling body text. */
.site-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1rem;
}
/* G10 Finding 4 — mobile sticky CONDENSED header. sticky-header.js toggles
   .is-condensed once scrolled past the static header, mobile-only, drawer-closed.
   The static header is ~77px (44px toggle + 2×1rem padding + 1px border); a literal
   half (~38px) would force the 44px touch target below the DESIGN.md a11y floor, so
   the header condenses to that floor (~52px) by collapsing the inner padding and
   shrinking the logo. Instant (no transition) to honour "animate transform/opacity
   only". Distinct from the in-flow yellow announce strip and the in-card register
   progress bar. */
.site-header.is-condensed .site-header-inner { padding-block: 0.25rem; }
.site-header.is-condensed .brand img { width: 28px; height: 28px; }
.site-header.is-condensed { box-shadow: var(--shadow-sm); }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand img { width: 38px; height: 38px; }
/* G14 — right-hand header group (email + language); on desktop it becomes the
   third grid zone so the centred nav can never collide with the wordmark. */
.site-header-actions { display: flex; align-items: center; gap: 0.75rem; }
/* G9 Finding 502/505-A — brand stays on one line so the flex header can't
   double its height under pressure from the wider nav CTA pill. */
.brand-name { font-family: var(--font-display); font-size: 1.05rem; white-space: nowrap; }
/* G14 #9 — header fit on small phones. The nowrap wordmark + hamburger + lang-toggle
   overflowed at 320 (h-scroll + wordmark overlapping the toggle). Tighten the gap so
   the wordmark still fits down to 360; below 340 drop the visible wordmark (the .brand
   link keeps its aria-label, so the accessible name is unchanged) and show the logo only. */
@media (max-width: 360px) { .site-header-inner { gap: 0.5rem; } }
@media (max-width: 340px) { .brand-name { display: none; } }
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm);
  cursor: pointer; margin-left: auto;
}
.nav-toggle-bar { display: block; width: 22px; height: 2px; background: var(--fg); margin-inline: auto; transition: transform var(--motion-base) var(--ease), opacity var(--motion-fast) var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-nav[data-nav-collapsed] {
  opacity: 0;
  transform: translateY(-12px);
  visibility: hidden;
  pointer-events: none;
}
.site-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(10, 9, 8, 0.98);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  padding: 1rem var(--gutter);
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 280ms;
}
.nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.nav-list a { display: block; text-decoration: none; padding: 0.6rem 0.6rem; border-radius: var(--radius-sm); }
.nav-list a:hover { background: var(--bg-elev-2); }

/* G9 Finding 505 — premium register CTA. `.nav-list a` (specificity 0,0,1,1)
   was winning the cascade over `.btn-primary` (0,0,1,0), so the CTA inherited
   the nav-link recipe: display:block, 6px radius, 6×10 padding, no icon, no
   hover affordance. `.nav-list a.nav-cta` (0,0,2,1) reclaims it as a true
   pill — gold fill, fully rounded, inline icon, hover lift + gold glow,
   :active press, :focus-visible gold ring. Reduced-motion zeroes the
   transforms. */
.nav-list a.nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  border: 1px solid var(--gold-deep);
  border-radius: 999px;
  background: var(--gold-metal);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform var(--motion-fast) var(--ease),
              box-shadow var(--motion-fast) var(--ease),
              filter var(--motion-fast) var(--ease);
}
.nav-list a.nav-cta:hover {
  /* Post-review nit — keep gold-bright fill on hover; swapping to
     gold-primary visibly darkened the pill and worked against the
     translateY/glow "lift". The transform + gold shadow alone carry
     the affordance. */
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}
.nav-list a.nav-cta:active { transform: scale(0.97); }
.nav-list a.nav-cta:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-cta__icon { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 1023px) {
  /* Mobile drawer: full-width-ish, centered, generous touch target. */
  .nav-list a.nav-cta { justify-content: center; padding: 0.85rem 1.25rem; min-block-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-list a.nav-cta:hover,
  .nav-list a.nav-cta:active { transform: none; }
}
/* Snake-border signature (DESIGN.md) — a masked conic light tracks the
   "Anmelden" pill edge; idle 3.6s, accelerating to 1.2s on hover/focus with a
   champagne comet head. @property animates the angle; engines without it show
   a static lit edge. The universal reduced-motion reset stops the rotation. */
@property --snake-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.nav-list a.nav-cta::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--snake-angle), transparent 0 68%, rgba(255, 247, 223, 0.95) 84%, var(--champagne) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: snake-rotate 3.6s linear infinite;
  pointer-events: none;
}
.nav-list a.nav-cta:hover::before,
.nav-list a.nav-cta:focus-visible::before { animation-duration: 1.2s; }
@keyframes snake-rotate { to { --snake-angle: 360deg; } }
/* G8 Finding 406 — contact email. In the mobile drawer it's a stacked nav item
   (≥44px touch target); on wide desktop it's a right-group element (.site-header-email,
   below) so it never competes with the center nav for width. */
.nav-contact a { color: var(--fg-muted); font-size: var(--fs-sm); min-block-size: 44px; display: flex; align-items: center; justify-content: center; }
.nav-contact a:hover { color: var(--gold); background: transparent; }
.site-header-email { display: none; }
@media (min-width: 1280px) {
  .site-header-email {
    display: inline-flex; align-items: center;
    color: var(--fg-muted); font-size: var(--fs-sm); text-decoration: none;
    white-space: nowrap;
  }
  .site-header-email:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
}
.lang-switch a {
  display: inline-block; padding: 0.4rem 0.6rem;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm);
  text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--fs-sm);
  transition: border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.lang-switch a:hover { border-color: var(--gold); color: var(--gold); }
.site-header-inner { position: relative; }

/* ─── 6. components — buttons ───────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: transparent; color: var(--fg);
  text-decoration: none;
  font-family: var(--font-system);
  font-size: var(--fs-md);
  line-height: 1.2;
  transition: background var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease), color var(--motion-base) var(--ease);
}
.btn:hover { background: transparent; border-color: var(--gold); color: var(--gold); }
.btn-primary { background: var(--gold-metal); color: var(--ink); border-color: var(--gold-deep); font-weight: 600; letter-spacing: 0.01em; }
.btn-primary:hover { background: var(--gold-metal); border-color: var(--gold); color: var(--ink); filter: brightness(1.06); }
.btn-secondary { background: var(--bg-elev-1); }
.btn-secondary:hover { background: var(--bg-elev-2); border-color: var(--gold); color: var(--gold); }
.btn-tertiary { padding-inline: 0; border: 0; text-decoration: underline; }
.btn-tertiary:hover { background: transparent; color: var(--gold); }
.btn-large { padding: 1rem 1.6rem; font-size: var(--fs-lg); }

/* ─── 7. components — hero ──────────────────────────────────── */
.hero { padding-block: var(--section-y); border-bottom: 1px solid var(--hairline-gold); position: relative; }
.hero-eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: 0.2em; font-size: var(--fs-sm); font-weight: 500; }
.hero-headline { margin-top: 0.5rem; }
.hero-headline::after { content: ""; display: block; width: 3rem; height: 2px; background: var(--gold); margin-top: 1.25rem; }
.hero-lede { margin-top: 1.25rem; font-size: var(--fs-lg); color: var(--fg-muted); }
/* G8 Finding 408 — marketing copy infusion. Hero subhead constrained + softened
   for legibility over the photo scrim; section intros set a comfortable reading
   width below the heading; footer gets a quiet closing line. */
.hero-lede { max-width: 58ch; font-size: var(--fs-md); line-height: var(--lh-base); color: var(--fg-soft); text-wrap: pretty; }
.section-intro { max-width: var(--max-width-prose); margin-top: 0.85rem; color: var(--fg-muted); line-height: var(--lh-base); text-wrap: pretty; }
.footer-close { margin-top: 0.6rem; max-width: 46ch; color: var(--fg-muted); font-size: var(--fs-sm); line-height: var(--lh-snug); text-wrap: pretty; }
.hero-cta { margin-top: 2rem; }

/* Hero typewriter (DESIGN.md signature). hero-typewriter.js types the Playfair
   headline on load by revealing pre-laid-out characters (opacity only — no
   reflow, so wrapping stays stable), trailing a champagne caret. Chars carry
   their accessible text from first paint, so screen readers always read the
   full headline. prefers-reduced-motion: JS no-ops and the headline shows whole. */
.hero-headline .tw-char { opacity: 0; }
.hero-headline .tw-char.is-on { opacity: 1; transition: opacity 110ms var(--ease); }
.hero-typewriter-caret {
  display: inline-block;
  width: 0.08em;
  height: 0.92em;
  margin-left: 0.08em;
  vertical-align: -0.08em;
  background: var(--champagne);
  border-radius: 1px;
  animation: tw-blink 1s steps(1) infinite;
}
@keyframes tw-blink { 50% { opacity: 0; } }

/* ─── 7b. components — strip-announce ─────────────────────────
   V2 (Architect override 2026-05-29): the cadmium strip-yellow #F2D544 is
   reinstated as the AGENTS.md/DESIGN.md announcement strip — and this is the
   SOLE place #F2D544 appears anywhere on the site. Three factual slots:
   date · venue · seats-left (seats wired to /api/public/stats via
   data-strip-seats). Dark ink on cadmium yellow clears AA comfortably. */
/* G14 — metallic champagne-gold strip (Architect override of the flat #F2D544).
   Left: brand socials + contact mail. Right: date · venue · live seats. Dark
   ink on the gold-metal gradient clears AA. */
.strip-announce {
  border-bottom: 1px solid var(--gold-deep);
  /* G14 — richer metallic sheen across the wide strip (was the flat 120deg
     champagne→gold→deep token). Off-centre champagne highlight + a soft vertical
     sheen so it reads as brushed metal, not a 2-tone wash. Scoped to the strip:
     the --gold-metal token is left untouched for other gold surfaces. */
  background:
    linear-gradient(180deg, rgba(255, 248, 220, 0.22) 0%, rgba(120, 86, 20, 0.10) 100%),
    linear-gradient(95deg, var(--gold-deep) 0%, var(--gold) 32%, var(--champagne) 64%, var(--gold) 84%, var(--gold-deep) 100%);   /* G14 — champagne highlight moved right onto the info cluster + cleaner 5-stop for a crisper sheen */
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.strip-announce__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 0.28rem var(--gutter);   /* minimal height — single 30px line */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  min-height: 30px;
  flex-wrap: nowrap;
}
.strip-announce__left { display: flex; align-items: center; gap: 0.85rem; }
/* brand socials rendered into the strip — compact ink glyphs (override the
   card social styling) */
.strip-announce__left .person-social,
.strip-announce__left ul { display: flex; align-items: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.strip-announce__left .person-card__social-link,
.strip-announce__left a { display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: none; border: 0; width: auto; height: auto; }
.strip-announce__left .phi { width: 15px; height: 15px; }
.strip-announce__mail { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink); text-decoration: none; font-weight: 600; text-transform: none; letter-spacing: 0.01em; }
.strip-announce__mail:hover { text-decoration: underline; text-underline-offset: 2px; }
/* G14 fix — the base .person-card__social-link:hover turns icons champagne
   (≈ white), which vanishes on the gold strip; keep strip socials + mail dark. */
.strip-announce__left a:hover,
.strip-announce__left .person-card__social-link:hover {
  color: var(--ink);
  background: transparent;
}
.strip-announce__info { display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; justify-content: flex-end; gap: 0.3rem 0.7rem; margin: 0; min-width: 0; }
.strip-announce__sep { color: var(--ink); opacity: 0.5; }
.strip-announce__slot--seats { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  /* tight mobile strip: drop the socials/mail and date/venue, keep only the
     scarcity line centred so the strip stays one minimal line. */
  .strip-announce__left { display: none; }
  .strip-announce__inner { justify-content: center; }
  .strip-announce__info { justify-content: center; }
  .strip-announce__slot--date,
  .strip-announce__slot--venue,
  .strip-announce__sep { display: none; }
}
@media (max-width: 480px) {
  .strip-announce { font-size: 10px; }
  .strip-announce__inner { padding-block: 0.45rem; gap: 0.3rem 0.55rem; }
}

/* ─── 8. components — usp-strip ─────────────────────────────── */
.usp-strip { border-bottom: 1px solid var(--hairline); padding-block: 1.5rem; background: var(--bg); position: relative; z-index: 2; isolation: isolate; }
.usp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; position: relative; z-index: 2; justify-items: center; text-align: center; }
/* G10 Finding 2 — the strip is the MOBILE face of the camp facts (hidden >=768px),
   centered with the left gold accent dropped for a clean centered column. */
.usp-item { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding-left: 0; border-left: 0; background: var(--bg); position: relative; z-index: 2; }
.usp-key { color: var(--gold); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; position: relative; z-index: 3; isolation: isolate; }
.usp-val { font-family: var(--font-system); font-variant-numeric: tabular-nums; font-size: var(--fs-lg); color: var(--fg); position: relative; z-index: 3; isolation: isolate; }

/* ─── 9. components — countdown ─────────────────────────────── */
/* G9 Finding 508: the countdown was an `display: inline-flex` blob
   left-aligned in the document flow — a floating scrap below the USP
   strip with empty space to its right. Wrapped in .countdown-band so
   the chip sits centered on its own page-width row, reading as a
   deliberate beat between USP strip and the programmes section. */
.countdown-band {
  background: var(--bg);
  padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--hairline);
}
.countdown-band__inner {
  display: flex;
  justify-content: center;
}
.countdown {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.25rem 1.75rem; border: 1px solid var(--hairline-gold); border-radius: var(--radius-md);
  margin: 0;
  background: linear-gradient(180deg, rgba(232, 196, 90, 0.04) 0%, transparent 100%);
  width: fit-content;
}
.countdown-label, .countdown-unit { color: var(--gold); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.18em; font-weight: 500; }
/* Countdown value is data, not an emotional headline → UI/data font + tabular-nums
   (DESIGN.md bans Playfair on data). Rendered as a numeral tile by the bordered
   .countdown box above. */
.countdown-value { font-family: var(--font-system); font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--fs-3xl); color: var(--fg); letter-spacing: -0.01em; }

/* ─── 9b. camp overview — "Trainiere mit Champions" (mockup
   camp-section-countdown-v5): headline + glass D:H:M:S shell with metal-num
   digits + champagne halo + 6 glass fact tiles + snake-border CTA. Replaces
   the old countdown band. Motion (snake CTA) is conic-only; global
   reduced-motion reset zeroes it. */
.camp-overview {
  /* G10 Finding 2 — section stays visible on ALL breakpoints so the live
     countdown ("Anmeldung noch bis 9. Juli") shows on mobile too. Only the
     duplicate .facts tiles are hidden on mobile (the centered .usp-strip covers
     those — see the .facts rule below). */
  position: relative;
  padding-block: var(--section-y);
  border-bottom: 1px solid var(--hairline);
  text-align: center;
  overflow: hidden;
}
.camp-overview__vignette {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(125% 105% at 50% 32%, transparent 48%, rgba(0, 0, 0, 0.5) 100%);
}
.camp-overview__inner { position: relative; z-index: 2; max-width: 760px; }
.camp-overview__eyebrow {
  font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,.46)); font-weight: 500;
  margin: 0 auto;
}
.camp-overview__headline {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.5rem);
  letter-spacing: -0.015em; line-height: 1.05;
  margin: 0.875rem auto 0; max-width: none;
}
.camp-overview__headline::after { content: none; }
.camp-overview__subline {
  font-size: 1rem; color: var(--muted); max-width: 540px;
  margin: 1rem auto 0; line-height: 1.6; font-weight: 400;
}

/* Countdown shell — glass card + champagne halo */
/* G14 #4 — match the timer shell to the 760px fact-tile grid below (was 540px, so the
   timer sat as a narrow indented box above a wider grid). Now edge-aligned with the tiles. */
.cd-shell { position: relative; margin: 2.25rem auto 0; max-width: 760px; }
.cd-shell::before {
  content: ""; position: absolute; inset: -20px -8px; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 84% at 50% 32%, rgba(248, 229, 155, 0.1), transparent 70%);
}
.cd {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; justify-content: center; gap: 11px;
  padding: 1.75rem 1.5rem; border-radius: var(--radius-2xl);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035) 50%, rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(34px) saturate(145%) brightness(1.05);
  backdrop-filter: blur(34px) saturate(145%) brightness(1.05);
  box-shadow: 0 38px 84px -32px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.cd::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.06) 36%, rgba(255, 255, 255, 0.03) 64%, rgba(248, 229, 155, 0.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.cd-unit { display: flex; flex-direction: column; align-items: center; width: 84px; }
.cd-num {
  height: 58px; line-height: 58px;
  font-family: var(--font-body);
  font-weight: 700; font-size: clamp(2.4rem, 8vw, 3.25rem); letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums;
  background: var(--metal-num);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 8px rgba(232, 196, 90, 0.22));
}
.cd-ulab {
  margin-top: 0.625rem; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,.46)); font-weight: 600;
}
.cd-sep { height: 58px; display: flex; align-items: center; font-weight: 300; font-size: 2.25rem; color: rgba(232, 196, 90, 0.3); }
.cd-cap { margin: 1rem auto 0; font-size: 0.875rem; color: var(--muted); }
.cd-cap b { color: var(--gold-hi); font-weight: 600; }

/* 6 glass fact tiles */
.camp-overview .facts {
  /* G10 Finding 2 (follow-up) — the centered .usp-strip already covers these
     facts on mobile; hide the duplicate tiles here and restore the grid at
     >=768px. The countdown + CTA are siblings of .facts, so they stay visible. */
  display: none; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem; margin-top: 2.625rem;
}
/* Desktop (>=768px, same boundary as the strip's hide) restores the facts grid
   so exactly one of {strip, facts} shows per breakpoint. */
@media (min-width: 768px) { .camp-overview .facts { display: grid; } }
.camp-overview .tile {
  /* G11 V2 — overflow:hidden sliced the icon glow (.tile__glow sits at top:-30%
     so its soft upper bleed was hard-cut at the tile's top edge). Drop the clip
     and isolate the stacking context so the glow bleeds softly instead — same
     fix pattern as the camp-cta snake glow (G10 Finding 5b). The ::after lit
     border uses mask-composite (not overflow), so it is unaffected. */
  position: relative; isolation: isolate;
  /* G14 #4 — roomier tiles for the 40+ audience (was 150px / 1.25rem 1rem). */
  min-height: 168px; border-radius: 20px; padding: 1.6rem 1.3rem;
  text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.028) 58%, rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(24px) saturate(140%) brightness(1.06);
  backdrop-filter: blur(24px) saturate(140%) brightness(1.06);
  box-shadow: 0 22px 46px -26px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: transform 300ms var(--ease-entrance, cubic-bezier(.22,1,.36,1));
}
.camp-overview .tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.02) 66%, rgba(248, 229, 155, 0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.camp-overview .tile__glow {
  position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
  width: 80%; height: 60%; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%, rgba(248, 229, 155, 0.1), transparent 70%);
}
.camp-overview .tile:hover { transform: translateY(-3px); }
.camp-overview .tile__ic {
  width: 26px; height: 26px; stroke: var(--gold); fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 0.75rem;
  filter: drop-shadow(0 0 12px rgba(232, 196, 90, 0.5));
}
.camp-overview .tile__lab {
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,.46)); font-weight: 600; margin-bottom: 0.5rem;
}
.camp-overview .tile__val { font-family: var(--font-display); font-size: 1.32rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.camp-overview .tile__sub {
  font-size: 0.8rem; color: var(--text-muted, rgba(255,255,255,.46));
  margin-top: 0.375rem; font-weight: 400; line-height: 1.4; max-width: 150px;
}

/* CTA — snake-border signature (reuses the --snake-angle @property + keyframe) */
/* G14 #5 — complete funnel block: honest live scarcity (bound to /api/public/stats via
   capacity.js, neutral default on failure — never fabricated) above the CTA, price +
   payment reassurance below. Stacked + centred. */
.camp-overview__act { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.camp-cta-scarcity { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--fs-sm); }
.camp-cta-note { margin: 0; font-size: var(--fs-sm); color: var(--fg-muted, rgba(255, 255, 255, 0.5)); }
.camp-cta {
  position: relative; border: none; border-radius: 14px;
  padding: 0.9375rem 2rem; cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em;
  color: var(--gold-hi); background: rgba(232, 196, 90, 0.07);
  isolation: isolate; /* G10 Finding 5b — overflow:hidden removed; it was clipping the snake comet glow */
  box-shadow: 0 0 24px -12px rgba(232, 196, 90, 0.5);
  min-block-size: 44px; display: inline-flex; align-items: center; justify-content: center;
  transition: transform 150ms, box-shadow 300ms;
}
.camp-cta__lbl { position: relative; z-index: 3; }
.camp-cta::after {
  content: ""; position: absolute; inset: -1.6px; border-radius: inherit; padding: 1.6px; z-index: 0;
  background: linear-gradient(180deg, rgba(232, 196, 90, 0.4), rgba(232, 196, 90, 0.1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.camp-cta::before {
  content: ""; position: absolute; inset: -1.6px; border-radius: inherit; padding: 1.6px; z-index: 1;
  background: conic-gradient(from var(--snake-angle), transparent 0deg, transparent 230deg, rgba(248, 229, 155, 0.05) 250deg, var(--gold) 296deg, var(--gold-hi) 320deg, #fff7df 332deg, transparent 346deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: snake-rotate 3.6s linear infinite;
}
.camp-cta:hover, .camp-cta:focus-visible { transform: translateY(-1px); box-shadow: 0 0 40px -8px rgba(232, 196, 90, 0.7); outline: none; }
.camp-cta:hover::before, .camp-cta:focus-visible::before { animation-duration: 1.2s; }
.camp-cta:focus-visible { box-shadow: 0 0 40px -8px rgba(232, 196, 90, 0.7), var(--focus-ring); }
.camp-cta:active { transform: scale(0.97); }

@media (max-width: 560px) {
  .camp-overview .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-unit { width: clamp(58px, 19vw, 84px); }
}

/* ─── 10. components — programme-card / programmes-section ── */
.programmes-section, .trainers-section, .team-section, .schedule-section, .faq-teaser, .tally-section { padding-block: var(--section-y); border-bottom: 1px solid var(--hairline); }
.programmes-section > .container > h2, .trainers-section > .container > h2, .team-section > .container > h2, .schedule-section > .container > h2 { position: relative; padding-bottom: 0.5rem; }
.programmes-section > .container > h2::after, .trainers-section > .container > h2::after, .team-section > .container > h2::after, .schedule-section > .container > h2::after { content: ""; display: block; width: 2rem; height: 1px; background: var(--gold); margin-top: 0.75rem; }
.programme-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; }
.programme-card {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem; background: var(--bg-elev-1);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  transition: border-color var(--motion-base) var(--ease), transform var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease);
}
/* V2 glass on programme cards (DESIGN.md: cards get the lit-glass surface) */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .programme-card {
    background: var(--glass-fill), rgba(20, 19, 22, 0.55);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-sm);
  }
}
.programme-card:hover { border-color: var(--hairline-gold); transform: translateY(-2px); }
.programme-name { color: var(--fg); font-family: var(--font-system); font-weight: 600; }
.programme-tagline { color: var(--gold); font-style: italic; font-size: var(--fs-sm); }
.programme-description { color: var(--fg-muted); }
.programme-formats-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.programme-format { display: inline-block; padding: 0.15rem 0.6rem; font-size: var(--fs-xs, 0.75rem); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg); background: var(--bg-elev-2, var(--bg-elev-1)); border: 1px solid var(--hairline); border-radius: 999px; }
.programme-meta { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; margin-top: 0.5rem; color: var(--muted); font-size: var(--fs-sm); }
.programme-meta dt { color: var(--muted); }
.programme-meta dd { margin: 0; color: var(--fg); }

/* ─── 10b. programme numbered-index layout (mockup camp-program-layout-v2) ──
   Desktop two-column: numbered index (gold active bar) + swapping glass
   detail card (ghost number, gold-glow icon, Playfair h3, tag pill, meta
   grid). Mobile <=760px: index hidden, details stack as cards. Motion is
   opacity/transform/filter only; the global reduced-motion reset zeroes it. */
.programmes-section--layout > .container { max-width: 1120px; }
/* G15-UX — desktop scroll-PIN removed. The pinned ~250vh track mapped scroll
   progress onto the active card (programme-index.js), which read as scroll-
   jacking: a fast scroll overshot the whole track and "skipped" past the next
   section. The section now flows at its natural height; the numbered index
   swaps the detail card on click / arrow-key, and mobile stacks the cards. */
.programme-pin[data-programme-pin] { min-height: 0; }
.programme-pin[data-programme-pin] > .programme-layout { position: static; top: auto; max-height: none; }
.programme-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.125rem);
  align-items: start;
}
.programme-layout__head { position: relative; }
.programme-layout__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0.5rem 0 1.5rem;
}
.programme-layout__title::after { content: none; } /* no underline rule in this layout */

.programme-index { display: flex; flex-direction: column; }
.programme-idx {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 0.95rem 0.5rem 0.95rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-body);
  min-block-size: 44px;
  transition: background 350ms var(--ease-entrance, cubic-bezier(.22,1,.36,1));
}
.programme-idx:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.programme-idx::before {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  height: 60%; width: 2px;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  transition: transform 350ms var(--ease-entrance, cubic-bezier(.22,1,.36,1));
}
.programme-idx__n {
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted, rgba(255,255,255,.46));
  font-variant-numeric: tabular-nums;
  width: 22px; transition: color 350ms;
}
.programme-idx__nm {
  font-size: 1.125rem; font-weight: 500;
  color: var(--muted);
  transition: color 350ms, transform 350ms var(--ease-entrance, cubic-bezier(.22,1,.36,1));
}
.programme-idx:hover .programme-idx__nm { color: var(--fg); }
.programme-idx.is-on::before { transform: translateY(-50%) scaleY(1); }
.programme-idx.is-on .programme-idx__n { color: var(--gold); }
.programme-idx.is-on .programme-idx__nm { color: var(--fg); transform: translateX(4px); }
.programme-idx:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.programme-details { position: relative; min-height: 440px; }
.programme-detail {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transform: translateY(34px) scale(0.97);
  filter: blur(4px);
  /* G14 #6b — fade + slide share one eased duration so they settle together (was
     opacity 500 / transform 600, a slight late settle); lighter exit blur for a
     cleaner cross-fade. Even per-card pacing is handled in programme-index.js. */
  transition: opacity 520ms var(--ease-entrance, cubic-bezier(.22,1,.36,1)), transform 520ms var(--ease-entrance, cubic-bezier(.22,1,.36,1)), filter 420ms ease;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.028) 56%, rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(28px) saturate(140%) brightness(1.05);
  backdrop-filter: blur(28px) saturate(140%) brightness(1.05);
  border-radius: var(--radius-2xl);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  overflow: hidden;
}
.programme-detail::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.05) 42%, rgba(248, 229, 155, 0.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.programme-detail.is-on { opacity: 1; pointer-events: auto; transform: none; filter: none; }
.programme-detail.is-up { opacity: 0; transform: translateY(-34px) scale(0.97); filter: blur(4px); }
.programme-detail__ghost {
  position: absolute; top: -16px; right: 14px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 150px; line-height: 1;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none; user-select: none;
}
.programme-detail__icon {
  width: 32px; height: 32px;
  stroke: var(--gold); fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(232, 196, 90, 0.5));
  position: relative; z-index: 2;
}
.programme-detail__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 1.8rem);
  margin: 1rem 0 0.75rem;
  position: relative; z-index: 2;
}
.programme-detail__desc {
  font-size: 1rem; color: var(--muted); line-height: 1.65;
  max-width: 500px; position: relative; z-index: 2;
}
.programme-detail__tag {
  display: inline-block; margin-top: 1.125rem;
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-hi); font-weight: 600;
  border: 1px solid rgba(232, 196, 90, 0.32);
  border-radius: 30px; padding: 0.3rem 0.875rem;
  position: relative; z-index: 2;
}
.programme-detail__meta {
  display: flex; flex-wrap: wrap; gap: 0.875rem 2.125rem;
  margin: 1.5rem 0 0; padding-top: 1.125rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative; z-index: 2;
}
.programme-detail__meta-pair { display: flex; flex-direction: column; }
.programme-detail__meta dt {
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,.46)); font-weight: 600;
}
.programme-detail__meta dd { margin: 0.25rem 0 0; font-size: 0.9375rem; font-weight: 500; color: var(--fg); }

@media (max-width: 760px) {
  .programme-layout { grid-template-columns: 1fr; gap: 1.375rem; }
  .programme-index { display: none; }
  .programme-details { min-height: 0; display: flex; flex-direction: column; gap: 1rem; }
  .programme-detail,
  .programme-detail.is-on,
  .programme-detail.is-up {
    position: relative; inset: auto; opacity: 1; pointer-events: auto;
    transform: none; filter: none;
  }
  .programme-detail__ghost { font-size: 104px; top: -8px; }
}

/* ─── 11. components — trainer-card / team-card ───────────────
   (G8 Finding 401) The old <details>-based trainer/team card was replaced
   by the .person-card flip system in §11b below. Its element rules
   (.trainer-photo / .trainer-name / .trainer-role / .trainer-usp /
   .trainer-bio / .trainer-meta / .meta-label / .team-*) were removed here. */

/* ─── 11b. components — person-card (G8 Finding 401) ──────────────
   Click-to-flip trainer/physio card. Front: 3:4 portrait + gold specialty
   caption + name + role pill (+ social row, dormant until handles land).
   Back: typewriter bio + profile link. Flip is 3D rotateY, gated on
   html.flip-js so the no-JS fallback shows both faces stacked. */
.person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: 2.5rem;
}

.person-card { perspective: 1200px; }
/* G14 #1 — equal visible card heights (a row of cards reads as one band).
   The grid already stretches .person-card; make the inner + front fill it so the
   lit glass face is the same height on every card, not just the outer box.
   Scoped to flip-js so the no-JS stacked fallback keeps its natural auto height. */
html.flip-js .person-card,
html.flip-js .person-card__inner,
html.flip-js .person-card__front { height: 100%; }

.person-card__inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.person-card[data-flipped] .person-card__inner { transform: rotateY(180deg); }

.person-card__front,
.person-card__back {
  position: relative;
  border-radius: var(--radius-xl);
  background: var(--surface-1); /* fallback when backdrop-filter unsupported */
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* V2 glass on the card front (mockup trainer-cards-v2) — lit-glass surface. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .person-card__front {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.028) 56%, rgba(255, 255, 255, 0.05)), rgba(20, 19, 22, 0.5);
    -webkit-backdrop-filter: blur(30px) saturate(140%) brightness(1.05);
    backdrop-filter: blur(30px) saturate(140%) brightness(1.05);
  }
}
/* Masked lit border (bright top-left → faint warm bounce) on each face. */
.person-card__front::after,
.person-card__back::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  pointer-events: none; z-index: 3;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.05) 42%, rgba(248, 229, 155, 0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.person-card__front {
  display: flex;
  flex-direction: column;
  /* G14 #1 — faint warm bottom edge (DESIGN.md glass spec) so the leftover space
     below top-packed credentials on short cards reads as a lit plinth, not a void. */
  box-shadow: inset 0 -26px 42px -30px rgba(232, 196, 90, 0.08);
  transition: transform var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

@media (hover: hover) {
  .person-card:not([data-flipped]):hover .person-card__front {
    transform: translateY(-5px);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  }
  .person-card:not([data-flipped]):hover .person-card__photo img { transform: scale(1.03); }
}

.person-card__tap { position: relative; }

.person-card__photo {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface-2);
}
.person-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
  transition: transform var(--duration-normal) var(--ease-standard);
}
/* Bottom fade — grounds the portrait into the card (mockup .portrait::after). */
.person-card__photo::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(10, 9, 8, 0.55));
  pointer-events: none;
}
/* Gold-radial + Playfair-initials fallback when the real photo is missing
   (mockup trainer-cards-v2 portrait). Replaces the grey-silhouette placeholder. */
.person-card__photo--fallback {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 110% at 50% 18%, rgba(232, 196, 90, 0.16), transparent 55%),
    linear-gradient(180deg, #211a0f, #100d09);
}
.person-card__ini {
  font-family: var(--font-display); font-weight: 600; font-size: 62px;
  color: rgba(248, 229, 155, 0.18); letter-spacing: 0.02em; line-height: 1;
}
/* Orange "Platzhalter" flag — photo or social still unconfirmed (mockup .flag).
   Decorative + pointer-events:none so it never blocks the flip tap target. */
.person-card__flag {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: #ffd9a0; background: rgba(120, 70, 10, 0.5);
  border: 1px solid rgba(255, 180, 90, 0.4); border-radius: 20px; padding: 3px 9px;
  pointer-events: none;
}

/* flip affordance — subtle gold "+" badge, only when JS can flip.
   G9 Finding 507: enlarged to 2.75rem (44px floor) and given a slow
   gold-faint pulse so it reads as clickable. The badge is decorative
   (::after); the real click target is .person-card__flip below.
   Pulse pauses on hover (the hover state is itself the affordance)
   and on flipped state. Reduced-motion path strips the animation. */
html.flip-js .person-card__photo::after {
  content: "+";
  position: absolute;
  right: 0.65rem; bottom: 0.65rem;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--hairline-gold);
  background: rgba(10, 9, 8, 0.62);
  color: var(--gold);
  font-size: 1.4rem; line-height: 1;
  transition: transform var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
  animation: person-card-flip-pulse 2.6s var(--ease-standard) infinite;
}
.person-card:hover .person-card__photo::after,
.person-card[data-flipped] .person-card__photo::after {
  animation: none;
}
.person-card:not([data-flipped]):hover .person-card__photo::after {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
  transform: scale(1.08);
}
@keyframes person-card-flip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--gold-faint); }
  60%      { box-shadow: 0 0 0 10px transparent; }
}

.person-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1.125rem 1.375rem 0;
}
.person-card__caption {
  color: var(--gold);
  font-size: 0.75rem; /* G14 #1 — 12px floor (DESIGN.md "no sub-12px"); was 0.66rem */
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  line-height: var(--lh-snug);
  /* G14 #1 — reserve two lines so a wrapping role label (e.g. the physio's long
     title) never pushes the name down; names align across the row. Bottom-align
     the text (flex column + justify-end keeps wrapping intact) so a 1-line caption
     still sits directly above the name with no floating gap. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: 2.6em;
}
.person-card__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--fg);
  margin: 0;
  line-height: 1.08;
  text-wrap: balance;
}
.person-card__pill {
  display: inline-block;
  padding: 0.18rem 0.7rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-size: calc(var(--fs-sm) * 0.92);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.5;
}
.person-card__pill--physio { border-color: var(--level-physio); color: var(--level-physio); }

/* overlay flip trigger — covers photo + head; enabled only with JS */
.person-card__flip {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-md);
}
html.flip-js .person-card__flip { display: block; }
/* Focus ring must be an INSET outline, not box-shadow: the card faces use
   overflow:hidden, which clips an outset box-shadow ring (Tier-1 review BLOCKER).
   outline-offset keeps the ring inside the clipped face so it stays visible. */
.person-card a:focus-visible,
.person-card button:focus-visible {
  /* G14 #1 — dark inset companion so the gold ring stays visible even when the
     flip overlay sits over a bright portrait region (WCAG 2.4.13 focus appearance). */
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.55);
  outline: 2px solid var(--gold-bright);
  outline-offset: -2px;
}

/* social row — siblings below the tap region so they stay clickable.
   G9 Finding 510: the same row also renders inside .person-card__back
   so handles appear on both faces of the card. The back override below
   resets the front-tuned padding (which is bottom-right offset for the
   front bottom) so the row sits naturally between the back-meta block
   and the back-actions row. Both render-points share renderPersonSocial
   output — they're null-gated together. */
.person-card__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0 calc(var(--space-2) - 0.4rem) calc(var(--space-2) - 0.4rem);
}
.person-card__back > .person-card__social {
  padding: 0;
  margin-top: 0.85rem;
}
/* Front social row sits below the chips with a hairline divider (mockup
   .social{border-top}). Null-gated: only renders for confirmed handles. */
.person-card__front > .person-card__social {
  margin: 0.875rem 1.375rem 0;
  padding: 0.8rem 0 1.375rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.person-card__social-link {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  color: var(--gold);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.person-card__social-link .phi { width: 18px; height: 18px; }
.person-card__social-link:hover { color: var(--gold-hover); background: var(--gold-faint); }

/* back face */
.person-card__back {
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  background: var(--surface-2);
}
html.flip-js .person-card__back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  overflow-y: auto;
}
.person-card__bio {
  color: var(--fg-soft);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  margin: 0 0 1rem;
  text-wrap: pretty;
}
.person-card__bio .tw-ch { transition: opacity 60ms linear; }
.person-card__cursor {
  display: inline-block;
  width: 0;
  height: 1em;
  margin-left: 1px;
  border-right: 2px solid var(--gold);
  vertical-align: text-bottom;
}
.person-card__cursor.is-typing { animation: tw-blink 800ms steps(1, end) infinite; }
@keyframes tw-blink { 0%, 60% { opacity: 1; } 60.01%, 100% { opacity: 0; } }

/* G9 Finding 504 — factual back-face meta block bridging bio + actions.
   Renders only when formats_label is present; languages row is optional.
   The hairline-gold rule above marks the transition from prose to data
   and visually fills the dead space short bios used to leave below. */
.person-card__back-meta {
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline-gold);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.85rem;
  row-gap: 0.25rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.person-card__back-meta dt {
  font-family: var(--font-body); font-weight: 600;
  color: var(--gold-primary);
  letter-spacing: 0.04em; text-transform: uppercase;
  font-size: calc(var(--fs-sm) - 1px);
}
.person-card__back-meta dd {
  margin: 0; color: var(--text-secondary);
  text-wrap: pretty;
}

.person-card__back-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1rem;
}
.person-card__profile {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-block-size: 44px;
  color: var(--gold);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
}
.person-card__profile:hover { color: var(--gold-hover); }
.person-card__profile .phi { width: 0.95em; height: 0.95em; }
.person-card__flip-back {
  display: none;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  padding: 0.4rem 0.9rem;
  font-size: var(--fs-sm);
  min-block-size: 44px;
}
html.flip-js .person-card__flip-back { display: inline-flex; align-items: center; }
.person-card__flip-back:hover { border-color: var(--gold); color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .person-card__inner,
  .person-card__front,
  .person-card__photo img { transition: none; }
  .person-card__cursor.is-typing { animation: none; }
  .person-card__bio .tw-ch { transition: none; }
  html.flip-js .person-card__photo::after { animation: none; }
}

/* ─── 12. components — schedule timeline ───────────────────────
   Vertical timeline with a gold connector rail. Each block uses a
   3-column grid (time | rail with dot | body). The rail draws a 1px
   gold line continuously down the day; a gold dot marks each block's
   start. Time column is mono and right-aligned so columns of times
   stack neatly. Body shows title + room + trainer. */

.schedule-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-top: 2rem; }
.schedule-day-header { padding-bottom: 1rem; }
.schedule-day-title { font-size: var(--fs-xl); }
.schedule-day-date { color: var(--gold); font-size: var(--fs-sm); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.schedule-day-blocks { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.25rem; }
.schedule-block {
  display: grid;
  grid-template-columns: 4.5rem 1.5rem 1fr;
  gap: 1rem;
  padding-block: 1rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  transition: background var(--motion-base) var(--ease),
              box-shadow var(--motion-base) var(--ease);
}
.schedule-block:hover {
  background: rgba(232, 196, 90, 0.03);
}
.schedule-block:hover .schedule-block-marker::after { transform: translateX(-50%) scale(1.25); }
.schedule-block-time {
  color: var(--gold);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  text-align: right;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  padding-top: 0.05rem;
}
.schedule-block-dash { display: none; }
.schedule-block-marker { position: relative; }
.schedule-block-marker::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--hairline-gold);
  transform: translateX(-50%);
}
.schedule-block-marker::after {
  content: "";
  position: absolute; top: 0.55rem; left: 50%;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--gold);
  transform: translateX(-50%);
  transition: transform var(--motion-base) var(--ease);
  box-shadow: 0 0 0 4px var(--bg);
}
.schedule-block-body { display: flex; flex-direction: column; gap: 0.2rem; padding-top: 0.05rem; }
.schedule-block-name { font-family: var(--font-system); font-weight: 600; font-size: var(--fs-lg); }
.schedule-block-room, .schedule-block-trainer { color: var(--muted); font-size: var(--fs-sm); }
.schedule-block-trainer::before { content: "· "; color: var(--gold); }

/* Provisional schedule banner — clear flag above the timeline so
   viewers know the times are not yet confirmed.
   G9 Finding 501 — banner aligns with the 920px schedule list below
   instead of hanging on the 1200px container left edge. */
.schedule-provisional-banner {
  /* G11 V1 (follow-up) — left-align to share the schedule's left edge with the
     timeline + header inset (was centred at 920px, which left it 60px right of
     the timeline once that was left-aligned). */
  max-width: 920px; margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--hairline-gold);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  background: linear-gradient(180deg, rgba(232, 196, 90, 0.06) 0%, transparent 100%);
}
.schedule-provisional-banner strong { color: var(--gold); }

/* ─── 13. components — venue ────────────────────────────────── */
.venue { padding-block: var(--section-y); border-bottom: 1px solid var(--hairline); }
.venue-inner { display: grid; gap: 2rem; }
.venue-title { margin-bottom: 0.25rem; }
.venue-name { font-size: var(--fs-lg); }
.venue-address { font-style: normal; line-height: var(--lh-snug); color: var(--fg-muted); }
.venue-getting-there h3, .venue-facilities h3, .venue-what-to-bring h3 { font-size: var(--fs-lg); margin-bottom: 0.5rem; }
.venue-what-to-bring ul { padding-left: 1.25rem; color: var(--fg-muted); }

/* ─── 14. components — hotel-card ───────────────────────────── */
.hotel-card { padding: 1.25rem; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--bg-elev-1); }
.hotel-name { font-size: var(--fs-lg); margin-bottom: 0.25rem; }
.hotel-distance { color: var(--muted); font-size: var(--fs-sm); }
.hotel-description { color: var(--fg-muted); margin-top: 0.5rem; }
.hotel-link { color: var(--fg); }

/* ─── 15. components — testimonial-card ─────────────────────── */
.testimonial-card { padding: 1.5rem; border-left: 2px solid var(--hairline-strong); }
.testimonial-quote p { font-family: var(--font-display); font-size: var(--fs-lg); line-height: var(--lh-snug); }
.testimonial-attribution { color: var(--muted); font-size: var(--fs-sm); margin-top: 0.75rem; }
.testimonial-name { color: var(--fg); }
.testimonial-context { display: block; }

/* ─── 16. components — faq-teaser / faq-item / faq-filter ───── */
/* G14 #3 — 2-column always-open Q&A (no click-to-reveal). Question in gold, answer in
   muted white, each pair topped by a gold hairline. Header + CTA centred to match the
   other section headers. Single column < 760px. */
.faq-teaser-header { text-align: center; max-width: var(--max-width-prose, 60ch); margin-inline: auto; }
.faq-teaser-list { list-style: none; padding: 0; margin-top: 2.5rem; display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .faq-teaser-list { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
/* G15-UX — each Q/A is now ONE card: a question panel and an answer panel
   joined by a fading gold hairline, so they read as one designed unit (was two
   bare rows each topped by a solid line). */
.faq-teaser-item {
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022) 56%, rgba(255, 255, 255, 0.04));
  -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.04);
  backdrop-filter: blur(20px) saturate(140%) brightness(1.04);
  overflow: hidden;
}
.faq-teaser-q {
  position: relative; margin: 0;
  padding: 1.15rem 1.4rem 1rem;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-lg);
  color: var(--gold); line-height: 1.3; text-wrap: pretty;
}
.faq-teaser-q::after {
  content: ""; position: absolute; left: 1.4rem; right: 1.4rem; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-gold) 18%, var(--hairline-gold) 82%, transparent);
}
.faq-teaser-a {
  margin: 0; padding: 1rem 1.4rem 1.25rem;
  color: var(--fg-2, var(--text-secondary)); font-size: var(--fs-md); line-height: var(--lh-base); text-wrap: pretty;
}
.faq-teaser-a > :first-child { margin-top: 0; }
.faq-teaser-a > :last-child { margin-bottom: 0; }
.faq-teaser-cta { margin-top: 2.5rem; text-align: center; max-width: none; }
/* G11 V7 — the FAQ hero had zero top padding, so the heading jammed up under the
   sticky header. Add the same top clearance other standalone pages use
   (--section-y, as on .legal-article / .danke-hero / .schedule-standalone). */
.faq-hero { padding-top: var(--section-y); }
/* G14 #9 — minmax(0,1fr) so the single grid column tracks the container width; without
   it the implicit column sized to the longest question's max-content (~315px), overflowing
   the 288px content area at 320 (h-scroll on the standalone FAQ page). */
.faq-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.faq-item { padding: 1.25rem 1.5rem; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--bg-elev-1); }
.faq-item[open] { border-color: var(--hairline-strong); background: var(--bg-elev-2); }
.faq-item-question { cursor: pointer; font-family: var(--font-display); font-size: var(--fs-lg); list-style: none; }
.faq-item-question::-webkit-details-marker { display: none; }
.faq-item-answer { margin-top: 0.75rem; color: var(--fg-muted); }
.faq-item[hidden] { display: none; }
.faq-filter { display: grid; gap: 1.5rem; margin-block: 2rem; padding: 1.25rem; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--bg-elev-1); }
.faq-filter-group legend { font-family: var(--font-display); font-size: var(--fs-md); margin-bottom: 0.5rem; }
.faq-filter-group { border: 0; padding: 0; margin: 0; }
.faq-filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.faq-chip {
  display: inline-block; padding: 0.4rem 0.8rem;
  border: 1px solid var(--hairline-strong); border-radius: 999px;
  background: transparent; color: var(--fg); font-size: var(--fs-sm);
  cursor: pointer; transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.faq-chip:hover { background: var(--bg-elev-2); }
.faq-chip[aria-pressed="true"] { background: var(--gold); color: var(--bg); border-color: var(--gold); font-weight: 500; }

/* ─── 16a. components — pricing section ─────────────────────────
   Section with a 3-row pricing definition list (couple / solo /
   kids) plus included items and the cash-on-spot payment notice.
   Gold accents on category labels + euros; --fg body. */

.pricing-section { padding-block: var(--section-y); border-bottom: 1px solid var(--hairline); }
.pricing-inner { display: grid; gap: 1.5rem; }
.pricing-header { max-width: var(--max-width-prose); }
.pricing-lede { color: var(--fg-muted); margin-top: 0.5rem; }
.pricing-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pricing-table dt,
.pricing-table dd { margin: 0; padding: 1rem 1.25rem; }
.pricing-table dt {
  background: var(--bg-elev-1);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  border-bottom: 1px solid var(--hairline);
}
.pricing-table dd {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  border-bottom: 1px solid var(--hairline);
}
.pricing-table dt:last-of-type,
.pricing-table dd:last-of-type { border-bottom: 0; }
.pricing-cell { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.pricing-cell strong { color: var(--fg); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; }
.pricing-meta { color: var(--muted); font-size: var(--fs-sm); }
.pricing-included { padding: 1rem 1.25rem; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--bg-elev-1); }
.pricing-included-heading { font-size: var(--fs-md); margin-bottom: 0.5rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; }
.pricing-included-list { padding-left: 1.2rem; color: var(--fg-muted); margin: 0; }
.pricing-payment-note { padding: 0.85rem 1.25rem; border-left: 2px solid var(--gold); background: var(--bg-elev-1); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.pricing-payment-note strong { color: var(--gold); }
.pricing-deadline { color: var(--fg-muted); }
.pricing-deadline strong { color: var(--gold); }
.pricing-deadline time { font-family: var(--font-mono); color: var(--fg); }

@media (min-width: 768px) {
  .pricing-table { grid-template-columns: minmax(10rem, max-content) 1fr; }
  .pricing-table dt { border-right: 1px solid var(--hairline); }
}

/* ─── 17. components — register wizard ──────────────────────────
   Multi-step registration form posting to Google Forms. One step
   visible at a time when JS is on; all visible (long form) without
   JS so submission still works. Each step pairs a question with
   contextual FAQ items expanded by default below the inputs. */

.register-section { padding-block: var(--section-y); background: var(--bg-elev-1); border-bottom: 1px solid var(--hairline); }
.register-inner { display: grid; gap: 1.5rem; max-width: var(--max-width-prose); }
.register-header { max-width: var(--max-width-prose); }
.register-lede { color: var(--fg-muted); margin-top: 0.5rem; }
.register-wizard { display: grid; gap: 1.5rem; }

/* G8 Finding 404 — centered, constrained registration reading width.
   Form + header share a comfortable 640px column; on mobile this collapses to
   full width minus the standard gutter (the clamp's 1rem floor). */
/* V2 fix: scope the narrow 640px column to the register SHELL only — NOT the shared
   .container, which the sticky header also uses (constraining it caused the desktop nav
   to overflow → horizontal scroll at 1440). The header keeps its full max-width. */
.page-register .register-shell { max-width: 640px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
/* G8 Finding 402 — mandatory-consent notice (replaces the 3-radio opt-out module) */
.register-consent-notice { color: var(--fg-muted); font-size: var(--fs-sm); margin-top: var(--space-2); padding-left: 0.75rem; border-left: 2px solid var(--hairline-gold); }
.register-consent-notice a { color: var(--gold); }
.register-consent-notice a:hover { color: var(--gold-hover); }
.register-progress {
  height: 4px; background: var(--hairline); border-radius: 999px; overflow: hidden;
}
.register-progress-fill {
  height: 100%; width: 10%;
  background: var(--gold);
  transition: width var(--motion-base) var(--ease);
}
.register-progress-text { color: var(--muted); font-size: var(--fs-sm); font-family: var(--font-mono); margin: 0; }
.register-step {
  display: grid; gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.register-step[hidden] { display: none; }
.register-step-headline {
  font-family: var(--font-display); font-size: var(--fs-xl); color: var(--fg);
  padding: 0; margin: 0;
}
.register-step-lede { color: var(--fg-muted); max-width: 60ch; }
.register-step-fields { display: grid; gap: 1rem; }
.register-field { display: grid; gap: 0.35rem; }
.register-field-label { color: var(--gold); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; }
.register-field input:not([type="radio"]):not([type="checkbox"]),
.register-field textarea,
.register-field select {
  padding: 0.75rem 0.9rem;
  background: var(--bg-elev-1);
  color: var(--fg);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  font: inherit;
}
.register-field input:focus,
.register-field textarea:focus,
.register-field select:focus {
  outline: none; border-color: var(--gold);
}
.register-radio,
.register-consent {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev-1);
  cursor: pointer;
}
.register-radio:hover,
.register-consent:hover { border-color: var(--gold); }
.register-radio input[type="radio"],
.register-consent input[type="radio"] {
  width: 1.1rem; height: 1.1rem;
  accent-color: var(--gold);
  flex-shrink: 0;
}
.register-radio:has(input:checked),
.register-consent:has(input:checked) {
  border-color: var(--gold);
  background: linear-gradient(0deg, rgba(232, 196, 90, 0.08), rgba(232, 196, 90, 0.08)), var(--bg-elev-1);
}

/* G13-1 — arrival/departure structured selectors. Each control is a labelled
   day + time pair; the four selects are JS-driven (composed into the hidden
   travel_info). Wells + >=16px font match the register field recipe so they sit
   coherently in the glass step. */
.register-travel { display: grid; gap: 1rem; }
.register-travel-group { display: grid; gap: 0.5rem; }
.register-travel-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0.6rem; }
.register-travel-cell { display: grid; gap: 0.35rem; margin: 0; }
.register-travel-cell select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-size: 16px; /* >=16px: prevent iOS Safari zoom (DESIGN.md, non-negotiable) */
  background: rgba(0, 0, 0, 0.24);
  color: var(--fg, #fff);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-sm, 8px);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.register-travel-cell select:focus {
  outline: none;
  border-color: var(--gold, #E8C45A);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(232, 196, 90, 0.35);
}
@media (max-width: 480px) {
  .register-travel-row { grid-template-columns: 1fr; }
}

.register-trainer-grid { display: grid; gap: 0.5rem; }
.register-trainer-row {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 1rem; align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-elev-1);
}
.register-trainer-meta { display: flex; flex-direction: column; gap: 0.15rem; }
.register-trainer-name { font-family: var(--font-system); font-weight: 600; font-size: var(--fs-md); color: var(--fg); }
.register-trainer-detail { color: var(--muted); font-size: var(--fs-sm); }
.register-trainer-count {
  width: 4.5rem;
  padding: 0.5rem 0.6rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}
.register-trainer-count:focus { outline: none; border-color: var(--gold); }

.register-regulations-list { padding-left: 1.25rem; color: var(--fg-muted); margin: 0; }

/* ───────────────────────────────────────────────────────────────────────
   Track 4.B — register glass flow (DESIGN.md tokens; references shared
   custom properties with literal fallbacks so no :root edit is needed).
   Every animation below has a prefers-reduced-motion fallback at the end.
   ─────────────────────────────────────────────────────────────────────── */
.register-shell { max-width: 640px; margin-inline: auto; position: relative; }
.register-flow { padding-block: clamp(1.5rem, 4vw, 3rem); }

/* ── register: single glass card containment (mockup register-flow-2027-v4) ──
   Head (eyebrow + Playfair title) → one glass card (champagne halo + spec
   gleam + lit border) holding the live pill, endowed progress, and the wizard
   steps. Steps inside the card are plain with an entrance slide. The honest
   funnel (live cap, two consents, decoupled photo, extras=0, voucher-as-
   benefit) is untouched — this is purely visual containment. */
.register-head { text-align: center; }
.register-eyebrow {
  font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,.46)); font-weight: 500; margin: 0 auto;
}
.register-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.05rem); letter-spacing: -0.01em;
  margin: 0.8rem auto 0; max-width: none;
}
.register-head .lede { margin: 0.6rem auto 0; color: var(--fg-muted); max-width: 52ch; }

.register-shell::before {
  /* G14 #9 — was left/right:-10px, which bled past the viewport when the shell is
     full-width on mobile (390/320 h-scroll). The radial fades well before the edge,
     so 0/0 keeps the halo with no overflow. */
  content: ""; position: absolute; left: 0; right: 0; top: 4.5rem; height: 230px;
  z-index: 0; pointer-events: none;
  background: radial-gradient(60% 92% at 50% 28%, rgba(248, 229, 155, 0.13), transparent 72%);
}
.register-card {
  position: relative; z-index: 1; overflow: hidden;
  border-radius: 26px; padding: clamp(1.25rem, 3vw, 1.875rem);
  display: grid; gap: 1.125rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03) 48%, rgba(255, 255, 255, 0.045));
  -webkit-backdrop-filter: blur(32px) saturate(140%) brightness(1.04);
  backdrop-filter: blur(32px) saturate(140%) brightness(1.04);
  box-shadow: 0 44px 100px -36px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(248, 229, 155, 0.05);
}
.register-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 6;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05) 32%, rgba(255, 255, 255, 0.02) 62%, rgba(248, 229, 155, 0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.register-card__spec {
  /* G10 Finding 5a — anchor the specular gleam at the card's top-left corner so
     .register-card's overflow:hidden no longer slices its bright lobe (was at
     top:-30%/left:-18%, half outside the box → hard diagonal cut). transform-origin
     pins the bright 0% corner; z-index 5 keeps it behind the form content (z-7). */
  position: absolute; top: 0; left: 0; width: 64%; height: 74%;
  pointer-events: none; z-index: 5; transform: rotate(-12deg); transform-origin: top left;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 26%, transparent 52%);
  filter: blur(6px);
}
.register-card > .register-capacity-pill,
.register-card > .register-progress,
.register-card > .register-form { position: relative; z-index: 7; }
.register-card .register-form { display: grid; gap: 1.25rem; }

/* Steps inside the card are plain (the card carries the glass); each entering
   step slides up + unblurs. Global reduced-motion reset zeroes the animation. */
.register-card .register-step {
  position: relative; z-index: 7;
  background: none; border: none; box-shadow: none; border-radius: 0; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.register-card .glass-step::before { content: none; }
.register-card .register-step:not([hidden]) {
  animation: register-step-in 0.5s var(--ease-entrance, cubic-bezier(.22, 1, .36, 1));
}
@keyframes register-step-in {
  from { opacity: 0; transform: translateY(20px) scale(0.985); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Live capacity pill restyled as the scarcity pill (green pip) — bound to
   /api/public/stats; honest, never fabricated. */
.register-capacity-pill { display: inline-flex; align-items: center; gap: 0.5rem; }
.register-capacity-pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--state-open, #34C759); box-shadow: 0 0 8px var(--state-open, #34C759);
}
.register-capacity-pill[data-state="full"]::before { background: var(--fg-muted, #8A8480); box-shadow: none; }

/* Read-only recap on the final step (mockup "Bestätigung" summary). */
.register-summary {
  background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px; padding: 0.95rem 1.1rem; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}
.register-summary__heading { margin: 0 0 0.45rem; font-size: var(--fs-sm); color: var(--fg-muted); }
.register-summary__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; font-size: 1rem; }
.register-summary__row span { color: var(--fg-muted); }

/* Commit reassurance line near the submit. */
.register-reassure {
  display: flex; align-items: center; gap: 0.5rem; justify-content: center;
  font-size: var(--fs-sm); color: var(--fg-muted); margin: 0.25rem 0 0; max-width: none;
}
.register-reassure svg { width: 15px; height: 15px; stroke: var(--gold); fill: none; stroke-width: 2; flex: none; }

/* Centered, live-bound capacity pill */
.register-capacity-pill {
  justify-self: center;
  margin: 0 auto;
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  border: 1px solid var(--hairline, rgba(232, 196, 90, 0.30));
  background: rgba(232, 196, 90, 0.08);
  color: var(--gold, #E8C45A);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-sm, 0.85rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-align: center;
}
.register-capacity-pill[data-state="full"] { color: var(--fg-muted, #8A8480); }

/* Endowed progress */
.register-progress { display: grid; gap: 0.5rem; }
.register-progress-track {
  height: 5px; border-radius: 9999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.10);
}
.register-progress-fill {
  height: 100%;
  /* endowed head-start: JS sets width; CSS guarantees a visible sliver */
  min-width: 12%;
  background: var(--gold-metal, linear-gradient(120deg, var(--champagne, #F8E59B), var(--gold, #E8C45A), var(--gold-deep, #B88A2A)));
  border-radius: 9999px;
  transition: width 450ms cubic-bezier(.22, 1, .36, 1);
  position: relative; overflow: hidden; /* G10 Finding 6 — contain + clip the resting sheen to the filled width */
}
/* G10 Finding 6 — flowing champagne sheen along the FILLED portion at rest,
   reusing the snake-border conic signature (--rf-angle @property + rf-snake
   keyframe, both declared below). Reduced-motion hides it → static fill. */
.register-progress-fill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--rf-angle, 0deg),
    transparent 0%, rgba(248, 229, 155, 0) 6%, var(--champagne, #F8E59B) 11%,
    #fff7df 13%, var(--champagne, #F8E59B) 15%, transparent 20%, transparent 100%);
  mix-blend-mode: screen;
  animation: rf-snake 3.6s linear infinite;
}
.register-progress-text {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 0; color: var(--fg-muted, #8A8480);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-sm, 0.85rem); font-variant-numeric: tabular-nums;
}
.register-progress-momentum { color: var(--gold, #E8C45A); }

/* Glass surface for every step (DESIGN.md §Surfaces) */
.glass-step {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl, 22px);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03) 56%, rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(30px) saturate(140%) brightness(1.05);
  backdrop-filter: blur(30px) saturate(140%) brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}
.glass-step::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 80% at 0% 0%, rgba(248, 229, 155, 0.10), transparent 60%);
}

/* Recessed input wells + gold focus ring.
   G10 Finding 9 — exclude radios/checkboxes so the days radios (nested in a
   .register-field) stop inheriting input padding/well that inflated them into
   an oversized gold blob; they keep the consistent custom control below. */
.register-field input:not([type="radio"]):not([type="checkbox"]),
.register-field textarea,
.register-field select {
  font-size: 16px; /* >=16px: prevent iOS zoom (DESIGN.md, non-negotiable) */
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-sm, 8px);
  color: var(--fg, #fff);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.register-field input:focus,
.register-field textarea:focus,
.register-field select:focus {
  outline: none;
  border-color: var(--gold, #E8C45A);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(232, 196, 90, 0.35);
}

/* Embedded green field-check — straddles the completed field's right border */
.register-field { position: relative; }
.register-field[data-valid="true"]::after {
  content: "✓";
  position: absolute; right: -9px;
  /* G10 Finding 8 — vertically CENTER on the control row (label band ~1.5rem +
     half the ~2.6rem input ≈ 2.9rem from field top), not a fixed offset that
     floated above centre. translateY(-50%) + matched keyframe keeps it centred
     through the pop. */
  top: 2.9rem; transform: translateY(-50%);
  width: 19px; height: 19px; line-height: 19px; text-align: center;
  border-radius: 50%;
  background: #2fae5e; color: #fff;
  font-size: 12px; font-weight: 700;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
  animation: rf-check-pop 250ms cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes rf-check-pop { from { transform: translateY(-50%) scale(.4); opacity: 0; } to { transform: translateY(-50%) scale(1); opacity: 1; } }

/* Gold sparkle on valid focusout */
.rf-sparkle {
  position: absolute; width: 10px; height: 10px; pointer-events: none; z-index: 5;
  background: radial-gradient(circle, var(--champagne, #F8E59B), transparent 70%);
  animation: rf-sparkle 600ms ease-out forwards;
}
@keyframes rf-sparkle { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6) translateY(-8px); opacity: 0; } }

/* Gold click-stars puff up */
.rf-star {
  position: fixed; pointer-events: none; z-index: 999; color: var(--gold, #E8C45A);
  font-size: 14px; animation: rf-star 500ms ease-out forwards;
}
@keyframes rf-star { from { transform: scale(.4) translateY(0); opacity: 1; } to { transform: scale(1.3) translateY(-22px); opacity: 0; } }

.register-extras-total {
  margin: 0; padding-top: 0.5rem; color: var(--gold, #E8C45A);
  font-family: var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums;
}
.register-step-note { margin: 0; color: var(--fg-muted, #8A8480); font-size: var(--fs-sm, 0.85rem); }
.register-trainer-row[hidden] { display: none; }

.register-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }

/* Primary CTA — snake-border (masked conic light) on --gold-metal */
.register-submit-cta {
  position: relative; isolation: isolate;
  background: var(--gold-metal, linear-gradient(120deg, var(--champagne, #F8E59B), var(--gold, #E8C45A), var(--gold-deep, #B88A2A)));
  color: var(--ink, #241701); border: none; font-weight: 600;
}
.register-submit-cta::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: -1;
  background: conic-gradient(from var(--rf-angle, 0deg), transparent 0%, #fff7df 8%, transparent 18%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rf-snake 3.6s linear infinite;
}
.register-submit-cta:focus-visible::before { animation-duration: 1.2s; }
.register-submit-cta:active { transform: scale(.97); }
/* G10 Finding 7 — forward-arrow glyph on the primary actions (markup span, aria-hidden so
   it stays out of the accessible name). Spring nudge reuses cubic-bezier(.22,1,.36,1). */
.register-cta-arrow { display: inline-block; margin-left: 0.4em; transition: transform 250ms cubic-bezier(.22, 1, .36, 1); }
.register-next-cta:hover .register-cta-arrow,
.register-submit-cta:hover .register-cta-arrow { transform: translateX(2px); }
@property --rf-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes rf-snake { to { --rf-angle: 360deg; } }

/* P0.7 — reduced-motion fallback for EVERY animation block above */
@media (prefers-reduced-motion: reduce) {
  .register-progress-fill { transition: none; }
  .register-progress-fill::after { animation: none; display: none; } /* G10 Finding 6 — static fill */
  .register-cta-arrow { transition: none; } /* G10 Finding 7 */
  .register-field[data-valid="true"]::after { animation: none; }
  .rf-sparkle, .rf-star { animation: none; display: none; }
  .register-submit-cta::before,
  .register-submit-cta:focus-visible::before { animation: none; }
  .register-field input,
  .register-field textarea,
  .register-field select { transition: none; }
}

.register-review { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0; }
.register-review dt { color: var(--gold); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; }
.register-review dd { margin: 0; color: var(--fg); }
.register-review-payment {
  margin-top: 1rem; padding: 0.85rem 1.25rem;
  border-left: 2px solid var(--gold);
  background: var(--bg-elev-1);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.register-review-payment strong { color: var(--gold); }

/* G10 Finding 7 — mobile (default): vertical stack with the PRIMARY action on
   top ("Weiter"/submit above "Zurück") via flex order; desktop row override in
   the 768px block restores a horizontal row with the primary on the right. */
.register-actions { margin: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.register-actions .btn { width: 100%; min-height: 44px; }
.register-actions [data-prev] { order: 2; }
.register-actions [data-next],
.register-actions [data-submit] { order: 1; }

.register-step-faq {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--hairline-gold);
  display: grid; gap: 0.5rem;
}
.register-step-faq-heading {
  color: var(--gold); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; margin: 0;
}
.register-step-faq-item {
  padding: 0.75rem 1rem;
  background: var(--bg-elev-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.register-step-faq-item > summary {
  cursor: pointer; font-family: var(--font-display); font-size: var(--fs-md); list-style: none;
}
.register-step-faq-item > summary::-webkit-details-marker { display: none; }
.register-step-faq-item > summary::before {
  content: "▾"; margin-right: 0.5rem; color: var(--gold); display: inline-block;
  transition: transform var(--motion-fast) var(--ease);
}
.register-step-faq-item:not([open]) > summary::before { transform: rotate(-90deg); }
.register-step-faq-item > div { color: var(--fg-muted); margin-top: 0.5rem; }

.register-controls {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  justify-content: space-between; align-items: center;
}
.register-error {
  color: var(--danger); padding: 0.75rem 1rem;
  border: 1px solid var(--danger); border-radius: var(--radius-sm);
  background: rgba(194, 90, 74, 0.08);
}

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

@media (min-width: 768px) {
  .register-step { padding: 2rem; }
  /* G10 Finding 7 — desktop: horizontal row, back on the LEFT, primary on the RIGHT. */
  .register-actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
  .register-actions .btn { width: auto; }
  .register-actions [data-prev] { order: 1; margin-right: auto; }
  .register-actions [data-next],
  .register-actions [data-submit] { order: 2; }
}

/* ─── 17a. components — tally-embed (legacy placeholder)─────── */
.tally-section { background: var(--bg-elev-1); }
.tally-inner { display: grid; gap: 1.5rem; }
.tally-header { max-width: var(--max-width-prose); display: grid; gap: 0.75rem; }
.tally-frame { min-height: 480px; padding: 1rem; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--bg); }
.tally-frame iframe { width: 100%; min-height: 480px; border: 0; }

/* Payment + amount definition list — surfaces the cash-on-spot
   decision plainly above any registration UI. Two rows, two columns:
   gold uppercase label on the left, body copy on the right. */
.tally-pricing-heading {
  margin-top: 0.5rem;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: var(--fs-md);
}
.tally-pricing-note {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1rem;
  margin-top: 0.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--bg);
  max-width: var(--max-width-prose);
}
.tally-pricing-note dt {
  color: var(--gold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  white-space: nowrap;
}
.tally-pricing-note dd { margin: 0; color: var(--fg); }

/* ─── 18. components — modal ────────────────────────────────── */
.modal { padding: 0; border: 0; background: transparent; color: var(--fg); width: min(90vw, 540px); max-height: 90vh; }
.modal-overlay,
.modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}
.modal-inner {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}
@supports not (backdrop-filter: blur(1px)) {
  .modal-overlay { background: rgba(0, 0, 0, 0.85); }
  .modal-inner { background: var(--bg-elev-1); }
}
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.modal-close { background: transparent; border: 0; color: var(--fg); font-size: 1.5rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); }
.modal-close:hover { background: var(--bg-elev-2); }

/* ─── 19. components — site-footer ──────────────────────────── */
.site-footer { padding-block: var(--section-y); margin-top: var(--section-y); background: var(--bg); position: relative; border-top: 0; }
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--hairline) 20%, var(--hairline) 80%, transparent 100%);
}
/* G14 — structured footer: brand (logo + slogan + socials) | legal nav, with a
   copyright rule spanning the bottom. */
.site-footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-4) var(--space-6);
  align-items: start;
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.footer-logo { width: clamp(170px, 18vw, 230px); height: auto; opacity: 0.95; }
.footer-slogan { color: var(--fg-soft); font-size: var(--fs-md); line-height: var(--lh-base); max-width: 42ch; margin: 0; text-wrap: pretty; }
.footer-brand .person-card__social { display: flex; gap: 0.6rem; list-style: none; padding: 0; margin: 0.4rem 0 0; }
.footer-brand .person-card__social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid var(--hairline-gold); color: var(--gold);
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.footer-brand .person-card__social-link:hover { background: rgba(232, 196, 90, 0.12); color: var(--champagne); }
.footer-brand .phi { width: 19px; height: 19px; }
.footer-nav { justify-self: end; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.footer-links a { color: var(--fg); text-decoration: none; }
.footer-links a:hover { color: var(--gold); }
.footer-copyright { grid-column: 1 / -1; color: var(--fg-muted); font-size: var(--fs-sm); margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
@media (max-width: 767px) {
  .site-footer-inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .footer-nav { justify-self: start; }
}

/* ─── 20. legal pages ───────────────────────────────────────── */
.legal-article { padding-block: var(--section-y); }
.legal-article h1 { margin-bottom: 1.5rem; }
.legal-placeholder-warning { color: var(--muted); }

/* ─── 20a. tally-pending / schedule-pending ─────────────────── */
.tally-pending { padding: 1.5rem; border: 1px dashed var(--hairline-strong); border-radius: var(--radius-md); background: var(--bg-elev-2); }
.tally-pending-lede { font-size: var(--fs-lg); }
.tally-pending-contact { color: var(--fg-muted); margin-top: 0.5rem; }
.schedule-pending { color: var(--fg-muted); font-style: italic; margin-top: 1rem; }

/* ─── 20b. cookie consent banner ────────────────────────────── */
.consent-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--bg-elev-2);
  border-top: 1px solid var(--hairline-strong);
  padding-block: 1rem;
}
.consent-inner { display: grid; gap: 1rem; align-items: center; }
.consent-text { color: var(--fg-muted); font-size: var(--fs-sm); max-width: 60ch; margin: 0; }
.consent-accept { justify-self: start; }
@media (min-width: 768px) {
  .consent-inner { grid-template-columns: 1fr auto; }
  .consent-accept { justify-self: end; }
}

/* ─── 21. danke page ────────────────────────────────────────── */
.danke-hero { padding-block: var(--section-y); border-bottom: 1px solid var(--hairline-gold); text-align: center; }
/* G15-UX — the lede is a base <p> (max-width:prose) which left-anchors it; centre it under the heading. */
.danke-hero .lede { max-width: 58ch; margin-inline: auto; }
/* G13-2 — registration-received confirmation chip above the thank-you heading. */
.danke-confirm-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0 0 1rem; padding: 0.4rem 0.85rem;
  border: 1px solid var(--hairline-gold); border-radius: 999px;
  background: linear-gradient(135deg, rgba(232, 196, 90, 0.12), rgba(232, 196, 90, 0.03));
  color: var(--gold);
  font-size: var(--fs-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.danke-confirm-badge svg { width: 20px; height: 20px; flex-shrink: 0; }
.danke-confirm-badge circle { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.danke-confirm-badge path { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.danke-next { padding-block: var(--section-y); }
.danke-next h2 { text-align: center; }
.danke-steps {
  list-style: none;
  padding: 0;
  margin: 1.5rem auto 0;
  max-width: 680px;
  display: grid;
  gap: 1rem;
  counter-reset: danke-step;
}
.danke-steps li {
  counter-increment: danke-step;
  padding: 1rem 1.25rem 1rem 3.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--fg);
  background: var(--bg-elev-1);
  position: relative;
}
.danke-steps li::before {
  content: counter(danke-step);
  position: absolute;
  left: 1rem; top: 1rem;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.danke-ics-cta { margin-top: 2rem; text-align: center; max-width: none; }
.danke-home { margin-top: 1rem; text-align: center; max-width: none; }

/* ─── 21a. entrance animations (hero + section-leading elements) ─
   Staggered fade-up using the entrance easing token. Each child sets
   its own --i index. Single keyframe + transforms only (GPU-friendly).
   Reduced-motion override at §23 zeros animation duration. */

@keyframes gr-entrance-up {
  from { opacity: 0; transform: translate3d(0, var(--entrance-distance), 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.hero-eyebrow,
.hero-headline,
.hero-lede,
.hero-cta {
  animation: gr-entrance-up var(--entrance-duration) var(--ease-entrance) both;
}
.hero-eyebrow  { animation-delay: calc(var(--stagger-step) * 0); }
.hero-headline { animation-delay: calc(var(--stagger-step) * 1); }
.hero-lede     { animation-delay: calc(var(--stagger-step) * 2); }
.hero-cta      { animation-delay: calc(var(--stagger-step) * 4); }

.usp-list .usp-item {
  animation: gr-entrance-up var(--entrance-duration) var(--ease-entrance) both;
  animation-delay: calc(var(--stagger-step) * var(--i, 0));
}
.usp-list .usp-item:nth-child(1) { --i: 5; }
.usp-list .usp-item:nth-child(2) { --i: 6; }
.usp-list .usp-item:nth-child(3) { --i: 7; }
.usp-list .usp-item:nth-child(4) { --i: 8; }
.usp-list .usp-item:nth-child(5) { --i: 9; }

/* ─── 21b. grain texture removed (G3 C15 QA).
   The static SVG noise pseudo-element used mix-blend-mode: overlay,
   which axe-core measured as a foreground-color shift on body text,
   producing #595553 / #756f6c instead of var(--gold) on .usp-key and
   .pricing-*. Body now serves --bg as a flat colour; tactility comes
   from the gold hairlines and section padding rhythm. */

/* Keep real content stacked above the (removed) grain layer. */
/* G9 Finding 502 — .site-header was previously in this shared rule and
   inherited `position: relative`, which silently overrode the
   `position: sticky` declaration earlier in the file. Result: the header
   scrolled off, and the .day-tabs sticky bar (top: 60px) sat in a void
   with the section title and gutters visible around it. Scoping the rule
   to main + footer + consent banner restores header stickiness; z-index
   layering against those siblings is preserved below. */
main,
.site-footer,
.consent-banner { position: relative; z-index: 1; }
.site-header { z-index: 100; }

/* ─── 22. responsive breakpoints ────────────────────────────── */

/* 375px+ — small phone (mobile-first default) */

/* 768px+ — tablet portrait. Nav stays hamburger here (C9(e):
   inline nav only at >=1024px). */
@media (min-width: 768px) {
  /* G10 Finding 2 — desktop shows the glass .camp-overview facts; hide the strip. */
  .usp-strip { display: none; }
  .usp-list { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .programme-grid, .trainer-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .venue-inner { grid-template-columns: 1fr 1fr; }
  .site-footer-inner { grid-template-columns: 1fr auto; align-items: end; }
  .schedule-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 1024px+ — small desktop. Hamburger off, inline nav on. */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  /* G14 — 3-zone header grid: brand (auto) · nav (1fr, centred) · actions (auto).
     Replaces the old flex+space-between that let the wordmark abut the first nav
     link ("Goldmann-Rusevaprogram"). The 1fr centre column guarantees breathing
     room on both sides and uses the full header width. */
  .site-header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    /* G14 #9 — 2.5vw (was 3vw) so the centred-nav grid doesn't overflow by ~2px at the
       1024 boundary with the slightly wider EN nav labels; still generous at 1280/1440. */
    gap: clamp(1.5rem, 2.5vw, 3rem);
  }
  .site-nav {
    display: block;
    position: static;
    background: transparent;
    border-bottom: 0;
    padding: 0;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    justify-self: center;
  }
  .site-nav[data-nav-collapsed] {
    display: block;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }
  .site-header-actions { justify-self: end; }
  /* G9 Finding 502/505-A — nowrap + tighter gap so the wider Anmelden pill
     cannot drop to a second row at 1440 (would double the sticky header and
     push the day-tabs into the void behind it). */
  .nav-list { flex-direction: row; gap: 0.85rem; flex-wrap: nowrap; align-items: center; justify-content: center; }
  /* Tier-2 review fix: the email belongs in the right-hand group on desktop,
     not the center nav — keeping it in the nav-list overflowed and wrapped the
     header to two rows. Drawer-only in the nav; .site-header-email shows it on
     wide desktop instead. */
  .nav-contact { display: none; }
  .nav-list a { padding: 0.4rem 0.6rem; }
  .programme-grid, .trainer-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-headline { font-size: calc(var(--fs-3xl) * 1.15); }
}

/* 1440px+ — large desktop */
@media (min-width: 1440px) {
  :root { --gutter: 3rem; }
  .programme-grid, .trainer-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── 23. reduced-motion override ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   24. C9 — Mobile audit fixes (G3 / feat/design-system 2026-05-22)
   ============================================================ */

/* (a) iPhone-SE: shrink section vertical rhythm so total scrollHeight
   on 375×667 stays under 6000px. */
@media (max-width: 480px) {
  :root { --section-y: clamp(2rem, 6vw, 3rem); }
  .countdown { margin-block: 1rem; }
  .hero { padding-block: clamp(2rem, 6vw, 3rem); }
}

/* (b) Countdown card mobile: horizontal pill stripe (fits next to the
   USP strip). Desktop: 2-col hero block (countdown lives in the hero
   right column on ≥1024px). */
@media (max-width: 1023px) {
  .countdown {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    margin-block: 1rem 0;
    border-radius: 999px;
    background: transparent;
  }
  .countdown .countdown-label,
  .countdown .countdown-value,
  .countdown .countdown-unit { margin: 0; }
  .countdown .countdown-value { font-size: var(--fs-xl); }
  .countdown .countdown-label,
  .countdown .countdown-unit { font-size: var(--fs-sm); }
}
@media (min-width: 1024px) {
  .hero .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: end;
  }
  .hero .hero-inner > .countdown {
    grid-column: 2;
    margin-block: 0;
  }
}

/* (c) Chat widget — respect bottom safe-area inset on notched phones.
   z-index already 1000; strip stays above at 110 — chat overlays. */
.chat-widget {
  bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
}

/* Schedule hall-legend — never clipped by overflow ancestors, always
   wraps cleanly. */
.schedule-hall-legend { overflow: visible; max-width: 100%; flex-wrap: wrap; }
.schedule-controls,
.schedule-day-blocks,
.schedule-grid { overflow: visible; }
@media (max-width: 480px) {
  .schedule-hall-legend { padding: 0.6rem 0.75rem; gap: 0.6rem; font-size: 0.75rem; }
}

/* (d) Interactive minimums — WCAG 2.2 SC 2.5.8. */
.faq-chip,
.schedule-chip {
  min-block-size: 44px;
  min-inline-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
}
.lang-switch a {
  min-block-size: 40px;
  min-inline-size: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn,
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-ghost {
  min-block-size: 44px;
  min-inline-size: 44px;
}
.trainer-detail-link,
.trainer-detail-cta a {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
}
.nav-toggle { min-block-size: 44px; min-inline-size: 44px; }

/* Trainer card — entire card becomes the link surface via the
   trainer-name-link ::after stretched overlay. Bio/meta/CTA sit
   above so they remain interactive. */
.trainer-card { position: relative; isolation: isolate; }
.trainer-name-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.trainer-card > * { position: relative; z-index: 2; }
.trainer-card .trainer-detail-link,
.trainer-card .trainer-bio,
.trainer-card .trainer-meta { position: relative; z-index: 3; }

/* G6A — WebGL dancer visuals + cursor augmentation REMOVED (brief §8).
   Programme cards now carry a Phosphor outline icon in gold (see the G6A
   programme-card rules below). The cursor effect is a deferred P2 pattern. */
.programme-card { position: relative; }

/* C13 — Consent banner managed-service toggles. */
.consent-services {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin-block: 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--bg-elev-1);
}
.consent-services-legend {
  padding-inline: 0.35rem;
  color: var(--fg-soft, var(--fg));
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.consent-service {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.6rem;
  cursor: pointer;
  min-block-size: 44px;
  padding: 0.25rem 0;
}
.consent-service input[type="checkbox"] {
  appearance: auto;
  accent-color: var(--gold);
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
}
.consent-service-text { display: flex; flex-direction: column; gap: 0.15rem; }
.consent-service-name { color: var(--fg); font-weight: 500; }
.consent-service-desc { color: var(--fg-soft, var(--fg-muted)); font-size: var(--fs-sm); }

/* Gate chat widget on consent.chatbot. */
body[data-consent-chatbot="false"] .chat-widget { display: none; }


/* ============================================================
   DESIGN SYSTEM V1.5 — Elevation, depth, and pricing urgency
   ============================================================ */

/* ─── Shadow / elevation tokens ─────────────────────────────── */
:root {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 0 24px rgba(232, 196, 90, 0.12);
  --shadow-inset-gold: inset 0 1px 0 rgba(232, 196, 90, 0.08);
}

/* ─── Refined header — V2 sticky glass (DESIGN.md) ──────────────
   ~76% opaque base so the header's own nav/brand text reads cleanly;
   blur+saturate+brightness dims and de-noises the atmosphere + content
   scrolling behind. Gold hairline at the foot. */
.site-header {
  background: var(--glass-fill), rgba(10, 9, 8, 0.76);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(10, 9, 8, 0.98); }
}

/* ─── Refined cards — depth on hover ──────────────────────── */
.programme-card,
.trainer-card,
.team-card,
.hotel-card,
.faq-item {
  box-shadow: var(--shadow-sm);
}
.programme-card:hover,
.trainer-card:hover,
.team-card:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), var(--shadow-gold);
}
.faq-item:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.faq-item[open] {
  box-shadow: var(--shadow-md);
}

/* Glass morphism on FAQ items and filter (consistent with cards) */
@supports (backdrop-filter: blur(12px)) {
  .faq-item,
  .faq-filter {
    background: rgba(20, 20, 20, 0.65);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    border-color: rgba(245, 240, 232, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow-sm);
  }
  .faq-item[open] {
    background: rgba(26, 26, 26, 0.72);
    border-color: rgba(245, 240, 232, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-md);
  }
}

/* ─── Refined buttons ───────────────────────────────────────── */
.btn {
  box-shadow: var(--shadow-sm);
}
.btn-primary {
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ─── Section separators — gradient fade instead of solid line ─ */
.hero,
.programmes-section,
.trainers-section,
.team-section,
.schedule-section,
.venue,
.pricing-section,
.register-section,
.tally-section,
.faq-teaser {
  border-bottom: 0;
  position: relative;
}
.hero::after,
.programmes-section::after,
.trainers-section::after,
.team-section::after,
.schedule-section::after,
.venue::after,
.pricing-section::after,
.register-section::after,
.tally-section::after,
.faq-teaser::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--hairline) 20%, var(--hairline) 80%, transparent 100%);
}

/* ─── PRICING URGENCY — complete styles ─────────────────────── */

/* Urgency banner */
.pricing-urgency-banner {
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--hairline-gold);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(232, 196, 90, 0.08) 0%, rgba(232, 196, 90, 0.02) 100%);
  color: var(--fg);
  font-size: var(--fs-md);
  text-align: center;
  box-shadow: var(--shadow-gold);
}

/* Progress bar */
.pricing-progress {
  margin-top: 1rem;
}
.pricing-progress-label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
}
.pricing-progress-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.pricing-progress-bar::-webkit-progress-bar {
  background: var(--bg-elev-2);
  border-radius: 999px;
}
.pricing-progress-bar::-webkit-progress-value {
  background: linear-gradient(90deg, var(--gold-muted) 0%, var(--gold) 100%);
  border-radius: 999px;
  transition: width 1s var(--ease-entrance);
}
.pricing-progress-bar::-moz-progress-bar {
  background: linear-gradient(90deg, var(--gold-muted) 0%, var(--gold) 100%);
  border-radius: 999px;
}
.pricing-progress-text {
  margin-top: 0.4rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-family: var(--font-mono);
}

/* FOMO message */
.pricing-fomo {
  margin-top: 0.75rem;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  text-align: center;
}

/* Tier table container */
.pricing-tiers {
  margin-top: 1.5rem;
  display: grid;
  gap: 1.5rem;
}

/* Tier header cards */
.pricing-tier-headers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.pricing-tier-header {
  padding: 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--bg-elev-1);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease);
}
.pricing-tier-header:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.pricing-tier-header--sold-out {
  opacity: 0.65;
  background: var(--bg);
  border-style: dashed;
}
.pricing-tier-header--active {
  border-color: var(--gold);
  background: var(--bg-elev-1);
  box-shadow: var(--shadow-sm);
}
.pricing-tier-header--upcoming {
  opacity: 0.8;
}

.pricing-tier-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: var(--fs-xs, 0.7rem);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.pricing-tier-badge--sold-out {
  background: var(--bg-elev-2);
  color: var(--muted);
  border: 1px solid var(--hairline);
}
.pricing-tier-badge--active {
  background: var(--gold);
  color: var(--bg);
}
.pricing-tier-badge--upcoming {
  background: var(--bg-elev-2);
  color: var(--fg-muted);
  border: 1px solid var(--hairline);
}

.pricing-tier-label {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  margin: 0;
  color: var(--fg);
}
.pricing-tier-description {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: 0.4rem;
}

/* Pricing table */
.pricing-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-elev-1);
  box-shadow: var(--shadow-sm);
}
.pricing-table thead {
  display: none; /* sr-only headers */
}
.pricing-row {
  border-bottom: 1px solid var(--hairline);
}
.pricing-row:last-child {
  border-bottom: 0;
}
.pricing-row-label {
  padding: 1rem 1.25rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--gold);
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
  width: 20%;
}
.pricing-cell {
  padding: 1rem 1.25rem;
  text-align: center;
  border-left: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.pricing-cell:last-child {
  border-right: 0;
}
.pricing-cell--sold_out {
  background: var(--bg);
  opacity: 0.5;
}
.pricing-cell--active {
  background: linear-gradient(180deg, rgba(232, 196, 90, 0.03) 0%, transparent 100%);
}
.pricing-cell--upcoming {
  background: var(--bg);
  opacity: 0.7;
}

.pricing-cell-duration {
  padding: 0.25rem 0;
}
.pricing-cell-duration--2d {
  font-size: var(--fs-lg);
}
.pricing-cell-duration--1d {
  font-size: var(--fs-md);
  color: var(--muted);
}

.pricing-strike {
  text-decoration: line-through;
  text-decoration-color: var(--muted);
  color: var(--muted);
}
.pricing-anchor {
  text-decoration: line-through;
  text-decoration-color: var(--hairline-strong);
  color: var(--muted);
  font-size: var(--fs-md);
  margin-right: 0.5rem;
}
.pricing-current {
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
}
.pricing-future {
  color: var(--fg-muted);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}
.pricing-save {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.5rem;
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
  font-size: var(--fs-xs, 0.7rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-sm);
}

/* Inclusions */
.pricing-included {
  margin-top: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.pricing-included-heading {
  color: var(--fg-muted);
}

/* Payment note */
.pricing-payment-note {
  box-shadow: var(--shadow-sm);
  border-left-color: var(--hairline-strong);
}
.pricing-payment-note strong {
  color: var(--fg-muted);
}

/* ─── Reduced gold usage — secondary elements ───────────────── */

/* FAQ chip selected — was gold, now subtle */
.faq-chip[aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
  font-weight: 500;
}

/* Register field labels — was gold, now muted */
.register-field-label {
  color: var(--fg-muted);
}

/* Register step FAQ heading — was gold, now muted */
.register-step-faq-heading {
  color: var(--fg-muted);
}

/* Register step FAQ summary arrow — was gold, now muted */
.register-step-faq-item > summary::before {
  color: var(--fg-muted);
}

/* Countdown — reduce gold intensity */
.countdown {
  border-color: var(--hairline);
  background: linear-gradient(180deg, var(--bg-elev-1) 0%, transparent 100%);
}
.countdown-label,
.countdown-unit {
  color: var(--fg-muted);
}

/* USP strip — reduce gold intensity */
.usp-item {
  border-left-color: var(--hairline);
}
.usp-key {
  color: var(--fg-muted);
}

/* Section heading underlines — was gold, now subtle warm */
.programmes-section > .container > h2::after,
.trainers-section > .container > h2::after,
.team-section > .container > h2::after,
.schedule-section > .container > h2::after,
.hero-headline::after {
  background: linear-gradient(90deg, var(--hairline-strong) 0%, var(--hairline) 100%);
}

/* Schedule provisional banner — reduce gold */
.schedule-provisional-banner {
  border-color: var(--hairline);
  background: var(--bg-elev-1);
}
.schedule-provisional-banner strong {
  color: var(--fg);
}

/* Danke step numbers — keep gold (primary accent) */

/* ─── RESPONSIVE: pricing tiers ─────────────────────────────── */
@media (max-width: 767px) {
  .pricing-tier-headers {
    grid-template-columns: 1fr;
  }
  .pricing-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .pricing-row-label {
    grid-column: 1 / -1;
    width: auto;
    border-bottom: 1px solid var(--hairline);
    padding: 0.75rem 1rem;
    font-size: var(--fs-md);
  }
  .pricing-cell {
    padding: 0.75rem 0.5rem;
    border-bottom: 0;
  }
  .pricing-cell-duration--2d {
    font-size: var(--fs-md);
  }
  .pricing-current {
    font-size: var(--fs-lg);
  }
}

/* 768px+ — restore table layout */
@media (min-width: 768px) {
  .pricing-table {
    display: table;
  }
  .pricing-row {
    display: table-row;
  }
  .pricing-row-label,
  .pricing-cell {
    display: table-cell;
  }
}

/* ─── Scroll-triggered reveals (P0 Pattern 1 + P1 Pattern 6) ───────────
   JS-gated: the hidden state only applies under html.reveal-js (added by
   scroll-reveal.js the instant it runs). So no-JS and pre-JS renders stay
   fully visible — no black-screen trap. scroll-reveal.js then adds
   .is-revealed per element on intersection. Reduced-motion reveals all
   immediately (see scroll-reveal.js) and the §reduced-motion reset zeros
   the transition. Supports both [data-reveal] and the brief's .reveal. */

[data-reveal], .reveal {
  transition: opacity var(--entrance-duration) var(--ease-entrance),
              transform var(--entrance-duration) var(--ease-entrance);
}
html.reveal-js [data-reveal]:not(.is-revealed),
html.reveal-js .reveal:not(.is-revealed) {
  opacity: 0;
  transform: translate3d(0, var(--entrance-distance), 0);
}
[data-reveal].is-revealed, .reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* Stagger children (P1 Pattern 6): --i × 60ms. Used by .stagger-list and the
   legacy card containers. Hidden state gated on html.reveal-js as above. */
html.reveal-js [data-reveal]:not(.is-revealed) .programme-card,
html.reveal-js [data-reveal]:not(.is-revealed) .trainer-card,
html.reveal-js [data-reveal]:not(.is-revealed) .schedule-block,
html.reveal-js .stagger-list:not(.is-revealed) > * {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}
[data-reveal] .programme-card,
[data-reveal] .trainer-card,
[data-reveal] .schedule-block,
.stagger-list > * {
  transition: opacity 440ms var(--ease-entrance), transform 440ms var(--ease-entrance);
  transition-delay: calc(var(--i, 0) * 60ms);
}
[data-reveal].is-revealed .programme-card,
[data-reveal].is-revealed .trainer-card,
[data-reveal].is-revealed .schedule-block,
.stagger-list.is-revealed > * {
  opacity: 1;
  transform: none;
}

/* G9 Finding 509 — assign --i automatically by source order on stagger
   lists. Programme cards, trainer cards, and moments grids weren't
   carrying inline --i style (only pricing cards were), so the existing
   transition-delay rule above resolved every child to --i=0 and the
   whole group revealed at once instead of staggering. Cover the first
   ten children of every .stagger-list — the largest current list is
   the trainer grid at 8 (7 trainers + 1 physio). */
.stagger-list > *:nth-child(1) { --i: 0; }
.stagger-list > *:nth-child(2) { --i: 1; }
.stagger-list > *:nth-child(3) { --i: 2; }
.stagger-list > *:nth-child(4) { --i: 3; }
.stagger-list > *:nth-child(5) { --i: 4; }
.stagger-list > *:nth-child(6) { --i: 5; }
.stagger-list > *:nth-child(7) { --i: 6; }
.stagger-list > *:nth-child(8) { --i: 7; }
.stagger-list > *:nth-child(9) { --i: 8; }
.stagger-list > *:nth-child(10) { --i: 9; }

/* ============================================================
   DESIGN POLISH — micro-interactions, hover effects, refinements
   ============================================================ */

/* ─── Animated link underlines ────────────────────────────────
   Links get a 2px gradient line that scales in from left on hover.
   Replaces the simple text-decoration-color transition. */

a {
  text-decoration: none;
  position: relative;
}
a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-hover) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-base) var(--ease);
}
a:hover::after {
  transform: scaleX(1);
}
/* Footer links and nav links — subtler underline */
.footer-links a::after,
.nav-list a::after {
  height: 1px;
  background: var(--hairline-strong);
}
.footer-links a:hover::after,
.nav-list a:hover::after {
  transform: scaleX(1);
  background: var(--fg);
}
/* Buttons and chips should not get the underline */
.btn::after,
.faq-chip::after,
.brand::after,
.skip-link::after,
.lang-switch a::after,
.lang-btn::after,
.pricing-card__cta::after,
.sticky-cta__btn::after,
.strip-announce__mail::after,
.person-card__social-link::after {
  display: none;
}

/* ─── Image hover zoom — trainer/team photos ───────────────── */
.trainer-photo,
.team-photo {
  overflow: hidden;
}
.trainer-photo img,
.team-photo img {
  transition: transform var(--motion-slow) var(--ease);
}
.trainer-card:hover .trainer-photo img,
.team-card:hover .team-photo img {
  transform: scale(1.04);
}

/* ─── Button press feedback ─────────────────────────────────── */
.btn:active {
  transform: scale(0.98);
  transition: transform 80ms var(--ease);
}
.btn-primary:active {
  transform: scale(0.97);
}

/* ─── Refined focus ring animation ──────────────────────────── */
:focus-visible {
  animation: focus-pulse 300ms var(--ease);
}
@keyframes focus-pulse {
  0% { box-shadow: 0 0 0 0 var(--gold-glow); }
  50% { box-shadow: 0 0 0 5px var(--gold-glow); }
  100% { box-shadow: var(--focus-ring); }
}

/* ─── Typography refinement — headlines ─────────────────────── */
h1, h2, h3 {
  letter-spacing: -0.02em;
  word-break: normal;
  overflow-wrap: break-word;
}
h1 {
  line-height: 1.05;
}

/* ─── Smooth page scroll ────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* ============================================================
   DESIGN SYSTEM V1.6 — (removed: spotlight body::after + aurora hero::before)
   Per AGENTS.md V2 §Banned visual patterns: no mouse-tracking gold
   spotlight, no animated aurora mesh. The hero keeps its content
   alone — credibility from typography and copy, not ambient glow.
   ============================================================ */

.hero { overflow: hidden; }
.hero-inner { position: relative; z-index: 1; }

/* ─── Deeper glass morphism on elevated cards ─────────────────
   Programme and trainer cards get a frosted-glass treatment when
   the browser supports backdrop-filter (falls back to solid
   --bg-elev-1 on unsupported browsers). */

/* Glass on body-content surfaces (cards, countdown) REMOVED in C6.
   Glass is reserved for .site-header (nav), .chat-panel, .modal-overlay
   per AGENTS.md V2 — body text must stay legible on solid surfaces. */


/* ============================================================
   DESIGN SYSTEM V1.7 — (removed: gold-gradient headline + shimmer CTA)
   Per AGENTS.md V2 §Banned visual patterns: hero headline reverts to
   solid --fg with a hairline gold underline; primary CTA is the plain
   .btn-primary (1px gold border, no conic shimmer, no rotation).
   ============================================================ */

/* .btn-primary-shimmer kept as a plain alias so templates that still
   reference it degrade gracefully to the standard primary button. */
.btn-primary-shimmer { display: inline-block; }
.btn-primary-shimmer .btn-primary { margin: 0; }


/* ============================================================
   DESIGN SYSTEM V1.8 — Scroll progress indicator
   ============================================================ */

/* ─── Reading progress bar ────────────────────────────────────
   A 2px gold line fixed at the very top of the viewport that
   grows with scroll depth via --scroll-progress (0 → 1). */

html::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: calc(var(--scroll-progress, 0) * 100%);
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-hover));
  z-index: 1000;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html::before { display: none; }
}


/* ============================================================
   DESIGN SYSTEM V1.9 — Back to top button
   ============================================================ */

/* ─── Back-to-top button ──────────────────────────────────────
   Fixed bottom-right, appears after scrolling past hero.
   Glass morphism styling with gold accent hover. */

.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 90;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: var(--fg);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--motion-base) var(--ease),
              transform var(--motion-base) var(--ease),
              border-color var(--motion-fast) var(--ease),
              color var(--motion-fast) var(--ease);
  pointer-events: none;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.back-to-top:hover svg {
  animation: bounce-up 600ms var(--ease);
}
@keyframes bounce-up {
  0%, 100% { transform: translateY(0); }
  40%  { transform: translateY(-3px); }
  70%  { transform: translateY(1px); }
}
.back-to-top:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}


/* ============================================================
   DESIGN SYSTEM V1.10 — Rendering refinements
   ============================================================ */

/* ─── Global text rendering ───────────────────────────────────
   Optimize legibility on high-DPI screens; antialiased smoothing
   for cleaner edges on dark backgrounds. */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── Section heading underline gradient ──────────────────────
   Replace the solid 1px gold line with a gradient that fades
   from gold to transparent, giving a softer, more luminous feel. */

.programmes-section > .container > h2::after,
.trainers-section > .container > h2::after,
.team-section > .container > h2::after,
.schedule-section > .container > h2::after {
  background: linear-gradient(90deg, var(--gold), transparent);
  height: 1px;
}

/* ─── Schedule timeline rail gradient ─────────────────────────
   The vertical connecting line now fades at top and bottom so
   it doesn't look like a hard cut-off. */

.schedule-block-marker::before {
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--hairline-gold) 8%,
    var(--hairline-gold) 92%,
    transparent 100%
  );
}

/* ─── Hero bottom border gradient ─────────────────────────────
   The hero's bottom separator also fades for visual softness. */

.hero {
  border-bottom: 0;
}
.hero::after {
  /* G10 Finding 1 — no seam hairline at the hero bottom; the photo now dissolves
     into --bg (the 1px gold line read as the hard cut). */
  content: none;
}


/* ============================================================
   DESIGN SYSTEM V1.11 — Programme format differentiation
   ============================================================ */

/* ─── Programme format tag variants ───────────────────────────
   Subtle visual distinction between solo / couple / kids formats
   using only existing palette tokens. */

.programme-format-couple {
  border-color: var(--hairline-gold);
  background: linear-gradient(180deg, rgba(232, 196, 90, 0.04), var(--bg-elev-2));
}
.programme-format-solo {
  border-color: var(--hairline-strong);
}
.programme-format-kids {
  border-style: dashed;
  opacity: 0.9;
}


/* ============================================================
   DESIGN SYSTEM V1.12 — Active section nav highlight
   ============================================================ */

/* ─── Nav link active state ───────────────────────────────────
   When the corresponding section is in view, the nav link gets
   a subtle gold underline and color shift. */

.nav-list a.is-active {
  color: var(--gold);
}
.nav-list a.is-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.6rem;
  right: 0.6rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}

/* Position relative needed for the underline pseudo-element */
.nav-list a {
  position: relative;
}


/* ============================================================
   DESIGN SYSTEM V1.13 — Pricing section polish
   ============================================================ */

/* ─── Pricing row hover ───────────────────────────────────────
   Subtle background tint on pricing table rows for interactivity. */

.pricing-table dt,
.pricing-table dd {
  transition: background var(--motion-base) var(--ease);
}
.pricing-table dd:hover {
  background: rgba(232, 196, 90, 0.02);
}

/* ─── Glass morphism on pricing cards ────────────────────────
   Included items and payment note get the same frosted treatment
   as programme/trainer cards and FAQ items. */

@supports (backdrop-filter: blur(12px)) {
  .pricing-included,
  .pricing-payment-note {
    background: rgba(20, 20, 20, 0.65);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    border-color: rgba(245, 240, 232, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow-sm);
  }
}


/* ============================================================
   DESIGN SYSTEM V1.14 — Tally / registration section polish
   ============================================================ */

/* ─── Glass morphism on tally frame and pending block ────────
   Consistent frosted treatment with other elevated cards. */

@supports (backdrop-filter: blur(12px)) {
  .tally-frame,
  .tally-pending {
    background: rgba(20, 20, 20, 0.65);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    border-color: rgba(245, 240, 232, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow-sm);
  }
}

/* ─── Tally pending dashed border stays dashed ─────────────── */
.tally-pending {
  border-style: dashed;
}


/* DESIGN SYSTEM V1.15 — Cinematic vignette REMOVED (G3 C15 QA).
   The radial corner-dark gradient was tripping axe-core color-contrast
   detection on usp-keys near the corners by layering rgba(0,0,0,0.35)
   over the gold text. Body bg is now solid var(--bg) so axe reads
   clean. */


/* ============================================================
   DESIGN SYSTEM V1.16–V1.19 — REMOVED
   Bokeh light-field, hero light-leaks, hero-breathing, nav-glow,
   3D card tilt + magnetic-button transforms, and the one-time
   CTA gold attention pulse were all banned in AGENTS.md V2
   §Banned visual patterns. The .card-glare hook and the
   transform-style: preserve-3d wrapper were JS-driven and the
   modules behind them were hard-deleted in C3.
   ============================================================ */

.programme-card,
.trainer-card,
.team-card,
.faq-item {
  transition: border-color var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease);
}

.btn-primary,
.btn {
  transition: background var(--motion-base) var(--ease), border-color var(--motion-fast) var(--ease), box-shadow var(--motion-base) var(--ease), color var(--motion-fast) var(--ease);
}


/* ============================================================
   DESIGN SYSTEM V1.20 — Section heading underline sweep
   ============================================================ */

/* ─── Animated heading underline ──────────────────────────────
   When a section scrolls into view, the gold gradient underline
   sweeps from left to right with a slight delay after the text
   fades up. */

[data-reveal] > .container > h2::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease-entrance) 200ms;
}

[data-reveal].is-revealed > .container > h2::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] > .container > h2::after {
    transform: scaleX(1);
    transition: none;
  }
}


/* ============================================================
   DESIGN SYSTEM V1.21 — USP hover glow + countdown pulse
   ============================================================ */

/* ─── USP item hover glow ─────────────────────────────────────
   Subtle gold left-border glow on hover for the USP strip items. */

.usp-item {
  transition: border-color var(--motion-base) var(--ease);
}
.usp-item:hover {
  border-left-color: var(--gold);
}

/* ─── Countdown value pulse ───────────────────────────────────
   Very slow, subtle opacity pulse on the countdown number to
   draw gentle attention to the camp urgency. */

.countdown-value {
  animation: count-pulse 4s ease-in-out infinite;
}

@keyframes count-pulse {
  0%, 100% { opacity: 1; }
  50%  { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .countdown-value {
    animation: none;
  }
}


/* ============================================================
   CHAT WIDGET — AI Concierge floating panel
   ============================================================ */

.chat-widget {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
  font-family: var(--font-body);
}

/* ─── Toggle button ───────────────────────────────────────── */
.chat-toggle {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--motion-base) var(--ease),
              box-shadow var(--motion-base) var(--ease);
}

.chat-toggle:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

.chat-toggle:active {
  transform: scale(0.95);
}

.chat-toggle[aria-expanded="true"] {
  background: var(--bg-elev-2);
  color: var(--gold);
}

.chat-toggle[aria-expanded="true"] .chat-toggle-icon--open { display: none; }
.chat-toggle[aria-expanded="true"] .chat-toggle-icon--close { display: block; }
.chat-toggle[aria-expanded="false"] .chat-toggle-icon--open { display: block; }
.chat-toggle[aria-expanded="false"] .chat-toggle-icon--close { display: none; }

/* ─── Chat panel ──────────────────────────────────────────── */
.chat-panel {
  position: absolute;
  bottom: 4.5rem;
  right: 0;
  width: 20rem;
  max-width: calc(100vw - 2rem);
  max-height: 28rem;
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  animation: chat-panel-in 0.25s var(--ease) both;
}
@supports not (backdrop-filter: blur(1px)) {
  .chat-panel { background: var(--bg-elev-1); }
}

.chat-panel[hidden] {
  display: none;
}

@keyframes chat-panel-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Header ──────────────────────────────────────────────── */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: rgba(232, 196, 90, 0.08);
  border-bottom: 1px solid rgba(232, 196, 90, 0.15);
}

.chat-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.chat-close {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--motion-fast);
}

.chat-close:hover {
  background: rgba(245, 240, 232, 0.08);
}

/* ─── Messages area ───────────────────────────────────────── */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  scroll-behavior: smooth;
}

.chat-message {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 85%;
  animation: chat-msg-in 0.2s var(--ease) both;
}

.chat-message--user {
  align-self: flex-end;
}

.chat-message--bot {
  align-self: flex-start;
}

@keyframes chat-msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-bubble {
  padding: 0.625rem 0.875rem;
  border-radius: 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  word-break: break-word;
}

.chat-message--user .chat-bubble {
  background: var(--gold);
  color: var(--bg);
  border-bottom-right-radius: 0.25rem;
}

.chat-message--bot .chat-bubble {
  background: var(--bg-elev-2);
  color: var(--fg);
  border: 1px solid rgba(245, 240, 232, 0.08);
  border-bottom-left-radius: 0.25rem;
}

/* ─── Typing indicator ────────────────────────────────────── */
.chat-dots {
  display: flex;
  gap: 0.25rem;
  padding: 0.125rem 0;
}

.chat-dots span {
  width: 0.375rem;
  height: 0.375rem;
  background: var(--gold-muted);
  border-radius: 50%;
  animation: chat-dot 1.4s ease-in-out infinite both;
}

.chat-dots span:nth-child(1) { animation-delay: -0.32s; }
.chat-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes chat-dot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ─── Feedback ────────────────────────────────────────────── */
.chat-feedback {
  display: flex;
  gap: 0.375rem;
  padding-left: 0.25rem;
}

.chat-thumb {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  opacity: 0.5;
  transition: opacity var(--motion-fast);
  padding: 0.125rem;
}

.chat-thumb:hover {
  opacity: 1;
}

/* ─── Input form ──────────────────────────────────────────── */
.chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-top: 1px solid rgba(245, 240, 232, 0.08);
  background: var(--bg-elev-1);
}

.chat-input {
  flex: 1;
  background: var(--bg-elev-2);
  border: 1px solid rgba(245, 240, 232, 0.1);
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  color: var(--fg);
  font-size: 0.8125rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--motion-fast);
}

.chat-input::placeholder {
  color: rgba(245, 240, 232, 0.35);
}

.chat-input:focus {
  border-color: var(--gold-muted);
}

.chat-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chat-send {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--gold);
  color: var(--bg);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--motion-fast), transform var(--motion-fast);
}

.chat-send:hover:not(:disabled) {
  background: var(--gold-hover);
  transform: scale(1.05);
}

.chat-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Mobile adjustments ──────────────────────────────────── */
@media (max-width: 480px) {
  .chat-panel {
    width: calc(100vw - 2rem);
    right: -0.75rem;
    max-height: 24rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-panel,
  .chat-message,
  .chat-dots span {
    animation: none;
  }
}


/* ============================================================
   2-HALL SCHEDULE — Hall A/B badges and legend
   ============================================================ */

.schedule-block-hall {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid;
  margin-bottom: 0.25rem;
  width: fit-content;
}

.hall-a {
  color: var(--gold);
  border-color: rgba(232, 196, 90, 0.35);
  background: rgba(232, 196, 90, 0.08);
}

.hall-b {
  color: #7ec8e3;
  border-color: rgba(126, 200, 227, 0.35);
  background: rgba(126, 200, 227, 0.08);
}

.hall-ab {
  color: #c9a0dc;
  border-color: rgba(201, 160, 220, 0.35);
  background: rgba(201, 160, 220, 0.08);
}

.hall-foyer {
  color: var(--muted);
  border-color: rgba(245, 240, 232, 0.12);
  background: rgba(245, 240, 232, 0.04);
}

/* ─── Hall legend ─────────────────────────────────────────── */
.schedule-hall-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--bg-elev-1);
  border: 1px solid rgba(245, 240, 232, 0.06);
  border-radius: 0.75rem;
  font-size: 0.8125rem;
}

.schedule-hall-legend dt {
  font-weight: 600;
  color: var(--fg);
}

.schedule-hall-legend dd {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--muted);
}

.schedule-hall-legend .hall-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  display: inline-block;
}

.schedule-hall-legend .hall-dot--a { background: var(--gold); }
.schedule-hall-legend .hall-dot--b { background: #7ec8e3; }

/* ─── Schedule block hall data attribute styling ──────────── */
.schedule-block[data-hall="a"] .schedule-block-marker::after {
  background: var(--gold);
}

.schedule-block[data-hall="b"] .schedule-block-marker::after {
  background: #7ec8e3;
}

/* ============================================================
   ▌ SPRINT 2 (2026-05-21) — Frontend polish & UX additions
   ============================================================ */

/* ─── Smooth scroll + global typography polish ───────────────── */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body { line-height: 1.7; }
p, li, dd { line-height: 1.7; }
h1, h2, h3, h4 { line-height: var(--lh-tight); }

/* ─── Body scroll lock when mobile nav drawer is open ────────── */
body.nav-scroll-locked { overflow: hidden; touch-action: none; }

/* ─── Trainer-card refinements (Bug 7 — skeleton + hover lift) ─ */
.trainer-photo { position: relative; background: var(--bg-elev-2); }
.trainer-photo-skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, var(--bg-elev-1) 8%, var(--bg-elev-2) 18%, var(--bg-elev-1) 33%);
  background-size: 200% 100%;
  animation: trainerSkeleton 1.6s linear infinite;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--motion-base) var(--ease);
}
.trainer-photo img { position: relative; z-index: 1; }
.trainer-photo img[src] ~ .trainer-photo-skeleton,
.trainer-photo:has(img[src]) .trainer-photo-skeleton { opacity: 0; }
@keyframes trainerSkeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .trainer-photo-skeleton { animation: none; }
}
.trainer-name-link { color: inherit; text-decoration: none; }
.trainer-name-link:hover { color: var(--gold); }
.trainer-formats { color: var(--fg-muted); }
.trainer-detail-cta { margin-top: 0.75rem; }
.trainer-detail-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  text-decoration: none; color: var(--gold);
  font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
.trainer-detail-link:hover { border-bottom-color: var(--gold); }
.trainer-detail-link:hover span { transform: translateX(2px); transition: transform var(--motion-fast) var(--ease); }

/* Trainer card desktop hover info reveal — small lift + soft border glow.
   Motion guarded so vestibular users aren't jolted by the lift. */
.trainer-card {
  position: relative;
  cursor: default;
}
@media (prefers-reduced-motion: no-preference) {
  .trainer-card { transition: border-color var(--motion-base) var(--ease), transform var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease); }
  .trainer-card:hover {
    border-color: var(--hairline-gold);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--hairline-gold);
  }
}
@media (prefers-reduced-motion: reduce) {
  .trainer-card:hover { border-color: var(--hairline-gold); box-shadow: 0 0 0 1px var(--hairline-gold); }
}
.trainer-card .trainer-meta { transition: color var(--motion-fast) var(--ease); }
.trainer-card:hover .trainer-meta { color: var(--fg-muted); }

/* ─── Trainer detail page ────────────────────────────────────── */
.trainer-detail { padding-block: var(--section-y); }
.trainer-detail-back { font-size: var(--fs-sm); margin-bottom: 1.5rem; }
.trainer-detail-back a { color: var(--muted); text-decoration: none; }
.trainer-detail-back a:hover { color: var(--gold); }
.trainer-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 768px) {
  .trainer-detail-grid { grid-template-columns: minmax(280px, 360px) 1fr; gap: 3rem; }
}
.trainer-detail-photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  aspect-ratio: 4 / 5;
  background: var(--bg-elev-2);
}
.trainer-detail-photo img { width: 100%; height: 100%; object-fit: cover; }
.trainer-detail-header h1 { margin-bottom: 0.5rem; }
.trainer-detail-role { color: var(--gold); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--fs-sm); font-weight: 500; }
.trainer-detail-usp { color: var(--fg-muted); margin-top: 0.75rem; font-size: var(--fs-lg); line-height: 1.55; }
.trainer-detail-meta { display: grid; gap: 0.65rem; margin-top: 1.5rem; }
.trainer-detail-meta-row { display: grid; grid-template-columns: minmax(160px, max-content) 1fr; gap: 1rem; padding-block: 0.5rem; border-bottom: 1px solid var(--hairline); }
.trainer-detail-meta-row dt { color: var(--muted); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; }
.trainer-detail-meta-row dd { margin: 0; color: var(--fg); font-variant-numeric: tabular-nums; }
.trainer-detail-meta-detail { color: var(--muted); font-size: var(--fs-sm); }
.trainer-detail-bio {
  margin-top: 3rem;
  max-width: var(--max-width-prose);
}
.trainer-detail-bio h2 { margin-bottom: 1rem; font-family: var(--font-system); }
.trainer-detail-cta-row { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.trainer-detail-others { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--hairline); }
.trainer-detail-others h2 { margin-bottom: 1rem; font-family: var(--font-system); }

/* ─── Ghost button — used in consent + schedule controls ─────── */
.btn-ghost {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--hairline-strong);
}
.btn-ghost:hover { color: var(--fg); border-color: var(--gold); background: rgba(232, 196, 90, 0.04); }

/* ─── Consent banner reject + action layout ──────────────────── */
.consent-inner { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-block: 0.75rem; }
.consent-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.consent-actions .btn { padding: 0.55rem 1rem; font-size: var(--fs-sm); }
.consent-reject { color: var(--muted); }

/* ─── Wizard validation feedback + loading state ─────────────── */
.register-field input[aria-invalid="true"],
.register-field select[aria-invalid="true"],
.register-field textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(194, 90, 74, 0.18);
}
.register-field-error {
  margin: 0.4rem 0 0;
  color: var(--danger);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.btn[disabled], .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
body .btn.is-loading {
  position: relative;
  /* Specificity 0,0,2,1 beats `.btn`, `.btn-primary`, `.btn:hover` etc.
     without needing !important — preserves the budget (2, both in
     prefers-reduced-motion). */
  color: transparent;
}
.btn.is-loading::after {
  content: "";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--bg);
  background-image: none;
}
.btn.is-loading::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 1rem; height: 1rem;
  margin-left: -0.5rem; margin-top: -0.5rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--bg);
  animation: btnSpin 0.7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::before { animation: none; } }

/* ─── Countdown post-event states ────────────────────────────── */
.countdown.countdown--running { border-color: var(--gold); background: linear-gradient(180deg, rgba(232, 196, 90, 0.12) 0%, transparent 100%); }
.countdown.countdown--running .countdown-value { font-size: var(--fs-2xl); color: var(--gold); }
.countdown.countdown--ended { border-color: var(--hairline); background: var(--bg-elev-1); }
.countdown.countdown--ended .countdown-value { color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  /* Existing countdown-value pulse animation (around line 2169) is zeroed by
     the *,*::before,*::after { animation:none } rule already declared
     inside the global prefers-reduced-motion override. Listed here for the
     review trail: countdown is animation-free under reduce. */
  .countdown { transition: none; }
}

/* ─── FAQ empty state ────────────────────────────────────────── */
.faq-empty-state {
  margin-top: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  background: var(--bg-elev-1);
}
.faq-empty-state[hidden] { display: none; }

/* ─── Schedule standalone page (Task 9) ──────────────────────── */
.schedule-standalone { padding-block: var(--section-y); }
.schedule-standalone-header { max-width: var(--max-width-prose); margin-bottom: 2rem; }
.schedule-standalone-eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: 0.18em; font-size: var(--fs-sm); }
.schedule-controls {
  display: grid;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-elev-1);
}
.schedule-controls-group { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.schedule-controls-label { color: var(--muted); font-size: var(--fs-sm); margin-right: 0.25rem; }
.schedule-controls-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.schedule-chip {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.schedule-chip:hover { background: var(--bg-elev-2); }
.schedule-chip[aria-pressed="true"] {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
  font-weight: 500;
}
.schedule-empty {
  margin: 1rem 0;
  padding: 1.25rem 1.5rem;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  background: var(--bg-elev-1);
}
.schedule-day-section { margin-bottom: 3rem; }
.schedule-day-section[hidden] { display: none; }
.schedule-standalone-footer-cta { margin-top: 3rem; }

/* ─── Print stylesheet (Task 9 — /schedule.html printable) ────
   Scoped to body.page-schedule so it never collides with screen
   rendering on other pages. Specificity boosted with `html body.page-X`
   (0,0,2,2) so we beat every component rule without using
   !important — keeps the !important budget intact. */
@media print {
  html body.page-schedule { background: #fff; color: #000; }
  html body.page-schedule .site-header,
  html body.page-schedule .site-nav,
  html body.page-schedule .nav-toggle,
  html body.page-schedule .lang-switch,
  html body.page-schedule .consent-banner,
  html body.page-schedule .chat-widget,
  html body.page-schedule .back-to-top,
  html body.page-schedule .schedule-controls,
  html body.page-schedule .schedule-standalone-footer-cta,
  html body.page-schedule .schedule-provisional-banner,
  html body.page-schedule .scroll-progress-bar { display: none; }
  html body.page-schedule::before, html body.page-schedule::after { display: none; }
  html body.page-schedule .schedule-day-section { break-inside: avoid; page-break-inside: avoid; }
  html body.page-schedule .schedule-day-section + .schedule-day-section { break-before: page; page-break-before: always; }
  html body.page-schedule .schedule-block { color: #000; border-color: #ccc; }
  html body.page-schedule .schedule-block-name,
  html body.page-schedule .schedule-block-time,
  html body.page-schedule .schedule-block-trainer { color: #000; }
  html body.page-schedule .schedule-block-hall { color: #000; border-color: #888; background: #f0f0f0; }
  html body.page-schedule .schedule-grid { gap: 0; }
  html body.page-schedule a { color: #000; text-decoration: none; }
  html body.page-schedule .schedule-standalone-header { color: #000; }
}

/* ─── Pricing calculator widget (Task 12) ─────────────────────── */
.pricing-calculator {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--bg-elev-1);
  margin-top: 2rem;
}
.pricing-calculator-heading { font-family: var(--font-display); font-size: var(--fs-lg); margin: 0; }
.pricing-calculator-row { display: grid; gap: 0.5rem; }
.pricing-calculator-row legend { color: var(--muted); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; }
.pricing-calculator-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pricing-calculator-options label {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--hairline-strong); border-radius: 999px;
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.pricing-calculator-options label:hover { background: var(--bg-elev-2); }
.pricing-calculator-options input { position: absolute; opacity: 0; width: 0; height: 0; }
.pricing-calculator-options label:has(input:checked) {
  background: var(--gold); color: var(--bg); border-color: var(--gold); font-weight: 500;
}
.pricing-calculator-result {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 1rem; border-top: 1px solid var(--hairline);
  font-family: var(--font-display);
}
.pricing-calculator-amount { font-size: var(--fs-2xl); color: var(--gold); }
.pricing-calculator-meta { color: var(--muted); font-size: var(--fs-sm); font-family: var(--font-system); }

/* ─── Venue map (Task 12) ────────────────────────────────────── */
.venue-map-wrap { margin-top: 1.5rem; border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-elev-2); }
.venue-map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.4) brightness(0.85); }
.venue-map-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }

/* ─── Testimonial polish (Task 12) ───────────────────────────── */
.testimonial-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 768px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card { padding: 1.5rem; border: 1px solid var(--hairline); border-left: 2px solid var(--gold); border-radius: var(--radius-md); background: var(--bg-elev-1); display: grid; gap: 1rem; }
.testimonial-stars { color: var(--gold); letter-spacing: 0.1em; font-size: var(--fs-md); }
.testimonial-stars[aria-label]::before { content: ""; }
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.testimonial-author-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bg-elev-2); }
.testimonial-author-name { font-family: var(--font-display); font-size: var(--fs-md); }
.testimonial-author-meta { color: var(--muted); font-size: var(--fs-sm); }

/* ─── Hall short label chip override on schedule cards ───────── */
.schedule-block-hall { padding-block: 0.1rem; padding-inline: 0.45rem; line-height: 1.4; }

/* ─── Page transition (fade in main content) ─────────────────── */
@media (prefers-reduced-motion: no-preference) {
  main { animation: pageFadeIn 480ms var(--ease-entrance) both; }
  @keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}

/* ─── Subtle section breathing tweaks for mobile ─────────────── */
@media (max-width: 640px) {
  :root { --section-y: clamp(3.5rem, 12vw, 5rem); }
  .programmes-section, .trainers-section, .team-section, .schedule-section, .faq-teaser, .tally-section, .pricing-section, .venue { padding-block: var(--section-y); }
  .trainer-card, .programme-card, .team-card { padding: 1.25rem; }
}

/* ─── Custom styled checkboxes/radios within wizard ──────────── */
.register-step input[type="checkbox"],
.register-step input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.1rem; height: 1.1rem;
  border: 1px solid var(--hairline-strong);
  background: var(--bg-elev-1);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  margin: 0;
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.register-step input[type="checkbox"] { border-radius: 4px; }
.register-step input[type="radio"] { border-radius: 50%; }
.register-step input[type="checkbox"]:checked,
.register-step input[type="radio"]:checked { border-color: var(--gold); background: var(--gold); }
.register-step input[type="checkbox"]:checked::after {
  content: "";
  width: 0.4rem; height: 0.65rem;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.register-step input[type="radio"]:checked::after {
  content: "";
  width: 0.45rem; height: 0.45rem; /* G10 Finding 9 — centred dot, not a near-full gold blob */
  background: var(--bg);
  border-radius: 50%;
}
.register-step select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.55rem 2.25rem 0.55rem 0.85rem;
  background: var(--bg-elev-1) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%23E8C45A'><path d='M0 0l6 8 6-8z'/></svg>") no-repeat right 0.85rem center;
  background-size: 0.625rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  color: var(--fg);
}
.register-step select:focus-visible { border-color: var(--gold); }

/* ─── Visible label for hamburger (sr-only span exists for SR users) ── */
.nav-toggle .sr-only { /* relies on existing .sr-only above */ }

/* ─── Native <progress> styling for the wizard ─────────────────
   The semantic <progress> element gives us proper a11y free; we
   visually adapt it to the gold-on-dark system. */
progress.register-progress {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--bg-elev-2);
  overflow: hidden;
  transition: filter var(--motion-base) var(--ease);
}
progress.register-progress::-webkit-progress-bar { background: var(--bg-elev-2); border-radius: 999px; }
progress.register-progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--gold-muted) 0%, var(--gold) 100%);
  border-radius: 999px;
  transition: width var(--motion-base) var(--ease);
}
progress.register-progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--gold-muted) 0%, var(--gold) 100%);
  border-radius: 999px;
}

/* ─── Venue map card (CSP-safe stylish address+marker tile) ──── */
.venue-map { margin-top: 1.5rem; display: grid; gap: 1rem; }
.venue-map-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 30% 70%, rgba(232, 196, 90, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 70% 20%, rgba(248, 229, 155, 0.08) 0%, transparent 50%),
    linear-gradient(160deg, var(--bg-elev-1) 0%, var(--bg-elev-2) 100%);
  border: 1px solid var(--hairline-gold);
  overflow: hidden;
  text-decoration: none;
  color: var(--fg);
  transition: transform var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease);
}
.venue-map-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 12px 32px rgba(0,0,0,0.35); }
.venue-map-card-pattern { position: absolute; inset: 0; width: 100%; height: 100%; }
.venue-map-card-marker {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 24px; height: 24px;
  display: grid; place-items: center;
}
.venue-map-card-pin {
  position: relative;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--bg);
}
/* venue-map-card-ripple animation removed — decorative gold glow */
.venue-map-card-ripple { display: none; }
.venue-map-card-body {
  position: absolute; left: 1.25rem; bottom: 1.25rem;
  background: linear-gradient(180deg, rgba(10,10,10,0.0) 0%, rgba(10,10,10,0.55) 100%);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}
.venue-map-card-eyebrow {
  color: var(--gold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 0.25rem;
}
.venue-map-card-name { font-family: var(--font-display); font-size: var(--fs-lg); margin: 0; }
.venue-map-card-address { color: var(--fg-muted); font-size: var(--fs-sm); margin: 0.25rem 0 0; }

/* ─── [hidden] override (no !important — specificity bump only) ──
   The reset `[hidden] { display: none; }` (0,0,1,0) is shadowed by
   later component rules like `.btn { display: inline-block; }` of
   equal specificity. Compound `tag.class[hidden]` (0,0,2,1) wins
   cleanly. Keeps the !important budget at 2 (both inside
   prefers-reduced-motion). */
button.btn[hidden], a.btn[hidden],
button.nav-toggle[hidden],
button.faq-chip[hidden], button.schedule-chip[hidden],
li.schedule-block[hidden],
section.schedule-day-section[hidden],
section.consent-banner[hidden],
button.back-to-top[hidden],
div.pricing-tier-header[hidden] { display: none; }

/* ========================================================================
   G6A REDESIGN COMPONENTS (brief 2026-05-26)
   Appended below the legacy stylesheet so later cascade wins over
   conflicting legacy rules of equal specificity. Tracksmith-warm editorial
   dark: restraint over flash, real photography, gold #E8C45A as accent.
   New component CSS is inserted ABOVE the /* G6A:END *​/ marker.
   ======================================================================== */

/* Body uses Inter; display headings use Playfair (set via --font-* tokens).
   Re-assert here so the redesign owns the type voice over legacy rules. */
body { font-family: var(--font-body); letter-spacing: -0.003em; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

/* ─── 1. HERO — full-bleed photo banner + centred title below (G14) ──────────
   Architect direction (#2): the trainer photo is the hero at full width/size;
   the title sits BELOW it, centred, and eases in on scroll. No text ever sits
   over the faces. The buggy typewriter is retired — the headline is plain text
   revealed via [data-reveal] (scroll ease-in; reduced-motion shows it at once).
   The photo bottom dissolves into the page canvas (G10 intent). ──────────── */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 0;
  padding-block-start: 0;   /* G14 fix — photo butts the header (was a ~104px section-pad gap) */
}
.hero-photo-wrapper {
  position: relative;
  width: 100%;
  /* Match the landscape photo's ratio so the trainers show full-size (no harsh
     vertical crop); cap height on very wide screens. */
  aspect-ratio: 16 / 9;
  max-height: 88vh;
  overflow: hidden;
}
.hero-photo {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 32%;
  -webkit-mask-image: none; mask-image: none;
}
/* Stronger bottom fade — the lower frame (floor) dissolves into --bg so the
   trainers read full-height and the title sits on the gradient (Architect #2). */
.hero-photo-wrapper::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--bg) 0%, var(--bg) 8%, rgba(10, 9, 8, 0) 28%);   /* G14 — eased so the lower bodies aren't eaten (was 12%/40%); title still sits on dark */
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: clamp(-3.5rem, -5vw, -2.25rem) auto 0;   /* lift the title into the photo's fade */
  padding: 0 var(--gutter) var(--section-y);
  text-align: center;
}
.hero-eyebrow {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.4vw, 16px);
  color: var(--gold-primary);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
  margin-inline: auto;   /* G14 fix — a base `p` max-width left-anchored this <p>; auto-centre the box so the eyebrow sits under the headline's centre (the <h1> is unconstrained, hence only the eyebrow drifted) */
}
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(44px, 7vw, 88px);
  font-weight: 600;
  line-height: 1.02;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  margin: var(--space-2) 0 0;
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: normal;
}
.hero-headline::after { content: none; }   /* no underline dash */
.hero-date {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.4vw, 18px);
  color: var(--text-secondary);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  margin: var(--space-3) 0 0;
  margin-inline: auto;   /* G14 — same base-`p` max-width left-anchor as the eyebrow; centre it under the headline */
}
.hero-date .hero-date__dot { color: var(--gold-primary); padding: 0 0.4em; }
.hero-lede {
  margin: var(--space-3) auto 0;
  max-width: 62ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--fg-soft);
  text-wrap: pretty;
}
/* The hero text eases in via [data-reveal]; suppress the legacy load-time
   gr-entrance-up so the two systems don't fight. */
.hero-eyebrow, .hero-headline, .hero-date, .hero-lede { animation: none; }

@media (max-width: 768px) {
  .hero-photo-wrapper { aspect-ratio: 3 / 4; max-height: 72vh; }  /* portrait source, full trainers */
  .hero-content { margin-top: clamp(-2.5rem, -8vw, -1.5rem); }
  .hero-headline { font-size: clamp(34px, 10vw, 52px); }
  .hero-lede { font-size: var(--fs-md); }
}

/* ─── 2. SHARED section header (eyebrow + title) ─────────────────────── */
/* G11 V1 — every section header now lives inside its section's .container
   (the schedule + pricing headers were moved inside; trainers/moments/
   programmes already were, as does the standalone schedule page). With the
   header nested in the container like the rest, the eyebrow+title of every
   section shares one left edge. This retires the G9-501 per-section
   `--section-content-width` override, which centred the schedule header
   ~100px further right than the others (and pricing ~10px right). */
.section-header { max-width: var(--max-width); margin: 0 auto var(--space-5); padding: 0 var(--gutter); }
/* G14 — centred editorial header variant (hero/trainers/moments/pricing).
   Centres the eyebrow → title → intro stack and constrains the intro measure
   so the body reads as a balanced block, not a wall of text. */
.section-header--center { text-align: center; }
.section-header--center .section-intro { margin-left: auto; margin-right: auto; max-width: 60ch; }
/* G15-UX — the eyebrow/kicker is a base <p> (max-width: 68ch prose), so in a
   centred header its box left-anchors and its centred text lands ~210px left of
   the title's centre. Drop the prose cap so the full-width <p> centres its text
   under the headline. (Same root cause as the G14 hero-eyebrow fix.) */
.section-header--center .section-eyebrow { max-width: none; }
.section-eyebrow {
  font-family: var(--font-body); font-size: 13px; line-height: 1;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-primary); font-weight: 600; margin: 0 0 var(--space-1);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 46px); font-weight: 600;
  color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.08; margin: 0;
  text-wrap: balance;
}

/* ─── 3. TRAINER GRID ───────────────────────────────────────────────────
   (G8 Finding 401) The hardcoded homepage trainer grid (flex .trainer-grid /
   .trainer-card / .trainer-card__photo|__body|__name / .role-badge--* /
   .trainer-grid__break / .photo-placeholder) was replaced by the data-driven
   .person-grid + .person-card flip system (§11b). Only the section padding
   remains here. */
.trainers-section { padding-block: var(--space-7); }

/* ─── 4. FOUNDERS BAND — landscape feature photo + leadership ─────────── */
.founders-band { display: grid; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 768px) { .founders-band { grid-template-columns: 1.35fr 1fr; } }
/* G11 V5 — the leadership photo had sharp square corners while every other image
   (moments, trainer cards) is rounded. Round the corners that face the page (per
   breakpoint) and add the lit gloss the other glass surfaces carry; the inner edge
   stays square so it meets the text panel's divider flush. */
.founders-band__media { margin: 0; overflow: hidden; min-height: 260px; position: relative; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
@media (min-width: 768px) { .founders-band__media { border-radius: var(--radius-lg) 0 0 var(--radius-lg); } }
.founders-band__media img { width: 100%; height: 100%; object-fit: cover; }
.founders-band__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 24%, transparent 52%);
  mix-blend-mode: screen;
}
.founders-band__text {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-2);
  padding: var(--space-6) var(--gutter); background: var(--surface-1);
  border-top: 1px solid var(--hairline-gold);
}
@media (min-width: 768px) { .founders-band__text { border-top: 0; border-left: 1px solid var(--hairline-gold); } }
/* Founders' names = identity headline → Playfair (mission: names in Playfair). */
.founders-band__names { font-family: var(--font-display); font-weight: 500; color: var(--fg); font-size: clamp(20px, 2.6vw, 28px); letter-spacing: -0.01em; line-height: 1.15; margin: 0; }

/* V2 glass on the founders text panel (DESIGN.md), solid surface-1 fallback above. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .founders-band__text {
    background: var(--glass-fill), rgba(20, 19, 22, 0.50);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}
.founders-band__tagline { margin: 0.6rem 0 0; color: var(--fg-soft); font-size: var(--fs-md); text-wrap: pretty; }
.founders-band__framing { margin: 1.1rem 0 0; color: var(--fg-muted); font-size: var(--fs-sm); line-height: var(--lh-base); max-width: 60ch; text-wrap: pretty; }
/* G11 V4 — more breathing room between the leadership palmarès chips (was 0.4rem,
   too tight). Scoped to the founders band; the trainer-card chip gaps are unchanged. */
.founders-band__palmares { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.7rem 0.8rem; }
/* G14 #7 — founders palmarès = the hero credentials: a larger variant of the shared
   minted .achv-chip (#1), with more breathing room than the trainer-card chips. */
.founders-band__palmares .achv-chip { font-size: var(--fs-md); padding: 0.32rem 0.9rem; }

/* ─── Achievement / palmarès chips (factual credentials) ─────────────────
   DESIGN.md: gold-hi pills, var(--gold-hi) text, hairline border, UI font,
   tabular-nums on numerals. Static — no motion, reduced-motion safe. */
.achv-chip {
  display: inline-flex; align-items: center;
  padding: 0.22rem 0.72rem;
  font-family: var(--font-system);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--gold-hi);
  /* G14 #1 — elevated minted-token chip (shared by trainer cards + founders
     palmarès): a faint vertical sheen + inset top highlight reads as struck metal
     rather than a flat outline. Static — reduced-motion safe. */
  background: linear-gradient(180deg, rgba(248, 229, 155, 0.10), rgba(248, 229, 155, 0.035));
  border: 1px solid var(--hairline-gold);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* trainer card front face — below the head, above the social row, in flow */
.person-card__achievements { list-style: none; margin: 0; padding: 0.875rem 1.375rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* When chips are the last front element (no confirmed social), they carry the
   card's bottom padding so they never touch the card edge. */
.person-card__front > .person-card__achievements:last-child { padding-bottom: 1.375rem; }
/* trainer detail page — fuller set under role/usp */
.trainer-detail-achievements { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* ─── 5. MOMENTS BAND — 3 action photos, "on the floor" ──────────────── */
.moments-band { padding-block: var(--space-7); }
.moments-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 700px) { .moments-grid { grid-template-columns: repeat(3, 1fr); } }
.moment { margin: 0; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 4 / 5; background: var(--surface-2); }
.moment img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-standard); }
.moment:hover img { transform: scale(1.04); }

/* ─── 6. SCHEDULE — day tabs + collapsible halls + time blocks ───────── */
.schedule-section { padding-block: var(--space-7); }
/* G11 V1 (follow-up) — left-align the timeline to the container's content edge
   instead of centering it. Centred at 920px it sat ~60px right of the section
   header (which V1 moved to the container edge), so the heading detached left
   of its own content. Left-aligned, the timeline shares the left edge with the
   provisional banner + the trainer/moments grids, and the header keeps the same
   one-gutter inset every other section has. (Mobile: <920px the cap is inert and
   margin:0 is a no-op, so the stacked timeline is unaffected.) */
/* G14 #2 — centre the timeline column under the now-centred section header
   (was left-aligned at 920px, stranding a wide empty right gutter on desktop). */
.schedule { max-width: 920px; margin-block: 0; margin-inline: auto; }

/* G9 Finding 502 — top must clear the now-actually-sticky .site-header.
   Brand-name `white-space: nowrap` (review fix for 505-A) keeps the
   header at ~77px across all viewports (was 90px on mobile when the
   brand wrapped), so a single top value sits flush at every width. */
.day-tabs {
  position: sticky; top: 4.85rem; z-index: 40;
  display: flex; background: var(--bg-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--space-3);
}
.day-tab {
  flex: 1; padding: var(--space-2) var(--space-3);
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-secondary); cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  transition: color 200ms var(--ease-standard), border-color 200ms var(--ease-standard);
}
.day-tab:hover { color: var(--text-primary); }
.day-tab.is-active { color: var(--gold-primary); border-bottom-color: var(--gold-primary); }

.day-panel__date {
  font-family: var(--font-body); color: var(--text-muted); font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--space-2); padding-inline: var(--space-1);
}

.hall-section { border: 1px solid var(--hairline); border-radius: var(--radius-md); margin-bottom: var(--space-2); overflow: hidden; background: var(--surface-1); }
.hall-summary {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); cursor: pointer; list-style: none; user-select: none;
  font-family: var(--font-body); font-weight: 600; color: var(--text-primary);
}
.hall-summary::-webkit-details-marker { display: none; }
.hall-summary::marker { content: ""; }
.hall-summary__name { flex: 1; }
.hall-summary__count { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); background: var(--surface-3); border-radius: 999px; padding: 2px 9px; }
.hall-summary .chevron {
  width: 9px; height: 9px; border-right: 2px solid var(--gold-primary); border-bottom: 2px solid var(--gold-primary);
  transform: rotate(45deg); transition: transform 200ms var(--ease-standard); margin-bottom: 3px;
}
.hall-section[open] .hall-summary .chevron { transform: rotate(-135deg); margin-bottom: -3px; }
.hall-summary:hover { background: var(--surface-2); }

.time-blocks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.time-block {
  display: grid; grid-template-columns: max-content 1fr 40px; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); align-items: start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 4px solid transparent; /* G14 #2 — activity colour rail (set by --act-*) */
  position: relative;
}
.time-block:last-child { border-bottom: 0; }
.time-block__time { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.time-start { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.time-sep { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.time-end { font-family: var(--font-mono); font-size: 14px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* G8 Finding 407 — tabular figures on the remaining numeric columns so prices,
   the countdown, and the capacity bar align digit-for-digit. */
.countdown-value,
.amount, .pricing-card__price,
.pricing-current, .pricing-anchor, .pricing-future, .pricing-strike,
.pricing-calculator-amount,
.register-progress-text { font-variant-numeric: tabular-nums; }
.time-block__content { min-width: 0; }
.time-block__title { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; line-height: 1.32; }
.time-block__meta { margin: 3px 0 0; }
.time-block .instructor { font-size: 13px; color: var(--gold-primary); }
/* G14 #2 — activity colour-coding as a small left-rail (never a flat fill).
   Existing palette tokens only; the "rose Stefani" trainer-tint is intentionally NOT
   added (it conflicts with activity-coding + Stefani spans several activity types) —
   flagged for Architect palette sign-off in docs/goals/G14-RESULT.md. */
/* Pinned hex (not --gold/--level-physio/--fg-muted) so a future body-text token
   retune can't silently change the rails. Private kept BELOW gold's brightness so the
   core Latin sessions read strongest (private is the least-frequent category). */
.time-block--act-group { border-left-color: #e8c45a; }
.time-block--act-fitness { border-left-color: #7a9e7e; }
.time-block--act-private { border-left-color: #cfc8b6; }
.time-block--act-break { border-left-color: rgba(255, 255, 255, 0.5); }
.time-block--break { opacity: 0.55; }
.time-block--break .add-to-calendar { display: none; }

/* schedule activity legend — decodes the rail colours (small dots, not fills) */
.schedule-legend {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem 1.4rem; margin: 0 0 var(--space-3); padding: 0; list-style: none;
}
.schedule-legend li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: var(--fg-2, var(--text-secondary)); }
.schedule-legend .legend-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.schedule-legend .legend-dot--group { background: #e8c45a; }
.schedule-legend .legend-dot--fitness { background: #7a9e7e; }
.schedule-legend .legend-dot--private { background: #cfc8b6; }
.schedule-legend .legend-dot--break { background: rgba(255, 255, 255, 0.5); }

.add-to-calendar {
  width: 32px; height: 32px; border-radius: 50%; justify-self: end;
  border: 1px solid var(--hairline-strong); background: transparent;
  color: var(--gold-primary); font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.add-to-calendar:hover { background: var(--gold-primary); color: var(--bg-primary); border-color: var(--gold-primary); }

.cal-popover {
  position: absolute; right: var(--space-3); top: calc(var(--space-2) + 38px); z-index: 30;
  display: flex; flex-direction: column; min-width: 184px;
  background: var(--surface-2); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); overflow: hidden;
}
.cal-popover > * {
  padding: 10px 14px; background: none; border: none; text-align: left;
  color: var(--text-primary); font-family: var(--font-body); font-size: 14px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.cal-popover > * + * { border-top: 1px solid var(--hairline); }
.cal-popover > *:hover { background: var(--surface-3); color: var(--gold-primary); }

/* print — both days, black on white, no dark UI bleed (brief §3) */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .site-header, .day-tabs, .add-to-calendar, .cal-popover, .sticky-cta, .cookie-banner,
  .concierge, .concierge-trigger, .site-footer, .schedule-standalone-actions,
  .schedule-standalone-footer-cta, .back-to-top, .scroll-progress { display: none !important; }
  .day-panel[hidden] { display: block !important; }
  .day-panel { page-break-inside: auto; margin-bottom: 1rem; }
  .hall-section, .time-block, details { break-inside: avoid; }
  .hall-section { border-color: #ccc; background: #fff !important; }
  .time-block { border-bottom-color: #ddd; }
  .time-block__title, .time-start, .time-sep, .time-end, .hall-summary, .day-panel__date, .section-title { color: #000 !important; }
  .time-block .instructor { color: #555 !important; }
  .hall-summary__count { background: #eee; color: #333; }
}

/* ─── 7. PRICING — 3 flat cards, capacity-as-urgency, per-block value ── */
.pricing-section { padding-block: var(--space-7); }
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3); max-width: 1100px; margin: 0 auto;
}
@media (max-width: 860px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; } }
.pricing-card {
  background: var(--surface-1); border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md); padding: var(--space-4); position: relative;
  display: flex; flex-direction: column;
}
.pricing-card--featured { background: var(--surface-2); border-color: var(--gold-primary); }
@media (min-width: 861px) { .pricing-card--featured { transform: translateY(-12px); } }
.badge-popular {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--gold-bright); color: var(--bg-primary);
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 16px;
  border-radius: 9999px; white-space: nowrap; z-index: 2;
}
.pricing-card__header { margin-bottom: var(--space-3); }
.pricing-card__name { font-family: var(--font-system); font-size: 26px; font-weight: 600; color: var(--text-primary); margin: 0; }
.pricing-card__sub { font-family: var(--font-body); color: var(--text-muted); font-size: 14px; margin: 4px 0 0; }
.pricing-card__price { margin-bottom: var(--space-3); }
/* V2: price amount is DATA, not an emotional headline → UI/data font (DESIGN.md). tabular-nums also applied via the shared §digits rule. */
.amount { font-family: var(--font-system); font-variant-numeric: tabular-nums; font-size: clamp(40px, 5vw, 56px); font-weight: 700; color: var(--text-primary); line-height: 1; }
.per-block { display: block; color: var(--gold-primary); font-size: 14px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.pricing-card__includes { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pricing-card__includes li { position: relative; padding-left: 26px; color: var(--text-secondary); font-size: 15px; line-height: 1.4; }
.pricing-card__includes li::before {
  /* G14 #12 — gold verified-badge seal instead of a plain CSS check, so each
     inclusion reads as a guaranteed/verified value. */
  content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px;
  background: url("/assets/logo/verified-badge.svg") center / contain no-repeat;
}
.pricing-card__cta {
  display: block; text-align: center; text-decoration: none;
  padding: 13px 20px; border-radius: 999px; font-family: var(--font-body);
  font-weight: 600; font-size: 15px; letter-spacing: 0.02em;
  background: transparent; color: var(--gold-primary); border: 1px solid var(--gold-primary);
  transition: background 200ms, color 200ms, border-color 200ms;
}
.pricing-card__cta:hover { background: var(--gold-primary); color: var(--bg-primary); }
.pricing-card--featured .pricing-card__cta { background: var(--gold-bright); color: var(--bg-primary); border-color: var(--gold-bright); }
.pricing-card--featured .pricing-card__cta:hover { background: var(--gold-hover); border-color: var(--gold-hover); }

/* G11 V9 — render the three pay-on-site items as a connected stepped flow (was
   three detached items). A gold arrow between consecutive steps signals the
   sequence; on narrow screens the steps stack vertically and the arrow is
   dropped (the 1 / 2 / 3 nodes carry the order). CSS-only, no copy change. */
.pay-on-site {
  list-style: none; margin: var(--space-6) auto 0; padding: 0; max-width: 1100px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3);
}
.pay-on-site li { display: inline-flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 15px; }
.pay-on-site li:not(:last-child)::after {
  content: '\2192'; /* → */ margin-left: var(--space-2);
  color: var(--gold-deep); font-size: 1.1rem; line-height: 1; flex-shrink: 0;
}
.pay-on-site .step-num {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(232, 196, 90, 0.06); border: 1px solid var(--gold-deep); color: var(--gold-primary);
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
}
@media (max-width: 560px) {
  .pay-on-site { flex-direction: column; gap: var(--space-2); }
  .pay-on-site li:not(:last-child)::after { content: none; }
}

/* ─── 8. STICKY CTA — capacity state + scroll-direction show/hide ──────── */
/* G14 — floating glass CTA pill (was a full-width bottom bar). Centred, auto-
   width, glass; carries live capacity + a price/cash detail + the register CTA. */
.sticky-cta {
  position: fixed; bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
  left: 50%; transform: translateX(-50%);
  width: auto; max-width: calc(100% - 2rem);
  padding: 0.5rem 0.5rem 0.5rem 1.15rem;
  border-radius: var(--radius-pill);
  background: var(--glass-fill), var(--glass-bg);
  backdrop-filter: blur(22px) saturate(160%) brightness(1.05);
  -webkit-backdrop-filter: blur(22px) saturate(160%) brightness(1.05);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 50px -16px rgba(0, 0, 0, 0.8);
  display: flex; align-items: center; gap: 0.9rem;
  z-index: 1000;
  transition: transform 220ms var(--ease-standard), opacity 220ms var(--ease-standard);
}
.sticky-cta.is-hidden { transform: translateX(-50%) translateY(180%); opacity: 0; }
.sticky-cta__capacity { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.capacity-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.capacity-dot[data-state="open"]         { background: var(--state-open); }
.capacity-dot[data-state="filling"]      { background: var(--state-filling); box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.16); }
.capacity-dot[data-state="limited"]      { background: var(--state-limited); }
.capacity-dot[data-state="almost-full"]  { background: var(--state-almost-full); }
.capacity-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.capacity-count { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sticky-cta__detail { font-family: var(--font-body); font-size: 11px; color: var(--fg-muted); white-space: nowrap; }
.sticky-cta__btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--gold-metal); color: var(--ink); border: 1px solid var(--gold-deep);
  padding: 0.6rem 1.15rem; border-radius: 999px; font-family: var(--font-body);
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.02em;
  text-decoration: none; flex-shrink: 0; transition: filter 200ms var(--ease-standard);
}
.sticky-cta__btn .phi { width: 16px; height: 16px; }
.sticky-cta__btn:hover { filter: brightness(1.06); }
@media (max-width: 420px) { .sticky-cta__detail { display: none; } }

/* ─── 9. COOKIE BANNER — top push-down (relative, not overlay) ─────────── */
/* G14 — cookie consent as a distinct floating popup card (was a push-down bar
   that blended into the page). Fixed bottom-centre, glass, elevated; the
   positioner is pointer-events:none so only the card itself is interactive and
   the page stays usable behind it. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
  z-index: 1200;
  display: flex; justify-content: center;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.cookie-banner.is-dismissed { display: none; }
.cookie-banner__card {
  pointer-events: auto;
  max-width: 560px; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--glass-fill), var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -20px rgba(0, 0, 0, 0.75);
}
.cookie-banner__text { font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); margin: 0; flex: 1 1 16rem; min-width: 0; }
.cookie-banner__text a { color: var(--gold-primary); text-decoration-color: var(--hairline-gold); }
.cookie-banner__actions { display: flex; gap: var(--space-1); flex-shrink: 0; }
.cookie-banner__btn {
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  padding: 9px 16px; border-radius: 999px; cursor: pointer; border: 1px solid transparent;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.cookie-banner__btn--ghost { background: transparent; color: var(--text-secondary); border-color: var(--hairline-strong); }
.cookie-banner__btn--ghost:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.cookie-banner__btn--accept { background: var(--gold-metal); color: var(--ink); border-color: var(--gold-deep); }
.cookie-banner__btn--accept:hover { filter: brightness(1.06); }
@media (max-width: 560px) {
  .cookie-banner__card { flex-direction: column; align-items: stretch; }
  .cookie-banner__actions { justify-content: stretch; }
  .cookie-banner__btn { flex: 1; }
}

/* ─── 10. AI CONCIERGE — Stefani avatar trigger + solid (non-glass) panel ─ */
.concierge { font-family: var(--font-body); }
.concierge-trigger {
  position: fixed; left: var(--space-3); bottom: calc(56px + var(--space-2)); z-index: 900;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 6px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--hairline-strong);
  cursor: pointer; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: transform 200ms var(--ease-standard), border-color 200ms var(--ease-standard);
}
.concierge-trigger:hover { transform: translateY(-2px); border-color: var(--gold-primary); }
.concierge-trigger__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.concierge-trigger__dot {
  position: absolute; left: 44px; bottom: 7px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--state-open); border: 2px solid var(--surface-2);
}
.concierge-trigger__label { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
@media (max-width: 480px) {
  .concierge-trigger { padding: 6px; }
  .concierge-trigger__label { display: none; }
  .concierge-trigger__dot { left: 40px; }
}
.concierge.is-open .concierge-trigger { display: none; }

.concierge-panel {
  position: fixed; z-index: 1100;
  background: #0A0908; border: 1px solid #2A2A2E;
  display: flex; flex-direction: column;
  box-shadow: -12px 0 48px rgba(0, 0, 0, 0.55);
  animation: concierge-in 280ms var(--ease-standard) both;
}
@media (min-width: 561px) {
  .concierge-panel { top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw; }
}
@media (max-width: 560px) {
  .concierge-panel { left: 0; right: 0; bottom: 0; height: 85vh; border-radius: 16px 16px 0 0; }
}
.concierge-panel[hidden] { display: none; }
@keyframes concierge-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.concierge-panel__handle { display: none; }
@media (max-width: 560px) {
  .concierge-panel__handle { display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--surface-3); margin: 10px auto 0; }
}
.concierge-panel__header { display: flex; align-items: center; gap: 12px; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--hairline); }
.concierge-panel__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.concierge-panel__id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.concierge-panel__name { font-weight: 700; color: var(--text-primary); font-size: 15px; }
.concierge-panel__status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.concierge-online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--state-open); }
.concierge-panel__close { background: none; border: none; color: var(--text-muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.concierge-panel__close:hover { color: var(--text-primary); }

.processing-indicator {
  height: 2px; width: 100%; flex-shrink: 0;
  background: linear-gradient(90deg, transparent 0%, var(--gold-bright) 25%, #E8D5A3 50%, var(--gold-bright) 75%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer-gold 1.8s linear infinite;
}
.processing-indicator[hidden] { display: none; }
@keyframes shimmer-gold {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.concierge-messages { flex: 1; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.concierge-msg { display: flex; }
.concierge-msg--user { justify-content: flex-end; }
.concierge-bubble { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; animation: msg-fade-in 300ms var(--ease-standard) both; }
.concierge-msg--bot .concierge-bubble { background: var(--surface-1); color: var(--text-primary); border-bottom-left-radius: 4px; }
.concierge-msg--user .concierge-bubble { background: var(--gold-primary); color: var(--bg-primary); border-bottom-right-radius: 4px; }
@keyframes msg-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.concierge-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--space-3) var(--space-2); }
.concierge-quick[hidden] { display: none; }
.concierge-pill {
  padding: 7px 14px; border-radius: 999px; background: transparent; cursor: pointer;
  border: 1px solid var(--gold-primary); color: var(--gold-primary); font-size: 13px; font-weight: 500;
  transition: background 200ms, color 200ms;
}
.concierge-pill:hover { background: var(--gold-primary); color: var(--bg-primary); }

.concierge-form { display: flex; gap: 8px; padding: var(--space-2) var(--space-3) var(--space-3); border-top: 1px solid var(--hairline); }
.concierge-input { flex: 1; padding: 11px 14px; border-radius: 999px; background: var(--surface-1); border: 1px solid var(--hairline-strong); color: var(--text-primary); font-size: 14px; }
.concierge-input::placeholder { color: var(--text-muted); }
.concierge-input:focus-visible { border-color: var(--gold-primary); box-shadow: none; }
.concierge-send { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--gold-bright); color: var(--bg-primary); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.concierge-send:hover { background: var(--gold-hover); }
.concierge-send[disabled] { opacity: 0.5; cursor: default; }

/* ─── 11. LANGUAGE TOGGLE — DE/EN segmented control in the top nav ─────── */
.lang-toggle { display: inline-flex; align-items: center; border: 1px solid var(--hairline-strong); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.lang-toggle .lang-btn {
  display: inline-block; padding: 6px 11px; background: transparent; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; color: var(--text-muted);
  transition: color 200ms var(--ease-standard), background 200ms var(--ease-standard);
}
.lang-toggle .lang-btn.is-active { background: var(--gold-primary); color: var(--bg-primary); }
.lang-toggle a.lang-btn:hover { color: var(--gold-primary); }
.lang-toggle a.lang-btn.is-active:hover { color: var(--bg-primary); }

/* ─── 12. SKELETON SHIMMER — image placeholders (P1 Pattern 7) ─────────── */
.person-card__photo, .moment, .founders-band__media {
  background-color: var(--surface-2);
  background-image: linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, 0.06) 50%, transparent 82%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s linear infinite;
}
.person-card__photo.is-loaded, .moment.is-loaded, .founders-band__media.is-loaded {
  animation: none; background-image: none;
}
@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* G6A:END */

/* ─── Faculty cards (v7 port) — homepage trainer flip-cards ───────────────────
   Ported from trainer-cards-v7.html. Adaptations (per handoff allowed-adaptations
   + AGENTS.md wins): v7 gold #C2A14E → site --gold (#E8C45A) and gold rgba tints →
   the site gold hue rgba(232,196,90,*); display font → var(--font-display)
   (Playfair, already loaded), body text inherits the site stack (NO new webfont,
   per AGENTS.md perf rule). Warm-neutral surface/ink kept at v7 values. Everything
   scoped under .faculty-grid / .tc; `pulse` keyframe namespaced to tc-pulse and the
   focus/hairline rules scoped so nothing else on the site is affected. */
.faculty-grid{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:1fr;align-items:stretch;margin-top:2.5rem}
@media (min-width:640px){.faculty-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.faculty-grid{grid-template-columns:repeat(3,1fr)}}

.tc{perspective:1400px;height:100%;transition:transform .25s ease}
.tc:hover{transform:translateY(-4px)}
.tc__inner{display:grid;transform-style:preserve-3d;transition:transform 600ms cubic-bezier(.2,.7,.2,1);position:relative;min-height:100%}
.tc.is-flipped .tc__inner{transform:rotateY(180deg)}
.tc__face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#141210;border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s ease}
.tc:hover .tc__face{border-color:rgba(232,196,90,.26)}
.tc__face--back{transform:rotateY(180deg);background:#1a1713}

.tc__photo{position:relative;aspect-ratio:4/5;background:linear-gradient(155deg,#221d16,#0f0d0b);display:grid;place-items:center}
.tc__photo img{width:100%;height:100%;object-fit:cover;display:block}
.tc__initials{font-family:var(--font-display),serif;font-size:clamp(40px,6vw,56px);color:rgba(237,231,221,.10);letter-spacing:.02em}

.tc__content{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.tc__role{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 8px}
.tc__name{font-family:var(--font-display),serif;font-size:24px;font-weight:600;line-height:1.08;margin:0 0 8px;color:#EDE7DD}
.tc__tag{font-size:14px;line-height:1.5;color:#A39A8C;margin:0 0 16px}

.tc__pills{list-style:none;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;padding:0;margin:0;font-size:12.5px}
.tc__pills li{display:inline-flex;align-items:center;gap:.55em;font-size:1em;font-weight:500;padding:.5em 1em;border-radius:16px;border:1px solid rgba(232,196,90,.32);background:linear-gradient(180deg,rgba(232,196,90,.07),rgba(232,196,90,.02));color:#ece7da;white-space:normal}
.tc .pill-ic{width:1.1em;height:1.1em;color:var(--gold);flex-shrink:0}

.tc .hairline{height:1px;border:0;margin:18px 0 0;background:linear-gradient(90deg,transparent,rgba(232,196,90,.55),transparent);position:relative}
.tc .hairline::after{content:"";position:absolute;inset:-2px 0;background:linear-gradient(90deg,transparent,rgba(232,196,90,.12),transparent);filter:blur(2px);pointer-events:none}

.tc__meta{display:flex;gap:22px;margin-top:16px}
.tc__meta dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#A39A8C;margin:0 0 3px}
.tc__meta dd{font-size:13px;color:#EDE7DD;margin:0}

.tc__foot{margin-top:auto;padding-top:14px}
.tc__social{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;font-size:13px}
.tc__ig{display:inline-flex;align-items:center;gap:6px;padding:6px 4px;color:rgba(237,231,221,.78);text-decoration:none;border-radius:4px;transition:color .15s}
.tc__ig:hover,.tc__ig:focus-visible{color:var(--gold)}
.tc__ig svg{color:rgba(232,196,90,.85);flex-shrink:0}
.tc__ig+.tc__ig svg{display:none}
.tc__div{color:rgba(232,196,90,.5);font-size:12px;user-select:none}
.tc__profile{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.tc__profile:hover,.tc__profile:focus-visible{border-color:rgba(232,196,90,.32)}

.tc__toggle{position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(232,196,90,.6);background:rgba(11,11,12,.55);color:var(--gold);font-size:22px;line-height:1;display:grid;place-items:center;cursor:pointer;isolation:isolate;z-index:2;transition:background-color .2s,border-color .2s}
.tc__toggle::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(232,196,90,.7);z-index:-1;opacity:0;animation:tc-pulse 2.6s cubic-bezier(.4,0,.6,1) infinite;will-change:transform,opacity}
@keyframes tc-pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}}
.tc__toggle:hover,.tc__toggle:focus-visible{background:rgba(232,196,90,.12);border-color:var(--gold)}
.tc__toggle:hover::before,.tc__toggle:focus-visible::before{animation-play-state:paused;opacity:0}

.tc__back{padding:24px 22px;display:flex;flex-direction:column;height:100%;overflow:auto}
.tc__brole{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 4px}
.tc__back .tc__name{margin-bottom:0}
.tc__bio{font-size:13.5px;line-height:1.55;color:#A39A8C;margin:12px 0 0}
.tc__ach{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:7px}
.tc__ach li{position:relative;padding-left:16px;font-size:12.5px;line-height:1.4;color:#EDE7DD}
.tc__ach li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.tc__focus{font-size:12px;line-height:1.45;color:#A39A8C;margin:14px 0 0}
.tc__focus b{color:var(--gold);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:10.5px;display:block;margin-bottom:4px}
.tc__bfill{flex:1;min-height:96px;position:relative;display:grid;place-items:center;overflow:hidden;margin-top:14px}
.tc__bfill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;opacity:.30;filter:grayscale(.25);-webkit-mask:linear-gradient(180deg,transparent,#000 55%);mask:linear-gradient(180deg,transparent,#000 55%);pointer-events:none}
.tc__bfill span{position:relative;font-family:var(--font-display),serif;font-size:clamp(44px,11vw,76px);line-height:1;color:rgba(232,196,90,.07);letter-spacing:.04em;user-select:none}
.tc__bbtns{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px}
.tc__close{background:none;border:1px solid rgba(232,196,90,.32);color:var(--gold);border-radius:999px;padding:8px 16px;font:inherit;font-size:12.5px;cursor:pointer;transition:background-color .2s}
.tc__close:hover,.tc__close:focus-visible{background:rgba(232,196,90,.06)}

.tc :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:inherit}

@media (prefers-reduced-motion:reduce){
  .tc,.tc__face{transition:none}
  .tc:hover{transform:none}
  .tc__inner{transform-style:flat;transition:none}
  .tc__face{transition:opacity .2s linear}
  .tc__face--back{transform:none;opacity:0;pointer-events:none}
  .tc.is-flipped .tc__face--front{opacity:0;pointer-events:none}
  .tc.is-flipped .tc__face--back{opacity:1;pointer-events:auto}
  .tc__toggle::before{animation:none;opacity:.35;transform:scale(1.15)}
}