/* ================================================================
   Padelball Club — main.css
   Konzeptstudie · Purple AI Labs
   Palette: Off-White × Navy
   ================================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ---------- Tokens ---------- */
:root {
  /* Navy is not one flat value — it's a depth scale. Deeper tones sit under
     the shallow ones so layered surfaces read as volume, not as paint. */
  --navy-900: #050B16;
  --navy-800: #0A1322;
  --navy:     #0E1B2E;
  --navy-700: #16283F;
  --navy-600: #1F3653;

  --steel:    #2A4064;  /* section fill — the mid note between navy and off-white */
  --steel-lt: #6E8CB8;  /* the accent on dark — 5:1 on navy, so it can carry
                           display type as well as marks */

  /* The lift: a cool, lit blue against all that deep navy.
     Only ever used in hairlines, marks and numerals — never on a surface. */
  --ice:    #A9C0DE;
  --ice-dp: #5B7CA6;  /* the same note, dark enough for light sections */
  /* Text-safe ice on off-white. --ice-dp is a ~3.4:1 line colour — fine for a
     hairline, not for type. This one clears AA comfortably at 7.7:1. */
  --ice-ink: #2F4E77;

  --off:   #F4F2EC;
  --off-2: #E6E2D8;

  --bg: var(--navy);
  --fg: var(--off);

  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: min(1440px, 92vw);
  --pad-x: clamp(20px, 4vw, 64px);

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* Hairlines — the grid overlay, surface edges, rules. */
  --hair-on-dark:  rgba(244, 242, 236, .08);
  --hair-on-light: rgba(14, 27, 46, .07);
  --ice-hair-on-dark:  rgba(169, 192, 222, .22);
  --ice-hair-on-light: rgba(91, 124, 166, .28);
  /* The ball is the one saturated thing on the page — it carries its own,
     slightly lime light rather than borrowing the cool accent. */
  --glow-ball: rgba(214, 232, 118, .18);

  /* Elevation — three stacked steps, each a near + far shadow so surfaces
     have both contact and atmosphere. */
  --sh-1: 0 1px 2px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.18);
  --sh-2: 0 2px 6px rgba(0,0,0,.32), 0 12px 32px rgba(0,0,0,.26);
  --sh-3: 0 4px 12px rgba(0,0,0,.38), 0 28px 64px rgba(0,0,0,.34);
  /* Inner top highlight — the trick that makes a dark surface read as lit */
  --lip-on-dark:  inset 0 1px 0 rgba(244, 242, 236, .07);
  --lip-on-light: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* Stacking order, previously scattered as magic numbers. */
  --z-ambient: 0;
  --z-grid:    55;  /* above the sections, below the ball — a line must never
                       be drawn across the ball itself */
  --z-trail:   59;
  --z-ball:    60;
  --z-topbar:  100;
  --z-grain:   130;
  --z-cta:     200;
  --z-splash:  9000;
  --z-cursor:  9999;

  /* Padel-net look — diamond mesh, very subtle. */
  --net-size: 46px;
  --net-thickness: 1px;
  --net-color-on-dark: rgba(244, 242, 236, .025);
  --net-color-on-light: rgba(14, 27, 46, .035);
}

/* Apply the net via ::after so it can coexist with existing ::before noise on hero */
.bg-net { position: relative; }
.bg-net::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      transparent 0,
      transparent calc(var(--net-size) - var(--net-thickness)),
      var(--net-color-on-dark) calc(var(--net-size) - var(--net-thickness)),
      var(--net-color-on-dark) var(--net-size)),
    repeating-linear-gradient(-45deg,
      transparent 0,
      transparent calc(var(--net-size) - var(--net-thickness)),
      var(--net-color-on-dark) calc(var(--net-size) - var(--net-thickness)),
      var(--net-color-on-dark) var(--net-size));
  pointer-events: none;
  z-index: 0;
  /* Strong fade so the net only whispers in the middle */
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 0%, transparent 85%);
          mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 0%, transparent 85%);
}
.bg-net.bg-net--light::after {
  background-image:
    repeating-linear-gradient(45deg,
      transparent 0,
      transparent calc(var(--net-size) - var(--net-thickness)),
      var(--net-color-on-light) calc(var(--net-size) - var(--net-thickness)),
      var(--net-color-on-light) var(--net-size)),
    repeating-linear-gradient(-45deg,
      transparent 0,
      transparent calc(var(--net-size) - var(--net-thickness)),
      var(--net-color-on-light) calc(var(--net-size) - var(--net-thickness)),
      var(--net-color-on-light) var(--net-size));
}
.bg-net > * { position: relative; z-index: 1; }

/* ---------- Base ---------- */
html { background: var(--navy); }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  transition: background-color .8s var(--ease-in-out), color .8s var(--ease-in-out);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* Skip-to-content link — keyboard accessibility */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 99999;
  padding: 10px 18px;
  background: var(--off);
  color: var(--navy);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 6px;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--steel);
  outline-offset: 2px;
}

/* Lenis-required */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ============================================================
   GLOBAL DEPTH LAYERS
   Three fixed planes that give the page volume. None of them is ever
   interactive, and all three sit outside the document flow so they cost
   nothing but a composited layer each.
   ============================================================ */

/* --- Ambient light pools — behind everything ------------------------- */
.page-ambient {
  position: fixed;
  inset: 0;
  z-index: var(--z-ambient);
  pointer-events: none;
  overflow: hidden;
}
.page-ambient span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
/* Warm pool, upper right */
.page-ambient__warm {
  top: -18vh;
  right: -12vw;
  width: 62vw;
  height: 62vw;
  background: radial-gradient(circle at center,
    rgba(169, 192, 222, .085) 0%,
    rgba(169, 192, 222, .03) 45%,
    transparent 70%);
}
/* Cool steel pool, lower left */
.page-ambient__cool {
  bottom: -20vh;
  left: -14vw;
  width: 70vw;
  height: 70vw;
  background: radial-gradient(circle at center,
    rgba(74, 101, 145, .1) 0%,
    rgba(74, 101, 145, .035) 45%,
    transparent 70%);
}
/* On light sections the pools would wash out — dial them back hard */
body.is-on-light-bg .page-ambient { opacity: .45; }

/* --- Editorial hairline grid ----------------------------------------- */
.grid-lines {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1440px, 91vw);
  height: 100%;
  z-index: var(--z-grid);
  pointer-events: none;
}
.grid-lines__line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hair-on-dark);
  transition: background-color .8s var(--ease-in-out);
}
.grid-lines__line--1 { left: 23.65%; }
.grid-lines__line--2 { left: 50%; }
.grid-lines__line--3 { left: 76.35%; }
/* The centre line gets the ice note — one lit thread through the page */
.grid-lines__line--2 { background: var(--ice-hair-on-dark); }

.grid-lines.is-on-light .grid-lines__line   { background: var(--hair-on-light); }
.grid-lines.is-on-light .grid-lines__line--2 { background: var(--ice-hair-on-light); }

/* --- Page-wide film grain — above content ---------------------------- */
.page-grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='pg'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.94 0 0 0 0 0.91 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23pg)'/></svg>");
  background-size: 180px 180px;
}

/* ============================================================
   SECTION SEAMS
   Sections used to butt against each other as hard colour cuts. Each seam is
   a band that carries the *previous* section's colour a little way into the
   next one, so the page reads as graded light rather than stacked panels.
   ============================================================ */
.seam {
  position: relative;
}
/* Both the fade band and the ice thread ride on ::before as two stacked
   background layers — ::after is already spoken for by .bg-net on the CTA. */
.seam::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(70px, 9vw, 140px);
  pointer-events: none;
  /* Above the court scene's deepest layer (its player sits at 3, text at 4) */
  z-index: 5;
  background-repeat: no-repeat;
  background-size: 100% 1px, 100% 100%;
  /* layer 1: the ice thread — the lit note where two sections meet
     layer 2: the fade band carrying the previous section's colour across */
  --seam-thread: linear-gradient(to right,
    transparent 0%,
    var(--ice-hair-on-dark) 18%,
    rgba(169, 192, 222, .42) 50%,
    var(--ice-hair-on-dark) 82%,
    transparent 100%);
  background-image: var(--seam-thread), var(--seam-band);
}
/* Coming out of a navy section into a light one */
.seam--from-navy::before {
  --seam-band: linear-gradient(to bottom, rgba(14, 27, 46, .5) 0%, rgba(14, 27, 46, .14) 42%, transparent 100%);
  --seam-thread: linear-gradient(to right,
    transparent 0%,
    var(--ice-hair-on-light) 18%,
    rgba(91, 124, 166, .5) 50%,
    var(--ice-hair-on-light) 82%,
    transparent 100%);
}
/* Coming out of a light section into a dark one */
.seam--from-off::before {
  --seam-band: linear-gradient(to bottom, rgba(244, 242, 236, .16) 0%, rgba(244, 242, 236, .05) 45%, transparent 100%);
}
/* Coming out of the steel CTA into the navy footer */
.seam--from-steel::before {
  --seam-band: linear-gradient(to bottom, rgba(42, 64, 100, .55) 0%, rgba(42, 64, 100, .16) 45%, transparent 100%);
}
/* The marquee is only a strip — a full-height band would swallow it whole */
.marquee.seam::before { height: clamp(22px, 3.2vw, 44px); }

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: clamp(11px, .82vw, 13px);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-block;
}
/* The dimming lives in the colour rather than in `opacity`, so the ice
   numeral below can sit at full strength instead of inheriting a 0.65 veil
   that would drag it under the contrast floor. */
.eyebrow--navy  { color: rgba(14, 27, 46, .68); }
.eyebrow--off { color: rgba(244, 242, 236, .68); }
/* The section numeral ("01 —") picks up the ice so the running order reads
   as a deliberate index rather than as body copy. */
.eyebrow__num { color: var(--ice); }
.eyebrow--navy .eyebrow__num { color: var(--ice-ink); }

/* ============================================================
   SPLASH SCREEN
   ============================================================ */
body.is-loading { overflow: hidden; }
body.is-loading .topbar { pointer-events: none; }

.splash {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none; /* panes have their own pointer-events */
  background: var(--navy); /* fallback */
}

.splash__pane {
  position: fixed;
  inset: 0;
  background: var(--navy);
  overflow: hidden;
  will-change: transform, clip-path;
  display: block;
  pointer-events: auto;
}
.splash__pane--top { clip-path: inset(0 0 50% 0); }
.splash__pane--bottom { clip-path: inset(50% 0 0 0); }

/* Centered overlay holds the actual splash content (Lottie + counter + meta).
   Sits above both panes so it stays whole as panes slide apart. */
.splash__center {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(20px, 3vw, 36px) var(--pad-x);
  color: var(--off);
  pointer-events: none;
  will-change: opacity, transform;
}

/* Layered noise + net inside each pane */
.splash__noise {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.55) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.055 0 0 0 0 0.106 0 0 0 0 0.180 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  background-size: cover, 240px 240px;
  opacity: .85;
  pointer-events: none;
}
.splash__net {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      transparent 0,
      transparent calc(var(--net-size) - var(--net-thickness)),
      rgba(244, 242, 236,.035) calc(var(--net-size) - var(--net-thickness)),
      rgba(244, 242, 236,.035) var(--net-size)),
    repeating-linear-gradient(-45deg,
      transparent 0,
      transparent calc(var(--net-size) - var(--net-thickness)),
      rgba(244, 242, 236,.035) calc(var(--net-size) - var(--net-thickness)),
      rgba(244, 242, 236,.035) var(--net-size));
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 0%, transparent 85%);
          mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 0%, transparent 85%);
  pointer-events: none;
}

.splash__head,
.splash__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: 0; /* fade in via JS */
}
.splash__head span,
.splash__foot span {
  opacity: .55;
}

.splash__core {
  display: grid;
  place-content: center;
  gap: clamp(28px, 5vh, 64px);
  text-align: center;
}

/* Splash logo — the Lottie build-up (wreath → racket → wordmark → CLUB).
   The Lottie is injected into .splash__logo-anim by JS; the still image below
   it is the fallback that shows whenever the player can't run (no JS, blocked
   CDN, reduced motion). The still is faded out by JS the moment Lottie is
   ready, so the two never double up. */
.splash__logo {
  position: relative;
  width: clamp(200px, 26vw, 330px);
  /* aspect matches the Lottie composition (739 × 850) */
  aspect-ratio: 739 / 850;
  margin: 0 auto;
  display: grid;
  place-items: center;
  contain: layout style paint;
  will-change: opacity;
  filter: drop-shadow(0 0 44px rgba(169, 192, 222, 0.16));
}
.splash__logo-anim {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.splash__logo-anim svg { width: 100% !important; height: 100% !important; }
.splash__logo-still {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  transition: opacity .4s var(--ease-out);
}
/* Set the instant the Lottie has drawn its first frame */
.splash__logo.is-animated .splash__logo-still { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .splash__logo-anim { display: none; }
  .splash__logo-still { opacity: 1 !important; }
}

.splash__progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(420px, 72vw);
  margin: 0 auto;
}

.splash__bar {
  width: 100%;
  height: 1px;
  background: rgba(244, 242, 236,.16);
  overflow: hidden;
}
.splash__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--off);
  transform-origin: left;
}

.splash__progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: var(--off);
}

.splash__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--off);
  opacity: .55;
}
.splash__eyebrow-mark {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--off);
  animation: pulse 1.4s infinite ease-in-out;
}

.splash__counter-row {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.splash__counter {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: -.01em;
  color: var(--off);
}
.splash__total {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  color: var(--off);
  opacity: .45;
}

.splash__head-right { text-align: right; }
.splash__foot { align-self: end; }

/* Reduced motion: hide splash instantly */
@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
}

/* ---------- Custom Cursor ---------- */
.cursor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}
.cursor__dot,
.cursor__ring {
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
}
.cursor__dot {
  width: 6px; height: 6px;
  background: #fff;
  margin: -3px 0 0 -3px;
}
.cursor__ring {
  width: 36px; height: 36px;
  border: 1px solid #fff;
  margin: -18px 0 0 -18px;
  transition: width .25s var(--ease-out), height .25s var(--ease-out), margin .25s var(--ease-out), opacity .2s;
}
.cursor.is-hover .cursor__ring {
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
}
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* ---------- Topbar ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: clamp(16px, 2.2vw, 28px) var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--off);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

/* Brand lockup — emblem mark plus a typeset wordmark. Two copies of the mark
   are stacked (off-white and navy) and cross-faded when the topbar passes over
   a light section; a CSS filter cannot recolour raster art accurately, so a
   second file is the honest way to do it. */
.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(9px, 1vw, 14px);
  transition: opacity .3s var(--ease-out);
}
.topbar__brand:hover { opacity: .82; }
.topbar__brand-mark {
  position: relative;
  height: clamp(30px, 3.2vw, 42px);
  aspect-ratio: 600 / 629;
  flex: none;
}
.topbar__brand-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .45s var(--ease-in-out);
}
.topbar__brand-mark .is-navy { opacity: 0; }
.topbar.is-on-light .topbar__brand-mark .is-off  { opacity: 0; }
.topbar.is-on-light .topbar__brand-mark .is-navy { opacity: 1; }

.topbar__brand-word {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
}
.topbar__brand-word b {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(12px, 1.05vw, 15px);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.topbar__brand-word span {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(8px, .65vw, 9.5px);
  letter-spacing: .42em;
  text-transform: uppercase;
  opacity: .55;
}

.topbar__right {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
}

.topbar__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  /* Deeper than --steel on purpose: the CTA section IS --steel, and a badge
     painted in the section colour disappears the moment it scrolls over it. */
  background: var(--navy-700);
  border: 1px solid var(--ice-hair-on-dark);
  color: var(--off);
  font-size: clamp(11px, .85vw, 13px);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Instagram icon button — pill style matching the badge */
.topbar__instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 4vw, 46px);
  height: clamp(38px, 4vw, 46px);
  border-radius: 999px;
  border: 1px solid rgba(244, 242, 236, 0.35);
  color: var(--off);
  background: rgba(244, 242, 236, 0.04);
  transition: background .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.topbar__instagram svg {
  width: 55%;
  height: 55%;
  display: block;
}
.topbar__instagram:hover {
  background: var(--off);
  color: var(--navy);
  border-color: var(--off);
  transform: translateY(-1px);
}
/* When the topbar is over a light section, swap the colour */
.topbar.is-on-light .topbar__instagram {
  color: var(--navy);
  border-color: rgba(14, 27, 46, 0.35);
  background: rgba(14, 27, 46, 0.04);
}
.topbar.is-on-light .topbar__instagram:hover {
  background: var(--navy);
  color: var(--off);
  border-color: var(--navy);
}
.topbar__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--off);
  animation: pulse 2.4s infinite ease-in-out;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.75); }
}

/* On light sections, invert topbar */
.topbar.is-on-light { color: var(--navy); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--navy);
  overflow: hidden;
}
.hero::before {
  /* subtle noise + vignette — sits above the field image */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.55) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.055 0 0 0 0 0.106 0 0 0 0 0.180 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  background-size: cover, 240px 240px;
  opacity: .8;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* === Layer 1: Court base === The new plate is already a dark, low-key navy
   interior, so it needs far less crushing than the old one — a light touch on
   brightness keeps the LED strips and court lines readable as light sources. */
.hero__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  z-index: 0;
  opacity: 0.95;
  filter: saturate(1.02) brightness(0.9) contrast(1.06);
  pointer-events: none;
  user-select: none;
}

/* === Layered atmosphere ===
   BACK (z:2)  sits behind players (haze)
   STAGE (z:3) players, racket, headline, ball watermark
   FRONT (z:9) sits above players — spotlight + vignette + bloom + grain
                use mix-blend-mode so light is cast onto the figures */
.hero__atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__atmosphere--back  { z-index: 2; }
/* Front sits between players (z-5) and headline (z-9) inside the stage */
.hero__atmosphere--front { z-index: 8; }
.hero__atmosphere > * {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Spotlight glow — sits BEHIND the players, dialled back for a darker mood */
.hero__atmosphere-spotlight {
  background:
    radial-gradient(ellipse 50% 70% at 50% 45%,
      rgba(255, 244, 215, 0.13) 0%,
      rgba(232, 210, 165, 0.065) 25%,
      rgba(169, 192, 222, 0.028) 50%,
      transparent 72%);
  mix-blend-mode: screen;
}

/* Light shafts — two soft angled beams raking down from the rig. Very low
   alpha; they read as air, not as graphics. */
.hero__atmosphere-shafts {
  background:
    linear-gradient(104deg,
      transparent 26%,
      rgba(255, 246, 224, .05) 33%,
      rgba(255, 246, 224, .015) 39%,
      transparent 45%),
    linear-gradient(-99deg,
      transparent 30%,
      rgba(255, 246, 224, .04) 37%,
      rgba(255, 246, 224, .012) 43%,
      transparent 49%);
  mix-blend-mode: screen;
  filter: blur(14px);
  opacity: .9;
}

/* Floor haze — softer, almost imperceptible */
.hero__atmosphere-haze {
  background:
    linear-gradient(to top,
      rgba(26, 48, 84, 0.12) 0%,
      rgba(18, 34, 60, 0.05) 12%,
      transparent 25%);
  mix-blend-mode: screen;
}

/* Cinematic vignette — softer, lets the BG breathe */
.hero__atmosphere-vignette {
  background:
    radial-gradient(ellipse 88% 102% at 50% 48%,
      transparent 40%,
      rgba(3, 8, 16, 0.26) 74%,
      rgba(3, 8, 16, 0.62) 100%);
}

/* Lens bloom — sits behind players, subtler halo */
.hero__atmosphere-bloom {
  background:
    radial-gradient(circle 280px at 50% 45%,
      rgba(255, 245, 220, 0.07) 0%,
      transparent 70%);
  mix-blend-mode: screen;
  filter: blur(38px);
}

/* Film grain — high-frequency noise, very subtle, sells the cinematic look */
.hero__atmosphere-grain {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.94 0 0 0 0 0.91 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size: 180px 180px;
  opacity: 0.22;
  mix-blend-mode: overlay;
}

/* Stage holds all interactive / scenic content above the field + noise */
.hero__stage {
  z-index: 2;
}

.hero__stage {
  position: relative;
  height: 100svh;
  display: grid;
  place-items: center;
}


/* Both plates are 16:9 with the figure sitting off-centre inside the frame —
   the server at 45 % of the plate width, the returner at 56 %. Sizing by
   HEIGHT and then deriving the width keeps that offset predictable, so each
   figure can be parked at a known point in the viewport with a `left` calc
   instead of a transform (GSAP owns the transform for parallax + scroll).

     left = <target figure centre> − <plate width> × <figure's share of it>
          = target − (--figh × 16/9) × share

   16/9 × 0.45 = 0.80 for the server, 16/9 × 0.56 = 1.00 for the returner. */
.hero__player {
  --figh: min(92svh, 56vw);
  position: absolute;
  top: -2svh;
  z-index: 5;
  height: var(--figh);
  width: calc(var(--figh) * 16 / 9);
  max-width: none;
  object-fit: contain;
  will-change: transform, filter;
  /* Soft fade at top + sides; aggressive fade at bottom so feet dissolve into
     the ground shadow rather than cutting off abruptly. */
  -webkit-mask-image:
    radial-gradient(ellipse 78% 88% at 50% 50%, #000 62%, transparent 100%),
    linear-gradient(to bottom, #000 74%, transparent 97%);
  -webkit-mask-composite: source-in;
          mask-image:
    radial-gradient(ellipse 78% 88% at 50% 50%, #000 62%, transparent 100%),
    linear-gradient(to bottom, #000 74%, transparent 97%);
          mask-composite: intersect;
  filter:
    /* Tight contact shadows ONLY — the big atmospheric shadow lives on
       .hero__stage::after (z-2, behind both players). This keeps Player 1's
       cast shadow from overlapping Player 2 who sits behind. */
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.65))
    drop-shadow(0 4px 7px rgba(0, 0, 0, 0.55))
    brightness(0.88);
}
/* Server — front layer, parked left of centre */
.hero__player--1 { left: calc(34vw - var(--figh) * 0.80); }

/* Returner — back layer, parked right of centre, a little smaller and dimmer
   so the two read as two distances rather than as a pair. */
.hero__player--2 {
  --figh: min(80svh, 49vw);
  left: calc(70vw - var(--figh) * 1.00);
  top: 4svh;
  z-index: 4;
  filter:
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55))
    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45))
    brightness(0.74);
}

/* Ground shadow — now the PRIMARY atmospheric shadow for both players.
   Sits at z-2, behind everyone (including Player 2 at z-4), so it never
   overlaps another player's body. Wider + darker than before to compensate
   for the trimmed drop-shadows on the players themselves. */
.hero__stage::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: clamp(50px, 9vh, 150px);
  width: min(82vw, 1250px);
  height: clamp(80px, 11vh, 160px);
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.55) 25%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.08) 70%,
    transparent 85%);
  filter: blur(32px);
  pointer-events: none;
  z-index: 2;
  opacity: 1;
}


/* ============================================================
   BALL FLIGHT — the travelling ball and its gradient trail.

   Both are positioned entirely from JS: initBallJourney() builds one smooth
   SVG curve, hands it to MotionPath for the ball and to the two trail paths
   for the line. Because there is only ever ONE curve, the line runs exactly
   through the ball's centre by construction — no syncing needed.
   ============================================================ */

/* --- The trail ------------------------------------------------------- */
.ball-trail {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-trail);
  pointer-events: none;
  overflow: visible;
  opacity: 0; /* faded in by JS once the ball has landed */

  /* Distance fade: only the stretch of line near the ball is lit. --bx/--by
     are written each frame from the ball's position on the path, so the glow
     travels with it and everything further back dissolves. */
  --bx: 50%;
  --by: 50%;
  --trail-reach: clamp(240px, 30vw, 460px);
  -webkit-mask-image: radial-gradient(circle var(--trail-reach) at var(--bx) var(--by),
    #000 0%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.18) 68%, transparent 100%);
          mask-image: radial-gradient(circle var(--trail-reach) at var(--bx) var(--by),
    #000 0%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.18) 68%, transparent 100%);
  /* Without this the gradient tiles and paints ghost glows off-screen */
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.ball-trail__glow,
.ball-trail__line {
  stroke: url(#trailGrad);
  stroke-linecap: round;
  will-change: stroke-dashoffset;
}
/* Wide, blurred — the soft light around the line */
.ball-trail__glow {
  stroke-width: 26;
  opacity: .5;
  mix-blend-mode: screen;
}
/* Narrow, crisp — the line itself */
.ball-trail__line {
  stroke-width: 2;
  opacity: .8;
}

/* On the off-white and steel sections the screen blend has nothing to lift,
   so the glow is dropped and the hairline deepens to the darker ice. */
.ball-trail.is-on-light .ball-trail__glow {
  opacity: .1;
  mix-blend-mode: multiply;
}
.ball-trail.is-on-light .ball-trail__line {
  stroke: var(--ice-dp);
  opacity: .42;
}

/* --- The ball -------------------------------------------------------- */
.ball-track {
  position: fixed;
  top: 0;
  left: 0;
  width: clamp(52px, 6.2vw, 96px);
  z-index: var(--z-ball);
  pointer-events: none;
  will-change: transform, opacity;
}
.ball-track__img {
  --ball-blur: 0px;   /* driven by scroll velocity from JS */
  display: block;
  width: 100%;
  height: auto;
  /* Symmetric shadow on purpose: the wrapper rotates to face the direction of
     travel, so a directional shadow would swing around with it. */
  filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.45)) blur(var(--ball-blur));
  will-change: transform, filter;
}
/* Halo — the ball carries its own light source. Opacity is driven by
   scroll velocity so it flares as the ball picks up speed. */
.ball-track__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320%;
  height: 320%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at center,
    var(--glow-ball) 0%,
    rgba(214, 232, 118, .08) 38%,
    transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}

/* Editorial hero headline — small eyebrow line over a MASSIVE feature
   word. Emotional dominance, not balanced layout. */
.hero__headline {
  position: absolute;
  left: 0; right: 0;
  /* Headline sits low so CTA sits right beneath it without huge gap.
     (Descender padding on data-word adds invisible ~80px below text → those
     numbers compensate so the VISUAL gap stays tight) */
  bottom: clamp(110px, 14vh, 200px);
  z-index: 9;
  text-align: center;
  padding: 0 clamp(20px, 4vw, 80px);
  pointer-events: none;
  font-family: var(--serif);
  color: var(--off);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  filter:
    drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55))
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}
/* Pull the feature word up so it sits tight under the eyebrow */
.hero__headline-feature { margin-top: -0.22em; }

/* Wrapper for each animated word — slide-up reveal.

   The clip is opt-IN, not opt-out: it only exists while .is-revealing is on
   the headline, which JS adds for the duration of the tween. Previously the
   clip was the default and JS had to remove it — so any hiccup in the intro
   left the type permanently shaved (the italic "e" of "deine" leans well past
   its advance width) and the still-masked second line invisible. This way the
   worst case is an un-animated headline, never a broken one.

   The side padding gives those overhangs room while the clip IS on. */
.hero__headline [data-word] {
  display: inline-block;
  overflow: visible;
  line-height: 1;
  padding: 0.05em 0.14em 0.28em;
  will-change: transform, opacity;
}
.hero__headline.is-revealing [data-word] {
  overflow: hidden;
}
.hero__headline [data-word] > span {
  display: inline-block;
  will-change: transform;
}

/* Small eyebrow line, substantial but clearly subordinate to the feature
   word; relies on weight + casing for the hierarchy. Sits at 5:1 against the
   navy so it survives the busy court plate behind it. */
.hero__headline-eyebrow {
  font-size: clamp(2.6rem, 6.4vw, 6.5rem);
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "opsz" 144;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--steel-lt);
  opacity: 0.96;
}
.hero__headline-eyebrow em {
  font-style: italic;
  color: var(--off);
  font-weight: 400;
}

/* MASSIVE feature word — dominates the viewport */
.hero__headline-feature {
  /* 18.5vw is the ceiling at which a seven-letter word still clears the
     gutters on a 1440 frame — a wider setting would run off the edge. */
  font-size: clamp(3.4rem, 18.5vw, 16rem);
  font-weight: 700;
  font-variation-settings: "opsz" 144;
  line-height: 0.84;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  /* Deliberately a flat fill, not a clipped gradient.
     This word used to paint through `background-clip: text` +
     `-webkit-text-fill-color: transparent`. The reveal wraps it in a span that
     GSAP transforms, which promotes that span to its own compositing layer —
     and a background clipped on an ANCESTOR cannot reach across that layer, so
     on GPU-accelerated Chrome the whole word rendered transparent. (It only
     ever looked fine in software rendering, where nothing gets promoted.)
     The depth now comes from the drop-shadows on .hero__headline instead. */
  color: var(--off);
}
/* The full stop is the single accent mark in the hero — ice, and lit */
.hero__headline-dot {
  display: inline-block;
  color: var(--ice);
  margin-left: -0.04em;
  text-shadow: 0 0 18px rgba(169, 192, 222, .34);
}

.hero__meta {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(28px, 4vh, 50px);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 24px);
  padding: 0 var(--pad-x);
  pointer-events: none;
  font-family: var(--sans);
  font-size: clamp(10px, .82vw, 12px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--off);
  opacity: 0; /* fade in via JS */
}
.hero__meta-text { opacity: .65; }
.hero__meta-line {
  height: 1px;
  width: clamp(40px, 8vw, 90px);
  background: var(--off);
  opacity: .35;
}

/* Hero CTA — pill-shaped, FIXED so it stays visible across all sections.
   Centered via left:0 right:0 margin:auto + width:max-content (no CSS
   transform; GSAP transforms compose freely). */
.hero__cta {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  max-width: calc(100vw - 40px);
  bottom: clamp(70px, 10vh, 140px);
  z-index: 200; /* above everything except splash + custom cursor */
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
  padding: clamp(14px, 1.4vw, 18px) clamp(24px, 2.4vw, 36px);
  min-height: 48px;
  background: var(--off);
  color: var(--navy);
  border: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 6px 14px rgba(0, 0, 0, 0.32);
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  will-change: transform, opacity;
}
.hero__cta-label { display: inline-block; }
.hero__cta-arrow {
  width: clamp(20px, 1.6vw, 26px);
  height: auto;
  display: block;
  transition: transform 0.35s var(--ease-out);
}
.hero__cta:hover {
  background: var(--navy-800);
  color: var(--off);
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.5),
    0 8px 16px rgba(0, 0, 0, 0.4),
    /* a hairline of ice rings the pill once it inverts */
    0 0 0 1px var(--ice);
}
.hero__cta:hover .hero__cta-arrow {
  transform: translateX(6px);
}
.hero__cta:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 4px;
}

/* ============================================================
   INLINE CTA — text link with sliding arrow, sits within section
   text blocks (Vision, Court). Underline animates from left on hover.
   ============================================================ */
.inline-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(14px, 1.6vw, 24px);
  font-family: var(--sans);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: currentColor;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s var(--ease-out);
}
.inline-cta__arrow {
  width: 22px;
  height: auto;
  display: block;
  transition: transform 0.3s var(--ease-out);
}
.inline-cta::after {
  content: '';
  position: absolute;
  left: 0;
  right: 28px; /* avoid underlining the arrow icon */
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease-out);
}
.inline-cta:hover { color: var(--ice-ink); }
.inline-cta:hover::after { transform: scaleX(1); }
.inline-cta:hover .inline-cta__arrow { transform: translateX(5px); }
.inline-cta:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 3px;
}

.hero__scroll {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(24px, 3vh, 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 6;
  color: var(--off);
  opacity: .7;
}
.hero__scroll span {
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.hero__scroll svg { animation: scrollNudge 2s infinite ease-in-out; }
@keyframes scrollNudge {
  0%, 100% { transform: translateY(0); opacity: .8; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ============================================================
   MARQUEE STRIP — Awwwards-style scrolling text between sections
   ============================================================ */
.marquee {
  background: var(--off);
  color: var(--navy);
  border-top: 1px solid rgba(14, 27, 46, 0.12);
  border-bottom: 1px solid rgba(14, 27, 46, 0.12);
  overflow: hidden;
  padding: clamp(20px, 2.4vw, 32px) 0;
  position: relative;
  z-index: 1;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeSlide 38s linear infinite;
  will-change: transform;
}
.marquee__row {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding-right: clamp(28px, 4vw, 56px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.2rem, 5.2vw, 5.4rem);
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.marquee__row > span:not(.marquee__star) {
  display: inline-block;
}
.marquee__star {
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  color: var(--ice-dp);
  font-size: 0.55em;
  transform: translateY(-0.08em);
}
/* Feather both ends so the words emerge and dissolve instead of being sliced
   off by the section edge. Done as an overlay in the section's own off-white
   than as a mask: a mask on the section would fade its background out too, and
   a mask on the track would follow the track's own double-width box. */
.marquee::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--off) 0%, rgba(244, 242, 236, 0) 9%),
    linear-gradient(to left,  var(--off) 0%, rgba(244, 242, 236, 0) 9%);
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   VISION
   ============================================================ */
.vision {
  background: var(--off);
  color: var(--navy);
  padding: clamp(100px, 14vh, 200px) var(--pad-x);
}
.vision__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(48px, 8vw, 140px);
  align-items: start;
}
.vision__left { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); }

.vision__headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.8rem, 6.4vw, 7rem);
  line-height: 0.96;
  letter-spacing: -.035em;
  color: var(--navy);
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}
/* Same falloff as the hero, inverted for dark type on a light ground.
   It has to sit on the innermost word spans: splitLines() wraps each line in
   an overflow:hidden element, and a clipped background does not paint through
   that. Before the split runs there are no .word spans, so the headline simply
   renders in flat navy — a safe fallback. */
.vision__headline .word {
  background: linear-gradient(180deg, var(--navy-900) 10%, var(--navy) 55%, var(--navy-700) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Declarative variant — massive, uppercase, single-line statement
   (used for "Win your match." in the rewritten Section 01) */
.vision__headline--declarative {
  font-weight: 600;
  font-size: clamp(3.4rem, 10vw, 11rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.vision__headline .line {
  display: block;
  overflow: hidden;
}
.vision__headline .line > span {
  display: inline-block;
  will-change: transform, opacity;
}

.vision__lead {
  max-width: 36ch;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.45;
  color: var(--navy);
  opacity: .85;
}
.vision__lead em {
  font-style: italic;
  color: var(--steel);
  font-weight: 400;
}

.facts {
  border-top: 1px solid var(--ice-hair-on-light);
}
.facts__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  padding: clamp(18px, 2vw, 28px) 0;
  border-bottom: 1px solid rgba(14, 27, 46,.15);
  align-items: baseline;
  position: relative;
  transition: background-color .4s var(--ease-out);
}
/* A hairline of ice grows in under the row on hover — the same
   scaleX-from-left idiom the links already use. */
.facts__row::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--ice-dp);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease-out);
}
.facts__row:hover::after { transform: scaleX(1); }
.facts__row dt {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--steel);
  font-weight: 500;
}
.facts__row dd {
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy);
}
.facts__row dd span {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--navy);
  opacity: .55;
  margin-top: 4px;
  letter-spacing: 0;
}

/* ============================================================
   COURT REVEAL — Cinematic Hit-Scene
   ============================================================ */
.court {
  background: var(--navy);
  color: var(--off);
  position: relative;
  overflow: hidden;
}
.court-scene {
  min-height: 100svh;
  padding: 0;
}

/* Layer 1 — Background (cinematic court at night, full-bleed, slow parallax) */
.court-scene__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  will-change: transform;
  transform: scale(1.12); /* start zoomed, scrolls to 1.0 */
}

/* Layer 2 — Club emblem, ghosted into the right half of the scene where the
   text isn't. It replaces the cut-out player the old build had here: with an
   empty court plate, an oversized mark reads better than a second figure. */
.court-scene__emblem {
  position: absolute;
  right: clamp(-40px, 2vw, 90px);
  top: 50%;
  width: clamp(220px, 30vw, 460px);
  height: auto;
  z-index: 2;
  transform: translateY(-50%);
  opacity: .1;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
}

/* Layer 3 — Ball resting on the court surface; launches diagonally out of
   frame on scroll. Bigger than the travelling ball on purpose, so the two
   read as different distances rather than as a duplicate. */
.court-scene__ball {
  position: absolute;
  right: clamp(8vw, 16vw, 22vw);
  bottom: clamp(90px, 18vh, 220px);
  width: clamp(64px, 7.5vw, 118px);
  height: auto;
  z-index: 3;
  will-change: transform;
  filter: drop-shadow(0 22px 26px rgba(0,0,0,0.62));
  pointer-events: none;
  user-select: none;
}
/* Contact shadow on the court under the resting ball */
.court-scene__ball-shadow {
  position: absolute;
  right: clamp(8vw, 16vw, 22vw);
  bottom: clamp(78px, 16.4vh, 204px);
  width: clamp(64px, 7.5vw, 118px);
  height: clamp(14px, 1.8vh, 22px);
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,.7) 0%, rgba(0,0,0,.32) 45%, transparent 76%);
  filter: blur(6px);
  pointer-events: none;
}

/* Dark gradient overlay — strong on the text side, soft on the scene side */
.court-scene__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Heavier left-side darkening so the text reads strongly */
    linear-gradient(to right,
      rgba(5, 11, 22, 0.98) 0%,
      rgba(5, 11, 22, 0.85) 22%,
      rgba(14, 27, 46, 0.55) 42%,
      rgba(14, 27, 46, 0.15) 60%,
      transparent 80%),
    /* Vertical vignette top + bottom */
    linear-gradient(to bottom, rgba(5, 11, 22, 0.45) 0%, transparent 25%, transparent 70%, rgba(5, 11, 22, 0.7) 100%);
  pointer-events: none;
}

/* Text content — left-anchored, vertically centred over the scene */
.court-scene__text {
  position: relative;
  z-index: 4;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(80px, 14vh, 180px) var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
  align-items: flex-start;
  justify-content: center;
  min-height: 100svh;
  max-width: 880px;
}
.court-scene__text .court__headline,
.court-scene__text .court__lead {
  max-width: 16ch;
}
.court-scene__text .court__lead {
  max-width: 28ch;
}

.court__headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 5.8vw, 6.4rem);
  line-height: 0.96;
  letter-spacing: -.035em;
  color: var(--off);
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}
.court__headline .line { display: block; overflow: hidden; }
.court__headline .line > span { display: inline-block; will-change: transform, opacity; }
/* Once the slide-up reveal finishes, drop the overflow:hidden so descenders
   (g, p, j, …) render normally instead of being clipped. JS adds .is-revealed. */
[data-split-lines].is-revealed .line { overflow: visible; }

.court__lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.5;
  color: var(--off);
  opacity: .7;
  max-width: 32ch;
}

/* ============================================================
   CLUB
   The mirror of the Vision section — media left, text right — so the two
   light sections read differently instead of repeating a layout.
   ============================================================ */
.club {
  background: var(--off);
  color: var(--navy);
  padding: clamp(100px, 14vh, 200px) var(--pad-x);
}
.club__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

/* The frame crops the plate to a portrait and gives the parallax something
   to move inside — without overflow:hidden the drift would just shift the
   whole picture around on the page. */
.club__media {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 4 / 5;
  background: var(--navy-800);
  box-shadow: var(--sh-3);
}
.club__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Oversized so the parallax never exposes an edge */
  transform: scale(1.08);
  will-change: transform;
}
/* A whisper of the section colour over the plate's top edge, so the picture
   sits in the page rather than on top of it. */
.club__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(244, 242, 236, .10) 0%, transparent 28%);
}

.club__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2vw, 26px);
}

.club__headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.6vw, 4.6rem);
  line-height: 1.0;
  letter-spacing: -.035em;
  color: var(--navy);
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
  max-width: 15ch;
}
.club__headline .line { display: block; overflow: hidden; }
.club__headline .line > span { display: inline-block; will-change: transform, opacity; }

.club__lead {
  max-width: 40ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.5;
  color: var(--navy);
  opacity: .72;
}

.club__list {
  width: 100%;
  margin-top: clamp(6px, 1vw, 14px);
  border-top: 1px solid var(--ice-hair-on-light);
}
.club__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  padding: clamp(16px, 1.8vw, 24px) 0;
  border-bottom: 1px solid rgba(14, 27, 46, .15);
  align-items: baseline;
  position: relative;
}
.club__row::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--ice-dp);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease-out);
}
.club__row:hover::after { transform: scaleX(1); }
.club__row dt {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--steel);
  font-weight: 500;
}
.club__row dd {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy);
}
.club__row dd span {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--navy);
  opacity: .55;
  margin-top: 4px;
  letter-spacing: 0;
}

/* ============================================================
   CTA (Countdown + Newsletter + Instagram)
   ============================================================ */
.cta {
  background: var(--steel);
  color: var(--off);
  padding: clamp(100px, 14vh, 200px) var(--pad-x);
}
.cta__inner {
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}
.cta__headline {
  margin-top: 24px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.4vw, 6.2rem);
  line-height: 0.98;
  letter-spacing: -.035em;
  color: var(--off);
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}

.countdown {
  margin: clamp(48px, 7vw, 96px) auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 880px;
  gap: clamp(16px, 3vw, 48px);
  border-top: 1px solid var(--ice-hair-on-dark);
  border-bottom: 1px solid var(--ice-hair-on-dark);
  padding: clamp(24px, 4vw, 44px) 0;
}
.countdown__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}
/* Hairline dividers between the cells rather than pure whitespace — gives the
   row the feel of a milled instrument face. */
.countdown__cell + .countdown__cell::before {
  content: '';
  position: absolute;
  left: calc(clamp(16px, 3vw, 48px) / -2);
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent, var(--ice-hair-on-dark) 30%, var(--ice-hair-on-dark) 70%, transparent);
}
.countdown__num {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--off);
}
.countdown__label {
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--off);
  opacity: .65;
}

.cta__grid {
  margin: clamp(48px, 6vw, 80px) auto 0;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
  text-align: left;
}

/* Instagram primary CTA */
.cta__instagram {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(244, 242, 236,.22);
  border-top-color: var(--ice-hair-on-dark);
  border-radius: 12px;
  /* Depth recipe: a graded fill that is darker at the foot, a lit top edge,
     and a two-stage shadow for contact plus atmosphere. */
  background: linear-gradient(180deg, rgba(31, 54, 83, .3) 0%, rgba(5, 11, 22, .34) 100%);
  box-shadow: var(--sh-2), var(--lip-on-dark);
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out),
              transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  min-height: 180px;
  overflow: hidden;
}
.cta__instagram:hover {
  background: linear-gradient(180deg, rgba(31, 54, 83, .46) 0%, rgba(5, 11, 22, .5) 100%);
  border-color: var(--ice);
  transform: translateY(-3px);
  box-shadow: var(--sh-3), var(--lip-on-dark);
}
.cta__instagram-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 400;
  color: var(--off);
  line-height: 1.15;
}
.cta__instagram-handle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--off);
  opacity: .9;
}
.cta__instagram-line {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--ice);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.cta__instagram:hover .cta__instagram-line { transform: scaleX(1); }

/* Newsletter */
.cta__newsletter {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(244, 242, 236,.22);
  border-top-color: var(--ice-hair-on-dark);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(31, 54, 83, .3) 0%, rgba(5, 11, 22, .34) 100%);
  box-shadow: var(--sh-2), var(--lip-on-dark);
  min-height: 180px;
}
.cta__newsletter input[type="email"] {
  width: 100%;
  padding: 14px 0;
  font-family: var(--sans);
  font-size: clamp(16px, 1.2vw, 18px);
  color: var(--off);
  background: transparent;
  border-bottom: 1px solid rgba(244, 242, 236,.4);
  outline: none;
  transition: border-color .3s var(--ease-out);
}
.cta__newsletter input[type="email"]::placeholder { color: rgba(244, 242, 236,.55); }
.cta__newsletter input[type="email"]:focus { border-color: var(--off); }
.cta__newsletter button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  align-self: flex-start;
  background: var(--off);
  color: var(--navy);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.cta__newsletter button[type="submit"]:hover {
  background: var(--navy);
  color: var(--off);
  transform: translateX(2px);
}
.cta__newsletter-msg {
  position: absolute;
  bottom: -28px;
  left: clamp(24px, 3vw, 36px);
  font-size: 12px;
  color: var(--off);
  opacity: 0;
  transition: opacity .3s;
}
.cta__newsletter-msg.is-show { opacity: .9; }

.cta__small {
  margin-top: clamp(40px, 5vw, 60px);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--off);
  opacity: .55;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  /* Graded down to the deepest navy at the very bottom of the page — the
     last thing you see is the darkest thing there is. */
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-900) 100%);
  color: var(--off);
  padding: clamp(48px, 6vh, 80px) var(--pad-x) clamp(28px, 3vh, 44px);
}
.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
}
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--off);
}
.footer__brand img {
  height: 28px; width: auto;
  filter: brightness(0) invert(1);
}
.footer__nav {
  display: flex;
  gap: clamp(20px, 3vw, 36px);
  justify-content: center;
}
.footer__nav a {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--off);
  opacity: .65;
  position: relative;
  transition: opacity .25s;
}
.footer__nav a:hover { opacity: 1; }
.footer__nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: var(--ice);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.footer__nav a:hover::after { transform: scaleX(1); }
.footer__meta {
  font-size: 12px;
  color: var(--off);
  opacity: .5;
  text-align: right;
  letter-spacing: .04em;
}

/* ============================================================
   Focus
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .vision__inner { grid-template-columns: 1fr; gap: 56px; }
  .vision { padding: clamp(80px, 12vh, 140px) var(--pad-x); }
  /* Club stacks text-first: on a narrow screen the heading has to lead, so
     the media is pushed below it with order rather than by reordering markup
     (the DOM order is the one screen readers should hear). */
  .club { padding: clamp(80px, 12vh, 140px) var(--pad-x); }
  .club__inner { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 48px); }
  .club__text  { order: 1; }
  .club__media { order: 2; aspect-ratio: 3 / 2; }
  .club__media img { object-position: center 32%; }
  /* Court scene tablet — text gets full padding, scene shrinks slightly */
  .court-scene { min-height: auto; }
  .court-scene__text { padding: clamp(60px, 10vh, 120px) var(--pad-x) clamp(60px, 10vh, 120px); }
  .cta { padding: clamp(80px, 12vh, 140px) var(--pad-x); }
  .cta__grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; text-align: center; gap: 20px; }
  .footer__brand, .footer__nav, .footer__meta { justify-self: center; text-align: center; }
}

/* ====== TABLET BRACKET (641–1024px) — fills the iPad portrait + landscape
   gap between Mobile (≤640) and Desktop (≥1025). Without this, the fixed
   CTA sat ~115px below the headline on iPad Portrait. ====== */
@media (min-width: 641px) and (max-width: 1024px) {
  /* CTA lifted higher so it sits visually close to the headline */
  .hero__cta {
    bottom: clamp(120px, 16vh, 220px);
    padding: 15px 28px;
    font-size: 13px;
  }
  /* Headline lower so it sits tight above the CTA on iPad */
  .hero__headline {
    bottom: clamp(150px, 19vh, 230px);
  }
  /* Court scene emblem — pulled in from the edge on the narrower frame */
  .court-scene__emblem { right: -20px; width: 34vw; }
  /* Headline feature size — bigger relative to wider iPad screen */
  .hero__headline-feature {
    font-size: clamp(4.4rem, 15vw, 10rem);
  }
}

/* ====== TABLET / MOBILE (≤ 640px) ====== */
@media (max-width: 640px) {
  /* Topbar tighter, badge condensed */
  .topbar { padding: 14px 14px; }
  .topbar__brand { gap: 8px; }
  .topbar__brand-mark { height: 28px; }
  .topbar__brand-word b { font-size: 11px; letter-spacing: .14em; }
  .topbar__brand-word span { font-size: 7.5px; letter-spacing: .32em; }
  .topbar__right { gap: 8px; }
  .topbar__badge { padding: 6px 10px; font-size: 8px; letter-spacing: .1em; gap: 6px; }
  .topbar__dot { width: 6px; height: 6px; }
  .topbar__instagram { width: 32px; height: 32px; }
  .topbar__instagram svg { width: 16px; height: 16px; }

  /* HERO — one figure only on phones. Two 16:9 plates side by side on a 390 px
     screen crops both figures to unreadable slivers; the server carries the
     shot on his own, at a size the narrow frame can actually show. */
  .hero__player--2 { display: none; }
  .hero__player--1 {
    --figh: min(52svh, 108vw);
    top: 3svh;
    left: calc(46vw - var(--figh) * 0.80);
    -webkit-mask-image:
      radial-gradient(ellipse 82% 86% at 50% 50%, #000 66%, transparent 100%),
      linear-gradient(to bottom, #000 78%, transparent 98%);
            mask-image:
      radial-gradient(ellipse 82% 86% at 50% 50%, #000 66%, transparent 100%),
      linear-gradient(to bottom, #000 78%, transparent 98%);
  }
  /* Ball is placed entirely from JS now — only its size changes here */
  .ball-track { width: 46px; }
  /* The blurred glow stroke is by far the most expensive part of the trail;
     on phones the hairline alone carries the effect. */
  .ball-trail__glow { display: none; }
  .ball-trail { --trail-reach: clamp(180px, 46vw, 300px); }
  /* Outer grid lines crowd a narrow screen — keep only the centre thread */
  .grid-lines__line--1,
  .grid-lines__line--3 { display: none; }
  .page-ambient span { filter: blur(60px); }

  /* HERO HEADLINE mobile — lifted higher to make room for CTA + meta below */
  .hero__headline {
    bottom: clamp(150px, 22vh, 240px);
    padding: 0 14px;
    gap: 6px;
  }
  .hero__headline-eyebrow {
    font-size: clamp(2.8rem, 12vw, 4rem);
  }
  .hero__headline-feature {
    font-size: clamp(2.4rem, 19.5vw, 5rem);
    margin-top: -0.28em; /* pull tighter under the eyebrow */
  }

  .hero__meta {
    bottom: clamp(20px, 3vh, 36px);
    gap: 10px;
    font-size: 9px;
    letter-spacing: .25em;
  }
  .hero__cta {
    bottom: clamp(85px, 13vh, 150px);
    padding: 14px 26px;
    font-size: 12px;
    letter-spacing: 0.14em;
    gap: 10px;
  }
  .hero__cta-arrow { width: 20px; }
  .hero__meta-line { width: 24px; }
  .hero__scroll { display: none; }

  /* MARQUEE — smaller, tighter */
  .marquee { padding: 16px 0; }
  .marquee__row {
    gap: 22px;
    padding-right: 22px;
    font-size: clamp(1.5rem, 8vw, 2.4rem);
  }

  /* VISION — tighter typography + lead */
  .vision__headline { font-size: clamp(2rem, 8.4vw, 3rem); }
  .vision__lead { font-size: 14px; }
  .facts__row { grid-template-columns: 80px 1fr; gap: 16px; padding: 14px 0; }
  .facts__row dt { font-size: 10px; letter-spacing: .18em; }
  .facts__row dd { font-size: 16px; }
  .facts__row dd span { font-size: 12px; }

  /* COURT scene mobile — vertical layout: text at top in a dark band, the
     scene fills the bottom area, ball resting in the lower third. */
  .court-scene { min-height: 95svh; }
  .court__headline { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .court__lead { font-size: 13px; line-height: 1.55; }

  .court-scene__bg {
    object-position: center 62%; /* show the court, not the dark ceiling */
  }
  .court-scene__emblem {
    right: 50%;
    top: auto;
    bottom: 6vh;
    width: 56vw;
    transform: translateX(50%);
    opacity: .07;
  }
  .court-scene__ball {
    right: 16vw;
    bottom: 15vh;
    width: 56px;
  }
  .court-scene__ball-shadow {
    right: 16vw;
    bottom: 13.7vh;
    width: 56px;
    height: 11px;
  }

  /* Stronger top-darkening so the text band is fully legible */
  .court-scene__overlay {
    background:
      linear-gradient(to bottom,
        rgba(5, 11, 22, 0.96) 0%,
        rgba(5, 11, 22, 0.88) 22%,
        rgba(14, 27, 46, 0.5) 42%,
        rgba(14, 27, 46, 0.15) 60%,
        rgba(5, 11, 22, 0.75) 100%);
  }

  /* Text sits in the top half of the section, padded inward */
  .court-scene__text {
    justify-content: flex-start;
    padding: clamp(70px, 11vh, 110px) var(--pad-x) 0;
    min-height: 60svh;
    gap: 16px;
  }
  .court-scene__text .court__headline { max-width: 18ch; }
  .court-scene__text .court__lead { max-width: 26ch; }

  /* CLUB — tighter type, list labels above values */
  .club__headline { font-size: clamp(1.9rem, 8vw, 2.6rem); max-width: 18ch; }
  .club__lead { font-size: 14px; }
  /* Label above value, not beside it — "Mitgliedschaft" is far too long for
     a label column that still leaves the value room on a 390 px screen. */
  .club__row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .club__row dt { font-size: 10px; letter-spacing: .18em; }
  .club__row dd { font-size: 16px; }
  .club__row dd span { font-size: 12px; }
  .club__media { aspect-ratio: 4 / 3; border-radius: 10px; }

  /* CTA — countdown stacks 2×2, smaller numbers */
  .cta__headline { font-size: clamp(2rem, 7.8vw, 2.8rem); }
  .countdown { grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 22px 0; }
  .countdown__num { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .countdown__label { font-size: 9px; letter-spacing: .22em; }
  .cta__grid { gap: 16px; }
  .cta__instagram, .cta__newsletter { min-height: 132px; padding: 20px; }
  .cta__instagram-label { font-size: 18px; }
  .cta__newsletter input[type="email"] { font-size: 16px; padding: 12px 0; }
  .cta__newsletter button[type="submit"] { padding: 12px 18px; font-size: 12px; }
  .cta__small { font-size: 10px; }

  /* FOOTER */
  .footer__nav { flex-wrap: wrap; gap: 14px; }
  .footer__nav a { font-size: 11px; }
  .footer__meta { font-size: 10px; }
  .footer__inner { gap: 16px; }

  /* Vision lead — wider line-height for breathing room on tiny screens */
  .vision__lead { line-height: 1.6; }

  /* Marquee — slightly slower on mobile so it doesn't feel rushed */
  .marquee__track { animation-duration: 44s; }

  /* SPLASH */
  /* Splash logo on mobile — bigger container so the SVG (and PADEL text
     inside the viewBox) doesn't shrink to unreadable size. Plus reduce
     gap between counter + bar so the load progress sits tighter. */
  .splash__logo { width: min(78vw, 320px); }
}

/* ====== ULTRA-NARROW (≤ 380px) — hide the topbar badge so the IG icon
   has breathing room and the topbar doesn't crowd. ====== */
@media (max-width: 380px) {
  .topbar__badge { display: none; }
}
@media (max-width: 640px) {
  .splash__core { gap: clamp(20px, 4vh, 36px); }
  .splash__logo { filter: none; } /* the large blur is the most expensive
                                     layer on the splash — drop it on phones */
  .splash__head, .splash__foot { font-size: 9px; gap: 10px; padding: 0; }
  .splash__counter { font-size: 12px; }
  .splash__total { font-size: 11px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .court-scene__bg,
  .court-scene__ball { transform: none !important; }
  .hero__player, .hero__player--2 { transform: none !important; }
  .ball-track, .ball-trail { display: none; }
  .cursor { display: none; }
  /* The ambient pools drift on scroll — hold them still, keep the colour */
  .page-ambient span { transform: none !important; }
}

/* ============================================
   RÜCKWEG ZU PURPLE AI LABS

   Diese Seite läuft als eigenständige Konzeptstudie unter
   /concepts/padelball-club/ und bringt die Navigation der Hauptseite
   bewusst nicht mit — das Padel-Design soll ungestört wirken.
   Der Balken ordnet die Seite ein und führt zurück.

   pb- als Präfix: Das Padel-CSS nutzt viele ungeschützte Utility-Klassen
   (.cursor, .marquee, .eyebrow). Ein eigener Namensraum verhindert, dass
   sich beides in die Quere kommt.

   z-index 10000 liegt über dem Splash (9000) und dem Cursor (9999) —
   die Einordnung als Konzeptstudie soll ab der ersten Sekunde stehen.
   ============================================ */

.pb-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 clamp(12px, 3vw, 28px);
    background: rgba(5, 11, 22, 0.82);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid rgba(244, 242, 236, 0.10);
    font-family: var(--sans);
}

.pb-bar__brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.pb-bar__brand:hover { opacity: 1; }

.pb-bar__brand img {
    height: 13px;
    width: auto;
    display: block;
}

.pb-bar__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(244, 242, 236, 0.62);
    white-space: nowrap;
    transition: color 0.2s ease;
}
.pb-bar__back:hover { color: #F4F2EC; }

/* Das Etikett trägt die Einordnung — deshalb farblich abgesetzt. */
.pb-bar__tag {
    padding: 0.25em 0.6em;
    border: 1px solid rgba(169, 192, 222, 0.38);
    border-radius: 999px;
    color: var(--ice);
    letter-spacing: 0.14em;
}

/* Der Balken schiebt den Seiteninhalt nicht — die Seite ist auf volle
   Bildhöhe komponiert. Nur die fixierte Topbar der Padel-Seite rutscht
   nach, damit sie nicht darunter verschwindet. */
.topbar { top: 36px; }

@media (max-width: 560px) {
    .pb-bar { height: 32px; }
    .pb-bar__back { font-size: 9px; letter-spacing: 0.1em; }
    .pb-bar__tag { display: none; }
    .topbar { top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .pb-bar__brand,
    .pb-bar__back { transition: none; }
}