/* ===========================================================
   Goldszn Training — design system
   Dark, athletic, gold. Mobile-first.
   =========================================================== */

:root {
  /* Surfaces */
  --bg:        #0A0A0C;
  --bg-2:      #0F0F13;
  --surface:   #15151B;
  --surface-2: #1C1C24;
  --line:      rgba(255, 255, 255, 0.09);
  --line-str:  rgba(255, 255, 255, 0.16);

  /* Brand gold — taken from the existing logo */
  --gold-1: #FCD79A;
  --gold-2: #F5AC48;
  --gold-3: #DE8F2A;
  --gold-4: #9C6318;
  --gold-grad: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 100%);
  --gold-glow: rgba(245, 172, 72, 0.24);

  /* Text */
  --text:   #F6F6F8;
  --text-2: #B9B9C4;
  --text-3: #83838F;

  /* Type */
  --font-display: "Archivo", system-ui, -apple-system, sans-serif;
  --font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Space + shape */
  --radius:    14px;
  --radius-lg: 22px;
  --gutter:    20px;
  --hdr-h:     68px;
  --maxw:      1200px;
  --section-y: clamp(68px, 9vw, 130px);

  --shadow:    0 18px 50px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.65);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* The browser hides [hidden] with display:none at user-agent weight, which any
   class rule setting display beats on specificity. Several components here do
   set display, so without this an element toggled with the hidden property
   stays on screen and only looks broken. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }

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

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--bg-2); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold-2); color: #000; padding: 12px 20px; font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- Type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.032em;
  text-transform: uppercase;
}
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 14px;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.028em;
  font-size: clamp(1.7rem, 4vw, 2.85rem);
}
.lede { color: var(--text-2); font-size: clamp(1rem, 1.6vw, 1.12rem); max-width: 60ch; }
.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-head { margin-bottom: clamp(34px, 5vw, 58px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background-color 0.3s var(--ease), border-color 0.3s var(--ease);
  will-change: transform;
  text-align: center;
}
.btn--primary {
  background: var(--gold-grad);
  color: #15100A;
  box-shadow: 0 10px 30px var(--gold-glow);
}
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(245,172,72,0.38); }
.btn--ghost { border: 1px solid var(--line-str); color: var(--text); }
.btn--ghost:hover { border-color: var(--gold-2); color: var(--gold-1); transform: translateY(-3px); }
.btn--block { width: 100%; }
.btn .arr { transition: transform 0.3s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }

/* ---------- Brand lockup ----------
   The supplied artwork carries the wordmark, so no live text sits beside it.
   The brand name is on the img alt instead. */
/* <picture> is the flex child here. Without flex:none it shrinks before the nav
   does, and the lockup silently collapses to a sliver. */
.brand picture { display: block; flex: none; }
.brand__logo { height: 42px; width: auto; object-fit: contain; display: block; flex: none; }
.ftr .brand__logo { height: 54px; }

/* ---------- Brand-highlighted nav item ----------
   Gold pill rather than a solid fill, so it reads as highlighted without
   competing with the solid "Book a call" button beside it. */
.nav a.is-brand {
  color: var(--gold-1);
  background: rgba(245, 172, 72, 0.1);
  border: 1px solid rgba(245, 172, 72, 0.32);
  border-radius: 100px;
  padding: 6px 12px;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
              color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nav a.is-brand::after { display: none; }
.nav a.is-brand:hover {
  background: rgba(245, 172, 72, 0.19);
  border-color: var(--gold-2);
  color: var(--gold-1);
  box-shadow: 0 4px 16px rgba(245, 172, 72, 0.18);
}
.mnav a.is-brand { color: var(--gold-1); }
.mnav a.is-brand::after {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-grad); margin-left: 10px; vertical-align: 2px;
}

/* ---------- Header ---------- */
.hdr {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
              backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck {
  background: rgba(10, 10, 12, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.hdr__in { display: flex; align-items: center; gap: 14px; height: var(--hdr-h); }
.brand { display: flex; align-items: center; gap: 11px; margin-inline-end: auto; flex: none; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__txt { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.04em; line-height: 1; font-size: 1.12rem; }
.brand__txt small { display: block; font-size: 0.6rem; letter-spacing: 0.26em;
  color: var(--text-3); font-weight: 600; margin-top: 3px; }

.nav { display: none; align-items: center; gap: 18px; }
.nav a {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.01em; font-size: 0.8rem; color: var(--text-2); white-space: nowrap;
  position: relative; padding-block: 6px;
  transition: color 0.25s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--gold-grad); transition: width 0.3s var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { width: 100%; }

.hdr__act { display: flex; align-items: center; gap: 12px; }
.lang {
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--line-str); border-radius: 100px; padding: 6px 12px;
  color: var(--text-2); transition: all 0.25s var(--ease); white-space: nowrap;
}
.lang:hover { border-color: var(--gold-2); color: var(--gold-1); }
.hdr .btn { padding: 10px 16px; font-size: 0.82rem; display: none; white-space: nowrap; }

.burger { display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--line-str); border-radius: 11px; }
.burger span { display: block; width: 18px; height: 2px; background: var(--text);
  position: relative; transition: background 0.25s var(--ease); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--text);
  transition: transform 0.3s var(--ease); }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.mnav {
  position: fixed; inset: var(--hdr-h) 0 auto 0; z-index: 99;
  background: rgba(10,10,12,0.97); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding: 22px var(--gutter) 30px;
  display: grid; gap: 4px;
  transform: translateY(-14px); opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.mnav.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mnav a {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.01em; font-size: 1.12rem; padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.mnav .btn { margin-top: 18px; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center;
  padding-block: 120px 70px; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__blob { position: absolute; border-radius: 50%; filter: blur(85px); opacity: 0.5; }
.hero__blob--1 { width: 55vw; height: 55vw; max-width: 680px; max-height: 680px;
  background: radial-gradient(circle, rgba(245,172,72,0.5), transparent 68%);
  top: -14%; right: -12%; animation: drift1 19s ease-in-out infinite; }
.hero__blob--2 { width: 48vw; height: 48vw; max-width: 560px; max-height: 560px;
  background: radial-gradient(circle, rgba(222,143,42,0.4), transparent 68%);
  bottom: -18%; left: -14%; animation: drift2 24s ease-in-out infinite; }
@keyframes drift1 {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(-5%, 7%, 0) scale(1.1); } }
@keyframes drift2 {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(7%, -6%, 0) scale(1.12); } }

/* Structural texture over the hero video, and it has to stay almost invisible.
   The clip is near-black through the middle, which is exactly where the mask is
   strongest, so a heavier line reads as a mesh laid on the footage instead of as
   texture. The mask is lifted and tightened too, so it has faded out before it
   reaches the headline. Don't raise the alpha without checking it against the
   dark frames of the video, not a bright one. */
.hero__grid {
  position: absolute; inset: 0; z-index: -1; opacity: 0.4;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 56% 40% at 50% 28%, #000 10%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 56% 40% at 50% 28%, #000 10%, transparent 100%);
}
.hero__streaks { position: absolute; inset: 0; z-index: -1; opacity: 0.5; pointer-events: none; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line-str); border-radius: 100px;
  padding: 7px 17px; font-size: 0.8rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-2); font-weight: 600;
  background: rgba(255,255,255,0.03); margin-bottom: 26px;
}
.hero__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2);
  box-shadow: 0 0 0 0 var(--gold-glow); animation: pulse 2.4s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,172,72,0.6); }
  70%  { box-shadow: 0 0 0 11px rgba(245,172,72,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,172,72,0); } }

.hero__title { font-size: clamp(2.05rem, 6.6vw, 4.6rem); margin-bottom: 24px; }
.hero__title span { display: block; }
.hero__lede { font-size: clamp(1.03rem, 2vw, 1.26rem); max-width: 54ch; color: var(--text-2);
  margin-bottom: 36px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 13px; }

.scroller {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: 9px;
  font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-3);
}
.scroller__line { width: 1px; height: 42px; background: linear-gradient(to bottom, var(--gold-2), transparent); }

/* ---------- Stats ---------- */
.stats { border-block: 1px solid var(--line); background: var(--bg-2); }
.stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.stat { padding: 30px 18px; text-align: center; border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.stat:nth-child(2n) { border-right: 0; }
.stat:nth-last-child(-n+2) { border-bottom: 0; }
.stat__val { font-family: var(--font-display); font-weight: 900; line-height: 1;
  font-size: clamp(1.75rem, 4.8vw, 2.6rem); margin-bottom: 9px; }
.stat__label { font-size: 0.82rem; color: var(--text-3); line-height: 1.45; }
.stat__sub { display: block; color: var(--gold-3); font-size: 0.76rem; margin-top: 3px; }

/* ---------- Path cards ---------- */
.paths__grid { display: grid; gap: 22px; }
.path {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 32px 26px 28px; overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.path::before {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(520px circle at 50% 0%, rgba(245,172,72,0.13), transparent 62%);
  transition: opacity 0.45s var(--ease);
}
.path:hover { transform: translateY(-7px); border-color: rgba(245,172,72,0.4); box-shadow: var(--shadow-lg); }
.path:hover::before { opacity: 1; }
.path__tag {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-1); background: rgba(245,172,72,0.12);
  border: 1px solid rgba(245,172,72,0.28); border-radius: 100px;
  padding: 5px 13px; margin-bottom: 18px;
}
.path__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.45rem, 3.6vw, 1.95rem); line-height: 1.02; letter-spacing: -0.025em; }
.path__sub { color: var(--gold-3); font-size: 0.88rem; font-weight: 600; margin-top: 7px;
  margin-bottom: 15px; }
.path__body { color: var(--text-2); font-size: 0.98rem; margin-bottom: 22px; }
.path__list { display: grid; gap: 11px; margin-bottom: 28px; }
.path__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.93rem;
  color: var(--text-2); }
.path__list svg { flex: none; margin-top: 3px; color: var(--gold-2); }
.path__num {
  position: absolute; top: 14px; right: 20px;
  font-family: var(--font-display); font-weight: 900; font-size: 5.5rem; line-height: 1;
  color: rgba(255,255,255,0.028); pointer-events: none; user-select: none;
}

/* ---------- Method pillars ---------- */
.pillars { display: grid; gap: 16px; }
.pillar {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.pillar:hover { transform: translateY(-5px); border-color: rgba(245,172,72,0.34); background: var(--surface-2); }
.pillar__ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(245,172,72,0.1); border: 1px solid rgba(245,172,72,0.22);
  color: var(--gold-1); margin-bottom: 17px;
}
.pillar h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.005em; font-size: 1.12rem; margin-bottom: 8px; }
.pillar p { color: var(--text-2); font-size: 0.93rem; }

/* ---------- Comparison ---------- */
.cmp { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface); }
.cmp__head { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.cmp__head > div { padding: 18px 16px; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.88rem; text-align: center; }
.cmp__head .is-us { background: rgba(245,172,72,0.1); color: var(--gold-1);
  border-right: 1px solid var(--line); }
.cmp__head .is-them { color: var(--text-3); }
.cmp__row { border-bottom: 1px solid var(--line); }
.cmp__row:last-child { border-bottom: 0; }
.cmp__rowlabel { padding: 15px 16px 7px; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.76rem; color: var(--text-3);
  text-align: center; background: rgba(255,255,255,0.016); }
.cmp__cells { display: grid; grid-template-columns: 1fr 1fr; }
.cmp__cell { padding: 13px 16px 19px; font-size: 0.9rem; display: flex; gap: 9px;
  align-items: flex-start; justify-content: center; text-align: center; }
.cmp__cell.is-us { background: rgba(245,172,72,0.05); border-right: 1px solid var(--line);
  color: var(--text); }
.cmp__cell.is-them { color: var(--text-3); }
.cmp__cell svg { flex: none; margin-top: 3px; }
.cmp__cell.is-us svg { color: var(--gold-2); }
.cmp__cell.is-them svg { color: #5A5A66; }

/* ---------- Wall of Fame ---------- */
.wall { display: grid; gap: 14px; }
.wall__card {
  position: relative; overflow: hidden; padding: 22px;
  border: 1px solid var(--line); border-radius: var(--radius); background:
    linear-gradient(145deg, rgba(245,172,72,0.1), transparent 58%), var(--surface);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.wall__card:hover { border-color: rgba(245,172,72,0.42); transform: translateY(-2px); }
.wall__sport { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-2); margin-bottom: 12px; }
.wall__sep { margin-inline: 6px; opacity: 0.55; }
.wall__name { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  line-height: 1.06; font-size: clamp(1.1rem, 2.6vw, 1.42rem); margin-bottom: 6px; }
.wall__dest { color: var(--text-2); font-size: 0.95rem; line-height: 1.4; }
.wall__note { display: inline-block; margin-top: 14px; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-2);
  border: 1px solid rgba(245,172,72,0.28); border-radius: 100px; padding: 4px 10px; }

/* The open slot. Dashed and unlit on purpose: it has to read as a space waiting
   to be filled rather than as another plaque, so it gets no gold and no hover
   lift — there is nothing there to click yet. */
.wall__card--next { margin-top: 0; background: none; border-style: dashed;
  border-color: rgba(255,255,255,0.13); display: grid; align-content: center; }
.wall__card--next:hover { transform: none; border-color: rgba(255,255,255,0.13); }
.wall__next { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  line-height: 1.06; font-size: clamp(1.1rem, 2.6vw, 1.42rem); color: var(--text-3);
  margin-bottom: 9px; }
.wall__soon { color: var(--text-3); font-size: 0.9rem; line-height: 1.5; max-width: 54ch; }
@media (min-width: 560px) { .wall { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .wall { grid-template-columns: repeat(3, 1fr); } }
/* Past three dozen plaques a three-column wall runs to twelve rows. A fourth
   column pulls it back without shrinking a name below one line. */
@media (min-width: 1240px) { .wall { grid-template-columns: repeat(4, 1fr); } }

/* The two CFL draft picks. They sit above the wall at their own size because
   they are the strongest proof the business owns, and a pro contract loses its
   force when it is the third plaque in row four. */
.wall__pros { display: grid; gap: 14px; margin-bottom: 14px; }
.wall__hero {
  position: relative; overflow: hidden; padding: 26px 24px;
  border: 1px solid rgba(245,172,72,0.3); border-radius: var(--radius); background:
    linear-gradient(145deg, rgba(245,172,72,0.17), transparent 62%), var(--surface);
}
/* A gold edge, so the pro cards read as a tier rather than as bigger plaques. */
.wall__hero::before { content: ""; position: absolute; inset-block: 0;
  inset-inline-start: 0; width: 3px; background: var(--gold-grad); }
.wall__heroname { font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; line-height: 1.04; margin-bottom: 7px;
  font-size: clamp(1.45rem, 3.4vw, 2rem); }
.wall__herodest { font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.01em; font-size: 1rem;
  color: var(--text-1); margin-bottom: 10px; }
.wall__herobody { color: var(--text-2); font-size: 0.93rem; line-height: 1.55;
  max-width: 52ch; }
@media (min-width: 760px) { .wall__pros { grid-template-columns: repeat(2, 1fr); } }

.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px;
  padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); }
.rating__stars { display: flex; gap: 3px; color: var(--gold-2); }
.rating__txt strong { display: block; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.01em; font-size: 0.95rem; }
.rating__txt span { font-size: 0.84rem; color: var(--text-3); }

/* ---------- Pricing ---------- */
.price__grid { display: grid; gap: 22px; }
.price {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 26px; display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.price:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.price.is-featured { border-color: rgba(245,172,72,0.45);
  background: linear-gradient(170deg, rgba(245,172,72,0.085), transparent 48%), var(--surface); }
.price__flag {
  position: absolute; top: -1px; right: 22px;
  background: var(--gold-grad); color: #15100A;
  font-family: var(--font-display); font-weight: 900; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 13px;
  border-radius: 0 0 9px 9px;
}
.price__name { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 1.32rem; line-height: 1.12; letter-spacing: -0.02em; }
.price__aud { color: var(--text-3); font-size: 0.85rem; margin-top: 5px; margin-bottom: 20px; }
.price__amt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price__amt b { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem,5vw,2.4rem);
  line-height: 1; }
.price__amt span { color: var(--text-2); font-size: 0.95rem; }
.price__note { color: var(--text-3); font-size: 0.8rem; margin-top: 7px;
  padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.price__feat { display: grid; gap: 12px; margin-bottom: 28px; }
.price__feat li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.92rem;
  color: var(--text-2); }
.price__feat svg { flex: none; margin-top: 3px; color: var(--gold-2); }
.price .btn { margin-top: auto; }

/* ---------- Location ---------- */
.loc__grid { display: grid; gap: 26px; }
.loc__card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 22px; }
.loc__addr { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.15rem, 3vw, 1.5rem); line-height: 1.15; margin-bottom: 7px; }
.loc__addr2 { color: var(--text-2); margin-bottom: 22px; }
.loc__meta { display: grid; gap: 16px; margin-bottom: 24px; }
.loc__item { display: flex; gap: 13px; align-items: flex-start; }
.loc__item svg { flex: none; margin-top: 2px; color: var(--gold-2); }
.loc__item dt { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.73rem; color: var(--text-3); margin-bottom: 2px; }
.loc__item dd { margin: 0; font-size: 0.97rem; }
.loc__item dd small { display: block; color: var(--text-3); font-size: 0.8rem; margin-top: 3px; }
.ph-note { color: var(--gold-3); font-size: 0.74rem; font-style: italic; }

.dirs { display: grid; gap: 13px; }
.dir { display: flex; gap: 14px; padding: 16px 17px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease); }
.dir:hover { border-color: rgba(245,172,72,0.3); transform: translateX(4px); }
.dir__ico { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid;
  place-items: center; background: rgba(245,172,72,0.1); color: var(--gold-1); }
.dir h4 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.01em; font-size: 0.96rem; margin-bottom: 3px; }
.dir p { color: var(--text-2); font-size: 0.88rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 11px; max-width: 850px; }
.qa { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  overflow: hidden; transition: border-color 0.35s var(--ease); }
.qa[open] { border-color: rgba(245,172,72,0.32); }
.qa__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 21px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: clamp(0.96rem, 2vw, 1.08rem); line-height: 1.3;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__ico { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid;
  place-items: center; border: 1px solid var(--line-str); color: var(--gold-2);
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease); }
.qa[open] .qa__ico { transform: rotate(45deg); background: rgba(245,172,72,0.14); }
.qa__a { padding: 0 21px 21px; color: var(--text-2); font-size: 0.95rem; max-width: 72ch; }

/* ---------- Final CTA ---------- */
.final { position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.final::before {
  content: ""; position: absolute; width: 760px; height: 760px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,172,72,0.17), transparent 68%);
  top: 50%; left: 50%; transform: translate(-50%,-50%); filter: blur(55px); pointer-events: none;
}
.final__in { position: relative; }
.final__title { font-size: clamp(1.8rem, 5vw, 3.2rem); margin-bottom: 18px; }
.final__lede { margin: 0 auto 34px; text-align: center; }
.final__cta { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; }

/* ---------- Footer ---------- */
.ftr { border-top: 1px solid var(--line); background: var(--bg-2); padding-block: 52px 28px; }
.ftr__grid { display: grid; gap: 34px; margin-bottom: 38px; }
.ftr__tag { color: var(--text-2); font-size: 0.93rem; max-width: 34ch; margin-top: 15px; }
.ftr h5 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.78rem; color: var(--text-3); margin-bottom: 15px; }
.ftr li { margin-bottom: 10px; }
.ftr li a { color: var(--text-2); font-size: 0.93rem; transition: color 0.25s var(--ease); }
.ftr li a:hover { color: var(--gold-1); }
.social { display: flex; gap: 10px; margin-top: 17px; }
.social a { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line-str);
  display: grid; place-items: center; color: var(--text-2);
  transition: all 0.28s var(--ease); }
.social a:hover { border-color: var(--gold-2); color: var(--gold-1); transform: translateY(-3px); }
.ftr__btm { border-top: 1px solid var(--line); padding-top: 24px; display: grid; gap: 7px;
  font-size: 0.8rem; color: var(--text-3); }


/* ---------- Goldszn MTL ---------- */
.mtl__body .path__list { margin-bottom: 26px; }
.mtl__body { max-width: 64ch; margin-bottom: 36px; }
.mtl__note { margin-top: 18px; color: var(--text-3); font-size: 0.86rem; max-width: 46ch; }
@media (min-width: 900px) {
}

/* ---------- Photo gallery ---------- */
.gallery { display: grid; gap: 14px; }
.shot { margin: 0; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); }
.shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform 0.7s var(--ease); }
.shot:hover img { transform: scale(1.045); }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* ---------- Wall of Fame row: plaques + proof clip ---------- */
.wall__row { display: grid; gap: 24px; }
.proofvid { position: relative; margin: 0; background: #000; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.proofvid__v { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
.proofvid__cap { position: absolute; inset-inline: 0; bottom: 0; padding: 20px 22px;
  display: grid; gap: 3px;
  background: linear-gradient(to top, rgba(10,10,12,0.93), rgba(10,10,12,0) 100%); }
.proofvid__cap strong { font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.005em; font-size: 1.08rem; line-height: 1.15; }
.proofvid__cap span { font-size: 0.74rem; color: var(--gold-2); letter-spacing: 0.14em;
  text-transform: uppercase; }
@media (min-width: 900px) {
  .wall__row { grid-template-columns: 1.2fr 0.8fr; gap: 34px; align-items: start; }
}

/* ---------- Secondary page hero ---------- */
.phero { position: relative; padding-block: clamp(120px, 15vw, 190px) clamp(40px, 6vw, 70px);
  overflow: hidden; isolation: isolate; }
.phero__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(245,172,72,0.16), transparent 62%); }
.phero__title { font-size: clamp(1.95rem, 5.2vw, 3.6rem); margin-bottom: 20px; }
.phero__lede { font-size: clamp(1.02rem, 2vw, 1.22rem); }

/* ---------- Legal pages ---------- */
.legal__org { color: var(--text-2); font-size: 1.02rem; margin-top: 14px; }
.legal__date { color: var(--text-3); font-size: 0.88rem; margin-top: 6px; }
.legal { max-width: 74ch; }
.legal p { color: var(--text-2); font-size: 0.99rem; line-height: 1.75; margin-bottom: 1.05em; }
.legal__h {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.005em; line-height: 1.1; font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  margin: 2.2em 0 0.7em; padding-top: 1.1em; border-top: 1px solid var(--line);
}
.legal__h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__sh {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.86rem; color: var(--gold-2);
  margin: 1.8em 0 0.6em;
}
.legal__ul { display: grid; gap: 9px; margin: 0 0 1.3em; }
.legal__ul li {
  position: relative; padding-left: 20px; color: var(--text-2);
  font-size: 0.97rem; line-height: 1.7;
}
.legal__ul li::before {
  content: ""; position: absolute; left: 2px; top: 0.72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold-3);
}
.legal a { color: var(--gold-1); text-decoration: underline; text-underline-offset: 3px; }
.legal__contact {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 22px 24px; margin: 1.4em 0 1.6em;
}
.legal__contact-org { color: var(--text) !important; font-weight: 600; margin-bottom: 14px !important; }
.legal__contact dl { display: grid; gap: 11px; margin: 0; }
.legal__contact dt {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.7rem; color: var(--text-3); margin-bottom: 2px;
}
.legal__contact dd { margin: 0; font-size: 0.97rem; }
.legal__other { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.legal__other a {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--gold-1);
  transition: gap 0.3s var(--ease);
}
.legal__other a:hover { gap: 15px; }

/* ---------- Long-form prose ---------- */
.prose { max-width: 68ch; }
.prose p { color: var(--text-2); font-size: clamp(1rem, 1.7vw, 1.1rem); margin-bottom: 1.1em; }
.prose p:last-child { margin-bottom: 0; }
.prose p:first-child { color: var(--text); font-size: clamp(1.08rem, 2vw, 1.25rem); }

/* ---------- Checkable proof links ---------- */
.stat__link { display: block; transition: color 0.25s var(--ease); }
.stat__link .stat__sub { text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(222,143,42,0.4); transition: text-decoration-color 0.25s var(--ease); }
.stat__link:hover .stat__sub { text-decoration-color: var(--gold-2); }
a.rating { transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); }
a.rating:hover { border-color: rgba(245,172,72,0.45); transform: translateY(-2px); }
.rating__go { margin-inline-start: auto; color: var(--gold-2); display: flex; }

/* ---------- Hero video ---------- */
img.brand__mark { object-fit: contain; }

.hero__vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero__vid.is-live { opacity: 0.5; }
.hero__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(10,10,12,0.94) 0%, rgba(10,10,12,0.8) 40%, rgba(10,10,12,0.46) 100%),
    linear-gradient(to top, rgba(10,10,12,0.96) 0%, rgba(10,10,12,0) 40%);
}

/* ---------- Film ---------- */
.film {
  position: relative; max-width: 400px; margin-inline: auto;
  aspect-ratio: 9 / 16; background: #000;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-lg);
}
.film__vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.film__cover {
  position: absolute; inset: 0; width: 100%;
  display: grid; place-content: center; justify-items: center; gap: 15px;
  background: linear-gradient(to top, rgba(10,10,12,0.78), rgba(10,10,12,0.12) 58%);
  transition: opacity 0.45s var(--ease);
}
.film__cover.is-gone { opacity: 0; pointer-events: none; }
.film__btn {
  width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
  padding-left: 5px; background: var(--gold-grad); color: #15100A;
  box-shadow: 0 12px 36px var(--gold-glow);
  transition: transform 0.35s var(--ease);
}
.film__cover:hover .film__btn, .film__cover:focus-visible .film__btn { transform: scale(1.09); }
.film__label {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: 1.02rem;
}
.film__meta {
  font-size: 0.74rem; color: var(--text-2); letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- Anchor offset ----------
   The header is fixed, so an anchor target would otherwise sit underneath it. */
#top, #athletes, #adults, #method, #results, #programs, #location, #mtl, #community, #film {
  scroll-margin-top: calc(var(--hdr-h) + 18px);
}

/* ---------- Reveal animation ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.09s; }
.rv-d2 { transition-delay: 0.18s; }
.rv-d3 { transition-delay: 0.27s; }
.rv-d4 { transition-delay: 0.36s; }

/* ---------- Breakpoints ---------- */
@media (min-width: 620px) {
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
  .stat { border-bottom: 0; }
  .stat:nth-child(2n) { border-right: 1px solid var(--line); }
  .stat:last-child { border-right: 0; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .ftr__grid { grid-template-columns: repeat(2, 1fr); }
  .ftr__btm { grid-template-columns: 1fr auto; align-items: center; }
}
@media (min-width: 900px) {
  :root { --gutter: 28px; --hdr-h: 78px; }
  .brand__logo { height: 48px; }
  .ftr .brand__logo { height: 64px; }
  .scroller { display: flex; }
  .paths__grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .pillars { grid-template-columns: repeat(4, 1fr); }
  .price__grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .loc__grid { grid-template-columns: 1.05fr 1fr; gap: 34px; align-items: start; }
  .ftr__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .cmp__rowlabel { text-align: left; }
  .cmp__cell { justify-content: flex-start; text-align: left; }
  .path { padding: 38px 34px 34px; }
  .result { padding: 52px 46px; }
}
@media (min-width: 1180px) {
  /* The desktop nav needs more room than it used to: "Mur de la renommee" is
     twice the width of the "Resultats" it replaced, and at 1100px it cleared
     the Book-a-call button by 14px, close enough that a wider fallback font
     during font load could collide or wrap the header. Below this width the
     burger menu carries the same links. */
  .nav { display: flex; }
}
@media (min-width: 1100px) {
  .hero__title { font-size: clamp(3rem, 4.6vw, 4.6rem); }
  .burger { display: none; }
}

/* The header "Book a call" only appears once there is genuinely room for it.
   Archivo is wide and the French labels are long; below this the hero's two
   CTAs carry the same job, so the nav keeps the space instead. */
@media (min-width: 1520px) {
  .hdr .btn { display: inline-flex; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv { opacity: 1; transform: none; }
}

@media print {
  .hdr, .mnav, .scroller, .final { display: none; }
  body { background: #fff; color: #000; }
}

/* ---- Testimonials ----
   Real Google reviews, placed immediately after the price block because that
   is where the doubt is. Three columns on desktop, one on a phone; the quote
   mark is decorative and deliberately low-contrast so it never competes with
   the words themselves. */
.quotes {
  display: grid; gap: 18px; margin-top: 36px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  position: relative; margin: 0; padding: 26px 24px 22px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 16px;
}
.quote::before {
  content: "\201C"; position: absolute; top: 2px; left: 16px;
  font-family: var(--font-display); font-weight: 800; font-size: 3.4rem;
  line-height: 1; color: var(--gold-2); opacity: 0.18; pointer-events: none;
}
.quote__text {
  margin: 0; position: relative; font-size: 0.97rem; line-height: 1.62;
  color: var(--text-2);
}
.quote__by {
  display: grid; gap: 1px; margin-top: auto;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.quote__by strong {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.005em; font-size: 0.9rem; color: var(--text);
}
.quote__by span { font-size: 0.82rem; color: var(--text-3); }

.quotes__note {
  margin-top: 22px; font-size: 0.88rem; color: var(--text-3);
}
.quotes__note a { color: var(--gold-2); text-decoration: underline;
  text-underline-offset: 3px; }

/* ---- Identification line ----
   Sits above the two-path heading so the reader recognises their own
   situation before being asked to choose anything. */
.identify {
  max-width: 46ch; margin: 0 0 14px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.45;
  color: var(--gold-1);
}

/* ---- Risk reversal under the closing ask ---- */
.final__reassure {
  max-width: 54ch; margin: 14px auto 0;
  font-size: 0.9rem; line-height: 1.6; color: var(--text-3);
}

/* ---------- Wall of Fame: dispersal map ---------- */
/* The landmass is one <path> of zero-length segments; a round linecap paints
   each as a dot, so four thousand dots cost a single node and gzip to under a
   kilobyte. Everything is drawn in the grid units mkmap.py emitted, so the SVG
   scales to any width without re-projecting. */
.gmap { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: radial-gradient(ellipse 70% 90% at 32% 42%, rgba(245,172,72,0.07), transparent 70%),
    var(--surface); padding: 18px 16px 0; overflow: hidden; }
.gmap__svg { display: block; width: 100%; height: auto; }
/* The land deliberately scales with the zoom: a halftone that keeps a constant
   dot size just spreads into sparse specks when magnified. */
.gmap__land { fill: none; stroke: rgba(255,255,255,0.17);
  stroke-width: calc(0.52 * var(--u, 1));
  stroke-linecap: round; }
.gmap__arc { fill: none; stroke: var(--gold-2); opacity: 0.5;
  stroke-width: calc(0.3 * var(--u, 1) / var(--z, 1));
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.gmap.is-in .gmap__arc { animation: gmapdraw 1.1s var(--ease) forwards;
  animation-delay: calc(var(--i) * 26ms + 150ms); }
@keyframes gmapdraw { to { stroke-dashoffset: 0; } }
.gmap__pin { opacity: 0; }
.gmap.is-in .gmap__pin { animation: gmappin 0.5s var(--ease) forwards;
  animation-delay: calc(var(--i) * 26ms + 900ms); }
@keyframes gmappin { from { opacity: 0; } to { opacity: 1; } }
.gmap__dot { fill: var(--gold-1); stroke: rgba(10,10,12,0.75);
  stroke-width: calc(0.3 * var(--u, 1) / var(--z, 1));
  transition: opacity 0.3s var(--ease); }
/* Filtered out: still on the map, just not lit. Removing them would make the
   map jump around while someone is typing. */
.gmap__pin.is-off .gmap__dot { opacity: 0.16; }
.gmap__origin { fill: #fff; }
.gmap__pulse { fill: none; stroke: var(--gold-2); opacity: 0;
  stroke-width: calc(0.45 * var(--u, 1) / var(--z, 1)); }
.gmap.is-in .gmap__pulse { animation: gmappulse 2.6s var(--ease) infinite; }
@keyframes gmappulse {
  0% { opacity: 0.8; transform-box: fill-box; transform-origin: center; transform: scale(0.35); }
  70%, 100% { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(1.8); }
}
.gmap__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 14px 6px 16px; font-size: 0.8rem; color: var(--text-2); }
.gmap__key { width: 9px; height: 9px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px rgba(245,172,72,0.25); flex: none; }
.gmap__note { color: var(--text-3); }
@media (min-width: 760px) { .gmap { padding: 24px 24px 0; } }

/* ---------- Wall of Fame: search and filters ---------- */
.wfilter { margin: 26px 0 20px; padding: 20px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); display: grid; gap: 18px; }
.wfilter__lab { display: block; font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 9px; }
.wfilter__in { width: 100%; padding: 13px 16px; border-radius: 100px;
  border: 1px solid var(--line-str); background: var(--bg, #0A0A0C); color: var(--text);
  font: inherit; font-size: 0.97rem; transition: border-color 0.3s var(--ease); }
.wfilter__in::placeholder { color: var(--text-3); }
.wfilter__in:focus { outline: none; border-color: var(--gold-2); }
.wfilter__sets { display: grid; gap: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; font-size: 0.78rem; letter-spacing: 0.04em; cursor: pointer;
  padding: 7px 14px; border-radius: 100px; border: 1px solid var(--line-str);
  background: transparent; color: var(--text-2);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease),
              background-color 0.25s var(--ease); }
.chip:hover { border-color: rgba(245,172,72,0.45); color: var(--text); }
.chip.is-on { background: rgba(245,172,72,0.13); border-color: rgba(245,172,72,0.5);
  color: var(--gold-1); }
.wfilter__count { font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.9rem;
  color: var(--text-2); }
.wall__empty { display: grid; gap: 7px; justify-items: center; text-align: center;
  padding: 54px 20px; color: var(--text-3); }
.wall__empty strong { font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; font-size: 1.2rem; color: var(--text); }
@media (min-width: 720px) {
  .wfilter { padding: 24px; }
  .wfilter__sets { grid-template-columns: 1fr auto; align-items: start; gap: 26px; }
}

/* ---------- Homepage: link through to the full wall ---------- */
.wall__all { margin-top: 20px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  /* The map's entrance is an animation, so without it the arcs would stay
     undrawn and the pins invisible. Land them in their finished state. */
  .gmap__arc { stroke-dashoffset: 0; }
  .gmap__pin { opacity: 1; }
  .gmap__pulse { display: none; }
}
.wfilter__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.wfilter__clear { font: inherit; font-size: 0.78rem; cursor: pointer; padding: 0;
  border: 0; background: none; color: var(--gold-2); text-decoration: underline;
  text-underline-offset: 3px; }
.wfilter__clear:hover { color: var(--gold-1); }

/* ---------- Wall of Fame map: zoom and tooltip ---------- */
.gmap { position: relative; }
/* pan-y so a one-finger swipe still scrolls the page -- the map sits in a long
   page and swallowing vertical touch would trap the reader. Horizontal drag
   and two-finger pinch still reach the script. */
.gmap__svg { touch-action: pan-y; cursor: grab; }
.gmap__svg.is-panning { cursor: grabbing; }
.gmap__pin { cursor: pointer; }
.gmap__hit { fill: transparent; stroke: none; }
.gmap__zoom { position: absolute; top: 14px; inset-inline-end: 14px; display: grid;
  gap: 6px; justify-items: end; }
.gmap__btn { width: 32px; height: 32px; display: grid; place-items: center;
  font: inherit; font-size: 1.05rem; line-height: 1; cursor: pointer;
  border: 1px solid var(--line-str); border-radius: 9px; color: var(--text);
  background: rgba(10,10,12,0.72); backdrop-filter: blur(6px);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease); }
.gmap__btn:hover { border-color: rgba(245,172,72,0.5); color: var(--gold-1); }
.gmap__btn--reset { width: auto; padding: 0 11px; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; }
/* Follows the pointer, so it is positioned from script and never wraps. */
.gmap__tip { position: absolute; z-index: 2; pointer-events: none;
  display: grid; gap: 2px; max-width: 240px; padding: 9px 12px;
  border: 1px solid rgba(245,172,72,0.32); border-radius: 10px;
  background: rgba(10,10,12,0.93); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); transform: translate(-50%, -100%); }
.gmap__tip strong { font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.01em; font-size: 0.86rem;
  line-height: 1.2; }
.gmap__tip span { font-size: 0.78rem; color: var(--text-2); }
.gmap__tip span[data-tip-n] { color: var(--gold-2); letter-spacing: 0.06em;
  text-transform: uppercase; font-size: 0.68rem; }
.gmap__hint { position: absolute; inset-inline: 0; bottom: 64px; margin: 0 auto;
  width: max-content; max-width: 86%; padding: 9px 15px; border-radius: 100px;
  background: rgba(10,10,12,0.9); border: 1px solid var(--line-str);
  color: var(--text-2); font-size: 0.8rem; text-align: center; }
@media (max-width: 759px) { .gmap__hint { bottom: 86px; } }

/* ---------- Goldszn MTL: the film pair ---------- */
/* Two 9:16 clips sit side by side, so the column they live in is widened and
   each player drops below its 400px cap rather than stacking into a 1400px
   tower beside a short block of copy. */
.mtl__films { display: grid; gap: 18px; justify-content: center; }
.mtl__film { margin: 0; display: grid; gap: 11px; }
.mtl__cap { text-align: center; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3); }
/* Two up on a phone-and-a-half, three across once there is room for three
   400px players side by side. */
@media (min-width: 620px) { .mtl__films { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .mtl__films { grid-template-columns: repeat(3, 1fr); } }

/* A lone card in a grid built for two would sit in the left half with a hole
   beside it. These centre it and hold it to a readable width. */
@media (min-width: 760px) {
  .paths__grid--solo, .price__grid--solo {
    grid-template-columns: minmax(0, 560px); justify-content: center;
  }
}

/* ---------- Price tiers ---------- */
.price__tiers { margin: 16px 0 4px; padding: 14px 0; border-block: 1px solid var(--line); }
.price__tierslab { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px; }
.price__tiers ul { display: grid; gap: 7px; }
.price__tiers li { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 4px 14px; font-size: 0.92rem;
  color: var(--text-2); }
/* The price must never break: "175 $" splitting the number from the sign across
   two lines is how the French card failed at phone width. */
.price__tiers li > b { white-space: nowrap; flex: none; }
.price__tiers li > span { display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 8px; }
.price__tiers b { font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; color: var(--text); }
/* The better per-session rate, marked in brand gold. The badge sits with the
   frequency rather than the price so the row still reads left to right as
   "what you get, then what it costs". */
.price__tiers li.is-best { color: var(--text); }
.price__tiers li.is-best b { color: var(--gold-1); }
/* A commitment term is a condition of the price, not part of it, so it drops
   to its own line rather than crowding the frequency or the figure. */
.price__term { flex: 0 0 100%; font-size: 0.72rem; color: var(--text-3); }
.price__tiersnote { margin-top: 16px; font-size: 0.72rem; color: var(--text-3); }
.price__best { font-style: normal; font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-2); white-space: nowrap;
  border: 1px solid rgba(245,172,72,0.32); border-radius: 100px;
  padding: 3px 8px; }

/* ---------- Goldszn MTL: divisions ---------- */
.teams { margin: 26px 0; padding: 20px 0; border-block: 1px solid var(--line); }
.teams__lab { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-2); margin-bottom: 14px; }
.teams__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 10px; }
.teams__row:last-child { margin-bottom: 0; }
.teams__grp { min-width: 68px; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem;
  color: var(--text-2); }
.teams__ages { display: flex; flex-wrap: wrap; gap: 7px; }
.teams__ages li { font-size: 0.76rem; letter-spacing: 0.06em; padding: 4px 11px;
  border: 1px solid var(--line-str); border-radius: 100px; color: var(--text); }