/* ============================================================
   MATICO FOOTBALL — Shared Stylesheet
   Extracted from Body Coach index.html + extended for multi-page
   ============================================================ */

/* Brand wordmark, Baradig (subset to "MATICO FOOTBALL" glyphs only) */
@font-face {
  font-family: "Baradig";
  src: url("/assets/fonts/Baradig-Bold-Wordmark.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.nav-logo.nav-logo--baradig {
  font-family: "Baradig", "Inter", -apple-system, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav-logo.nav-logo--baradig .nav-logo-text-before,
.nav-logo.nav-logo--baradig .nav-logo-text-after {
  display: inline-block;
  line-height: 1;
}

:root {
  --blue: #0a2fff;
  --dark-blue: #0825cc;
  --navy: #2f4b73;
  --light-bg: #f5f0ea;
  --yellow: #c8e635;
  --green: #2dd881;
  --orange: #ff6b35;
  --pink: #ff8fab;
  --salmon: #ffb5a7;
  --white: #ffffff;
  --text-dark: #1a1a2e;
  --border-light: rgba(47, 75, 115, 0.15);
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 50px;
  --transition-fast: 0.2s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--navy);
  font-size: 1rem;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background: #0a0e1a; /* Gate 6C: kills the black/white band between final CTA and footer-pre */
}
main { background: var(--white); } /* keep page interior white-by-default; sections set their own colors over this */

a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ==================== TOP STRIP ==================== */
/* Wrap top-strip + navbar so they stick to the top together when scrolling.
   z-index hierarchy: site-header > nav-mega (200), so dropdowns sit BELOW the
   sticky header and can never visually overlap the top ribbon when scrolled. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 400;
}
/* Within the sticky header, the top strip sits above the navbar so any dropdown
   that opens inside the navbar (z-index 200, scoped to navbar's stacking
   context) cannot leak into the top ribbon area. */
.site-header .top-strip { position: relative; z-index: 3; }
.site-header .navbar    { position: relative; z-index: 2; top: auto; }

.top-strip {
  background: var(--navy);
  padding: 0.45rem 0;
  font-size: 0.78rem;
  color: var(--white);
}
/* Social icons in the top strip (matches footer-socials style, smaller).
   Pin #23/#42 — links Matico Football accounts in the top ribbon. */
.top-strip-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.top-strip-socials {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.top-strip-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease, transform 0.2s ease;
  padding: 0.15rem;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1;
}
.top-strip-social:hover {
  color: #fff;
  transform: translateY(-1px);
}
.top-strip-social svg {
  width: 16px;
  height: 16px;
  display: block;
}
@media (max-width: 700px) {
  .top-strip-socials { gap: 0.2rem; }
  .top-strip-social svg { width: 14px; height: 14px; }
}
.top-strip .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top-strip a {
  color: var(--white);
  opacity: 0.85;
  transition: opacity var(--transition-fast);
  font-weight: 500;
}
.top-strip a:hover { opacity: 1; }
.top-strip-left { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.top-strip-left a {
  display: inline-block;
  padding: 0.3rem 0.95rem;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(200,230,53,0.22) 0%, rgba(10,47,255,0.12) 60%, rgba(255,255,255,0) 100%);
  border: 1px solid rgba(200,230,53,0.35);
  opacity: 1;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.top-strip-left a:hover {
  background: radial-gradient(circle at center, rgba(200,230,53,0.45) 0%, rgba(10,47,255,0.22) 60%, rgba(255,255,255,0) 100%);
  border-color: rgba(200,230,53,0.7);
  box-shadow: 0 0 14px rgba(200,230,53,0.45), 0 0 28px rgba(200,230,53,0.22);
  transform: translateY(-1px);
}
.top-strip-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.top-strip-divider { opacity: 0.35; }

/* ==================== NAVBAR ==================== */
.navbar {
  background: var(--blue);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  width: 48px;
  height: 48px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.45rem;
  color: var(--blue);
  text-align: center;
  line-height: 1.1;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
}
.nav-item { position: relative; }
.nav-link {
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  padding: 0.25rem 0;
}
.nav-link:hover { opacity: 0.8; }

/* Nav active indicator */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--yellow);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform var(--transition-fast);
}
body[data-page="home"] .nav-link[data-nav="home"]::after,
body[data-page="football-camps"] .nav-link[data-nav="football-camps"]::after,
body[data-page="residential-camps"] .nav-link[data-nav="football-camps"]::after,
body[data-page="holiday-fun-days"] .nav-link[data-nav="football-camps"]::after,
body[data-page="athletes-club"] .nav-link[data-nav="athletes-club"]::after,
body[data-page="what-we-do"] .nav-link[data-nav="what-we-do"]::after,
body[data-page="about"] .nav-link[data-nav="about"]::after,
body[data-page="faqs"] .nav-link[data-nav="faqs"]::after,
body[data-page="journal"] .nav-link[data-nav="journal"]::after,
body[data-page="enquire"] .nav-link[data-nav="enquire"]::after {
  transform: scaleX(1);
}

/* Nav dropdown */
.has-dropdown { position: relative; }
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  padding: 0.5rem 0;
  margin-top: 0.75rem;
  list-style: none;
  z-index: 101;
}
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--white);
}
.nav-dropdown li a {
  display: block;
  padding: 0.6rem 1.25rem;
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.nav-dropdown li a:hover {
  background: var(--light-bg);
  opacity: 1;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown.open .nav-dropdown {
  display: block;
}

/* Hamburger (mobile) */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  flex-direction: column;
  gap: 5px;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ==================== BUTTONS ==================== */
.btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: none;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.btn:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-white { background: var(--white); color: var(--blue); }
.btn-yellow { background: var(--yellow); color: var(--navy); }
.btn-blue { background: var(--blue); color: var(--white); }
.btn-outline {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: 2px solid var(--navy);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy);
  transition: all var(--transition-fast);
}
.btn-outline:hover {
  background: var(--navy);
  color: var(--white);
}
.btn-outline-white {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: 2px solid var(--white);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white);
  transition: all var(--transition-fast);
}
.btn-outline-white:hover {
  background: var(--white);
  color: var(--blue);
}

/* ==================== PROMO BANNER ==================== */
.promo-banner {
  background: var(--yellow);
  padding: 0.6rem 0;
}
.promo-banner .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.promo-banner p { font-weight: 700; font-size: 0.9rem; }
.promo-banner span { font-weight: 400; font-size: 0.8rem; display: block; }
.signup-link {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==================== HERO ==================== */
.hero {
  background: var(--blue);
  padding: 6rem 0 8rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(100,140,180,0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 40%, rgba(160,140,120,0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(80,100,140,0.15) 0%, transparent 50%);
  opacity: 0.8;
}
.hero h1 {
  /* Wider container + explicit break (.hero-h1-break in markup) + small font
     reduction so the headline reads 5-and-5 words on desktop, ~4 per line on
     tablet, natural multi-line wrap on mobile (per pin feedback). */
  font-size: 2.9rem;
  font-weight: 900;
  color: var(--white);
  text-transform: uppercase;
  line-height: 1.1;
  max-width: 1200px;
  text-wrap: balance;
  margin: 0 auto 1.5rem;
  position: relative;
  z-index: 2;
}
/* Allow the homepage hero text block to expand past its default 800px clamp
   so the new headline width can breathe (the heading itself is still bounded
   by its own max-width above). */
.hero#heroSection .hero-text { max-width: 1200px; }
/* Subtitle: each sentence on its own line, at all viewports (was only
   applied in a mobile media query before — pulled out so it works on desktop). */
.hero-sub-stack {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--white);
}
.hero-sub-stack span { display: block; }
/* New hero subtitle structure (post pin #222): lead paragraph + offering list + tagline */
.hero-sub-lead {
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--white);
  text-align: center;
  margin: 0 0 0.85rem;
  font-weight: 600;
}
.hero-sub-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 1rem;
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.6rem;
}
.hero-sub-list li {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

/* ===== Hero pill carousel (5-pill rotator, right-to-left, centred focus) ===== */
.hero-pill-carousel {
  position: relative;
  margin: 0.25rem auto 1.5rem;
  max-width: 100%;
  user-select: none;
}
.hero-pill-stage {
  position: relative;
  height: 56px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
}
.hero-pill-track {
  position: absolute;
  inset: 0;
}
.hero-pill {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.3rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 999px;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,0.35);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 700ms ease;
  filter: brightness(0.85);
  z-index: 1;
}
.hero-pill[data-offset="0"] {
  transform: translate(-50%, -50%) scale(1.05);
  opacity: 1;
  filter: brightness(1);
  z-index: 5;
}
.hero-pill[data-offset="-1"] {
  transform: translate(calc(-50% - 200px), -50%) scale(0.85);
  opacity: 0.55;
  z-index: 3;
}
.hero-pill[data-offset="1"] {
  transform: translate(calc(-50% + 200px), -50%) scale(0.85);
  opacity: 0.55;
  z-index: 3;
}
.hero-pill[data-offset="-2"] {
  transform: translate(calc(-50% - 360px), -50%) scale(0.7);
  opacity: 0;
  z-index: 2;
}
.hero-pill[data-offset="2"] {
  transform: translate(calc(-50% + 360px), -50%) scale(0.7);
  opacity: 0;
  z-index: 2;
}
@media (max-width: 900px) {
  .hero-pill-stage { height: 48px; }
  .hero-pill { font-size: 0.85rem; padding: 0.4rem 1rem; }
  .hero-pill[data-offset="-1"] { transform: translate(calc(-50% - 140px), -50%) scale(0.82); }
  .hero-pill[data-offset="1"]  { transform: translate(calc(-50% + 140px), -50%) scale(0.82); }
  .hero-pill[data-offset="-2"] { transform: translate(calc(-50% - 240px), -50%) scale(0.65); }
  .hero-pill[data-offset="2"]  { transform: translate(calc(-50% + 240px), -50%) scale(0.65); }
}
@media (max-width: 600px) {
  .hero-pill { font-size: 0.78rem; padding: 0.36rem 0.85rem; max-width: 70vw; white-space: normal; text-align: center; line-height: 1.2; }
  .hero-pill[data-offset="-1"] { transform: translate(calc(-50% - 100px), -50%) scale(0.7); }
  .hero-pill[data-offset="1"]  { transform: translate(calc(-50% + 100px), -50%) scale(0.7); }
  .hero-pill[data-offset="-2"] { opacity: 0; }
  .hero-pill[data-offset="2"]  { opacity: 0; }
}
.hero-sub-tagline {
  color: var(--white);
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 760px;
  margin: 0 auto 1.75rem;
  opacity: 0.95;
}
@media (max-width: 720px) {
  .hero-sub-list { gap: 0.35rem 0.45rem; }
  .hero-sub-list li { font-size: 0.78rem; padding: 0.28rem 0.7rem; white-space: normal; }
  .hero-sub-lead { font-size: 1rem; }
  .hero-sub-tagline { font-size: 0.9rem; }
}
/* Disable the forced h1 break on narrow screens so it wraps naturally */
.hero-h1-break { display: inline; }
@media (max-width: 900px) {
  .hero-h1-break { display: none; }
  .hero#heroSection .hero-text { max-width: 100%; }
}
.hero p {
  color: var(--white);
  font-size: 1.2rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}
.hero .btn { position: relative; z-index: 2; }
.hero-deco { position: absolute; z-index: 1; }
.hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

/* Interior page hero (shorter) */
.hero.hero-interior {
  padding: 4rem 0 5rem;
}
.hero.hero-interior h1 {
  font-size: 3rem;
  max-width: 700px;
}
.hero.hero-interior p {
  font-size: 1.05rem;
}

/* ==================== SECTION WAVES ==================== */
.section-wave {
  display: block;
  width: 100%;
  line-height: 0;
}
.section-wave svg { display: block; width: 100%; }

/* ==================== WELCOME / INTRO ==================== */
.welcome {
  padding: 4rem 0 2rem;
  text-align: center;
  background: var(--light-bg);
}
.welcome h2 {
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 2rem;
  color: var(--navy);
}
.welcome-tabs {
  display: flex;
  justify-content: center;
  gap: 2rem;
  border-bottom: 2px solid #ddd;
}
.welcome-tabs button {
  background: none;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.welcome-tabs button.active {
  border-bottom-color: var(--blue);
  color: var(--blue);
}

/* ==================== FEATURE SECTIONS ==================== */
.feature-section {
  padding: 5rem 0;
  background: var(--light-bg);
  position: relative;
  overflow: hidden;
}
.feature-section.white-bg { background: var(--white); }
.feature-section.blue-bg {
  background: var(--blue);
  color: var(--white);
}
.feature-section.blue-bg h3,
.feature-section.blue-bg p { color: var(--white); }
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.feature-grid.reverse .feature-text { order: 2; }
.feature-grid.reverse .feature-image { order: 1; }
.feature-text h3 {
  font-size: 2.25rem;
  font-weight: 900;
  margin-bottom: 1.25rem;
  line-height: 1.15;
}
.feature-text p {
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: 0.9;
}
.feature-text .btn { margin-top: 1.5rem; }
/* Feature lead / pill / tail (post pin #133 redesign, second-pass) — scannable
   alternative to long-form paragraphs inside feature cards. */
.feature-text .feature-lead {
  font-size: 1.15rem;
  line-height: 1.55;
  opacity: 1;
  font-weight: 600;
  margin: 0 0 1.25rem;
}
.feature-text .feature-pills {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
}
.feature-text .feature-pills li {
  background: rgba(10, 47, 255, 0.08);
  border: 1px solid rgba(10, 47, 255, 0.18);
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  line-height: 1.2;
}
.feature-section.blue-bg .feature-text .feature-pills li {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--white);
}
.feature-text .feature-tail {
  font-size: 0.98rem;
  line-height: 1.5;
  opacity: 1;
  margin: 0 0 0.5rem;
}
.feature-text .feature-tail strong {
  color: var(--blue);
}
.feature-section.blue-bg .feature-text .feature-tail strong { color: var(--yellow); }
@media (max-width: 768px) {
  .feature-text .feature-pills { gap: 0.4rem 0.5rem; }
  .feature-text .feature-pills li { font-size: 0.78rem; padding: 0.32rem 0.7rem; }
  .feature-text .feature-lead { font-size: 1rem; }
}
.feature-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Image placeholder (for feature sections without phone mockups) */
.image-placeholder {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #d4bfa8 0%, #c4a882 50%, #a88a6a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  color: rgba(0,0,0,0.15);
  font-size: 3rem;
}
.image-placeholder.blue-tint {
  background: linear-gradient(135deg, #a8b8d8 0%, #8098c0 50%, #6078a0 100%);
}
.image-placeholder.green-tint {
  background: linear-gradient(135deg, #a8d8b8 0%, #80c098 50%, #60a078 100%);
}
.image-placeholder.orange-tint {
  background: linear-gradient(135deg, #f0c8a0 0%, #d4956b 50%, #b87040 100%);
}

/* Phone mockups (kept from original) */
.phone-mockup {
  width: 270px;
  height: 480px;
  background: #1a1a2e;
  border-radius: 36px;
  padding: 10px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
}
.phone-screen-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  color: white;
}
.phone-screen-content.app-schedule {
  background: linear-gradient(180deg, #1a3a8f 0%, #0a2fff 100%);
  justify-content: flex-start;
  padding-top: 2.5rem;
}
.phone-screen-content.app-workout { background: linear-gradient(180deg, #ff6b35 0%, #ff8f5e 100%); }
.phone-screen-content.app-recipe { background: linear-gradient(180deg, #2dd881 0%, #1ab864 100%); }
.phone-screen-content.app-challenge { background: linear-gradient(180deg, #ff8fab 0%, #ff6b8a 100%); }
.phone-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; margin-bottom: 0.25rem; }
.phone-title { font-size: 1.1rem; font-weight: 800; }
.day-label { font-size: 0.85rem; font-weight: 700; background: rgba(255,255,255,0.15); border-radius: 12px; padding: 0.75rem 1rem; margin-bottom: 0.5rem; }
.schedule-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; font-size: 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.schedule-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex-shrink: 0; }

/* Overlapping image pair */
.image-pair { position: relative; width: 340px; height: 320px; }
.image-pair .img-rect { width: 220px; height: 260px; border-radius: 18px; position: absolute; top: 0; left: 0; overflow: hidden; box-shadow: var(--shadow-md); }
.image-pair .img-circle { width: 170px; height: 170px; border-radius: 50%; position: absolute; bottom: 10px; right: 10px; overflow: hidden; box-shadow: var(--shadow-md); border: 5px solid var(--light-bg); }

/* ==================== CARD GRIDS ==================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}
.card:hover { transform: translateY(-4px); }
.card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
}
.card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
}
.card p {
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.8;
}

/* Trust badge grid */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.trust-badge-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-badge span {
  font-size: 0.9rem;
  font-weight: 600;
}

/* ==================== COACH / CHALLENGE SECTION ==================== */
.challenge-section {
  background: var(--blue);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.challenge-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}
.coach-image {
  width: 320px;
  height: 400px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #d4bfa8 0%, #c4a882 50%, #a88a6a 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
.coach-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 320px;
  background: linear-gradient(180deg, rgba(180,160,130,0) 0%, rgba(120,100,80,0.4) 100%);
  border-radius: 90px 90px 0 0;
}

/* ==================== PLUS MORE / CENTERED TEXT ==================== */
.centered-section {
  padding: 5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.centered-section.beige-bg { background: var(--light-bg); }
.centered-section.white-bg { background: var(--white); }
.centered-section h2 {
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 1.25rem;
}
.centered-section p {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: 0.85;
}
.centered-section .btn { margin-top: 2rem; }

/* ==================== PRICING ==================== */
.pricing-section {
  background: var(--white);
  padding: 5rem 0;
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.pricing-title {
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 2rem;
  line-height: 1.15;
}
.pricing-features { list-style: none; }
.pricing-features li {
  padding: 0.5rem 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.pricing-features li::before {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}
.pricing-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.price-card {
  border: 3px solid var(--blue);
  border-radius: var(--radius-md);
  padding: 1.5rem 2rem;
  text-align: center;
  transition: transform var(--transition-fast);
}
.price-card:hover { transform: translateY(-2px); }
.price-card.featured { background: var(--blue); color: var(--white); }
.price-card .plan-name { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.price-card .price { font-size: 2rem; font-weight: 900; margin: 0.25rem 0; }
.price-card .price-period { font-size: 0.85rem; opacity: 0.8; }
.store-buttons { display: flex; gap: 0.75rem; margin-top: 1.5rem; justify-content: center; }
.store-btn {
  background: #000;
  color: #fff;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.terms-link { text-align: center; margin-top: 1rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.terms-link a { text-decoration: underline; }

/* ==================== TESTIMONIALS ==================== */
.testimonials {
  background: var(--light-bg);
  padding: 5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.testimonials h2 {
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}
.testimonial-card {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.quote-mark {
  font-size: 5rem;
  color: var(--blue);
  font-weight: 900;
  line-height: 0.8;
  margin-bottom: 1rem;
  opacity: 0.25;
}
.testimonial-card blockquote {
  font-size: 1.25rem;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 1.5rem;
}
.testimonial-card cite { font-style: normal; font-weight: 700; font-size: 1rem; }
.testimonial-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}
.testimonial-nav button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  background: transparent;
  color: var(--blue);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}
.testimonial-nav button:hover { background: var(--blue); color: var(--white); }
.testimonial-dots { display: flex; gap: 0.5rem; }
.testimonial-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--navy); opacity: 0.2; }
.testimonial-dots span.active { opacity: 1; background: var(--blue); }

/* ==================== BLOG / JOURNAL ==================== */
.blog-section {
  background: var(--white);
  padding: 5rem 0;
  text-align: center;
}
.blog-section h2 {
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 3rem;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.blog-card {
  text-align: left;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
  text-decoration: none;
  color: inherit;
  display: block;
}
.blog-card:hover { transform: translateY(-4px); }
.blog-card-image { width: 100%; height: 200px; }
.blog-card-image.img-1 { background: linear-gradient(145deg, #f0c8a0 0%, #d4956b 60%, #b87040 100%); }
.blog-card-image.img-2 { background: linear-gradient(145deg, #a8d8ea 0%, #72b5d4 60%, #4a90b0 100%); }
.blog-card-image.img-3 { background: linear-gradient(145deg, #c8e6c9 0%, #81c784 60%, #5a9e5c 100%); }
.blog-card-image.img-4 { background: linear-gradient(145deg, #d4c4f0 0%, #a890d4 60%, #8070b8 100%); }
.blog-card-image.img-5 { background: linear-gradient(145deg, #f0d4a8 0%, #d4b070 60%, #b89040 100%); }
.blog-card-image.img-6 { background: linear-gradient(145deg, #a8e8d8 0%, #70c4b0 60%, #50a090 100%); }
.blog-card-body { padding: 1.5rem; }
.blog-card-tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue); font-weight: 700; margin-bottom: 0.5rem; }
.blog-card-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 0.5rem; line-height: 1.3; }
.blog-card-desc { font-size: 0.9rem; opacity: 0.85; line-height: 1.5; }

/* ==================== NEWSLETTER / CTA BANNER ==================== */
.cta-banner {
  background: var(--blue);
  padding: 5rem 0;
  text-align: center;
  color: var(--white);
}
.cta-banner h2 {
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 1rem;
}
.cta-banner p {
  font-size: 1.05rem;
  max-width: 550px;
  margin: 0 auto 2rem;
  opacity: 0.9;
  line-height: 1.6;
}

/* ==================== ACCORDION (FAQs) ==================== */
.faq-section {
  background: var(--light-bg);
  padding: 4rem 0 5rem;
}
.faq-tabs {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}
.faq-tabs button {
  background: var(--white);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.faq-tabs button.active,
.faq-tabs button:hover {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
.accordion {
  max-width: 800px;
  margin: 0 auto;
}
.accordion-item {
  border-bottom: 1px solid var(--border-light);
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.accordion-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
}
.accordion-icon {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--blue);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
  margin-left: 1rem;
}
.accordion-item.active .accordion-icon {
  transform: rotate(45deg);
}
.accordion-content {
  padding: 0 0 1.25rem;
}
.accordion-content p {
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.85;
}

/* ==================== CONTACT FORM ==================== */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  color: var(--navy);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  color: var(--navy);
  background: var(--white);
  transition: border-color var(--transition-fast);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--blue);
}
.form-group textarea { min-height: 150px; resize: vertical; }

.contact-details h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
}
.contact-details-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 1rem;
}
.contact-details-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 700;
}

/* ==================== LEGAL PAGES ==================== */
.legal-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
  background: var(--light-bg);
}
.legal-content .last-updated {
  font-size: 0.85rem;
  opacity: 0.6;
  margin-bottom: 2.5rem;
}
.legal-content h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 2.5rem 0 1rem;
  color: var(--navy);
}
.legal-content h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 2rem 0 0.75rem;
}
.legal-content p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1rem;
  opacity: 0.85;
}
.legal-content ul,
.legal-content ol {
  margin: 1rem 0 1rem 1.5rem;
  line-height: 1.8;
}
.legal-content li { margin-bottom: 0.5rem; }
.legal-content .btn { margin-top: 2rem; }
.legal-content > .btn { display: inline-block; }
.legal-content { text-align: left; }
.legal-content > .btn:last-child { display: block; text-align: center; margin-left: auto; margin-right: auto; width: fit-content; }

/* ==================== DECORATIVE BLOBS ==================== */
.deco-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* ==================== DOODLE ICONS ==================== */
.doodle-svg { margin-bottom: 1rem; }

/* ==================== FOOTER ==================== */
.footer {
  background: var(--light-bg);
  padding: 4rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
.footer-brand .footer-logo {
  width: 56px;
  height: 56px;
  background: var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.4rem;
  color: var(--white);
  text-align: center;
  line-height: 1.1;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.footer-brand p {
  font-size: 0.85rem;
  line-height: 1.6;
  opacity: 0.7;
  max-width: 280px;
}
.footer-col h3 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  color: var(--navy);
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.5rem; }
.footer-col ul li a {
  font-size: 0.85rem;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}
.footer-col ul li a:hover { opacity: 1; }
.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  transition: opacity var(--transition-fast);
}
.footer-social a:hover { opacity: 0.8; }
.footer-bottom {
  border-top: 1px solid var(--border-light);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  opacity: 0.6;
}
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a:hover { opacity: 0.8; }

/* ==================== UTILITY ==================== */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
  .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .hero h1 { font-size: 2.5rem; }
  .hero.hero-interior h1 { font-size: 2rem; }

  .feature-grid,
  .pricing-grid,
  .blog-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  /* Prevent grid children from forcing their min-content width and
     overflowing the column on mobile (image was 563px wide in a 350px parent). */
  .feature-grid > * { min-width: 0; }
  .feature-grid .feature-image img { max-width: 100%; height: auto; }

  .feature-grid.reverse .feature-text { order: 1; }
  .feature-grid.reverse .feature-image { order: 2; }

  .nav-hamburger { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--blue);
    flex-direction: column;
    padding: 1rem 2rem 2rem;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .nav-links.open { display: flex; }
  .nav-item { width: 100%; }
  .nav-link { display: block; padding: 0.75rem 0; }
  .nav-dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    margin-top: 0;
    padding: 0 0 0 1rem;
    background: transparent;
  }
  .nav-dropdown::before { display: none; }
  .nav-dropdown li a { color: var(--white); opacity: 0.8; padding: 0.5rem 0; }
  .has-dropdown .nav-dropdown { display: none; }
  .has-dropdown.open .nav-dropdown { display: block; }

  .challenge-content { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .card-grid.cols-4 { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .image-pair { width: 300px; height: 300px; }
  .image-pair .img-rect { width: 200px; height: 240px; }
  .image-pair .img-circle { width: 160px; height: 160px; }
  .top-strip { display: none; }
  .faq-tabs { gap: 0.5rem; }

  .footer-bottom { flex-direction: column; gap: 0.75rem; text-align: center; }
}

@media (max-width: 480px) {
  .hero { padding: 4rem 0 5rem; }
  .hero h1 { font-size: 2rem; }
  .welcome h2, .centered-section h2, .cta-banner h2, .testimonials h2, .blog-section h2 { font-size: 1.8rem; }
  .feature-text h3 { font-size: 1.75rem; }
  .pricing-title { font-size: 1.8rem; }
  .welcome-tabs { gap: 0.75rem; }
  .welcome-tabs button { font-size: 0.75rem; padding: 0.5rem 0.5rem; }
}

/* ==================== DESIGN SYSTEM: Reusable Page Patterns ==================== */

/* Eyebrow chip — small uppercase label above section headings */
.section-eyebrow,
.hero-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue);
  background: rgba(10, 47, 255, 0.08);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.25rem;
}
.hero-eyebrow {
  color: var(--white);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.section-eyebrow--white {
  color: var(--white);
  background: rgba(255, 255, 255, 0.15);
}

/* Page-style hero (lighter than the homepage hero) */
.hero.hero--page {
  min-height: 60vh;
  padding: 6rem 0 4rem;
}
.hero.hero--page h1 {
  font-size: 3.2rem;
}

/* Narrower welcome variant for text-heavy sections */
.welcome--narrow .container { max-width: 880px; }
.welcome.welcome--white { background: var(--white); }
.section-intro {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--navy);
  opacity: 0.85;
}

/* Founder section */
.founder-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3rem;
  align-items: start;
  margin-top: 2rem;
  text-align: left;
}
.founder-portrait img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4/5;
  object-fit: cover;
}
.founder-text p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  color: var(--navy);
}
.qual-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.qual-list li {
  background: var(--light-bg);
  color: var(--navy);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Values grid (inside pill section) */
.scroll-expand-section--values {
  padding: 6rem 0;
}
.scroll-expand-section--values .container {
  max-width: 1100px;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  width: 100%;
  margin-top: 1rem;
}
.value-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  color: var(--white);
  text-align: left;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.value-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(200, 230, 53, 0.5);
  transform: translateY(-2px);
}
.value-card-num {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--yellow);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.value-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: var(--white);
}
.value-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* Standards grid */
.standards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}
.standard-card {
  background: var(--light-bg);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  text-align: left;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.standard-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.standard-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: var(--navy);
}
.standard-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--navy);
  opacity: 0.85;
  margin: 0;
}

@media (max-width: 768px) {
  .founder-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero.hero--page { min-height: 50vh; padding: 4rem 0 3rem; }
  .hero.hero--page h1 { font-size: 2.2rem; }
  .scroll-expand-section--values { padding: 4rem 0; }
}

/* ==================== PROGRAMME TEMPLATE COMPONENTS ==================== */

/* Inline link with brand-yellow underline-on-hover */
.inline-link {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 1px;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.inline-link:hover { border-color: var(--yellow); color: var(--dark-blue); }

/* --- Camp grid (3-up) --- */
.camps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 2rem;
}
.camp-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.camp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.camp-card-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.camp-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.camp-card:hover .camp-card-img img { transform: scale(1.04); }
.camp-card-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--yellow);
  color: var(--navy);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.camp-card-body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.camp-card-body h3 {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 0.6rem;
  color: var(--navy);
}
.camp-card-body > p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--navy);
  opacity: 0.85;
  margin: 0 0 1.25rem;
  flex: 1;
}
.camp-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-light);
}
.camp-card-price {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--blue);
}
.camp-card-arrow {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- Stats strip --- */
.stats-strip {
  background: var(--blue);
  padding: 4rem 0;
  color: var(--white);
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}
.stat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.stat-num {
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--yellow);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.85);
  max-width: 200px;
}

/* --- Timeline (sample day) --- */
.scroll-expand-section--timeline {
  padding: 6rem 0;
}
.scroll-expand-section--timeline .container {
  max-width: 880px;
}
.timeline {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}
.timeline-step {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.timeline-step:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(200,230,53,0.5);
  transform: translateX(4px);
}
.timeline-num {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--yellow);
  letter-spacing: 0.05em;
  min-width: 2.5rem;
  display: flex;
  align-items: flex-start;
  font-variant-numeric: tabular-nums;
}
.timeline-body {
  flex: 1;
  text-align: left;
}
.timeline-time {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--yellow);
  background: rgba(200,230,53,0.12);
  border: 1px solid rgba(200,230,53,0.3);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.5rem;
}
.timeline-body h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 0.35rem;
}
.timeline-body p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.8);
  margin: 0;
}

/* --- Testimonials row --- */
.testimonial-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.testimonial-card {
  background: var(--white);
  border-top: 4px solid var(--yellow);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem 1.5rem;
  margin: 0;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.testimonial-quote {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--navy);
  margin: 0;
  font-style: italic;
  position: relative;
  padding-left: 0.85rem;
  border-left: 3px solid var(--blue);
}
.testimonial-author {
  font-size: 0.9rem;
  color: var(--navy);
  opacity: 0.85;
}
.testimonial-author strong { color: var(--blue); }

/* --- Pricing snapshot (blue background) --- */
.pricing-snap {
  background: var(--blue);
  padding: 5rem 0;
  color: var(--white);
  text-align: center;
}
.pricing-snap-h2 {
  color: var(--white);
  font-size: 2.2rem;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 2rem;
}
.pricing-snap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 920px;
  margin: 0 auto;
}
.price-mini-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.price-mini-card:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(200,230,53,0.55);
  transform: translateY(-2px);
}
.price-mini-name {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.85);
  margin-bottom: 0.5rem;
}
.price-mini-from {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.65);
}
.price-mini-amt {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--yellow);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.price-mini-unit {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: 0.85rem;
}
.price-mini-link {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--yellow);
  border-bottom: 1px solid rgba(200,230,53,0.3);
  transition: border-color var(--transition-fast);
}
.price-mini-link:hover { border-color: var(--yellow); }
.pricing-snap-note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
}

/* --- FAQ accordion --- */
.faq-container { max-width: 760px; }
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 2rem;
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.faq-item[open] {
  border-color: rgba(10, 47, 255, 0.3);
  box-shadow: var(--shadow-sm);
}
.faq-question {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--blue);
  transition: transform var(--transition-fast);
  line-height: 1;
}
.faq-item[open] .faq-question::after {
  transform: rotate(45deg);
}
.faq-answer {
  padding: 0 1.25rem 1.1rem;
}
.faq-answer p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--navy);
  opacity: 0.88;
  margin: 0;
}

/* --- Responsive --- */
@media (max-width: 1023px) {
  .camps-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
  .testimonial-row { grid-template-columns: repeat(2, 1fr); }
  .pricing-snap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .camps-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .stat-num { font-size: 2.4rem; }
  .testimonial-row { grid-template-columns: 1fr; }
  .pricing-snap-grid { grid-template-columns: 1fr; max-width: 360px; }
  .pricing-snap-h2 { font-size: 1.7rem; }
  .timeline-step { padding: 1rem 1.1rem; gap: 0.85rem; }
  .timeline-num { font-size: 1.15rem; min-width: 2rem; }
  .scroll-expand-section--timeline { padding: 4rem 0; }
}
    .footer-redesign {
      background: #0a0e1a;
      color: #fff;
      padding: 5rem 0 0;
    }
    .footer-top {
      display: flex;
      gap: 4rem;
      padding-bottom: 3rem;
    }
    .footer-brand-col {
      flex: 0 0 320px;
    }
    .footer-brand-col .footer-logo-wrap {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
    .footer-brand-col .footer-eagle {
      width: 42px;
      height: 42px;
    }
    .footer-brand-col .footer-brand-name {
      font-family: "Baradig", "Inter", -apple-system, system-ui, sans-serif;
      font-size: 1.3rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .footer-brand-col .footer-desc {
      font-size: 0.88rem;
      color: rgba(255,255,255,0.75);
      line-height: 1.7;
      margin-bottom: 1.5rem;
      max-width: 280px;
    }
    .footer-socials {
      display: flex;
      gap: 2.2rem;
    }
    .footer-socials a {
      color: rgba(255,255,255,0.7);
      transition: color 0.2s ease;
    }
    .footer-socials a:hover {
      color: #fff;
    }
    .footer-socials svg {
      width: 20px;
      height: 20px;
    }
    .footer-links-grid {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
    }
    .footer-link-col h3 {
      font-size: 0.85rem;
      font-weight: 700;
      margin-bottom: 1rem;
      color: #fff;
    }
    .footer-link-col ul {
      list-style: none;
      padding: 0;
    }
    .footer-link-col li {
      margin-bottom: 0.6rem;
    }
    .footer-link-col a {
      font-size: 0.82rem;
      color: rgba(255,255,255,0.7);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .footer-link-col a:hover {
      color: #fff;
    }
    .footer-bottom-bar {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding: 1.5rem 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .footer-bottom-bar span {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.45);
    }
    .footer-bottom-bar .footer-legal {
      display: flex;
      gap: 1.5rem;
    }
    .footer-bottom-bar .footer-legal a {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.45);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .footer-bottom-bar .footer-legal a:hover {
      color: #fff;
    }

    /* ===== LIGHTBOX ===== */

/* ==================== NAVBAR (extracted from homepage inline) ==================== */
    .top-strip {
      position: relative;
      z-index: 1001;
    }
    .top-strip-left {
      text-transform: none;
    }
    .navbar {
      padding: 0.85rem 0;
      position: relative;
      z-index: 1000;
    }
    .navbar .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      list-style: none;
    }
    /* Separator before Enquire Now CTA */
    .nav-item:last-child {
      margin-left: 10px;
      padding-left: 14px;
      border-left: 1px solid rgba(255,255,255,0.18);
    }
    .nav-item:last-child .btn {
      white-space: nowrap;
      padding: 0.55rem 1.2rem;
      text-transform: none;
      font-weight: 700;
    }
    .nav-item {
      position: relative;
    }
    .nav-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 36px;
      padding: 0 16px;
      border-radius: 8px;
      font-size: 0.82rem;
      font-weight: 700;
      color: rgba(255,255,255,0.85);
      text-transform: capitalize;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
      white-space: nowrap;
      text-decoration: none;
      position: relative;
      background: transparent;
      border: none;
      font-family: inherit;
    }
    .nav-link:hover {
      background: rgba(255,255,255,0.12);
      color: #fff;
    }
    .nav-link::after {
      display: none;
    }

    /* Chevron */
    .nav-chevron {
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      opacity: 0.7;
      flex-shrink: 0;
    }
    .has-dropdown.open .nav-chevron {
      transform: rotate(180deg);
    }

    /* Dropdown mega panel */
    .nav-mega {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(6px);
      width: 340px;
      background: var(--white);
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
      border: 1px solid rgba(0,0,0,0.06);
      padding: 6px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
      z-index: 200;
    }
    .has-dropdown.open .nav-mega {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
    /* Pointing arrow */
    .nav-mega::before {
      content: '';
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 12px;
      height: 12px;
      background: var(--white);
      border-top: 1px solid rgba(0,0,0,0.06);
      border-left: 1px solid rgba(0,0,0,0.06);
      transform: translateX(-50%) rotate(45deg);
      border-radius: 2px 0 0 0;
    }
    .nav-mega-inner {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    /* Dropdown items */
    .nav-mega-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 8px;
      text-decoration: none;
      color: var(--navy);
      transition: background 0.15s ease;
    }
    .nav-mega-item:hover {
      background: var(--light-bg);
    }
    .nav-mega-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: var(--light-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--blue);
      transition: background 0.15s ease, color 0.15s ease;
    }
    .nav-mega-item:hover .nav-mega-icon {
      background: var(--blue);
      color: var(--white);
    }
    .nav-mega-title {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 2px;
      line-height: 1.3;
    }
    .nav-mega-desc {
      font-size: 0.78rem;
      color: var(--navy);
      opacity: 0.55;
      line-height: 1.4;
      margin: 0;
    }

    /* Active indicator — thin underline for current page */
    .nav-link[data-nav]::before {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 14px;
      right: 14px;
      height: 2px;
      background: var(--yellow);
      border-radius: 1px;
      transform: scaleX(0);
      transition: transform 0.2s ease;
    }
    body[data-page="home"] .nav-link[data-nav="home"]::before,
    body[data-page="football-camps"] .nav-link[data-nav="football-camps"]::before,
    body[data-page="athletes-club"] .nav-link[data-nav="athletes-club"]::before,
    body[data-page="what-we-do"] .nav-link[data-nav="what-we-do"]::before,
    body[data-page="about"] .nav-link[data-nav="about"]::before,
    body[data-page="faqs"] .nav-link[data-nav="faqs"]::before,
    body[data-page="journal"] .nav-link[data-nav="journal"]::before {
      transform: scaleX(1);
    }

/* ==================== HOMEPAGE INLINE STYLES (extracted for shared use) ==================== */
    /* ===== HERO BACKGROUND IMAGE OVERLAY ===== */
    .hero {
      position: relative;
      text-align: left;
      min-height: 100vh;
      display: flex;
      align-items: center;
      clip-path: ellipse(150% 98% at 50% 0%);
      padding-bottom: 40px;
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
    }
    .hero-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      opacity: 0.55;
      filter: brightness(1.1);
    }
    /* Hero background video (post 2026-05-29): replaces image + blue tint.
       Cover behavior: aspect-ratio 16/9 with min-width/height 100% centers
       and crops the video so no letterbox appears at any viewport. */
    .hero-bg--video { background: var(--navy); }
    /* Fallback image, visible until the Gumlet iframe paints over it */
    .hero-bg-fallback {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      opacity: 0.55;
      filter: brightness(1.1);
      z-index: 0;
    }
    /* Original blue tint, kept as part of the fallback layer */
    .hero-bg-fallback-tint {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(160deg, rgba(10,47,255,0.7) 0%, rgba(10,47,255,0.4) 35%, rgba(10,47,255,0.3) 60%, rgba(10,47,255,0.6) 100%),
        linear-gradient(to bottom, rgba(10,47,255,0.5) 0%, transparent 30%, transparent 70%, rgba(10,47,255,0.4) 100%);
      pointer-events: none;
    }
    .hero-bg-video {
      position: absolute;
      top: 50%;
      left: 50%;
      aspect-ratio: 16 / 9;
      width: auto;
      height: auto;
      min-width: 100%;
      min-height: 100%;
      border: 0;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 2;
    }
    /* Subtle dark vignette so white H1/CTAs stay legible over any frame of the
       video. Sits ABOVE the iframe (z-index 3) so it applies once the video
       plays without darkening the loading-fallback below. */
    .hero-bg--video::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 3;
      background:
        linear-gradient(to bottom, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.10) 65%, rgba(0,0,0,0.35) 100%),
        radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0,0,0,0.25) 100%);
      pointer-events: none;
    }
    /* Old blue gradient overlay — only applies when an <img> is still present.
       New iframe variant uses the vignette above. */
    .hero-bg:not(.hero-bg--video)::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(160deg, rgba(10,47,255,0.7) 0%, rgba(10,47,255,0.4) 35%, rgba(10,47,255,0.3) 60%, rgba(10,47,255,0.6) 100%),
        linear-gradient(to bottom, rgba(10,47,255,0.5) 0%, transparent 30%, transparent 70%, rgba(10,47,255,0.4) 100%);
    }
    .hero::before {
      z-index: 1;
    }
    .hero h1,
    .hero p,
    .hero .btn,
    .hero-ctas,
    .hero-deco {
      position: relative;
      z-index: 2;
    }

    /* Hero centered layout */
    .hero .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      position: relative;
      z-index: 2;
      text-align: center;
    }
    .hero-text {
      max-width: 800px;
      text-align: center;
      margin: 0 auto;
    }
    .hero-text h1 {
      text-align: center;
    }
    .hero-text p {
      text-align: center;
    }
    .hero-ctas {
      justify-content: center;
    }

    /* Pastel neon pulse on the foundations video */
    @keyframes neonPulse {
      0%, 13%, 25%, 38%, 50%, 63%, 75%, 88%, 100% {
        box-shadow: 0 15px 40px rgba(0,0,0,0.25);
      }
      3%, 9% {
        box-shadow: 0 15px 40px rgba(0,0,0,0.25),
          0 0 20px rgba(255,182,193,0.8), 0 0 45px rgba(255,182,193,0.35);
      }
      28%, 34% {
        box-shadow: 0 15px 40px rgba(0,0,0,0.25),
          0 0 20px rgba(173,216,230,0.8), 0 0 45px rgba(173,216,230,0.35);
      }
      53%, 59% {
        box-shadow: 0 15px 40px rgba(0,0,0,0.25),
          0 0 20px rgba(144,238,144,0.8), 0 0 45px rgba(144,238,144,0.35);
      }
      78%, 84% {
        box-shadow: 0 15px 40px rgba(0,0,0,0.25),
          0 0 20px rgba(216,191,255,0.8), 0 0 45px rgba(216,191,255,0.35);
      }
    }
    .scroll-expand-video-inner {
      animation: neonPulse 8s ease-in-out infinite;
    }

    /* Hero scroll-down cue */
    .hero-scroll-cue {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      color: rgba(255,255,255,0.6);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      animation: scrollCuePulse 2s ease-in-out infinite;
      transition: opacity 0.4s ease;
    }
    .hero-scroll-cue svg {
      animation: scrollCueBounce 2s ease-in-out infinite;
    }
    @keyframes scrollCuePulse {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }
    @keyframes scrollCueBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(6px); }
    }

    /* ===== SCROLL PROGRESS BAR ===== */
    .scroll-progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 0%;
      height: 3px;
      background: var(--yellow);
      box-shadow: 0 0 8px rgba(200, 230, 53, 0.6), 0 0 16px rgba(200, 230, 53, 0.3);
      z-index: 9999;
      transition: width 0.05s linear;
      pointer-events: none;
    }

    /* ===== SCROLL-EXPAND TRANSITION SECTION ===== */
    .scroll-expand-section {
      position: relative;
      min-height: auto;
      padding: 4rem 0;
      padding-top: 5rem;
      padding-bottom: 8rem;
      background: var(--blue);
      overflow: hidden;
      display: flex;
      align-items: center;
      margin-top: 0;
      margin-bottom: 40px;
      clip-path: polygon(
        /* Top curve (concave — matches original ellipse) */
        0% 8%, 5% 5.5%, 10% 4%, 20% 2%, 30% 0.8%, 40% 0.2%, 50% 0%, 60% 0.2%, 70% 0.8%, 80% 2%, 90% 4%, 95% 5.5%, 100% 8%,
        /* Bottom curve (concave — mirrored) */
        100% 92%, 95% 94.5%, 90% 96%, 80% 98%, 70% 99.2%, 60% 99.8%, 50% 100%, 40% 99.8%, 30% 99.2%, 20% 98%, 10% 96%, 5% 94.5%, 0% 92%
      );
    }
    .scroll-expand-section .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      position: relative;
      z-index: 2;
      max-width: 880px;
      text-align: center;
    }
    .scroll-expand-text {
      color: var(--white);
      text-align: center;
      max-width: 720px;
    }
    .scroll-expand-text h2 {
      font-size: 2.4rem;
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1.05;
      margin: 0;
      text-align: center;
    }
    .scroll-expand-text--bottom p {
      font-size: 1.1rem;
      color: rgba(255,255,255,0.85);
      line-height: 1.7;
      margin: 0 0 1.5rem;
      text-align: center;
    }
    .scroll-expand-text .btn {
      margin: 0 auto;
      display: inline-block;
    }
    .scroll-expand-video {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
    .scroll-expand-video-inner {
      position: relative;
      width: 100%;
      max-width: 720px;
      aspect-ratio: 16/9;
      border-radius: 32px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      background: #111;
    }
    .scroll-expand-video-inner video,
    .scroll-expand-video-inner iframe {
      display: block;
    }

    /* Video expanding overlay — covers viewport during transition */
    .video-expand-overlay {
      position: fixed;
      inset: 0;
      z-index: 900;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.1s ease;
    }
    .video-expand-overlay.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .video-expand-box {
      position: fixed;
      z-index: 920;
      background: #111;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 20px 80px rgba(0,0,0,0.4);
      opacity: 0;
      visibility: hidden;
    }
    .video-expand-box.active {
      opacity: 1;
      visibility: visible;
    }
    .video-expand-box video,
    .video-expand-box iframe {
      display: block;
    }
    .video-expand-box .expand-overlay-dim {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.3);
      transition: opacity 0.2s ease;
      pointer-events: none;
    }

    /* Text preview during shrink phase */
    .expand-text-preview {
      position: fixed;
      z-index: 910;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      color: var(--white);
    }
    .expand-text-preview {
      text-align: center;
    }
    .expand-text-preview h2 {
      font-size: 2.0rem;
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1.05;
      margin-bottom: 1.25rem;
      text-align: center;
    }
    .expand-text-preview p {
      font-size: 1.1rem;
      color: rgba(255,255,255,0.8);
      line-height: 1.7;
      margin-bottom: 2rem;
      text-align: center;
    }
    .expand-text-preview .btn {
      margin: 0 auto;
      display: inline-block;
    }

    /* ===== NAVBAR OVERRIDES (shadcn-style) ===== */
    .top-strip {
      position: relative;
      z-index: 1001;
    }
    .top-strip-left {
      text-transform: none;
    }
    .navbar {
      padding: 0.85rem 0;
      position: relative;
      z-index: 1000;
    }
    .navbar .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      list-style: none;
    }
    /* Separator before Enquire Now CTA */
    .nav-item:last-child {
      margin-left: 10px;
      padding-left: 14px;
      border-left: 1px solid rgba(255,255,255,0.18);
    }
    .nav-item:last-child .btn {
      white-space: nowrap;
      padding: 0.55rem 1.2rem;
      text-transform: none;
      font-weight: 700;
    }
    .nav-item {
      position: relative;
    }
    .nav-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 36px;
      padding: 0 16px;
      border-radius: 8px;
      font-size: 0.82rem;
      font-weight: 700;
      color: rgba(255,255,255,0.85);
      text-transform: capitalize;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
      white-space: nowrap;
      text-decoration: none;
      position: relative;
      background: transparent;
      border: none;
      font-family: inherit;
    }
    .nav-link:hover {
      background: rgba(255,255,255,0.12);
      color: #fff;
    }
    .nav-link::after {
      display: none;
    }

    /* Chevron */
    .nav-chevron {
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      opacity: 0.7;
      flex-shrink: 0;
    }
    .has-dropdown.open .nav-chevron {
      transform: rotate(180deg);
    }

    /* Dropdown mega panel */
    .nav-mega {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(6px);
      width: 340px;
      background: var(--white);
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
      border: 1px solid rgba(0,0,0,0.06);
      padding: 6px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
      z-index: 200;
    }
    .has-dropdown.open .nav-mega {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
    /* Pointing arrow */
    .nav-mega::before {
      content: '';
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 12px;
      height: 12px;
      background: var(--white);
      border-top: 1px solid rgba(0,0,0,0.06);
      border-left: 1px solid rgba(0,0,0,0.06);
      transform: translateX(-50%) rotate(45deg);
      border-radius: 2px 0 0 0;
    }
    .nav-mega-inner {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    /* Dropdown items */
    .nav-mega-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 8px;
      text-decoration: none;
      color: var(--navy);
      transition: background 0.15s ease;
    }
    .nav-mega-item:hover {
      background: var(--light-bg);
    }
    .nav-mega-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: var(--light-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--blue);
      transition: background 0.15s ease, color 0.15s ease;
    }
    .nav-mega-item:hover .nav-mega-icon {
      background: var(--blue);
      color: var(--white);
    }
    .nav-mega-title {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 2px;
      line-height: 1.3;
    }
    .nav-mega-desc {
      font-size: 0.78rem;
      color: var(--navy);
      opacity: 0.55;
      line-height: 1.4;
      margin: 0;
    }

    /* Active indicator — thin underline for current page */
    .nav-link[data-nav]::before {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 14px;
      right: 14px;
      height: 2px;
      background: var(--yellow);
      border-radius: 1px;
      transform: scaleX(0);
      transition: transform 0.2s ease;
    }
    body[data-page="home"] .nav-link[data-nav="home"]::before,
    body[data-page="football-camps"] .nav-link[data-nav="football-camps"]::before,
    body[data-page="athletes-club"] .nav-link[data-nav="athletes-club"]::before,
    body[data-page="what-we-do"] .nav-link[data-nav="what-we-do"]::before,
    body[data-page="about"] .nav-link[data-nav="about"]::before,
    body[data-page="faqs"] .nav-link[data-nav="faqs"]::before,
    body[data-page="journal"] .nav-link[data-nav="journal"]::before {
      transform: scaleX(1);
    }

    /* ===== SCROLL-MORPH SECTION ===== */
    .scroll-morph-section {
      width: 100%;
      height: 800px;
      position: relative;
      overflow-x: clip;
      overflow-y: visible;
      background: var(--light-bg);
      margin-top: -30px;
      z-index: 0;
    }
    .scroll-morph-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 10%;
      background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
      pointer-events: none;
      z-index: 1;
    }
    .scroll-morph-container {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      perspective: 1000px;
    }

    /* Center text */
    .morph-center-text {
      position: absolute;
      z-index: 5;
      text-align: center;
      pointer-events: none;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: opacity 0.6s ease, filter 0.6s ease;
      width: 100%;
      max-width: 600px;
    }
    .morph-center-text h2 {
      font-size: 2.8rem;
      text-shadow: 0 0 30px rgba(245,243,232,0.9), 0 0 60px rgba(245,243,232,0.6);
      font-weight: 900;
      color: var(--navy);
      letter-spacing: -0.01em;
      margin-bottom: 1rem;
      opacity: 0;
      filter: blur(10px);
      transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease;
      transform: translateY(20px);
    }
    .morph-center-text h2.visible {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0);
    }
    .morph-center-text .scroll-hint {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--navy);
      opacity: 0;
      transition: opacity 0.8s ease 0.2s;
    }
    .morph-center-text .scroll-hint.visible {
      opacity: 0.5;
    }

    /* Top text (appears on arc morph) */
    .morph-top-text {
      position: absolute;
      top: 5%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      text-align: center;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .morph-top-text.visible {
      opacity: 1;
    }
    .morph-top-text h2 {
      font-size: 2.8rem;
      font-weight: 900;
      color: var(--navy);
      letter-spacing: -0.01em;
      margin-bottom: 0.75rem;
    }
    .morph-top-text p {
      font-size: 1rem;
      color: var(--navy);
      opacity: 0.7;
      max-width: 520px;
      margin: 0 auto;
      line-height: 1.6;
      text-align: center;
    }

    /* Image cards */
    .morph-cards-container {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .morph-card {
      position: absolute;
      width: 180px;
      height: 256px;
      cursor: pointer;
      will-change: transform, opacity;
      transform-style: preserve-3d;
      perspective: 1000px;
    }
    .morph-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .morph-card:hover .morph-card-inner {
      transform: rotateY(180deg);
    }
    .morph-card-front,
    .morph-card-back {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 10px;
      overflow: hidden;
      backface-visibility: hidden;
      box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }
    .morph-card-front img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .morph-card-front::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.1);
      transition: background 0.3s ease;
    }
    .morph-card:hover .morph-card-front::after {
      background: transparent;
    }
    .morph-card-back {
      transform: rotateY(180deg);
      background: #080c1e;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: none;
    }
    .morph-card-back img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* ===== NEON GLOW BUTTONS ===== */
    .btn-glow {
      transition: all 0.3s ease;
    }
    .btn-yellow.btn-glow:hover,
    .btn.btn-yellow:hover {
      box-shadow: 0 0 12px rgba(200, 230, 53, 0.5), 0 0 24px rgba(200, 230, 53, 0.3), 0 0 48px rgba(200, 230, 53, 0.15);
      transform: translateY(-1px);
    }
    .btn.btn-blue:hover {
      box-shadow: 0 0 12px rgba(10, 47, 255, 0.5), 0 0 24px rgba(10, 47, 255, 0.3), 0 0 48px rgba(10, 47, 255, 0.15);
      transform: translateY(-1px);
    }
    .btn.btn-white:hover {
      box-shadow: 0 0 12px rgba(200, 230, 53, 0.5), 0 0 24px rgba(200, 230, 53, 0.3), 0 0 48px rgba(200, 230, 53, 0.15);
      transform: translateY(-1px);
    }
    .btn-outline-white:hover {
      box-shadow: 0 0 12px rgba(200, 230, 53, 0.4), 0 0 24px rgba(200, 230, 53, 0.2), 0 0 48px rgba(200, 230, 53, 0.1);
      transform: translateY(-1px);
    }
    .btn-outline:hover {
      box-shadow: 0 0 12px rgba(10, 47, 255, 0.4), 0 0 24px rgba(10, 47, 255, 0.2), 0 0 48px rgba(10, 47, 255, 0.1);
      transform: translateY(-1px);
    }

    /* ===== FEATURES TOGGLE SECTION ===== */
    .features-section {
      background: radial-gradient(ellipse at 30% 50%, rgba(20,60,255,1) 0%, var(--blue) 40%, #051a8a 100%);
      padding: 6rem 0;
      padding-top: calc(6rem + 80px);
      padding-bottom: 6rem;
      margin-top: -80px;
      margin-bottom: 0;
      color: #fff;
      overflow: hidden;
      position: relative;
      z-index: 0;
    }
    .features-section .section-tag {
      color: var(--yellow);
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-bottom: 0.75rem;
    }
    .features-section h2 {
      font-size: 2.8rem;
      font-weight: 900;
      margin-bottom: 1rem;
    }
    .features-section .section-subtitle {
      color: rgba(255,255,255,0.85);
      font-size: 1.05rem;
      margin-bottom: 3rem;
    }
    .features-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
    }
    .features-list {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .feature-card {
      padding: 1.25rem 1.5rem;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid transparent;
    }
    .feature-card.active {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.12);
      box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    }
    .feature-card-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.5rem;
    }
    .feature-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      flex-shrink: 0;
    }
    .feature-card .feature-icon {
      background: rgba(200, 230, 53, 0.12);
      color: var(--yellow);
    }
    .feature-card.active .feature-icon {
      background: var(--yellow);
      color: var(--blue);
    }
    .feature-card h3 {
      font-size: 1.15rem;
      font-weight: 700;
      transition: color 0.3s ease;
    }
    .feature-card p {
      font-size: 0.92rem;
      color: rgba(255,255,255,0.78);
      line-height: 1.6;
      margin-bottom: 0.75rem;
      transition: color 0.3s ease;
    }
    .feature-card.active p {
      color: rgba(255,255,255,0.7);
    }
    .feature-progress {
      height: 3px;
      background: rgba(255,255,255,0.1);
      border-radius: 2px;
      overflow: hidden;
    }
    .feature-progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--yellow), #e8ff6b);
      border-radius: 2px;
      transition: width 0.05s linear;
    }
    .features-image-wrap {
      position: relative;
      max-width: 540px;
      margin: 0 auto;
    }
    .features-image-wrap img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .features-image-wrap img.fade-out {
      opacity: 0;
      transform: translateY(20px);
    }

    /* ===== OUR METHODOLOGY SECTION ===== */
    .methodology-section {
      background: var(--light-bg);
      padding: 6rem 0;
      position: relative;
      z-index: 1;
      overflow: visible;
    }
    .methodology-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url('assets/images/the-matico-method.jpg') center / cover no-repeat;
      opacity: 0.19;
      pointer-events: none;
      z-index: 0;
    }
    .methodology-section > * {
      position: relative;
      z-index: 1;
    }
    .methodology-section .section-tag {
      color: var(--blue);
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }
    .methodology-section .section-tag::before {
      content: '';
      width: 24px;
      height: 2px;
      background: var(--blue);
    }
    .methodology-section h2 {
      text-align: center;
      font-size: 2.6rem;
      font-weight: 900;
      color: var(--navy);
      margin-bottom: 0.75rem;
    }
    .methodology-section .section-subtitle {
      text-align: center;
      color: var(--navy);
      font-size: 1.05rem;
      margin-bottom: 4rem;
    }
    .methodology-steps {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 0;
      position: relative;
      max-width: 1100px;
      margin: 0 auto;
    }
    .methodology-step {
      flex: 1;
      text-align: center;
      position: relative;
      cursor: pointer;
      padding: 0 0.5rem;
    }
    .step-circle {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      font-size: 1.4rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      position: relative;
      z-index: 2;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 4px 16px rgba(10, 47, 255, 0.25);
    }
    .methodology-step:hover .step-circle,
    .methodology-step.highlighted .step-circle {
      transform: scale(1.12);
      box-shadow: 0 6px 24px rgba(10, 47, 255, 0.4);
    }
    .methodology-step h3 {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 0.4rem;
    }
    .methodology-step p {
      font-size: 0.95rem;
      color: var(--navy);
      line-height: 1.5;
      max-width: 200px;
      margin: 0 auto;
    }
    /* Step arrows — hidden */
    .step-arrow { display: none; }

    /* Green neon glow on hover for methodology steps */
    .methodology-step {
      border-radius: 16px;
      padding: 1rem 0.5rem;
      transition: box-shadow 0.3s ease, background 0.3s ease;
    }
    .methodology-step:hover,
    .methodology-step.highlighted {
      background: rgba(200, 230, 53, 0.35);
      box-shadow:
        0 0 10px rgba(200, 230, 53, 0.7),
        0 0 25px rgba(200, 230, 53, 0.5),
        0 0 50px rgba(200, 230, 53, 0.4),
        inset 0 0 30px rgba(200, 230, 53, 0.35);
      border-radius: 16px;
    }

    /* ===== BENTO GALLERY SECTION ===== */
    .gallery-section {
      padding: 3rem 0 6rem;
      background: #fff;
    }
    .gallery-section h2 {
      text-align: center;
      font-size: 2.6rem;
      font-weight: 900;
      color: var(--navy);
      margin-bottom: 0.5rem;
    }
    .gallery-section .section-subtitle {
      text-align: center;
      color: rgba(47, 75, 115, 0.85);
      font-size: 1.05rem;
      margin-bottom: 3rem;
    }
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 220px 220px 220px 220px;
      grid-auto-rows: 220px;
      grid-auto-flow: dense;
      gap: 14px;
      max-width: 1100px;
      margin: 0 auto;
    }
    .bento-item {
      border-radius: 14px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    .bento-item:hover {
      transform: scale(1.02);
      box-shadow:
        0 0 15px rgba(10, 47, 255, 0.4),
        0 0 35px rgba(10, 47, 255, 0.2),
        0 0 60px rgba(200, 230, 53, 0.15);
    }
    .bento-item img,
    .bento-item video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    /* iframes don't support object-fit:cover — simulate by scaling larger and cropping */
    .bento-item iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 250%;
      height: 250%;
      transform: translate(-50%, -50%);
      border: none;
      pointer-events: none;
    }
    /* Per-cell zoom/pan overrides */
    /* Close Control: pan down slightly to show the football */
    .bento-item[data-idx="1"] iframe {
      transform: translate(-50%, -58%);
    }
    /* Pre-game Prep: zoom out to show more of the scene */
    .bento-item[data-idx="2"] iframe {
      width: 200%;
      height: 200%;
      transform: translate(-50%, -50%);
    }
    /* Drill Work: zoom out more + pan down to show her feet */
    .bento-item[data-idx="4"] iframe {
      width: 160%;
      height: 160%;
      transform: translate(-50%, -56%);
    }
    /* Under the Lights: zoom in more so corners fill the cell completely */
    .bento-item[data-idx="7"] iframe {
      width: 320%;
      height: 320%;
      transform: translate(-50%, -50%);
    }
    .bento-item .bento-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.3s ease;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 1.25rem;
    }
    .bento-item:hover .bento-overlay {
      opacity: 1;
    }
    .bento-overlay h3 {
      color: #fff;
      font-size: 0.95rem;
      font-weight: 700;
      text-shadow: 0 0 8px rgba(200, 230, 53, 0.6), 0 0 20px rgba(200, 230, 53, 0.3);
    }
    .bento-overlay p {
      color: rgba(255,255,255,0.75);
      font-size: 0.8rem;
      text-shadow: 0 0 6px rgba(10, 47, 255, 0.4);
    }
    /* Span classes for 3-col bento grid */
    .bento-span-2x2 { grid-column: span 2; grid-row: span 2; }
    .bento-span-1x2 { grid-row: span 2; }
    .bento-span-2x1 { grid-column: span 2; }
    /* Gallery modal */
    .gallery-modal {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: rgba(0,0,0,0.85);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    .gallery-modal.open {
      opacity: 1;
      visibility: visible;
    }
    .gallery-modal-content {
      max-width: 900px;
      max-height: 80vh;
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      transform: scale(0.95);
      transition: transform 0.3s ease;
    }
    .gallery-modal.open .gallery-modal-content {
      transform: scale(1);
    }
    .gallery-modal-content img,
    .gallery-modal-content video {
      width: 100%;
      height: auto;
      max-height: 80vh;
      object-fit: contain;
      display: block;
    }
    .gallery-modal-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255,255,255,0.2);
      backdrop-filter: blur(4px);
      border: none;
      color: #fff;
      font-size: 1.2rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease;
      z-index: 10;
    }
    .gallery-modal-close:hover {
      background: rgba(255,255,255,0.35);
    }
    .gallery-modal-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255,255,255,0.2);
      backdrop-filter: blur(4px);
      border: none;
      color: #fff;
      font-size: 1.4rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease;
      z-index: 10;
    }
    .gallery-modal-nav:hover {
      background: rgba(255,255,255,0.35);
    }
    .gallery-modal-prev { left: 16px; }
    .gallery-modal-next { right: 16px; }
    .gallery-modal-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1.5rem;
      background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
      color: #fff;
    }
    .gallery-modal-caption h3 {
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 0.25rem;
    }
    .gallery-modal-caption p {
      font-size: 0.85rem;
      opacity: 0.8;
    }

    /* ===== TRUST BADGES CAROUSEL ===== */
    .trust-carousel-section {
      padding: 3rem 0 2.5rem;
      background: #fff;
      overflow: hidden;
    }
    .trust-carousel-section h2 {
      text-align: center;
      font-size: 2rem;
      font-weight: 900;
      color: var(--navy);
      margin-bottom: 2.5rem;
    }
    .trust-carousel-track {
      display: flex;
      gap: 3rem;
      animation: trustScroll 30s linear infinite;
      width: max-content;
    }
    .trust-carousel-track:hover {
      animation-play-state: paused;
    }
    @keyframes trustScroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .trust-badge-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      flex-shrink: 0;
      min-width: 100px;
    }
    .trust-badge-item .badge-logo {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      font-weight: 900;
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
      overflow: visible;
    }
    .trust-badge-item:hover .badge-logo {
      transform: scale(1.1);
    }
    .trust-badge-item span {
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--navy);
      text-align: center;
      white-space: nowrap;
    }

    /* ===== BLOG IMAGE OVERRIDE ===== */
    .blog-card-image {
      overflow: hidden;
      border-radius: var(--radius-md) var(--radius-md) 0 0;
    }
    .blog-card-body {
      text-align: center;
    }
    .blog-card-tag {
      text-align: center;
    }
    .blog-card-title {
      text-align: center;
    }
    .blog-card-desc {
      text-align: center;
    }
    .blog-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .blog-card:hover {
      transform: translateY(-4px);
      box-shadow:
        0 0 12px rgba(200, 230, 53, 0.4),
        0 0 28px rgba(200, 230, 53, 0.25),
        0 0 50px rgba(200, 230, 53, 0.15);
    }
    .blog-section {
      padding-top: 4rem !important;
    }

    /* ===== WELCOME SPACING OVERRIDE — halve gap morph→offers ===== */
    .welcome {
      padding-top: 1rem !important;
      position: relative;
      z-index: 1;
    }

    /* ===== OFFERINGS TAB TRANSITIONS ===== */
    .tab-content-wrapper {
      position: relative;
    }
    .feature-section[data-tab-content] {
      position: relative;
      z-index: 1;
      background: var(--light-bg);
    }
    .feature-section[data-tab-content] .feature-text {
      text-align: center;
    }
    .feature-section[data-tab-content] .feature-text h3 {
      text-align: center;
    }
    .feature-section[data-tab-content] .feature-text p {
      text-align: center;
    }
    .feature-section[data-tab-content].tab-hidden {
      visibility: hidden;
      position: absolute;
      height: 0;
      overflow: hidden;
      pointer-events: none;
    }
    .welcome-tabs button {
      transition: color 0.3s ease, border-bottom-color 0.3s ease, transform 0.2s ease;
    }
    .welcome-tabs button:not(.active):hover {
      color: var(--blue);
      transform: translateY(-2px);
    }

    /* ===== STICKY NAVBAR ===== */
    .navbar.navbar--sticky {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      animation: navSlideDown 0.5s ease forwards;
      box-shadow: 0 2px 20px rgba(0,0,0,0.15);
    }
    @keyframes navSlideDown {
      from { transform: translateY(-100%); }
      to { transform: translateY(0); }
    }

    /* ===== CTA BANNER UPDATE ===== */
    .cta-banner {
      position: relative;
      overflow: hidden;
      padding: 0 !important;
      clip-path: ellipse(150% 95% at 50% 100%);
      padding-top: 50px !important;
      margin-top: -20px;
    }
    .cta-banner .cta-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .cta-banner .cta-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.9;
    }
    /* Top-half gradient: dark blue fading to transparent at 50% */
    .cta-banner .cta-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom,
        rgba(5,26,138,0.95) 0%,
        rgba(10,47,255,0.75) 15%,
        rgba(10,47,255,0.6) 30%,
        rgba(10,47,255,0.25) 42%,
        rgba(10,47,255,0) 50%,
        transparent 100%
      );
    }
    .cta-banner .container {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      min-height: 380px;
    }
    .cta-banner .cta-text-top {
      padding-top: 28px;
      padding-bottom: 0;
    }
    .cta-banner .cta-text-top h2 {
      margin-bottom: 0.5rem;
    }
    .cta-banner .cta-text-top p {
      max-width: 560px;
      margin: 0 auto;
      line-height: 1.7;
    }
    .cta-banner .cta-btn-bottom {
      margin-top: auto;
      padding-bottom: 28px;
    }
    .cta-banner h2,
    .cta-banner p {
      text-shadow: 0 2px 20px rgba(0,0,0,0.7), 0 1px 6px rgba(0,0,0,0.4);
    }
    .cta-banner .cta-btn-bottom .btn {
      text-shadow: none;
    }

    /* ===== FOOTER REDESIGN ===== */
    .footer-redesign {
      background: #0a0e1a;
      color: #fff;
      padding: 0;
    }
    .footer-top {
      display: flex;
      gap: 4rem;
      padding-bottom: 3rem;
    }
    .footer-brand-col {
      flex: 0 0 320px;
    }
    .footer-brand-col .footer-logo-wrap {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
    .footer-brand-col .footer-eagle {
      width: 42px;
      height: 42px;
    }
    .footer-brand-col .footer-brand-name {
      font-family: "Baradig", "Inter", -apple-system, system-ui, sans-serif;
      font-size: 1.3rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .footer-brand-col .footer-desc {
      font-size: 0.88rem;
      color: rgba(255,255,255,0.75);
      line-height: 1.7;
      margin-bottom: 1.5rem;
      max-width: 280px;
    }
    .footer-socials {
      display: flex;
      gap: 2.2rem;
    }
    .footer-socials a {
      color: rgba(255,255,255,0.7);
      transition: color 0.2s ease;
    }
    .footer-socials a:hover {
      color: #fff;
    }
    .footer-socials svg {
      width: 20px;
      height: 20px;
    }
    .footer-links-grid {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
    }
    .footer-link-col h3 {
      font-size: 0.85rem;
      font-weight: 700;
      margin-bottom: 1rem;
      color: #fff;
    }
    .footer-link-col ul {
      list-style: none;
      padding: 0;
    }
    .footer-link-col li {
      margin-bottom: 0.6rem;
    }
    .footer-link-col a {
      font-size: 0.82rem;
      color: rgba(255,255,255,0.7);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .footer-link-col a:hover {
      color: #fff;
    }
    .footer-bottom-bar {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding: 1.5rem 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .footer-bottom-bar span {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.45);
    }
    .footer-bottom-bar .footer-legal {
      display: flex;
      gap: 1.5rem;
    }
    .footer-bottom-bar .footer-legal a {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.45);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .footer-bottom-bar .footer-legal a:hover {
      color: #fff;
    }

    /* ===== LIGHTBOX ===== */
    .lightbox-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0,0,0,0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .lightbox-overlay.active {
      opacity: 1;
      pointer-events: all;
    }
    .lightbox-overlay img {
      max-width: 90vw;
      max-height: 85vh;
      border-radius: 12px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.5);
      object-fit: contain;
    }
    .lightbox-close {
      position: absolute;
      top: 24px;
      right: 32px;
      width: 44px;
      height: 44px;
      border: none;
      background: rgba(255,255,255,0.15);
      border-radius: 50%;
      color: #fff;
      font-size: 1.5rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease;
    }
    .lightbox-close:hover {
      background: rgba(255,255,255,0.3);
    }

    /* Wave above morph section — transition from hero blue */
    .wave-hero-to-morph {
      display: block;
      width: 100%;
      line-height: 0;
      background: var(--light-bg);
    }
    .wave-hero-to-morph svg {
      display: block;
      width: 100%;
    }
    /* ===== RESPONSIVE: TABLET (max-width: 1024px) ===== */
    @media (max-width: 1024px) {
      .hero .container {
        grid-template-columns: 1fr 0.6fr;
        gap: 2rem;
      }
      .features-grid {
        gap: 2rem;
      }
      .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 200px 200px 200px 200px;
      }
      .bento-span-2x2 { grid-column: span 2; grid-row: span 2; }
      .bento-span-2x1 { grid-column: span 2; }
      /* Drill Work + Under the Lights: fill cell on tablet */
      .bento-item[data-idx="4"] iframe {
        width: 300%;
        height: 300%;
        transform: translate(-50%, -53%);
      }
      .bento-item[data-idx="7"] iframe {
        width: 450%;
        height: 450%;
        transform: translate(-50%, -50%);
      }
      .footer-top {
        gap: 2.5rem;
      }
      .footer-brand-col {
        flex: 0 0 260px;
      }
      .footer-links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
      }
      /* Slight gap below hero ellipse so bottom curve is visible */
      .scroll-expand-section {
        margin-top: -30px;
        padding-top: calc(5rem + 30px);
      }
      .trust-carousel-section h2 {
        font-size: 1.6rem;
      }
      .methodology-steps {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
      }
      .methodology-step {
        flex: 0 0 calc(33.33% - 0.5rem);
        min-width: 0;
      }
    }

    /* ===== RESPONSIVE: MOBILE (max-width: 768px) ===== */
    @media (max-width: 768px) {
      /* Navbar: hide links, show hamburger */
      .nav-links {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--blue);
        flex-direction: column;
        padding: 1rem 2rem 2rem;
        gap: 0;
        border-top: 1px solid rgba(255,255,255,0.1);
        z-index: 1000;
      }
      .nav-links.open {
        display: flex !important;
      }
      .nav-hamburger {
        display: flex !important;
      }
      .navbar .container {
        position: relative;
      }
      .nav-logo {
        flex: 1;
        justify-content: center !important;
      }
      .nav-item:last-child {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
      }
      .top-strip {
        display: none;
      }

      /* Hero: single column, centered, hide video */
      .hero {
        min-height: 85vh;
        padding-bottom: 30px;
        clip-path: ellipse(180% 98% at 50% 0%);
      }
      .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
      }
      .hero-video-wrap {
        display: none;
      }
      .hero-text {
        max-width: 100%;
        text-align: center;
      }
      .hero-text h1 {
        font-size: 2.5rem;
        text-align: center;
      }
      /* Legacy: was hiding the homepage hero h1 on mobile and replacing it with a
         non-existent .hero-heading-static. Restored so "Where Young Footballers
         Are Made" actually shows on phones. */
      .hero-heading-full {
        display: block;
        font-size: 2.4rem;
        line-height: 1.05;
        letter-spacing: -0.01em;
      }
      .hero-heading-static {
        display: block;
      }
      .hero-text p {
        text-align: center;
      }
      .hero-ctas {
        justify-content: center;
      }
      .hero-scroll-cue {
        display: flex;
        bottom: 4rem;
      }
      .hero.hero--static .hero-heading-static {
        font-size: 2.5rem;
      }

      /* Scroll-expand section — slight gap below hero curve */
      .scroll-expand-section {
        clip-path: none;
        margin-top: -50px;
        padding-top: calc(5rem + 50px);
        background: transparent;
      }
      .scroll-expand-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 200px;
        background: linear-gradient(to bottom, transparent 0%, var(--blue) 100%);
        z-index: 0;
        pointer-events: none;
      }
      .scroll-expand-section::after {
        content: '';
        position: absolute;
        top: 200px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--blue);
        z-index: 0;
        pointer-events: none;
      }
      .scroll-expand-section .container {
        grid-template-columns: 1fr;
        text-align: center;
      }
      .scroll-expand-text h2 {
        font-size: 2rem;
      }
      .scroll-expand-text h2 br,
      .expand-text-preview h2 br {
        display: none;
      }
      .scroll-expand-video {
        order: -1;
      }

      /* Morph section */
      .scroll-morph-section {
        height: 600px;
      }
      .morph-center-text h2 {
        font-size: 2.2rem;
      }
      .morph-top-text {
        padding: 0 1rem;
        width: 100%;
      }
      .morph-top-text h2 {
        font-size: 1.7rem;
        white-space: nowrap;
      }
      .morph-top-text p {
        font-size: 0.85rem;
      }

      /* Welcome tabs */
      .welcome {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem;
      }
      .welcome .doodle-svg {
        width: 40px;
        height: 36px;
      }
      .welcome h2 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
      }
      .welcome-tabs {
        gap: 0.5rem;
      }
      .welcome-tabs button {
        font-size: 0.7rem;
        padding: 0.5rem 0.6rem;
        letter-spacing: 0.08em;
      }
      .feature-section[data-tab-content] {
        padding-top: 1.5rem;
        padding-bottom: 2rem;
        position: relative;
        z-index: 1;
      }
      .feature-text {
        text-align: center;
      }
      .feature-text h3 {
        font-size: 1.55rem;
        /* white-space: nowrap removed — was cutting long titles like
           "International & UK Football Residential Camps" on mobile */
      }
      .feature-text p {
        text-align: center;
      }

      /* Features section — maintain overlap with wave divs */
      .features-section {
        padding: 4rem 0;
        padding-top: calc(4rem + 80px);
        padding-bottom: calc(4rem + 80px);
      }
      .features-section h2 {
        font-size: 1.8rem;
      }
      /* Waves on mobile — transparent so features gradient shows through */
      .section-wave {
        background: transparent !important;
      }
      .section-wave svg {
        height: 50px;
      }
      .features-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
      .features-image-wrap {
        max-width: 100%;
        order: -1;
      }
      .features-image-wrap img {
        aspect-ratio: 16/10;
      }
      .feature-card h3 {
        font-size: 1rem;
      }
      .feature-card p {
        font-size: 0.9rem;
      }

      /* Methodology */
      .methodology-section {
        padding: 4rem 0;
      }
      .methodology-section h2 {
        font-size: 1.8rem;
      }
      .methodology-steps {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem 0.5rem;
      }
      .methodology-step {
        flex: 0 0 calc(33.33% - 0.5rem);
        min-width: 0;
      }
      .methodology-step h3 {
        font-size: 1.05rem;
      }
      .methodology-step p {
        font-size: 0.88rem;
        line-height: 1.4;
      }
      .step-circle {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
      }

      /* Bento gallery */
      .gallery-section {
        padding: 3rem 0;
      }
      .gallery-section h2 {
        font-size: 1.8rem;
      }
      .gallery-section .section-subtitle {
        margin-bottom: 1.5rem;
      }
      .bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 180px 180px 180px 180px;
        grid-auto-rows: 180px;
        gap: 10px;
      }
      .bento-span-2x2 { grid-column: span 2; grid-row: span 2; }
      .bento-span-2x1 { grid-column: span 2; }
      .bento-overlay h3 {
        font-size: 0.85rem;
      }
      .bento-overlay p {
        font-size: 0.7rem;
      }

      /* Trust carousel */
      .trust-carousel-section {
        padding: 2rem 0 1.5rem;
      }
      .trust-carousel-section h2 {
        font-size: 1.4rem;
        margin-bottom: 1rem;
      }
      .trust-badge-item {
        min-width: 80px;
      }
      .badge-logo {
        width: 56px;
        height: 56px;
      }
      .badge-logo img {
        max-width: 36px;
      }
      .trust-badge-item span {
        font-size: 0.65rem;
      }
      .trust-carousel-track {
        gap: 1.5rem;
      }

      /* Blog/latest section */
      .blog-grid, .latest-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }
      .latest-section h2, .blog-section h2 {
        font-size: 1.6rem;
      }

      /* CTA banner */
      .cta-banner {
        clip-path: ellipse(200% 95% at 50% 100%);
        padding-top: 40px !important;
      }
      .cta-banner .container {
        min-height: 320px;
      }
      .cta-text-top h2 {
        font-size: 1.6rem;
      }
      .cta-text-top p {
        font-size: 0.9rem;
      }

      /* Footer */
      .footer-top {
        flex-direction: column;
        gap: 2rem;
      }
      .footer-brand-col {
        flex: none;
        width: 100%;
        text-align: center;
      }
      .footer-brand-col .footer-logo-wrap {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.3rem;
      }
      .footer-brand-col .footer-socials {
        justify-content: center;
      }
      .footer-brand-col .footer-desc {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }
      .footer-links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
      }
      .footer-link-col {
        text-align: center;
      }
      .footer-bottom-bar {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
      }
      .footer-legal {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
      }

      /* General */
      .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
      }
      .section-tag {
        font-size: 0.7rem;
      }
    }

    /* ===== RESPONSIVE: SMALL MOBILE (max-width: 480px) ===== */
    @media (max-width: 480px) {
      .hero {
        min-height: 80vh;
      }
      .hero-text h1 {
        font-size: 2rem;
      }
      .hero-text p {
        font-size: 0.9rem;
      }
      .hero.hero--static .hero-heading-static {
        font-size: 2rem;
      }

      /* Scroll-expand */
      .scroll-expand-text h2 {
        font-size: 1.35rem;
      }
      .scroll-expand-text p {
        font-size: 0.95rem;
      }

      /* Morph */
      .scroll-morph-section {
        height: 420px;
      }
      .morph-center-text h2 {
        font-size: 2rem;
        font-weight: 900;
      }

      /* Welcome */
      .welcome h2 {
        font-size: 1.7rem;
        /* Removed white-space: nowrap — was causing long titles like
           "Four topics, written by coaches." to overflow off-screen. */
      }
      .welcome-tabs button {
        font-size: 0.65rem;
        padding: 0.4rem 0.5rem;
      }

      /* Features — tighter on small phones, maintain wave overlap */
      .features-section {
        padding: 3rem 0;
        padding-top: calc(3rem + 80px);
        padding-bottom: calc(3rem + 80px);
      }
      .features-section h2 {
        font-size: 1.5rem;
      }
      .feature-card {
        padding: 0.75rem;
      }

      /* Methodology: 2 columns + 1, tighter spacing */
      .methodology-section {
        padding: 3rem 0;
      }
      .methodology-section h2 {
        font-size: 1.5rem;
      }
      .methodology-steps {
        gap: 1.25rem 0.5rem;
      }
      .methodology-step {
        flex: 0 0 calc(50% - 0.5rem);
      }
      .step-circle {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
      }
      .methodology-step h3 {
        font-size: 0.95rem;
      }
      .methodology-step p {
        font-size: 0.82rem;
      }

      /* Gallery — keep 2-column on small phones */
      .gallery-section h2 {
        font-size: 1.5rem;
      }
      .bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 150px 150px 150px 150px;
        grid-auto-rows: 150px;
        gap: 8px;
      }
      .bento-span-2x2 { grid-column: span 2; grid-row: span 2; }
      .bento-span-2x1 { grid-column: span 2; }
      .bento-span-1x2 { grid-row: span 1; }
      .bento-item {
        min-height: auto;
      }

      /* Trust */
      .trust-carousel-section h2 {
        font-size: 1.2rem;
      }
      .badge-logo {
        width: 48px;
        height: 48px;
      }
      .trust-carousel-track {
        gap: 1rem;
      }

      /* CTA */
      .cta-text-top h2 {
        font-size: 1.3rem;
      }
      .cta-banner .container {
        min-height: 280px;
      }

      /* Blog — compact card images */
      .latest-section h2, .blog-section h2 {
        font-size: 1.3rem;
      }
      .blog-card-image {
        max-height: 180px;
      }
      .blog-card-image img {
        height: 180px;
      }

      /* Footer */
      .footer-links-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
      }
      .footer-redesign {
        padding: 3rem 0 0;
      }
    }

/* ==================== SCROLL ANIMATIONS (baseline, all pages) ==================== */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in[data-stagger="1"] { transition-delay: 60ms; }
.fade-in[data-stagger="2"] { transition-delay: 120ms; }
.fade-in[data-stagger="3"] { transition-delay: 180ms; }
.fade-in[data-stagger="4"] { transition-delay: 240ms; }
.fade-in[data-stagger="5"] { transition-delay: 300ms; }
.fade-in[data-stagger="6"] { transition-delay: 360ms; }
.fade-in[data-stagger="7"] { transition-delay: 420ms; }
.fade-in[data-stagger="8"] { transition-delay: 480ms; }
.fade-in[data-stagger="9"] { transition-delay: 540ms; }

@media (prefers-reduced-motion: reduce) {
  .fade-in, .fade-in.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==================== FOOTBALL CAMPS HUB POLISH (R2) ==================== */
.hero.hero--page {
  min-height: 70vh;
  padding: 7rem 0 5rem;
}
.hero.hero--page h1 {
  font-size: 3.8rem;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.hero.hero--page .hero-text p {
  font-size: 1.2rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.camp-card-body h3 {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.camp-card-img {
  aspect-ratio: 5 / 3;
}
@media (max-width: 768px) {
  .hero.hero--page { min-height: 55vh; padding: 4rem 0 3rem; }
  .hero.hero--page h1 { font-size: 2.4rem; }
  .hero.hero--page .hero-text p { font-size: 1rem; }
}

/* ==================== STAGE 2 ADDITIONS (2026-05-29) ==================== */

/* "Coming Soon, register interest" date card variant for upcoming-grids.
   Used when fake dates were replaced per pins #148 and #160. */
.camp-date-card--coming-soon {
  border: 2px dashed rgba(10, 47, 255, 0.25);
  background: linear-gradient(135deg, rgba(10, 47, 255, 0.04) 0%, rgba(200, 230, 53, 0.06) 100%);
}
.camp-date-card--coming-soon:hover {
  border-color: rgba(10, 47, 255, 0.55);
  background: linear-gradient(135deg, rgba(10, 47, 255, 0.08) 0%, rgba(200, 230, 53, 0.12) 100%);
}
.camp-date-pill--coming-soon {
  background: linear-gradient(135deg, var(--blue) 0%, #1e3aff 100%) !important;
}
.camp-date-pill--coming-soon .camp-date-month {
  font-size: 1.1rem;
  letter-spacing: 0.06em;
}
.camp-date-pill--coming-soon .camp-date-day {
  font-size: 1.5rem;
  opacity: 0.6;
}
.camp-date-tag--coming-soon {
  background: var(--yellow) !important;
  color: var(--navy) !important;
}

/* Subtle subline under a price pill (pin #188 "limited time only") */
.camp-card-price { display: inline-flex; flex-direction: column; gap: 0.1rem; align-items: flex-start; }
.camp-card-price-note {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--yellow);
  opacity: 0.95;
}

/* Fun Football Centres coming-soon banner (pin #225, replaces 2-card pricing) */
.ffc-coming-soon {
  padding: 4rem 0;
  background: linear-gradient(135deg, var(--navy) 0%, #14182d 60%, var(--blue) 220%);
  color: #fff;
}
.ffc-coming-soon-card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 2.5rem 2rem 2.25rem;
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
}
.ffc-coming-soon-eyebrow {
  display: inline-block;
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.ffc-coming-soon-card h2 {
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 0.85rem;
  letter-spacing: -0.01em;
  color: #fff;
}
.ffc-coming-soon-card p {
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 1.75rem;
  color: rgba(255, 255, 255, 0.82);
}
.ffc-coming-soon-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .ffc-coming-soon-card { padding: 2rem 1.25rem 1.75rem; }
  .ffc-coming-soon-card h2 { font-size: 1.5rem; }
  .ffc-coming-soon-card p { font-size: 0.92rem; }
}

/* ==================== RESIDENTIAL CAMPS — bespoke components ==================== */

/* Ackworth mini-gallery: 3 venue photos, each links to the school 360 tour.
   Added 2026-05-29 per pin #226/#227. */
.ackworth-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 2.5rem;
}
.ackworth-gallery-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(10, 14, 26, 0.10);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  background: var(--soft, #f4f7ff);
}
.ackworth-gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(10, 14, 26, 0.18);
}
.ackworth-gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.ackworth-gallery-card:hover img { transform: scale(1.04); }
.ackworth-gallery-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.20);
  pointer-events: none;
}
@media (max-width: 768px) {
  .ackworth-gallery { grid-template-columns: 1fr; gap: 0.75rem; }
  .ackworth-gallery-card { aspect-ratio: 16 / 10; }
}

/* Single 'View 360 Tour' button under the gallery (pin #226 + user feedback
   to consolidate the per-image pills into one CTA below the grid). */
.ackworth-gallery-cta-wrap {
  text-align: center;
  margin: 0 0 3rem;
}
.ackworth-gallery-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  letter-spacing: 0.04em;
}

/* Sticky dates bar (pin #155, make dates stand out). Position: fixed under the
   navbar. Animated in via JS once hero scrolls off-screen. */
.residential-sticky-dates {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--navy);
  color: #fff;
  z-index: 95;
  padding: 0.6rem 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.residential-sticky-dates.is-visible { transform: translateY(0); }
.residential-sticky-dates-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.residential-sticky-dates-label {
  font-size: 0.92rem;
  color: #fff;
  font-weight: 500;
}
.residential-sticky-dates-label strong {
  color: var(--yellow);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-right: 0.5rem;
}
.residential-sticky-dates-cta {
  padding: 0.5rem 1.1rem !important;
  font-size: 0.82rem !important;
}
@media (max-width: 720px) {
  .residential-sticky-dates-inner { justify-content: center; text-align: center; }
  .residential-sticky-dates-label { font-size: 0.78rem; }
  .residential-sticky-dates-label strong { display: block; margin: 0 0 0.15rem; }
  .residential-sticky-dates-cta { padding: 0.4rem 0.9rem !important; font-size: 0.76rem !important; }
}

/* Hero variant — no eyebrow, meta strip below H1, single CTA */
.hero.hero--residential {
  min-height: 78vh;
  padding: 7rem 0 5rem;
  position: relative;
}
.hero.hero--residential .hero-bg::after {
  background: linear-gradient(180deg, rgba(10,14,26,0.55) 0%, rgba(10,14,26,0.75) 100%);
}
.hero-heading-residential {
  color: var(--white);
  font-size: 4.6rem;
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  max-width: 16ch;
}
.hero-meta-strip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  color: rgba(255,255,255,0.85);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-pill);
  margin-bottom: 1.5rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.04);
}
.hero-meta-dot {
  color: var(--yellow);
  font-weight: 800;
}
.hero-residential-sub {
  color: rgba(255,255,255,0.92);
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 0 2rem;
}

/* Editorial intro with drop cap + pull quote */
.editorial-intro {
  background: var(--light-bg);
  padding: 6rem 0;
}
.editorial-intro-inner {
  max-width: 720px;
  margin: 0 auto;
}
.editorial-intro-body {
  font-size: 1.18rem;
  line-height: 1.75;
  color: var(--navy);
  margin: 0 0 1.5rem;
}
.editorial-intro-body--dropcap::first-letter {
  float: left;
  font-size: 4.2rem;
  line-height: 0.85;
  font-weight: 900;
  color: var(--blue);
  padding: 0.4rem 0.6rem 0 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.editorial-pullquote {
  margin: 2.5rem 0;
  padding: 1.5rem 2rem;
  border-left: 4px solid var(--yellow);
  background: var(--white);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy);
  position: relative;
}
.editorial-pullquote span {
  color: var(--yellow);
  font-size: 2rem;
  font-weight: 900;
  vertical-align: -0.15em;
  font-style: normal;
}
.editorial-pullquote cite {
  display: block;
  margin-top: 0.85rem;
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
  opacity: 0.85;
}

/* 60/40 asymmetric split with image and checklist */
.split-feature {
  background: var(--white);
  padding: 6rem 0;
}
.split-feature-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  align-items: center;
}
.split-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-md);
}
.split-feature-text h2 {
  font-size: 2.4rem;
  font-weight: 900;
  margin: 0 0 0.75rem;
  color: var(--navy);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.split-feature-lead {
  font-size: 1.1rem;
  color: var(--navy);
  opacity: 0.78;
  margin: 0 0 1.75rem;
  line-height: 1.5;
}

/* Checklist (used in 60/40 + pricing) */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.check-list li {
  position: relative;
  padding-left: 2rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--navy);
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--yellow);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232f4b73'><path d='M6.5 11L3 7.5l1-1L6.5 9 12 3.5l1 1z'/></svg>");
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
}
.check-list--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
  row-gap: 0.75rem;
}

/* The week — 5 day-cards horizontal grid */
.week-strip {
  background: var(--light-bg);
  padding: 6rem 0;
}
.week-strip-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.week-strip-head h2 {
  font-size: 2.4rem;
  font-weight: 900;
  margin: 0 0 0.75rem;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.week-strip-head p {
  font-size: 1.05rem;
  color: var(--navy);
  opacity: 0.75;
}
.week-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.week-day {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.week-day:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.week-day-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.week-day-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.week-day:hover .week-day-img img {
  transform: scale(1.05);
}
.week-day-body {
  padding: 1.1rem 1.1rem 1.25rem;
}
.week-day-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue);
  margin-bottom: 0.35rem;
}
.week-day-body h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 0.4rem;
  line-height: 1.2;
}
.week-day-body p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--navy);
  opacity: 0.78;
  margin: 0;
}

/* Coaches + safeguarding combined section (blue bg) */
.coaches-safeguard {
  background: var(--blue);
  padding: 6rem 0;
  color: var(--white);
}
.coaches-safeguard-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3.5rem;
  align-items: center;
}
.coaches-safeguard-img img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.coaches-safeguard-text h2 {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--white);
  margin: 0 0 1.25rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.coaches-safeguard-text p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.88);
  margin: 0 0 1.5rem;
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 1.25rem;
}
.trust-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.6rem 0.95rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md);
  min-width: 130px;
}
.trust-pill strong {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--yellow);
  letter-spacing: 0.06em;
}
.trust-pill span {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.78);
  font-weight: 500;
}
.coaches-safeguard-note {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.7);
  font-style: italic;
}

/* Big testimonial — full-bleed image overlay */
.big-testimonial {
  position: relative;
  padding: 7rem 0;
  color: var(--white);
  text-align: center;
  overflow: hidden;
}
.big-testimonial-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.big-testimonial-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.45) saturate(0.85);
}
.big-testimonial-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,14,26,0.5) 0%, rgba(10,47,255,0.55) 100%);
}
.big-testimonial-inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
}
.big-testimonial-quote {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.005em;
  margin: 0 0 1.5rem;
  color: var(--white);
}
.big-testimonial-cite {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0;
}
.big-testimonial-cite strong {
  color: var(--white);
}

/* Single feature pricing card */
.pricing-feature {
  background: var(--white);
  padding: 2.5rem 0 3rem;
}
.pricing-feature-card {
  max-width: 880px;
  margin: 0 auto;
  background: var(--white);
  border: 2px solid var(--blue);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(10,47,255,0.12);
}
.pricing-feature-head {
  background: var(--blue);
  color: var(--white);
  padding: 2.25rem 2.5rem 2rem;
  text-align: center;
}
.pricing-feature-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--yellow);
  margin-bottom: 0.6rem;
}
.pricing-feature-head h2 {
  font-size: 4.8rem;
  font-weight: 900;
  color: var(--white);
  margin: 0;
  line-height: 1;
  letter-spacing: -0.03em;
}
.pricing-feature-unit {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 600;
  margin-left: 0.4rem;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.02em;
  vertical-align: 0.3em;
}
.pricing-feature-meta {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.pricing-feature-body {
  padding: 2.25rem 2.5rem 2.5rem;
}
.pricing-feature-fineprint {
  margin: 1.75rem 0 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--light-bg);
  border-radius: var(--radius-md);
}
.pricing-feature-fineprint p {
  font-size: 0.92rem;
  color: var(--navy);
  line-height: 1.55;
  margin: 0 0 0.4rem;
}
.pricing-feature-fineprint p:last-child { margin: 0; opacity: 0.78; }
.pricing-feature-cta {
  display: block;
  text-align: center;
  width: auto;
  max-width: 280px;
  margin: 1.75rem auto 0;
  padding: 0.85rem 2rem;
  font-size: 0.95rem;
}

/* Image-split final CTA */
.cta-split {
  display: block;
  background: #0a0e1a;
  color: var(--white);
  padding: 0;
}
.cta-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 500px;
}
.cta-split-img {
  position: relative;
  overflow: hidden;
}
.cta-split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cta-split-text {
  padding: 4.5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--blue);
  color: var(--white);
}
.cta-split-text h2 {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--white);
  margin: 0 0 1rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.cta-split-text p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin: 0 0 2rem;
}
.cta-split-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 1023px) {
  .hero-heading-residential { font-size: 3.4rem; }
  .split-feature-grid, .coaches-safeguard-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .split-feature-img img, .coaches-safeguard-img img { aspect-ratio: 5 / 3; }
  .week-grid { grid-template-columns: repeat(3, 1fr); }
  .week-grid > :nth-child(4), .week-grid > :nth-child(5) { grid-column: span 1; }
  .check-list--two-col { grid-template-columns: 1fr; }
  .cta-split-grid { grid-template-columns: 1fr; }
  .cta-split-img { aspect-ratio: 16 / 9; min-height: auto; }
}
@media (max-width: 700px) {
  .hero.hero--residential { min-height: 60vh; padding: 4rem 0 3rem; }
  .hero-heading-residential { font-size: 2.4rem; }
  .hero-meta-strip { font-size: 0.78rem; padding: 0.45rem 0.85rem; }
  .hero-residential-sub { font-size: 1rem; }
  .editorial-intro, .split-feature, .week-strip, .coaches-safeguard, .pricing-feature { padding: 4rem 0; }
  .editorial-intro-body { font-size: 1.05rem; }
  .editorial-intro-body--dropcap::first-letter { font-size: 3.4rem; }
  .editorial-pullquote { font-size: 1.1rem; padding: 1.25rem 1.5rem; }
  .week-grid { grid-template-columns: 1fr 1fr; }
  .week-grid > :nth-child(5) { grid-column: span 2; }
  .pricing-feature-head h2 { font-size: 3.4rem; }
  .pricing-feature-head, .pricing-feature-body { padding: 1.75rem 1.5rem; }
  .cta-split-text { padding: 3rem 1.75rem; }
  .cta-split-text h2 { font-size: 1.9rem; }
  .big-testimonial-quote { font-size: 1.35rem; }
  .coaches-safeguard-text h2, .split-feature-text h2 { font-size: 1.8rem; }
}

/* ==================== HOLIDAY FUN DAYS — bespoke ==================== */
.hero.hero--fun {
  min-height: 72vh;
  padding: 6rem 0 4.5rem;
}
.hero.hero--fun .hero-bg::after {
  background: linear-gradient(180deg, rgba(10,14,26,0.45) 0%, rgba(10,47,255,0.55) 100%);
}
.hero-heading-fun {
  color: var(--white);
  font-size: 4.2rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
  max-width: 18ch;
}
.hero-accent-script {
  font-family: 'Brush Script MT', 'Apple Chancery', cursive;
  font-style: italic;
  color: var(--yellow);
  font-weight: 400;
  font-size: 1.1em;
  display: inline-block;
  transform: rotate(-2deg);
  padding: 0 0.1em;
}
.hero-fun-sub {
  color: rgba(255,255,255,0.92);
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto 1.75rem;
  text-align: center;
}
.hero-fun-sub strong { color: var(--yellow); }
.hero-fun-actions {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  justify-content: center; /* Gate 6A: hero CTAs match the centered hero text */
  flex-wrap: wrap;
}
.hero-fun-arrow {
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 2px;
  transition: border-color var(--transition-fast);
}
.hero-fun-arrow:hover { border-color: var(--yellow); color: var(--yellow); }

/* Two-col intro with stat-style facts */
.fun-intro-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 4rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}
.fun-intro-text h2 {
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  line-height: 1.1;
}
.fun-intro-text p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--navy);
  margin: 0 0 1rem;
}
.fun-quick-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--light-bg);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.5rem;
}
.fun-quick-facts li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(47,75,115,0.1);
}
.fun-quick-facts li:last-child { border-bottom: none; }
.fun-fact-num {
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--blue);
  line-height: 1;
  letter-spacing: -0.01em;
}
.fun-fact-lbl {
  font-size: 0.82rem;
  color: var(--navy);
  opacity: 0.78;
  font-weight: 500;
}

/* Day-by-hour grid */
.day-strip {
  background: var(--blue);
  padding: 6rem 0;
  color: var(--white);
}
.day-strip-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.day-strip-head h2 {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--white);
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}
.day-strip-head p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.85);
}
.day-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.85rem;
}
.day-hour {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.1rem 1.25rem;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.day-hour:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(200,230,53,0.5);
  transform: translateY(-3px);
}
.day-hour-time {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--yellow);
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
  background: rgba(200,230,53,0.12);
  border: 1px solid rgba(200,230,53,0.3);
  border-radius: var(--radius-pill);
  margin-bottom: 0.65rem;
  font-variant-numeric: tabular-nums;
}
.day-hour h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 0.4rem;
  line-height: 1.2;
}
.day-hour p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  margin: 0;
}

/* "What to bring" 70/30 split */
.bring-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 4rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}
.bring-text h2 {
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  line-height: 1.1;
}
.bring-text > p {
  font-size: 1rem;
  color: var(--navy);
  opacity: 0.78;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}
.bring-note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--navy);
  opacity: 0.7;
  font-style: italic;
}
.bring-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-md);
}

/* Safeguarding band — slim, multi-stat */
.safeguarding-band {
  background: var(--navy);
  padding: 4rem 0;
  color: var(--white);
}
.safeguarding-band-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}
.safeguarding-band-cell {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0 1.5rem;
  position: relative;
  transition: transform 0.3s ease;
}
.safeguarding-band-cell + .safeguarding-band-cell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 56%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(200,230,53,0.22) 50%, transparent 100%);
}
.safeguarding-band-cell:hover { transform: translateY(-3px); }
.safeguarding-band-cell:hover strong::after {
  width: 36px;
}
.safeguarding-band-cell strong {
  /* Gate 6F: less shouty — 2.6rem, weight 800. Underline accent is conditional below. */
  font-size: 2.6rem;
  color: var(--yellow);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: block;
  position: relative;
}
/* Underline accent + extra padding-bottom only on cells that contain a number ticker.
   Text-only cells (FA Approved, Enhanced DBS) skip the accent and use compact text. */
.safeguarding-band-cell strong:has(.num-ticker) {
  padding-bottom: 0.55rem;
}
.safeguarding-band-cell strong:has(.num-ticker)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--yellow);
  border-radius: 2px;
  transition: width 0.3s ease;
}
/* Text-only credentials in mixed ribbons get smaller, white font for elegance */
.safeguarding-band-cell strong:not(:has(.num-ticker)) {
  font-size: 1.35rem;
  color: var(--white);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.safeguarding-band-cell > span {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.82);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  display: block;
}
@media (max-width: 1023px) {
  .safeguarding-band-grid { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
  .safeguarding-band-cell strong { font-size: 2.1rem; }
  .safeguarding-band-cell + .safeguarding-band-cell::before { display: none; }
}
@media (max-width: 700px) {
  .safeguarding-band-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .safeguarding-band-cell strong { font-size: 1.7rem; }
}

/* Quiet testimonial (single quote, light bg) */
.quiet-testimonial {
  background: var(--light-bg);
  padding: 5rem 0;
  text-align: center;
}
.quiet-testimonial-quote {
  font-size: 1.7rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--navy);
  max-width: 760px;
  margin: 0 auto 1.25rem;
  font-style: italic;
  letter-spacing: -0.005em;
}
.quiet-testimonial-cite {
  font-size: 0.85rem;
  color: var(--navy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.78;
}
.quiet-testimonial-cite strong { color: var(--blue); opacity: 1; }

/* Pricing feature compact (less padding) */
.pricing-feature.pricing-feature--compact { padding: 4.5rem 0; }
.pricing-feature--compact .pricing-feature-head h2 { font-size: 4rem; }

/* CTA banner fun variant */
.cta-banner.cta-banner--fun { background: var(--blue); }

/* Responsive */
@media (max-width: 1023px) {
  .hero-heading-fun { font-size: 3.2rem; }
  .fun-intro-grid { grid-template-columns: 1fr; gap: 2rem; }
  .day-grid { grid-template-columns: repeat(3, 1fr); }
  .bring-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .bring-photo img { aspect-ratio: 4 / 3; }
  .safeguarding-band-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
@media (max-width: 700px) {
  .hero.hero--fun { min-height: 56vh; padding: 4rem 0 3rem; }
  .hero-heading-fun { font-size: 2.3rem; }
  .day-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .day-strip { padding: 4rem 0; }
  .quiet-testimonial-quote { font-size: 1.25rem; }
  .safeguarding-band-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .fun-intro-text h2, .bring-text h2 { font-size: 1.8rem; }
}

/* ==================== ATHLETES CLUB — bespoke ==================== */
.hero.hero--athletes {
  min-height: 76vh;
  padding: 7rem 0 5rem;
}
.hero.hero--athletes .hero-bg::after {
  background: linear-gradient(180deg, rgba(10,14,26,0.65) 0%, rgba(10,14,26,0.85) 100%);
}
.hero-heading-athletes {
  color: var(--white);
  font-size: 4.4rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  max-width: 18ch;
}
.hero-athletes-sub {
  color: rgba(255,255,255,0.92);
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 0 1.75rem;
}
.hero-athletes-actions {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  justify-content: center; /* Gate 6A — missed in the first sweep */
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .hero-athletes-actions { flex-direction: column; align-items: stretch; }
  .hero-athletes-actions .btn,
  .hero-athletes-actions .hero-fun-arrow { width: 100%; text-align: center; }
}

/* Editorial intro white variant */
.editorial-intro--white { background: var(--white); }

/* Pillars 2x2 with alternating bg */
.pillars-section {
  background: var(--light-bg);
  padding: 6rem 0;
}
.pillars-head {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
}
.pillars-head h2 {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}
.pillars-head p {
  font-size: 1.05rem;
  color: var(--navy);
  opacity: 0.78;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
}
.pillar-card {
  padding: 2rem 1.85rem;
  border-radius: var(--radius-lg);
  position: relative;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pillar-card--blue {
  background: var(--blue);
  color: var(--white);
}
.pillar-card--white {
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.pillar-card-num {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 0.85rem;
  opacity: 0.85;
}
.pillar-card--blue .pillar-card-num { color: var(--yellow); }
.pillar-card--white .pillar-card-num { color: var(--blue); }
.pillar-card h3 {
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0 0 0.65rem;
  letter-spacing: -0.01em;
}
.pillar-card--blue h3 { color: var(--white); }
.pillar-card--white h3 { color: var(--navy); }
.pillar-card p {
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0;
}
.pillar-card--blue p { color: rgba(255,255,255,0.85); }
.pillar-card--white p { color: var(--navy); opacity: 0.82; }

/* Pathway timeline (horizontal 3 phases with arrows) */
.pathway-head {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
}
.pathway-head h2 {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}
.pathway-head p {
  font-size: 1.05rem;
  color: var(--navy);
  opacity: 0.78;
}
.pathway-timeline {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 1rem;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}
.pathway-step {
  background: var(--light-bg);
  border-radius: var(--radius-lg);
  padding: 1.85rem 1.5rem;
  border: 2px solid transparent;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.pathway-step:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
}
.pathway-step-num {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue);
  background: rgba(10,47,255,0.08);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.85rem;
}
.pathway-step h3 {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
.pathway-step > p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--navy);
  opacity: 0.82;
  margin: 0 0 0.85rem;
}
.pathway-step ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.pathway-step ul li {
  font-size: 0.85rem;
  color: var(--navy);
  opacity: 0.78;
  font-weight: 600;
}
.pathway-arrow {
  align-self: center;
  font-size: 1.85rem;
  color: var(--blue);
  font-weight: 800;
  opacity: 0.5;
}

/* For/against split */
.for-against {
  background: var(--light-bg);
  padding: 5rem 0;
}
.for-against-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.for-against-col {
  padding: 2rem 2rem;
  border-radius: var(--radius-lg);
  background: var(--white);
}
.for-against-col--for { border-top: 4px solid var(--green, #2dd881); }
.for-against-col--against { border-top: 4px solid var(--orange); opacity: 0.97; }
.for-against-col h3 {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 1rem;
}
.cross-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.cross-list li {
  position: relative;
  padding-left: 2rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--navy);
}
.cross-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--orange);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'><path d='M11.5 4.5L4.5 11.5M4.5 4.5l7 7' stroke='%23fff' stroke-width='2'/></svg>");
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 1023px) {
  .hero-heading-athletes { font-size: 3.2rem; }
  .pillars-grid { grid-template-columns: 1fr; }
  .pathway-timeline { grid-template-columns: 1fr; gap: 0.85rem; }
  .pathway-arrow { transform: rotate(90deg); align-self: center; justify-self: center; }
  .for-against-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .hero.hero--athletes { min-height: 56vh; padding: 4rem 0 3rem; }
  .hero-heading-athletes { font-size: 2.2rem; }
  .pillars-section, .for-against { padding: 4rem 0; }
  .pillars-head h2, .pathway-head h2 { font-size: 1.8rem; }
}

/* ==================== DEVELOPMENT CENTRE — bespoke ==================== */
.hero.hero--devcentre {
  min-height: 76vh;
  padding: 7rem 0 5rem;
}
.hero.hero--devcentre .hero-bg::after {
  background: linear-gradient(180deg, rgba(10,14,26,0.55) 0%, rgba(10,47,255,0.7) 100%);
}
.hero-heading-devcentre {
  color: var(--white);
  font-size: 4.4rem;
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 1.25rem;
  max-width: 14ch;
}
.hero-devcentre-sub {
  color: rgba(255,255,255,0.92);
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 0 1.75rem;
}

/* Three-pillars grid (used on Dev Centre) */
.devcentre-intro {
  text-align: center;
}
.devcentre-intro h2 {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0 0 2.5rem;
}
.three-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}
.three-pillar-cell {
  padding: 1.75rem 1.5rem;
  border-left: 4px solid var(--yellow);
  background: var(--light-bg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.three-pillar-num {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--blue);
  margin-bottom: 0.5rem;
  display: inline-block;
}
.three-pillar-cell h3 {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
.three-pillar-cell p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--navy);
  opacity: 0.82;
  margin: 0;
}

/* Sample session 50/50 split with vertical timeline */
.devcentre-session {
  background: var(--blue);
  padding: 6rem 0;
  color: var(--white);
}
.devcentre-session-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.devcentre-session-text h2 {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--white);
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.devcentre-session-lead {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  margin: 0 0 1rem;
}
.devcentre-session-meta {
  font-size: 0.85rem;
  color: var(--yellow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.session-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.session-step {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--radius-md);
  align-items: flex-start;
}
.session-step-time {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--yellow);
  background: rgba(200,230,53,0.12);
  border: 1px solid rgba(200,230,53,0.3);
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.session-step h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 0.3rem;
}
.session-step p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  margin: 0;
}

/* Age groups grid */
.devcentre-groups-head {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
}
.devcentre-groups-head h2 {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}
.devcentre-groups-head p {
  font-size: 1.05rem;
  color: var(--navy);
  opacity: 0.78;
}
.age-groups-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
}
.age-group {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow-sm);
  border-bottom: 4px solid var(--blue);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.age-group:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.age-group-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue);
  background: rgba(10,47,255,0.1);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.85rem;
}
.age-group h3 {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
.age-group p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--navy);
  opacity: 0.82;
  margin: 0 0 0.85rem;
}
.age-group-when {
  font-size: 0.82rem;
  color: var(--blue);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Pricing pair (term vs payg) */
.pricing-pair-head {
  max-width: 720px;
  margin: 0 auto 3rem;
  text-align: center;
}
.pricing-pair-head h2 {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}
.pricing-pair-head p {
  font-size: 1.05rem;
  color: var(--navy);
  opacity: 0.78;
}
.pricing-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 880px;
  margin: 0 auto;
}
.pricing-pair-card {
  background: var(--white);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2rem 1.85rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.pricing-pair-card--featured {
  border-color: var(--blue);
  box-shadow: 0 25px 50px rgba(10,47,255,0.1);
}
.pricing-pair-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
}
.pricing-pair-name {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.pricing-pair-card h3 {
  font-size: 3.4rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pricing-pair-unit {
  font-size: 0.85rem;
  color: var(--navy);
  opacity: 0.7;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0.5rem 0 1.5rem;
  display: block;
}
.pricing-pair-card .check-list {
  flex: 1;
  margin: 0 0 1.5rem;
}
.pricing-pair-cta {
  display: block;
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0.95rem;
}
.pricing-pair-note {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.92rem;
  color: var(--navy);
  opacity: 0.78;
  font-style: italic;
}

@media (max-width: 1023px) {
  .hero-heading-devcentre { font-size: 3.2rem; }
  .three-pillars { grid-template-columns: 1fr; }
  .devcentre-session-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .age-groups-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-pair { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .hero.hero--devcentre { min-height: 60vh; padding: 4rem 0 3rem; }
  .hero-heading-devcentre { font-size: 2.4rem; }
  .age-groups-grid { grid-template-columns: 1fr; }
  .devcentre-session { padding: 4rem 0; }
  .devcentre-intro h2, .pricing-pair-head h2, .devcentre-groups-head h2, .devcentre-session-text h2 { font-size: 1.8rem; }
}

/* What We Do — method page */
.hero.hero--method {
  min-height: 70vh;
  padding: 7rem 0 5rem;
}
.hero.hero--method .hero-bg::after {
  background: linear-gradient(180deg, rgba(10,14,26,0.55) 0%, rgba(10,14,26,0.8) 100%);
}
.hero-heading-method {
  color: var(--white);
  font-size: 3.6rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
  max-width: 22ch;
}
.hero-method-sub {
  color: rgba(255,255,255,0.92);
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 600px;
  margin: 0;
}
.pillars-section--white { background: var(--white); }

.hero-ctas--method {
  display: flex;
  gap: 1rem;
  margin-top: 1.75rem;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .hero.hero--method { min-height: 50vh; padding: 4rem 0 3rem; }
  .hero-heading-method { font-size: 2rem; }
  .hero-ctas--method { flex-direction: column; align-items: stretch; }
  .hero-ctas--method .btn,
  .hero-ctas--method .btn-outline-white { width: 100%; text-align: center; }
}

/* ===== Enquire: "What Happens Next" 3-step strip (Gate 5 distinctiveness) ===== */
.next-steps-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2.5rem 0 1rem;
  text-align: left;
}
.next-step {
  background: var(--white);
  border: 1px solid rgba(10, 14, 26, 0.08);
  border-radius: 1.1rem;
  padding: 1.75rem 1.5rem;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.next-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10, 14, 26, 0.08);
}
.next-step-num {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--blue);
  margin-bottom: 0.75rem;
}
.next-step h3 {
  font-size: 1.15rem;
  color: var(--navy);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.next-step p {
  font-size: 0.92rem;
  color: var(--navy);
  opacity: 0.78;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 800px) {
  .next-steps-strip { grid-template-columns: 1fr; gap: 1rem; }
}

/* ===== Mid-page CTA strip (Gate 5 conversion fix) ===== */
.cta-strip {
  background: linear-gradient(135deg, var(--blue) 0%, #0825c4 100%);
  padding: 3.5rem 0;
  color: var(--white);
}
/* Sit the neon-M CTA flush against the Five-Steps strip on what-we-do.
   The neon CTA has its own dark padding which provides the breathing room. */
.methodology-strip:has(+ .cta-strip--neon-m) {
  padding-bottom: 0;
}
.methodology-strip + .cta-strip--neon-m {
  margin-top: 0;
}
.cta-strip-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
}
.cta-strip-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
  font-weight: 700;
  margin: 0;
}
.cta-strip-h3 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0;
  max-width: 26ch;
  line-height: 1.3;
}
.cta-strip-actions {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 600px) {
  .cta-strip { padding: 2.5rem 0; }
  .cta-strip-h3 { font-size: 1.3rem; }
  .cta-strip-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .cta-strip-actions .btn,
  .cta-strip-actions .btn-outline-white { width: 100%; text-align: center; }
}

/* ==================== ENQUIRE FORM ==================== */
.hero.hero--compact {
  min-height: 38vh;
  padding: 5rem 0 3.5rem;
}
.hero.hero--compact .hero-bg::after {
  background: linear-gradient(180deg, rgba(10,14,26,0.55) 0%, rgba(10,47,255,0.7) 100%);
}
.hero-heading-compact {
  color: var(--white);
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.85rem;
}
.hero.hero--compact p {
  color: rgba(255,255,255,0.92);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0;
}
.enquire-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}
.enquire-form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2.25rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}
.enquire-form h2 {
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.form-note {
  font-size: 0.92rem;
  color: var(--navy);
  opacity: 0.7;
  margin: 0 0 1.75rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.enquire-form label {
  display: block;
  margin-bottom: 1rem;
}
.enquire-form label > span {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}
.enquire-form input,
.enquire-form select,
.enquire-form textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--navy);
  background: var(--white);
  transition: border-color var(--transition-fast);
}
.enquire-form input:focus,
.enquire-form select:focus,
.enquire-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(10,47,255,0.1);
}
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.5rem 0 1.5rem;
}
.form-consent input { width: auto; margin-top: 0.25rem; }
.form-consent span {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--navy);
  margin-bottom: 0 !important;
  letter-spacing: 0 !important;
  line-height: 1.5;
}
.form-consent a { color: var(--blue); text-decoration: underline; }
.form-submit {
  width: 100%;
  padding: 0.95rem;
  font-size: 0.95rem;
}
.enquire-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.enquire-card {
  background: var(--blue);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
}
.enquire-card.enquire-card--alt { background: var(--light-bg); color: var(--navy); }
.enquire-card h3 {
  font-size: 1.15rem;
  font-weight: 900;
  margin: 0 0 1rem;
  color: inherit;
  letter-spacing: -0.005em;
}
.enquire-card p {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 0.85rem;
  color: inherit;
}
.enquire-card a { color: var(--yellow); border-bottom: 1px solid rgba(200,230,53,0.35); transition: color 0.2s ease; }
.enquire-card a:hover { color: var(--white); border-bottom-color: var(--white); }
.enquire-card.enquire-card--alt a { color: var(--blue); border-bottom: 0; }
.enquire-card.enquire-card--alt a:hover { color: var(--navy); }
.enquire-card ul { list-style: none; padding: 0; margin: 0; }
.enquire-card ul li {
  border-bottom: 1px solid rgba(47,75,115,0.12);
}
.enquire-card ul li:last-child { border: none; }
.enquire-card.enquire-card--alt ul li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--navy);
  border-bottom: 0;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.enquire-card.enquire-card--alt ul li a::after {
  content: '→';
  color: var(--blue);
  font-weight: 700;
  transition: transform 0.2s ease;
}
.enquire-card.enquire-card--alt ul li a:hover {
  color: var(--blue);
  padding-left: 0.35rem;
}
.enquire-card.enquire-card--alt ul li a:hover::after {
  transform: translateX(4px);
}

/* Better form inputs */
.enquire-form input,
.enquire-form select,
.enquire-form textarea {
  padding: 0.85rem 1rem;
  font-size: 1rem;
}

@media (max-width: 1023px) {
  .enquire-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .hero.hero--compact { min-height: auto; padding: 3.5rem 0 2.5rem; }
  .hero-heading-compact { font-size: 2rem; }
  .enquire-form { padding: 1.5rem; }
}

/* ==================== JOURNAL ==================== */
.journal-featured { margin-bottom: 3rem; }
.journal-feature-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.journal-feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.journal-feature-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.journal-feature-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.journal-feature-card:hover .journal-feature-img img { transform: scale(1.05); }
.journal-feature-body {
  padding: 2.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.journal-feature-body h2 {
  font-size: 2rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0.85rem 0 0.85rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.journal-feature-body p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--navy);
  opacity: 0.78;
  margin: 0 0 1rem;
}
.journal-feature-meta {
  font-size: 0.82rem;
  color: var(--navy);
  opacity: 0.6;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.journal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}
.journal-card {
  display: block;
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.journal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.journal-card-img { aspect-ratio: 16 / 9; overflow: hidden; }
.journal-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.journal-card:hover .journal-card-img img { transform: scale(1.05); }
.journal-card-body { padding: 1.5rem 1.5rem 1.65rem; }
.journal-card-body h3 {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0.65rem 0 0.65rem;
  line-height: 1.25;
}
.journal-card-body p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--navy);
  opacity: 0.78;
  margin: 0 0 0.85rem;
}
.journal-card-meta {
  font-size: 0.78rem;
  color: var(--navy);
  opacity: 0.6;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.journal-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue);
  background: rgba(10,47,255,0.08);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
}
.journal-tag--white { color: var(--white); background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); }

@media (max-width: 1023px) {
  .journal-feature-card { grid-template-columns: 1fr; }
  .journal-grid { grid-template-columns: 1fr; }
}

/* ==================== ARTICLE ==================== */
.article-hero {
  position: relative;
  padding: 5rem 0 4rem;
  color: var(--white);
  overflow: hidden;
}
.article-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.article-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
.article-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,26,0.5) 0%, rgba(10,47,255,0.7) 100%);
}
.article-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.article-back {
  display: inline-block;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}
.article-back:hover { border-color: var(--yellow); color: var(--yellow); }
.article-hero h1 {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0.85rem 0 0.85rem;
}
.article-byline {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.78);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 2rem;
}
.article-lead {
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--navy);
  margin: 0 0 2.5rem;
  font-weight: 500;
}
.article-body h2 {
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--navy);
  margin: 2.5rem 0 0.85rem;
  letter-spacing: -0.01em;
}
.article-body p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--navy);
  margin: 0 0 1.25rem;
}
.article-body ul { padding-left: 1.5rem; margin: 0 0 1.5rem; }
.article-body ul li { font-size: 1.05rem; line-height: 1.65; color: var(--navy); margin-bottom: 0.5rem; }
.article-body a { color: var(--blue); border-bottom: 2px solid rgba(10,47,255,0.25); transition: border-color var(--transition-fast); }
.article-body a:hover { border-color: var(--blue); }

@media (max-width: 700px) {
  .article-hero h1 { font-size: 1.8rem; }
  .article-lead { font-size: 1.1rem; }
  .article-body h2 { font-size: 1.35rem; }
  .article-body p, .article-body ul li { font-size: 0.98rem; }
}

/* ==================== LEGAL PAGES ==================== */
.legal-page {
  padding: 4rem 0 5rem;
  background: var(--white);
}
.legal-page .container {
  max-width: 760px;
  text-align: left;
}
.legal-page h1 {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.legal-meta {
  font-size: 0.82rem;
  color: var(--navy);
  opacity: 0.6;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 2rem;
}
.legal-page h2 {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--navy);
  margin: 2rem 0 0.85rem;
  letter-spacing: -0.005em;
}
.legal-page p, .legal-page li {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--navy);
}
.legal-page p { margin: 0 0 1rem; }
.legal-page ul { padding-left: 1.5rem; margin: 0 0 1.25rem; }
.legal-page ul li { margin-bottom: 0.4rem; }

/* ==================== UTILITY (404 / thank you / booking success) ==================== */
.status-page {
  min-height: 70vh;
  background: var(--light-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 0;
}
.status-page .container { text-align: center; max-width: 640px; }
.status-page-icon {
  font-size: 3.5rem;
  margin-bottom: 1.25rem;
  display: inline-block;
}
.status-page h1 {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 0.85rem;
  letter-spacing: -0.01em;
}
.status-page p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--navy);
  opacity: 0.78;
  margin: 0 0 2rem;
}
.status-page-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .status-page h1 { font-size: 1.9rem; }
}

/* ==================== 21st.dev / MAGIC UI / ACETERNITY COMPONENTS ==================== */
/* Vanilla CSS/JS adaptations of named components from the framework's library list */

/* === Marquee (Magic UI) === */
.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  --gap: 2.5rem;
  --duration: 35s;
}
.marquee-track {
  display: flex;
  flex-shrink: 0;
  gap: var(--gap);
  animation: marqueeScroll var(--duration) linear infinite;
  width: max-content;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% / 3)); }
}
.marquee-fade-l, .marquee-fade-r {
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}
.marquee-fade-l { left: 0; background: linear-gradient(to right, var(--bg, var(--light-bg)), transparent); }
.marquee-fade-r { right: 0; background: linear-gradient(to left, var(--bg, var(--light-bg)), transparent); }

.club-emblems-band {
  /* Gate 6C: full white so there's no grey ribbon between hero and the white sections */
  background: var(--white);
  padding: 3rem 0 3.5rem;
  --bg: var(--white);
}
.club-emblems-band-head {
  text-align: center;
  margin-bottom: 1.75rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.6;
}
.club-emblems-band img {
  height: 56px;
  width: auto;
  flex-shrink: 0;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.3s ease, transform 0.3s ease;
}
/* Gate 6: per-emblem hover (only the one under the cursor goes full colour) */
.club-emblems-band img:hover {
  filter: grayscale(0) opacity(1);
  transform: scale(1.08);
}
/* (band-level hover removed; per-emblem hover above is the Gate 6 behaviour) */

/* === Number Ticker (Magic UI) === */
.num-ticker {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* === Bento Grid (Magic UI / ShadCN) === */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 1rem;
}
.bento-item {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.bento-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.bento-item--span2 { grid-column: span 2; }
.bento-item--row2 { grid-row: span 2; }
.bento-item--blue { background: var(--blue); color: var(--white); }
.bento-item--blue h3, .bento-item--blue p { color: var(--white); }
.bento-item--blue p { color: rgba(255,255,255,0.85); }
.bento-item--photo { padding: 0; }
.bento-item--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bento-item--photo .bento-photo-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem 1.5rem;
  background: linear-gradient(to top, rgba(10,14,26,0.85), transparent);
  color: var(--white);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.bento-item-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.6rem;
  color: var(--blue);
}
.bento-item--blue .bento-item-eyebrow { color: var(--yellow); }
.bento-item h3 {
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  color: var(--navy);
  line-height: 1.2;
}
.bento-item p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--navy);
  opacity: 0.82;
  margin: 0;
}
.bento-stat {
  font-size: 3.6rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--blue);
  margin: 0.85rem 0 0.5rem;
}
.bento-item--blue .bento-stat { color: var(--yellow); }

/* === Border Beam (Magic UI) === */
.border-beam-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  isolation: isolate;
}
.border-beam-wrap::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 0deg,
    var(--yellow) 30deg,
    var(--blue) 50deg,
    transparent 80deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderBeamRotate 4s linear infinite;
  z-index: -1;
  opacity: 0.85;
}
@keyframes borderBeamRotate {
  to { --beam-angle: 360deg; }
}
@property --beam-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* === Word Rotate (Magic UI) === */
.word-rotate {
  display: inline-block;
  position: relative;
  color: var(--yellow);
}
.word-rotate-inner {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s;
}
.word-rotate.swapping .word-rotate-inner {
  transform: translateY(-12px);
  opacity: 0;
}

/* === Spotlight (Aceternity) === */
.spotlight {
  position: relative;
  --sx: 50%; --sy: 30%;
}
.spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    600px circle at var(--sx) var(--sy),
    rgba(200, 230, 53, 0.12),
    transparent 40%
  );
  z-index: 1;
  transition: opacity 0.3s ease;
}

/* === Avatar Circles (Magic UI) === */
.avatar-circles {
  display: inline-flex;
  align-items: center;
}
.avatar-circles img,
.avatar-circles .avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--white);
  background: var(--blue);
  color: var(--white);
  font-weight: 800;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
}
.avatar-circles > * + * { margin-left: -12px; }
.avatar-circles .avatar-more {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-weight: 800;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--white);
  letter-spacing: -0.01em;
}

/* === Background grid pattern (Aceternity) === */
.bg-grid {
  background-image:
    linear-gradient(rgba(47,75,115,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,75,115,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  position: relative;
}
.bg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, var(--light-bg) 80%);
  pointer-events: none;
}

/* === Animated dot pattern (Aceternity) === */
.bg-dots {
  background-image: radial-gradient(circle, rgba(47,75,115,0.18) 1px, transparent 1px);
  background-size: 24px 24px;
}

@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-item--span2 { grid-column: span 2; }
  .bento-item--row2 { grid-row: auto; }
}
@media (max-width: 700px) {
  .bento { grid-template-columns: 1fr; }
  .bento-item--span2 { grid-column: auto; }
  .club-emblems-band img { height: 44px; }
}

/* ==================== CURVED SECTION TRANSITIONS ==================== */
/* Soften "blocky" rectangular section stacking with curved tops */

.cta-split.cta-split--curved {
  border-top-left-radius: 80px;
  border-top-right-radius: 80px;
  overflow: hidden;
  margin-top: 0;
  position: relative;
}
/* And give bottom of pill / dark sections matching curves where useful */
.coaches-safeguard {
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  overflow: hidden;
  position: relative;
}
.big-testimonial {
  border-radius: 80px 80px 80px 80px;
  margin: 0 auto;
  max-width: calc(100% - 1.5rem);
  overflow: hidden;
}
@media (max-width: 700px) {
  .cta-split.cta-split--curved { border-top-left-radius: 40px; border-top-right-radius: 40px; }
  .coaches-safeguard { border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; }
  .big-testimonial { border-radius: 40px; max-width: calc(100% - 1rem); }
}

/* ==================== CURVED VARIANTS — added per page ==================== */
.stats-strip.stats-strip--curved {
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  margin-bottom: 0;
}
.pricing-snap.pricing-snap--curved {
  border-radius: 80px 80px 80px 80px;
  margin: 4rem auto;
  max-width: calc(100% - 1.5rem);
  overflow: hidden;
}
@media (max-width: 700px) {
  .stats-strip.stats-strip--curved { border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; }
  .pricing-snap.pricing-snap--curved { border-radius: 40px; max-width: calc(100% - 1rem); margin: 2rem auto; }
}

/* Defensive fallback for hero/article-hero — dark bg in case image fails */
.hero { background-color: var(--navy); }
.article-hero { background-color: var(--navy); }

/* ==================== ADDITIONAL 21st.dev / MAGIC UI / ACETERNITY COMPONENTS ==================== */

/* === Magic Card (Magic UI) === cursor-following gradient border */
.magic-card {
  position: relative;
  --mc-x: 50%;
  --mc-y: 50%;
  --mc-color: 200, 230, 53; /* yellow */
  isolation: isolate;
  transition: transform var(--transition-fast);
}
.magic-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: radial-gradient(
    320px circle at var(--mc-x) var(--mc-y),
    rgba(var(--mc-color), 0.55),
    transparent 60%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.magic-card:hover::before { opacity: 1; }
.magic-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    320px circle at var(--mc-x) var(--mc-y),
    rgba(var(--mc-color), 0.08),
    transparent 60%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}
.magic-card:hover::after { opacity: 1; }

/* === Animated Beam (Magic UI) === flowing gradient line between elements */
.beam-track {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(10, 47, 255, 0.15);
  overflow: hidden;
  border-radius: 2px;
}
.beam-track::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, var(--yellow), transparent);
  animation: beamFlow 3s linear infinite;
}
@keyframes beamFlow {
  from { transform: translateX(-100%); }
  to { transform: translateX(440%); }
}

/* === Shimmer Button (Magic UI) === animated shine sweep on primary CTAs */
.btn-shimmer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 80%
  );
  animation: shimmerSweep 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmerSweep {
  0% { left: -120%; }
  60%, 100% { left: 220%; }
}

/* === Animated Gradient Text (Magic UI) === subtle gradient flow */
.gradient-text {
  background: linear-gradient(
    100deg,
    var(--yellow) 0%,
    #ffd24f 25%,
    var(--yellow) 50%,
    #aef549 75%,
    var(--yellow) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 5s linear infinite;
}
@keyframes gradientShift {
  from { background-position: 0% 50%; }
  to { background-position: 250% 50%; }
}

/* ==================== HOMEPAGE-STYLE ELEMENTS PORTED ==================== */

/* Doodle SVG container (homepage decoration above section H2s) */
.doodle-svg {
  display: block;
  margin: 0 auto 0.85rem;
}

/* Section tag (homepage eyebrow chip, slightly different to .section-eyebrow) */
.section-tag {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blue);
  background: rgba(10, 47, 255, 0.08);
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.25rem;
}
.section-tag--white {
  color: var(--white);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.section-tag--yellow {
  color: var(--navy);
  background: rgba(200, 230, 53, 0.95);
}

/* SVG wave divider (homepage section transitions) */
.section-wave {
  position: relative;
  z-index: 1;
  background: transparent;
  margin: -2px 0;
}
.section-wave svg {
  display: block;
  width: 100%;
  height: 60px;
}

/* ==================== FIVE-STEP METHODOLOGY (homepage style) ==================== */
.methodology-strip {
  background: var(--light-bg);
  padding: 6rem 0;
  position: relative;
}
.methodology-strip-head {
  text-align: center;
  margin-bottom: 3rem;
}
.methodology-strip-head h2 {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0.5rem 0 0.5rem;
}
.methodology-strip-head .section-subtitle {
  font-size: 1.05rem;
  color: var(--navy);
  opacity: 0.78;
  margin: 0;
}
.method-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
  position: relative;
}
.method-step {
  text-align: center;
  padding: 0 0.85rem;
  position: relative;
}
.step-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  font-size: 1.6rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 8px 24px rgba(10, 47, 255, 0.18);
  border: 3px solid var(--blue);
  position: relative;
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.method-step:hover .step-circle {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 14px 32px rgba(200, 230, 53, 0.35), 0 0 0 8px rgba(200, 230, 53, 0.15);
}
.method-step h3 {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 0.45rem;
  letter-spacing: -0.005em;
}
.method-step p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--navy);
  opacity: 0.8;
  margin: 0;
}
.method-step-connector {
  position: absolute;
  top: 32px;
  left: calc(50% + 36px);
  right: calc(-50% + 36px);
  height: 2px;
  z-index: 1;
}
.method-step-connector .beam-track {
  background: rgba(10, 47, 255, 0.2);
}
.method-step:last-child .method-step-connector { display: none; }

/* ==================== UPCOMING CAMPS (NEW PATTERN) ==================== */
.upcoming-camps {
  background: var(--white);
  padding: 6rem 0;
}
.upcoming-camps-head {
  text-align: center;
  margin-bottom: 2.5rem;
}
.upcoming-camps-head h2 {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0.5rem 0;
}
.upcoming-camps-head p {
  font-size: 1.05rem;
  color: var(--navy);
  opacity: 0.78;
}
.upcoming-filter {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.upcoming-filter-desc {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--navy);
  opacity: 0.78;
  min-height: 2.6rem; /* prevent layout jump when text changes */
}
.upcoming-filter button {
  background: transparent;
  border: 2px solid var(--border-light);
  color: var(--navy);
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: 0.04em;
}
.upcoming-filter button:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.upcoming-filter button.active {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
.upcoming-grid {
  /* Gate 6D: flex (not 1fr grid) so 1-2 cards centre instead of left-pile */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
}
.upcoming-grid > .camp-date-card {
  flex: 0 1 360px;
  max-width: 380px;
}
.camp-date-card {
  background: var(--white);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: 110px 1fr;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.camp-date-card:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.camp-date-pill {
  background: var(--blue);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0.75rem;
  text-align: center;
  position: relative;
}
.camp-date-month {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.2rem;
}
.camp-date-day {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.camp-date-year {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.2rem;
}
.camp-date-body {
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
}
.camp-date-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(10, 47, 255, 0.08);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.6rem;
}
.camp-date-tag--residential { color: var(--white); background: var(--blue); }
.camp-date-tag--holiday { color: var(--navy); background: var(--yellow); }
.camp-date-tag--weekly { color: var(--blue); background: rgba(10, 47, 255, 0.12); }
.camp-date-body h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 0.4rem;
  line-height: 1.25;
}
.camp-date-meta {
  font-size: 0.82rem;
  color: var(--navy);
  opacity: 0.78;
  margin: 0 0 0.85rem;
  line-height: 1.4;
}
.camp-date-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-light);
}
.camp-date-spots {
  font-size: 0.78rem;
  font-weight: 700;
  color: #b85420; /* warm amber for urgency */
  letter-spacing: 0.04em;
}
.camp-date-spots--full {
  color: rgba(47, 75, 115, 0.5);
}
.camp-date-book {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.camp-date-card[data-full="true"] {
  opacity: 0.55;
  pointer-events: none;
}

@media (max-width: 1023px) {
  .method-steps { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
  .method-step:nth-child(4), .method-step:nth-child(5) { grid-column: span 1; }
  .method-step-connector { display: none; }
  .upcoming-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .method-steps { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .methodology-strip-head h2, .upcoming-camps-head h2 { font-size: 1.85rem; }
  .upcoming-grid { grid-template-columns: 1fr; }
}

/* ==================== DEFENSIVE TEXT COLOR RULES (global) ==================== */
/* Make sure section headings always have explicit color on light backgrounds */
.welcome h2,
.welcome--white h2,
.welcome--narrow h2,
.methodology-strip h2,
.upcoming-camps h2,
.split-feature h2,
.editorial-intro h2,
.faq-container h2,
.welcome p:not([class]),
.methodology-strip p,
.upcoming-camps p {
  color: var(--navy);
}
/* Section subtitles below H2 */
.welcome p.section-subtitle,
.methodology-strip p.section-subtitle,
.upcoming-camps p.section-subtitle {
  color: var(--navy);
  opacity: 0.78;
}
/* Bento headers */
.bento-item h3 { color: inherit; }
.bento-item--blue h3, .bento-item--blue p { color: var(--white); }
.bento-item--blue p { color: rgba(255,255,255,0.88); }

/* Methodology strip blue variant — solid dark navy + accent glows for white-text legibility */
.methodology-strip.methodology-strip--blue {
  background: #0a0e1a;
  background-image:
    radial-gradient(ellipse 60% 80% at 80% 30%, rgba(10, 47, 255, 0.28), transparent 60%),
    radial-gradient(ellipse 40% 60% at 15% 90%, rgba(200, 230, 53, 0.12), transparent 60%);
  color: var(--white);
  position: relative;
}
.methodology-strip.methodology-strip--blue .methodology-strip-head h2 {
  color: var(--white);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.4);
}
.methodology-strip.methodology-strip--blue .methodology-strip-head .section-tag {
  color: var(--yellow);
  background: rgba(200, 230, 53, 0.12);
  border: 1px solid rgba(200, 230, 53, 0.35);
}
.methodology-strip.methodology-strip--blue .methodology-strip-head p,
.methodology-strip.methodology-strip--blue .methodology-strip-head .section-subtitle {
  color: rgba(255, 255, 255, 0.92) !important;
  opacity: 1 !important;
}
.methodology-strip.methodology-strip--blue .step-circle.step-circle--blue {
  background: var(--white);
  border-color: var(--yellow);
  color: var(--blue);
}
.methodology-strip.methodology-strip--blue .method-step-connector .beam-track {
  background: rgba(255, 255, 255, 0.18);
}
.method-steps.method-steps--six { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1023px) {
  .method-steps.method-steps--six { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
}
@media (max-width: 700px) {
  .method-steps.method-steps--six { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; }
}

.method-steps.method-steps--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) {
  .method-steps.method-steps--four { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
}
@media (max-width: 700px) {
  .method-steps.method-steps--four { grid-template-columns: 1fr; row-gap: 1.5rem; }
}

/* ==================== CONTRAST FIXES (post-audit) ==================== */
/* High-specificity rules to override the defensive .welcome p:not([class]) rule
   for elements that need white text on blue/dark backgrounds */

/* Bento blue cells — text must be white */
.bento .bento-item--blue h3,
.welcome .bento .bento-item--blue h3,
.welcome--white .bento .bento-item--blue h3 {
  color: var(--white);
}
.bento .bento-item--blue p,
.welcome .bento .bento-item--blue p,
.welcome--white .bento .bento-item--blue p {
  color: rgba(255, 255, 255, 0.88);
}

/* Coaches+safeguarding section — list items + paragraphs must be white */
.coaches-safeguard .check-list li,
.coaches-safeguard .check-list li strong,
.coaches-safeguard p,
.coaches-safeguard h2,
.coaches-safeguard ul li {
  color: var(--white);
}
.coaches-safeguard p {
  color: rgba(255, 255, 255, 0.88);
}

/* Enquire blue contact card — strong/p must be white */
.enquire-card:not(.enquire-card--alt) p,
.enquire-card:not(.enquire-card--alt) strong,
.enquire-card:not(.enquire-card--alt) h3 {
  color: var(--white);
}

/* Pillar blue cards — text must be white */
.pillar-card.pillar-card--blue h3,
.pillar-card.pillar-card--blue p,
.pillar-card.pillar-card--blue .pillar-card-num {
  color: var(--white);
}
.pillar-card.pillar-card--blue p {
  color: rgba(255, 255, 255, 0.88);
}
.pillar-card.pillar-card--blue .pillar-card-num {
  color: var(--yellow);
}

/* Methodology blue variant — descendants must inherit white */
.methodology-strip.methodology-strip--blue h3,
.methodology-strip.methodology-strip--blue p,
.methodology-strip.methodology-strip--blue h2 {
  color: var(--white);
}

/* Pricing snap blue island — internal cards must be readable */
.pricing-snap .price-mini-name,
.pricing-snap .price-mini-from,
.pricing-snap .price-mini-unit {
  color: rgba(255, 255, 255, 0.88);
}

/* Stats strip — make sure label reads white on blue */
.stats-strip .stat-label {
  color: rgba(255, 255, 255, 0.88);
}

/* Day-strip blue (Holiday Fun Days) — descendants white */
.day-strip h3,
.day-strip p,
.day-strip h2 {
  color: var(--white);
}
.day-strip p {
  color: rgba(255, 255, 255, 0.85);
}

/* Final CTA split-text on blue — text must be white */
.cta-split-text h2,
.cta-split-text p {
  color: var(--white);
}
.cta-split-text p {
  color: rgba(255, 255, 255, 0.88);
}

/* Journal grid 3-up symmetric variant (overrides 2-col default) */
.journal-grid.journal-grid--three {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1023px) {
  .journal-grid.journal-grid--three { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .journal-grid.journal-grid--three { grid-template-columns: 1fr; }
}

/* ==================== PREMIUM FOOTER UPGRADE ==================== */
/* Pre-band: brand statement + newsletter (Linear / Vercel / Stripe-style) */
.footer-pre {
  background: linear-gradient(180deg, #0a0e1a 0%, #131932 100%);
  padding: 0 0 3rem;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(200, 230, 53, 0.12);
}
.footer-pre::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,230,53,0.55) 25%, rgba(10,47,255,0.55) 75%, transparent 100%);
}
.footer-pre-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
}
.footer-pre-statement { color: var(--white); }
.footer-pre-h2 {
  /* Reduced 2.4 → 2rem so "Where young footballers are made." fits one line on desktop */
  font-size: 2rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.85rem;
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .footer-pre-h2 { white-space: normal; }
}
.footer-pre-sub {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin: 0;
  max-width: 480px;
}
.footer-pre-newsletter { color: var(--white); }
.footer-pre-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.75rem;
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .footer-pre-label { white-space: normal; }
}
.footer-pre-input-row {
  display: flex;
  gap: 0.5rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 0.45rem;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.footer-pre-input-row:focus-within {
  border-color: rgba(200,230,53,0.5);
  background: rgba(255,255,255,0.09);
}
.footer-pre-input-row input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--white);
  font-family: inherit;
  font-size: 0.98rem;
  padding: 0.65rem 0.85rem;
  outline: none;
}
.footer-pre-input-row input::placeholder { color: rgba(255,255,255,0.45); }
.footer-pre-input-row .btn { padding: 0.65rem 1.1rem; font-size: 0.85rem; flex-shrink: 0; }
.footer-pre-hint {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  margin: 0.75rem 0 0;
}

.footer-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.08) 70%, transparent);
}

/* Footer brand-col enhancements */
.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1.25rem 0 1rem;
}
.footer-meta-pin {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
}
.footer-meta-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.footer-meta-status--link {
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.footer-meta-status--link:hover { filter: brightness(1.15); }
.footer-meta-status--link .footer-meta-status-text {
  color: #2dd881;
  font-weight: 700;
  letter-spacing: 0.005em;
  animation: footerStatusFade 2.1s ease-in-out infinite;
}
.footer-meta-status--link:hover .footer-meta-status-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-meta-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green, #2dd881);
  box-shadow: 0 0 0 3px rgba(45, 216, 129, 0.18);
  animation: footerPulse 2.1s ease-in-out infinite;
}
@keyframes footerPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(45, 216, 129, 0.18); }
  50% { box-shadow: 0 0 0 7px rgba(45, 216, 129, 0.04); }
}
/* Slow soft fade, single sine cycle per loop, no scaling */
@keyframes footerStatusFade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-meta-status--link .footer-meta-status-text { animation: none; }
}

/* ===== FOOTER MID BAND: meta pair + socials, centered ===== */
.footer-mid-band {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 1.75rem 0 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.footer-mid-band .footer-meta {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
  margin: 0;
}
.footer-mid-band .footer-socials {
  justify-content: center;
}
@media (max-width: 600px) {
  .footer-mid-band .footer-meta {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  .footer-mid-band .footer-meta-pin,
  .footer-mid-band .footer-meta-status {
    justify-content: center;
  }
}

@media (max-width: 1023px) {
  .footer-pre-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-pre-h2 { font-size: 1.85rem; }
}
@media (max-width: 700px) {
  .footer-pre { padding: 3rem 0 2.5rem; }
  .footer-pre-h2 { font-size: 1.55rem; }
  .footer-pre-input-row { flex-direction: column; }
  .footer-pre-input-row .btn { width: 100%; }
}

/* ==================== ABOUT — GATE 5 ENHANCEMENTS ==================== */

/* Sticky founder image (fix #10) */
@media (min-width: 1024px) {
  .split-feature-img.split-feature-img--sticky {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}

/* Aceternity 3D Card Effect (fix #9) — mouse-tilt on hover */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  perspective: 1000px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  will-change: transform;
}
.tilt-card:hover {
  transition: transform 0.05s linear;
}

/* MATICO TIMELINE (fix #8) — anchor moment for About */
.matico-timeline-section {
  background: var(--light-bg);
  padding: 6rem 0 7rem;
  position: relative;
}
.matico-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.timeline-milestone {
  position: relative;
  padding: 0 0.85rem;
  text-align: center;
}
.timeline-year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.005em;
  margin: 0 auto 1.25rem;
  box-shadow: 0 8px 24px rgba(10, 47, 255, 0.18);
  border: 3px solid var(--blue);
  position: relative;
  z-index: 2;
  font-variant-numeric: tabular-nums;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.timeline-milestone:hover .timeline-year {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 14px 32px rgba(200, 230, 53, 0.4), 0 0 0 8px rgba(200, 230, 53, 0.15);
}
.timeline-milestone h3 {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 0.5rem;
  letter-spacing: -0.005em;
}
.timeline-milestone p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--navy);
  opacity: 0.82;
  margin: 0;
}
.timeline-connector {
  position: absolute;
  top: 40px;
  left: calc(50% + 44px);
  right: calc(-50% + 44px);
  height: 2px;
  z-index: 1;
}
.timeline-connector .beam-track {
  background: rgba(10, 47, 255, 0.2);
}
.timeline-milestone:last-child .timeline-connector { display: none; }

@media (max-width: 1023px) {
  .matico-timeline { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
  .timeline-connector { display: none; }
}
@media (max-width: 700px) {
  .matico-timeline { grid-template-columns: 1fr; row-gap: 2rem; }
  .matico-timeline-section { padding: 4rem 0; }
}

/* ==================== GATE 5 FIXES (post-feedback) ==================== */

/* Five-col symmetry MODIFIER (default standards-grid is auto-fit for 4 cards) */
.standards-grid.standards-grid--five {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}
.standards-grid.standards-grid--five .standard-card {
  padding: 1.5rem 1.25rem;
}
.standards-grid.standards-grid--five .standard-card h3 { font-size: 1.05rem; line-height: 1.25; }
.standards-grid.standards-grid--five .standard-card p { font-size: 0.9rem; line-height: 1.55; }

/* About — Five values: overlay number, generous space, accent line.
   Inspired by Linear/Stripe stat-style cards (Aceternity-friendly). */
.value-card {
  position: relative;
  padding: 2.25rem 1.5rem 1.75rem !important;
  overflow: hidden;
  background: var(--white) !important;
  border: 1px solid rgba(10, 14, 26, 0.06);
}
.value-card-num {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 4.5rem;
  font-weight: 900;
  color: var(--blue);
  opacity: 0.1;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.value-card:hover .value-card-num {
  opacity: 0.18;
  transform: translateY(-2px) scale(1.02);
  color: var(--blue);
}
.value-card h3 {
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
  color: var(--navy);
  margin: 0 0 0.85rem !important; /* extra space between subtitle and body */
  font-weight: 800;
  position: relative;
  padding-top: 0.5rem;
}
.value-card h3::before {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  background: var(--yellow);
  border-radius: 2px;
  margin-bottom: 0.85rem;
  transition: width 0.3s ease;
}
.value-card:hover h3::before {
  width: 44px;
}
.value-card p {
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  color: var(--navy);
  opacity: 0.78;
  margin: 0;
}
@media (max-width: 1023px) {
  .standards-grid.standards-grid--five { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .standards-grid.standards-grid--five { grid-template-columns: 1fr; }
}

/* CTA-split — Gate 6: smaller, tighter, less dominant on the page */
.cta-split.cta-split--curved .cta-split-grid {
  min-height: 320px;
  max-height: 380px;
  grid-template-columns: 5fr 6fr; /* image slightly smaller than text panel */
}
.cta-split.cta-split--curved .cta-split-img img {
  max-height: 380px;
}
.cta-split.cta-split--curved .cta-split-text {
  padding: 2.5rem 3rem;
}
.cta-split.cta-split--curved .cta-split-text h2 {
  font-size: 1.85rem;
  line-height: 1.15;
}
.cta-split.cta-split--curved .cta-split-text p {
  font-size: 0.98rem;
  margin: 0 0 1.25rem;
}
@media (max-width: 1023px) {
  .cta-split.cta-split--curved .cta-split-grid {
    min-height: auto;
    max-height: none;
    grid-template-columns: 1fr;
  }
  .cta-split.cta-split--curved .cta-split-img img { max-height: 280px; }
}

/* Quiet testimonial — add subtle hover feedback so grey isn't dead */
.quiet-testimonial {
  position: relative;
  transition: background 0.4s ease;
}
.quiet-testimonial:hover {
  background: linear-gradient(180deg, var(--light-bg) 0%, #ede5d6 100%);
}
.quiet-testimonial::before {
  content: '"';
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8rem;
  color: var(--yellow);
  opacity: 0.18;
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}

/* Footer divider — smooth gradient transition (no sharp colour shift) */
.footer-pre {
  background: linear-gradient(180deg, #0a0e1a 0%, #131932 50%, #0a0e1a 100%);
}
.footer-divider {
  height: 0;
  background: transparent;
}

/* Marquee — ensure seamless loop by duplicating content client-side AND tightening transform */
.marquee-track {
  --gap: 3rem;
  gap: var(--gap);
}

/* Static beige sections — add subtle textured bg + entrance animation */
.welcome--narrow {
  background-image: radial-gradient(ellipse at top, rgba(10,47,255,0.025) 0%, transparent 50%);
}

/* ============================================================
   GATE 6 — MECHANICAL POLISH ADDITIONS
   ============================================================ */

/* 6B + 6E — Pill-shaped step-circle for time labels (HFD hour-by-hour).
   Auto-applied when .step-circle--time class is present. */
.step-circle.step-circle--time {
  width: auto;
  min-width: 96px;
  padding: 0 1.25rem;
  height: 56px;
  border-radius: 999px;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,1) 0%, #f4f7ff 100%);
  border: 2px solid var(--yellow);
  box-shadow: 0 6px 18px rgba(10, 47, 255, 0.22), inset 0 1px 0 rgba(255,255,255,0.85);
}
.method-step:hover .step-circle.step-circle--time {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 24px rgba(200, 230, 53, 0.4), 0 0 0 6px rgba(200, 230, 53, 0.18);
}

/* 6F — credentials variant of the safeguarding band: white text values, smaller font, less shouty.
   Use when values are short phrases (e.g. "FA Level 2+") rather than numbers. */
.safeguarding-band--credentials .safeguarding-band-cell strong {
  font-size: 1.45rem;
  color: var(--white);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.15;
  padding-bottom: 0; /* no underline accent for text values */
}
.safeguarding-band--credentials .safeguarding-band-cell strong::after {
  display: none; /* override the numeric underline */
}
.safeguarding-band--credentials .safeguarding-band-cell span {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 0.4rem;
}
.safeguarding-band--credentials .safeguarding-band-cell + .safeguarding-band-cell::before {
  background: linear-gradient(180deg, transparent 0%, rgba(200,230,53,0.22) 50%, transparent 100%);
}
@media (max-width: 1023px) {
  .safeguarding-band--credentials .safeguarding-band-cell strong { font-size: 1.2rem; }
}

/* 6E — Curved + radial quiet-testimonial (instead of flat rectangular band) */
.quiet-testimonial {
  border-radius: 80px;
  margin: 0 auto;
  max-width: calc(100% - 1.5rem);
  background:
    radial-gradient(ellipse at top, rgba(10, 47, 255, 0.05) 0%, transparent 55%),
    var(--light-bg);
  position: relative;
  overflow: hidden;
}
@media (max-width: 700px) {
  .quiet-testimonial { border-radius: 40px; max-width: calc(100% - 1rem); }
}

/* 6D — Center the upcoming grid even when the # of cards doesn't fill all columns
   (e.g. 5 dates in a 3-col grid leaves an orphan; this centers the orphan-row). */
.upcoming-grid {
  justify-content: center;
}
.upcoming-grid > * {
  min-width: 0;
}

/* 6C — Final CTA → footer continuity.
   cta-split--curved is the last main section; its colour (image|blue) needs to
   bleed into footer-pre's #0a0e1a start, otherwise there's a visible colour band. */
.cta-split.cta-split--curved {
  margin-bottom: 0;
  background: #0a0e1a; /* container colour matches footer-pre's gradient start */
}
.cta-split.cta-split--curved .cta-split-text {
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue) 60%, #0a0e1a 100%);
}
.cta-split.cta-split--curved .cta-split-img {
  position: relative;
}
.cta-split.cta-split--curved .cta-split-img::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 32%;
  background: linear-gradient(180deg, transparent 0%, #0a0e1a 100%);
  pointer-events: none;
}
.cta-split.cta-split--curved + footer .footer-pre,
.cta-split.cta-split--curved + .footer-redesign .footer-pre {
  border-top: 0;
}

/* ============================================================
   PARENT HANDBOOK — patterns
   ============================================================ */

/* Handbook nav (anchor links across the page) */
.handbook-nav {
  list-style: none;
  padding: 0;
  margin: 2rem auto 0;
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.handbook-nav li {
  margin: 0;
}
.handbook-nav a {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy);
  background: var(--light-bg);
  border-radius: 999px;
  border: 1px solid rgba(10,14,26,0.06);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.handbook-nav a:hover {
  background: var(--blue);
  color: var(--white);
  transform: translateY(-1px);
}

/* Countdown vertical timeline (T-minus) */
.countdown-timeline {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 760px;
  position: relative;
}
.countdown-timeline::before {
  content: '';
  position: absolute;
  left: 32px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, rgba(10,47,255,0.18) 8%, rgba(10,47,255,0.18) 92%, transparent 100%);
  border-radius: 2px;
}
.countdown-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.5rem;
  padding: 1rem 0;
  align-items: start;
  position: relative;
}
.countdown-marker {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, var(--white) 0%, #f4f7ff 100%);
  border: 2px solid var(--blue);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(10,47,255,0.18);
  flex-shrink: 0;
}
.countdown-step:last-child .countdown-marker {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--navy);
}
.countdown-body {
  background: var(--white);
  border: 1px solid rgba(10,14,26,0.06);
  border-radius: 1rem;
  padding: 1.1rem 1.4rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.countdown-step:hover .countdown-body {
  transform: translateX(2px);
  box-shadow: 0 8px 24px rgba(10,14,26,0.06);
}
.countdown-body h3 {
  font-size: 1.1rem;
  color: var(--navy);
  margin: 0 0 0.4rem;
  font-weight: 800;
}
.countdown-body p {
  font-size: 0.95rem;
  color: var(--navy);
  opacity: 0.78;
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 600px) {
  .countdown-step { grid-template-columns: 56px 1fr; gap: 1rem; }
  .countdown-marker { width: 48px; height: 48px; font-size: 0.78rem; }
  .countdown-timeline::before { left: 24px; }
}

/* Symmetric two-column split (kit / we provide) */
.handbook-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.handbook-split-col {
  background: var(--white);
  border-radius: 1.25rem;
  padding: 2rem 2rem;
  border: 1px solid rgba(10,14,26,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.handbook-split-col:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(10,14,26,0.07);
}
.handbook-split-col--bring { background: var(--light-bg); }
.handbook-split-col--provide { background: var(--blue); color: var(--white); }
.handbook-split-col--provide ul li,
.handbook-split-col--provide h3 { color: var(--white); }
.handbook-split-head {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(10,14,26,0.08);
}
.handbook-split-col--provide .handbook-split-head { border-bottom-color: rgba(255,255,255,0.18); }
.handbook-split-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.5rem;
}
.handbook-split-col--provide .handbook-split-label { color: var(--yellow); }
.handbook-split-head h3 {
  font-size: 1.4rem;
  font-weight: 900;
  margin: 0;
  letter-spacing: -0.01em;
}
.check-list--blue li::before {
  background: var(--yellow);
}
@media (max-width: 700px) {
  .handbook-split-grid { grid-template-columns: 1fr; gap: 1rem; }
  .handbook-split-col { padding: 1.5rem; }
}

/* Programme comparison table */
.programme-compare {
  max-width: 1100px;
  margin: 0 auto;
  overflow-x: auto;
}
.programme-compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(10,14,26,0.06);
}
.programme-compare-table th,
.programme-compare-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  vertical-align: top;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(10,14,26,0.06);
}
.programme-compare-table thead th {
  background: var(--navy);
  color: var(--white);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 1.25rem 1rem;
}
.programme-compare-table tbody th {
  font-weight: 700;
  color: var(--navy);
  background: var(--light-bg);
  width: 25%;
}
.programme-compare-table tbody td {
  color: var(--navy);
  text-align: center;
}
.programme-compare-table tr:last-child th,
.programme-compare-table tr:last-child td { border-bottom: none; }
.programme-compare-table tbody tr:hover td,
.programme-compare-table tbody tr:hover th { background: rgba(10,47,255,0.03); }
.programme-tag {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.programme-tag--holiday { background: var(--yellow); color: var(--navy); }
.programme-tag--residential { background: var(--blue); color: var(--white); }
.programme-tag--weekly { background: var(--white); color: var(--navy); border: 1.5px solid var(--navy); }
@media (max-width: 700px) {
  .programme-compare-table th,
  .programme-compare-table td { padding: 0.8rem 0.7rem; font-size: 0.85rem; }
  .programme-compare-table thead th { padding: 0.85rem 0.6rem; }
  .programme-tag { font-size: 0.65rem; padding: 0.25rem 0.55rem; }
}

/* Safeguarding bento (replaces 4-card grid for visual variety) */
.safeguarding-bento { padding: 5rem 0; background: var(--white); }
.bento-grid.handbook-bento {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}
.handbook-bento .bento-cell {
  background: var(--light-bg);
  border-radius: 1.25rem;
  padding: 1.75rem 1.75rem;
  border: 1px solid rgba(10,14,26,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.handbook-bento .bento-cell:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(10,14,26,0.07);
}
.handbook-bento .bento-cell--lead {
  grid-column: 1;
  grid-row: 1 / span 2;
  background: var(--navy);
  color: var(--white);
}
.handbook-bento .bento-cell--lead h3 { color: var(--white); }
.handbook-bento .bento-cell--lead .bento-eyebrow { color: var(--yellow); }
.handbook-bento .bento-cell--medical { grid-column: 2 / span 2; grid-row: 1; }
.handbook-bento .bento-cell--photos { grid-column: 2; grid-row: 2; }
.handbook-bento .bento-cell--behaviour { grid-column: 3; grid-row: 2; }
.handbook-bento .bento-cell--emergency {
  grid-column: 1 / span 3;
  grid-row: 3;
  background: var(--blue);
  color: var(--white);
}
.handbook-bento .bento-cell--emergency h3 { color: var(--white); }
.handbook-bento .bento-cell--emergency .bento-eyebrow { color: var(--yellow); }
.bento-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.65rem;
}
.handbook-bento .bento-cell h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 0.55rem;
  line-height: 1.3;
}
.handbook-bento .bento-cell p {
  font-size: 0.93rem;
  line-height: 1.55;
  color: inherit;
  opacity: 0.85;
  margin: 0 0 0.55rem;
}
.bento-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--yellow);
  border-bottom: 1px solid rgba(200,230,53,0.4);
  padding-bottom: 1px;
  transition: color 0.2s ease;
}
.bento-link:hover { color: var(--white); border-bottom-color: var(--white); }
.handbook-bento .bento-cell--lead h3 + p,
.handbook-bento .bento-cell--lead p { color: rgba(255,255,255,0.85); opacity: 1; }
.handbook-bento .bento-cell--emergency p { color: rgba(255,255,255,0.85); opacity: 1; }
@media (max-width: 1023px) {
  .bento-grid.handbook-bento {
    grid-template-columns: 1fr 1fr;
  }
  .handbook-bento .bento-cell--lead { grid-column: 1 / span 2; grid-row: 1; }
  .handbook-bento .bento-cell--medical { grid-column: 1 / span 2; grid-row: 2; }
  .handbook-bento .bento-cell--photos { grid-column: 1; grid-row: 3; }
  .handbook-bento .bento-cell--behaviour { grid-column: 2; grid-row: 3; }
  .handbook-bento .bento-cell--emergency { grid-column: 1 / span 2; grid-row: 4; }
}
@media (max-width: 600px) {
  .bento-grid.handbook-bento { grid-template-columns: 1fr; }
  .handbook-bento .bento-cell { grid-column: 1 !important; grid-row: auto !important; }
}

/* Glossary */
.glossary-list {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.glossary-item {
  background: linear-gradient(140deg, #ffffff 0%, #f4f7ff 100%);
  border-radius: 1.1rem;
  padding: 1.4rem 1.6rem 1.4rem 1.8rem;
  border: 1px solid rgba(10, 47, 255, 0.1);
  border-left: 3px solid var(--yellow);
  position: relative;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-left-color 0.35s ease, background 0.35s ease;
  transform-origin: left center;
  overflow: hidden;
}
.glossary-item::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at top right, rgba(10, 47, 255, 0.12), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.glossary-item:hover {
  transform: rotate(-1.2deg) translateY(-3px);
  background: linear-gradient(140deg, #ffffff 0%, #eef3ff 60%, #e3ecff 100%);
  border-left-color: var(--blue);
  box-shadow: 0 14px 32px rgba(10, 47, 255, 0.12), 0 2px 6px rgba(10, 14, 26, 0.06);
}
.glossary-item:hover::before { opacity: 1; }
.glossary-item:nth-child(even):hover { transform: rotate(1.2deg) translateY(-3px); }
.glossary-item dt {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 0.45rem;
  letter-spacing: -0.005em;
}
.glossary-item dd {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--navy);
  opacity: 0.82;
  margin: 0;
}
@media (max-width: 700px) {
  .glossary-list { grid-template-columns: 1fr; }
}

/* Emergency contacts grid */
.emergency-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}
.emergency-card {
  border-radius: 1.25rem;
  padding: 2rem 1.75rem;
  border: 1px solid rgba(10,14,26,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.emergency-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(10,14,26,0.07);
}
.emergency-card--primary { background: var(--blue); color: var(--white); border-color: transparent; }
.emergency-card--dsl { background: var(--navy); color: var(--white); border-color: transparent; }
.emergency-card--general { background: var(--light-bg); color: var(--navy); }
.emergency-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.65rem;
}
.emergency-card--general .emergency-eyebrow { color: var(--blue); }
.emergency-card h3 {
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0 0 0.85rem;
  line-height: 1.25;
  color: inherit;
}
.emergency-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 0.65rem;
  color: inherit;
  opacity: 0.92;
}
.emergency-card a {
  color: var(--yellow);
  font-weight: 700;
  border-bottom: 1px solid rgba(200,230,53,0.4);
  padding-bottom: 1px;
  transition: color 0.2s ease;
}
.emergency-card--general a { color: var(--blue); border-bottom-color: rgba(10,47,255,0.3); }
.emergency-card a:hover { color: var(--white); }
.emergency-card--general a:hover { color: var(--navy); }
.emergency-meta {
  margin-top: 0.85rem !important;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 0.85rem !important;
  opacity: 0.78 !important;
}
.emergency-card--general .emergency-meta { border-top-color: rgba(10,14,26,0.1); }
@media (max-width: 1023px) {
  .emergency-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   JOURNAL ARTICLE PATTERNS — meta card, drill diagrams,
   pull-quotes, cross-links (Gate 5/6 polish for blog posts)
   ============================================================ */

/* Article meta card — sits between hero and lead, info pills row */
.article-meta-wrap {
  margin-top: -2.5rem;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 5;
}
.article-meta-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--white);
  border-radius: 1.25rem;
  border: 1px solid rgba(10,14,26,0.06);
  box-shadow: 0 12px 36px rgba(10,14,26,0.08);
  overflow: hidden;
  max-width: 880px;
  margin: 0 auto;
}
.article-meta-pair {
  padding: 1rem 1.25rem;
  text-align: center;
  border-right: 1px solid rgba(10,14,26,0.06);
}
.article-meta-pair:last-child { border-right: 0; }
.article-meta-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.4rem;
}
.article-meta-value {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.005em;
}
@media (max-width: 700px) {
  .article-meta-wrap { margin-top: -1.5rem; }
  .article-meta-card { grid-template-columns: repeat(2, 1fr); }
  .article-meta-pair { border-right: 1px solid rgba(10,14,26,0.06); border-bottom: 1px solid rgba(10,14,26,0.06); }
  .article-meta-pair:nth-child(2n) { border-right: 0; }
  .article-meta-pair:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Drill diagrams — figure wrapper for inline SVG illustrations */
.drill-diagram {
  margin: 2rem auto;
  max-width: 520px;
}
.drill-diagram svg {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(10,14,26,0.06);
  border: 1px solid rgba(10,14,26,0.05);
}
.drill-diagram figcaption {
  margin-top: 0.85rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--navy);
  opacity: 0.65;
  font-style: italic;
  letter-spacing: 0.005em;
}

/* Drill video — Drive preview embed wrapped in a 16:9 frame with the same
   visual language as drill-diagram (post #218 + #231, Stage 4e). */
.drill-video {
  margin: 2rem auto;
  max-width: 720px;
}
.drill-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(10, 14, 26, 0.12);
  border: 1px solid rgba(10, 14, 26, 0.06);
  background: #0a0e1a;
}
.drill-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.drill-video figcaption {
  margin-top: 0.85rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--navy);
  opacity: 0.65;
  font-style: italic;
  letter-spacing: 0.005em;
}

/* 30-Second Challenge callout — placed after each drill's "Why it works" para */
.drill-challenge {
  position: relative;
  margin: 1.75rem 0 2.5rem;
  padding: 1.4rem 1.5rem 1.25rem;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--navy) 0%, #14182d 60%, var(--blue) 220%);
  color: #fff;
  box-shadow: 0 14px 36px rgba(10, 14, 26, 0.18);
}
.drill-challenge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background: radial-gradient(circle at 100% 0%, rgba(200, 230, 53, 0.18), transparent 60%);
}
.drill-challenge-badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 0.7rem;
  position: relative;
  z-index: 1;
}
.drill-challenge p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  position: relative;
  z-index: 1;
}
.drill-challenge p strong { color: var(--yellow); font-weight: 800; }

/* Article pull-quote — accent line + decorative quote glyph + large italic */
.article-pullquote {
  margin: 2.5rem 0;
  padding: 0.5rem 0 0.5rem 2rem;
  border-left: 4px solid var(--yellow);
  position: relative;
}
.article-pullquote::before {
  content: '\201C';
  position: absolute;
  left: 1.5rem;
  top: -1.5rem;
  font-size: 5rem;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--yellow);
  opacity: 0.35;
  line-height: 1;
  pointer-events: none;
}
.article-pullquote p {
  font-size: 1.4rem;
  line-height: 1.45;
  color: var(--navy);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.005em;
  margin: 0;
}
@media (max-width: 700px) {
  .article-pullquote { padding-left: 1.5rem; }
  .article-pullquote p { font-size: 1.15rem; }
  .article-pullquote::before { font-size: 3.5rem; left: 1rem; top: -1rem; }
}

/* "Try next" article cross-links section */
.article-cross-links {
  background: var(--light-bg);
  padding: 4.5rem 0 3.5rem;
}
.article-cross-links-head {
  text-align: center;
  font-size: 1.6rem;
  color: var(--navy);
  margin: 0 0 2.25rem;
  font-weight: 800;
}
.article-cross-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}
.article-cross-grid .journal-card {
  background: var(--white);
}
@media (max-width: 1023px) {
  .article-cross-grid { grid-template-columns: 1fr 1fr; }
  .article-cross-grid > :nth-child(3) { grid-column: 1 / span 2; max-width: 540px; margin: 0 auto; }
}
@media (max-width: 700px) {
  .article-cross-grid { grid-template-columns: 1fr; }
  .article-cross-grid > :nth-child(3) { grid-column: 1; max-width: none; }
}

/* Tighten article body rhythm — more breathing room around H2s */
.article-body h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.article-body p { line-height: 1.7; }

/* ============================================================
   Aceternity TRACING BEAM (named component, ui.aceternity.com)
   Vertical scroll-tracking line + animated dot down the article.
   Static line is CSS; the dot is positioned by scripts.js.
   ============================================================ */
.tracing-beam {
  position: relative;
  padding-left: 3.25rem;
  max-width: 760px;
  margin: 0 auto;
}
.tracing-beam::before {
  content: '';
  position: absolute;
  left: 1.25rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(10,47,255,0.16) 6%,
    rgba(10,47,255,0.16) 94%,
    transparent 100%);
  border-radius: 2px;
}
.tracing-beam-fill {
  position: absolute;
  left: 1.25rem;
  top: 0;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, var(--blue) 0%, var(--yellow) 100%);
  border-radius: 2px;
  transition: height 0.12s linear;
  pointer-events: none;
  z-index: 1;
}
.tracing-beam-dot {
  position: absolute;
  left: 1.25rem;
  top: 0;
  width: 14px;
  height: 14px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--blue);
  box-shadow: 0 0 0 4px rgba(10,47,255,0.18), 0 4px 14px rgba(10,47,255,0.25);
  transition: top 0.12s linear;
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 700px) {
  .tracing-beam { padding-left: 2.25rem; }
  .tracing-beam::before,
  .tracing-beam-fill,
  .tracing-beam-dot { left: 0.85rem; }
}

/* === Academies Hero (21st.dev waitlist-hero adaptation) ===================
   Concentric rotating rings of club emblems with perspective tilt, Matico
   logo centered, headline + newsletter form. Bottom gradient fades emblems
   into the page background so the form sits cleanly. */
.academies-hero {
  position: relative;
  width: 100%;
  min-height: 560px;
  background: #0a0e1a;
  overflow: hidden;
  isolation: isolate;
}
.academies-hero-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  perspective: 1200px;
  transform: perspective(1200px) rotateX(15deg);
  transform-origin: center bottom;
  z-index: 0;
}
.academies-hero-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  will-change: transform;
}
.academies-hero-ring img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(220, 230, 245, 0.92) 100%);
  padding: 14px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 14px 40px rgba(0, 0, 0, 0.6),
    0 0 32px rgba(10, 47, 255, 0.25);
  object-fit: contain;
}
.academies-hero-ring--outer {
  animation: academies-ring-spin 90s linear infinite;
}
.academies-hero-ring--outer img {
  width: 96px;
  height: 96px;
  margin-top: -48px;
  margin-left: -48px;
  opacity: 0.78;
}
.academies-hero-ring--mid {
  animation: academies-ring-spin 70s linear infinite reverse;
}
.academies-hero-ring--mid img {
  width: 116px;
  height: 116px;
  margin-top: -58px;
  margin-left: -58px;
  opacity: 0.92;
}
.academies-hero-ring--inner {
  animation: academies-ring-spin 50s linear infinite;
}
.academies-hero-ring--inner img {
  width: 136px;
  height: 136px;
  margin-top: -68px;
  margin-left: -68px;
  opacity: 1;
}
@keyframes academies-ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.academies-hero-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to top, #0a0e1a 0%, #0a0e1a 50%, rgba(10, 14, 26, 0.92) 60%, rgba(10, 14, 26, 0.5) 78%, rgba(10, 14, 26, 0.1) 100%);
}
.academies-hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 720px;
  height: 720px;
  margin-top: -360px;
  margin-left: -360px;
  background: radial-gradient(circle, rgba(10, 47, 255, 0.18) 0%, rgba(200, 230, 53, 0.06) 35%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}
.academies-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 4rem 1.25rem 4rem;
  gap: 1rem;
  text-align: center;
}
.academies-hero-content > * {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
}
.academies-hero-content .academies-hero-form { text-shadow: none; }
.academies-hero-content .academies-hero-logo { text-shadow: none; }
.academies-hero-logo {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  overflow: hidden;
  background: #03022c;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
  margin-bottom: 0.5rem;
}
.academies-hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  display: block;
}
.academies-hero-eyebrow {
  color: var(--yellow);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0;
}
.academies-hero-title {
  color: var(--white);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 18ch;
}
.academies-hero-sub {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
  max-width: 50ch;
}
.academies-hero-form {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 60px;
  margin-top: 1rem;
}
.academies-hero-form input[type="email"] {
  width: 100%;
  height: 60px;
  padding: 0 168px 0 24px;
  border-radius: 999px;
  border: none;
  outline: none;
  background: rgba(39, 39, 42, 0.95);
  color: var(--white);
  font-size: 1rem;
  font-family: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 24px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.2s ease;
}
.academies-hero-form input[type="email"]::placeholder { color: #71717a; }
.academies-hero-form input[type="email"]:focus {
  box-shadow: inset 0 0 0 1px var(--yellow), 0 6px 24px rgba(0, 0, 0, 0.4);
}
.academies-hero-form button {
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
  min-width: 156px;
  padding: 0 22px;
  border: none;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--navy);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
}
.academies-hero-form button:hover { filter: brightness(1.08); }
.academies-hero-form button:active { transform: scale(0.97); }
.academies-hero-form-success {
  display: none;
  align-items: center;
  gap: 6px;
}
.academies-hero-form.is-success input[type="email"] { opacity: 0.5; }
.academies-hero-form.is-success button {
  background: #10b981;
  color: var(--white);
  animation: academies-pulse 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.academies-hero-form.is-success .academies-hero-form-label { display: none; }
.academies-hero-form.is-success .academies-hero-form-success {
  display: inline-flex;
}
@keyframes academies-pulse {
  0% { transform: scale(0.92); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@media (max-width: 768px) {
  .academies-hero,
  .academies-hero-content { min-height: 620px; }
  .academies-hero-stage { transform: perspective(1200px) rotateX(10deg); }
  .academies-hero-ring--outer img { width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; }
  .academies-hero-ring--mid img { width: 70px; height: 70px; margin-top: -35px; margin-left: -35px; }
  .academies-hero-ring--inner img { width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; }
  .academies-hero-form { max-width: 90%; }
  .academies-hero-form input[type="email"] { padding-right: 130px; }
  .academies-hero-form button { min-width: 120px; font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .academies-hero-ring { animation: none !important; }
}

/* === Parents Hero (cnippet Vercep Hero-1 adaptation) =====================
   Photo-led trust section: dark image background, top zone with 5★ badge +
   credentials marquee, bottom zone with split headline + intro paragraph.
   Used on /parent-handbook/ as section 2. */
.parents-hero {
  position: relative;
  width: 100%;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
}
.parents-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.parents-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.parents-hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 26, 0.55) 0%, rgba(10, 14, 26, 0.35) 35%, rgba(10, 14, 26, 0.55) 65%, rgba(10, 14, 26, 0.85) 100%);
}
.parents-hero-top {
  position: relative;
  z-index: 2;
  padding-top: 2.5rem;
}
.parents-hero-top-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.parents-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 0.85rem 0.5rem 0.7rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  align-self: flex-start;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}
.parents-hero-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--yellow);
}
.parents-hero-badge-text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.parents-hero-badge-text strong {
  color: var(--white);
  font-weight: 700;
}
.parents-hero-badge-text span {
  color: rgba(255, 255, 255, 0.72);
}
.parents-hero-marquee {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  padding: 0.85rem 0;
  overflow: hidden;
  margin: 0 calc(-1 * (50vw - 50%));
}
.parents-hero-marquee::before,
.parents-hero-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.parents-hero-marquee::before {
  left: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
}
.parents-hero-marquee::after {
  right: 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
}
.parents-hero-marquee-track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: parents-hero-marquee 40s linear infinite;
}
.parents-hero-marquee:hover .parents-hero-marquee-track {
  animation-play-state: paused;
}
.parents-hero-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  white-space: nowrap;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}
.parents-hero-marquee-value {
  color: var(--yellow);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}
.parents-hero-marquee-label {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.parents-hero-marquee-emoji {
  font-size: 1.05rem;
  line-height: 1;
}
@keyframes parents-hero-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}

.parents-hero-bottom {
  position: relative;
  z-index: 2;
  padding: 0 0 4rem;
}
.parents-hero-bottom-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .parents-hero-bottom-inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
  }
}
.parents-hero-bottom-left {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}
.parents-hero-bottom-right {
  flex: 1 1 40%;
}
.parents-hero-title {
  color: var(--white);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 14ch;
}
.parents-hero-title span {
  color: var(--yellow);
  font-style: italic;
  font-weight: 500;
}
.parents-hero-bottom-right p {
  color: var(--yellow);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.45;
  margin: 0;
  letter-spacing: 0.005em;
}
@media (min-width: 768px) {
  .parents-hero-bottom-right p { text-align: right; }
}
.parents-hero-cta {
  display: inline-flex;
  align-items: stretch;
  background: var(--white);
  color: var(--navy);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 0;
  overflow: hidden;
  transition: transform 0.15s ease, background 0.15s ease;
}
.parents-hero-cta:hover {
  background: var(--yellow);
  transform: translateY(-1px);
}
.parents-hero-cta-label {
  padding: 0.85rem 1.1rem;
}
.parents-hero-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.85rem;
  border-left: 1px solid rgba(0, 0, 0, 0.18);
}

@media (max-width: 600px) {
  .parents-hero { min-height: 580px; }
  .parents-hero-marquee-track { gap: 1.75rem; }
  .parents-hero-marquee-label { font-size: 0.72rem; letter-spacing: 0.12em; }
  .parents-hero-bottom { padding-bottom: 2.5rem; }
  .parents-hero-bottom-right p { font-size: 1rem; }
}

/* ============================================================
   PARENT HANDBOOK CONTRAST FIXES (post-audit, 2026-04-29)
   - Bento "Emergency procedure" panel headline was rendering navy
     on bright blue (default .handbook-bento .bento-cell h3 won
     specificity battle vs the variant override above).
   - Emergency cards (.emergency-card--primary) had an unclassed
     <p> body paragraph that fell into the broad welcome rule.
   - methodology-strip--blue body copy was navy@0.8 — unreadable.
   ============================================================ */
.handbook-bento .bento-cell--emergency h3,
.handbook-bento .bento-cell--emergency .bento-eyebrow ~ * {
  color: var(--white);
}
.handbook-bento .bento-cell--emergency p {
  color: rgba(255, 255, 255, 0.9);
  opacity: 1;
}

.welcome .emergency-card--primary p,
.welcome .emergency-card--dsl p,
.emergency-card--primary p,
.emergency-card--dsl p {
  color: var(--white);
  opacity: 0.92;
}
.welcome .emergency-card--primary .emergency-meta,
.welcome .emergency-card--dsl .emergency-meta,
.emergency-card--primary .emergency-meta,
.emergency-card--dsl .emergency-meta {
  color: rgba(255, 255, 255, 0.85);
}

.methodology-strip.methodology-strip--blue .method-step h3 {
  color: var(--white);
}
.methodology-strip.methodology-strip--blue .method-step p {
  color: var(--white);
  opacity: 1;
}
.methodology-strip.methodology-strip--blue .section-subtitle,
.methodology-strip.methodology-strip--blue p.section-subtitle {
  color: var(--white);
  opacity: 0.95;
}

/* === Neon Flow M (yashvw25/neon-flow, M-shape via target hijack) =========
   The 21st.dev original ships a Three.js cursor cursor (tubes1.min.js) that
   makes a tube-snake follow a target. The "infinity" appearance is just an
   idle Lissajous (sleepRadiusX/Y, sleepTimeScale1/2). To get an M shape we
   keep the bundle as-is and override `three.onBeforeRender` to drive
   `tubes.target` along an M parametric path when the cursor isn't hovering.
   See template-neon-m.njk for the JS. */
.neon-m-stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% 50%, #15102a 0%, #08060f 75%);
  overflow: hidden;
  cursor: crosshair;
  isolation: isolate;
}
.neon-m-stage canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  touch-action: none;
}
.neon-m-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

/* === Hero Neon-M overlay (used on /enquire/) ===========================
   Layered above .hero-bg image but below .container text. Canvas inherits
   its size from absolute positioning. */
.hero--neon-m { position: relative; isolation: isolate; }
.hero--neon-m .hero-bg { z-index: 0; }
.hero--neon-m .hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(8,6,15,0.55) 0%, rgba(8,6,15,0.85) 75%);
  z-index: 1;
}
.hero-neon-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 2;
  pointer-events: none;
  touch-action: none;
  mix-blend-mode: screen;
}
.hero--neon-m .container { position: relative; z-index: 3; }

/* About: small white gap restored between hero and academies, with elliptical curves
   at top + bottom of academies-hero so it mirrors the hero's bottom curve and bookends
   the section elegantly. */
.hero + .academies-hero,
.hero--page + .academies-hero {
  margin-top: 0;
  border-top-left-radius: 100% 70px;
  border-top-right-radius: 100% 70px;
  border-bottom-left-radius: 100% 70px;
  border-bottom-right-radius: 100% 70px;
}

/* === Journal tile upgrade (Aceternity HoverEffect / Magic UI MagicCard mix)
   Apply to existing .journal-card markup without HTML changes. */
.journal-grid {
  gap: 2rem;
}
.journal-card {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 6px 22px rgba(15, 23, 42, 0.05);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease;
}
.journal-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(10, 47, 255, 0) 0%, rgba(10, 47, 255, 0.55) 35%, rgba(200, 230, 53, 0.65) 70%, rgba(10, 47, 255, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 2;
}
.journal-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 22px 50px -10px rgba(10, 47, 255, 0.18);
}
.journal-card:hover::before { opacity: 1; }
.journal-card-img {
  position: relative;
  aspect-ratio: 16 / 10;
}
.journal-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 26, 0) 35%, rgba(10, 14, 26, 0.55) 100%);
  pointer-events: none;
  opacity: 0.85;
}
.journal-card-img img { transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
.journal-card:hover .journal-card-img img { transform: scale(1.08); }
.journal-card-body {
  position: relative;
  padding: 1.5rem 1.6rem 1.65rem;
}
/* Pull tag up so it overlaps the image edge */
.journal-card .journal-tag {
  position: absolute;
  top: -0.85rem;
  left: 1.6rem;
  background: var(--white);
  color: var(--blue);
  border: 1px solid rgba(10, 47, 255, 0.18);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  z-index: 3;
}
.journal-card-body h3 {
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--navy);
  margin: 1.1rem 0 0.6rem;
  line-height: 1.22;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.journal-card:hover .journal-card-body h3 { color: var(--blue); }
.journal-card-body p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: #4b5564;
  opacity: 1;
}
.journal-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--navy);
  opacity: 0.65;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.journal-card-meta::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* === CTA strip — neon-M variant (used on /what-we-do/) ================== */
.cta-strip--neon-m {
  position: relative;
  isolation: isolate;
  background: #000;
  margin-top: 4rem;        /* breathing room above the section */
  padding: 5rem 0 5rem;
  overflow: hidden;
}
.cta-strip--neon-m .cta-neon-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
  pointer-events: none;
  touch-action: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}
.cta-strip--neon-m .cta-strip-inner {
  position: relative;
  z-index: 2;
}
.cta-strip--neon-m .cta-strip-eyebrow,
.cta-strip--neon-m .cta-strip-h3 {
  color: var(--white);
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.7);
}

/* === Toolbox bucket section (0xUrvish/bucket adaptation) ================
   A chip falls from above into the bucket, rests on the rim for ~1.7s,
   then drops into the bucket and disappears, revealing the next chip. */
.toolbox-section {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f8 100%);
  padding-top: 5rem;
  padding-bottom: 6rem;
}
.toolbox-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  height: 360px;
  margin: 0 auto;
}
.toolbox-bucket {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 220px;
  pointer-events: none;
  z-index: 1;
}
.toolbox-chip-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 220px;
  pointer-events: none;
  z-index: 2;
}
.toolbox-chip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -60px) scale(0.85);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1.1rem 0.6rem 0.7rem;
  background: var(--white);
  border: 1px solid rgba(10, 47, 255, 0.16);
  border-radius: 999px;
  box-shadow: 0 14px 36px rgba(10, 47, 255, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
  opacity: 0;
  transition:
    transform 0.65s cubic-bezier(0.34, 1.36, 0.55, 1),
    opacity 0.4s ease;
  white-space: nowrap;
  z-index: 3;
}
.toolbox-chip.is-resting {
  transform: translate(-50%, 100px) scale(1);  /* sits just above bucket rim */
  opacity: 1;
}
.toolbox-chip.is-falling {
  transform: translate(-50%, 260px) scale(0.55);  /* drops into the bucket */
  opacity: 0;
  transition:
    transform 0.65s cubic-bezier(0.55, 0, 0.6, 0.4),
    opacity 0.45s ease 0.2s;
}
.toolbox-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(10, 47, 255, 0.08);
  font-size: 1.2rem;
}
.toolbox-chip-text {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.toolbox-chip-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
}
.toolbox-chip-desc {
  font-size: 0.78rem;
  color: #4b5564;
  font-weight: 500;
}
@media (max-width: 600px) {
  .toolbox-stage { height: 300px; }
  .toolbox-bucket { height: 180px; }
  .toolbox-chip { padding: 0.5rem 0.9rem 0.5rem 0.5rem; }
  .toolbox-chip-icon { width: 34px; height: 34px; font-size: 1.05rem; }
  .toolbox-chip-title { font-size: 0.85rem; }
  .toolbox-chip-desc { font-size: 0.72rem; }
}

/* === Roadblocks marquee (cnippet/vercep-feature-1 adaptation) =========== */
.roadblocks {
  background: #fffce5;
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.roadblocks-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2.5rem;
  padding: 0 1.25rem;
}
.roadblocks-head h2 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 1rem;
}
.roadblocks-head p {
  color: #4b5564;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto;
}
.roadblocks-marquees {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 2rem;
  position: relative;
}
.roadblocks-marquees::before,
.roadblocks-marquees::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.roadblocks-marquees::before {
  left: 0;
  background: linear-gradient(90deg, #fffce5 0%, transparent 100%);
}
.roadblocks-marquees::after {
  right: 0;
  background: linear-gradient(270deg, #fffce5 0%, transparent 100%);
}
.roadblocks-marquee {
  overflow: hidden;
  width: 100%;
}
.roadblocks-track {
  display: inline-flex;
  gap: 0.75rem;
  white-space: nowrap;
  animation: roadblocks-scroll 45s linear infinite;
}
.roadblocks-marquee[data-row="1"] .roadblocks-track {
  animation-duration: 50s;
  animation-direction: reverse;
}
.roadblocks-marquee[data-row="2"] .roadblocks-track {
  animation-duration: 42s;
}
.roadblocks-marquee:hover .roadblocks-track { animation-play-state: paused; }
.roadblocks-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  background: #edebbe;
  border: 1px solid rgba(10, 47, 255, 0.12);
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 4px;
  white-space: nowrap;
}
@keyframes roadblocks-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

/* === FAQ shadcn accordion (reapollo/faq-accordion-block-shadcnui) ====== */
.faq-eyebrow {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.5rem;
}
.faq-heading {
  text-align: center;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 auto 2.5rem;
  max-width: 720px;
  line-height: 1.2;
}
.faq-shadcn-accordion {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.faq-shadcn-item {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  transition: background-color 0.2s ease;
}
.faq-shadcn-item:hover { background: rgba(10, 47, 255, 0.025); }
.faq-shadcn-item[open] { background: rgba(10, 47, 255, 0.035); }
.faq-shadcn-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--navy);
  letter-spacing: -0.005em;
  transition: color 0.2s ease;
  gap: 1rem;
}
.faq-shadcn-question::-webkit-details-marker { display: none; }
.faq-shadcn-question:hover { color: var(--blue); }
.faq-shadcn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(10, 47, 255, 0.08);
  color: var(--blue);
  flex-shrink: 0;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
}
.faq-shadcn-item[open] .faq-shadcn-icon {
  transform: rotate(45deg);
  background: var(--blue);
  color: var(--white);
}
.faq-shadcn-answer {
  padding: 0 1.25rem 1.5rem;
  animation: faqShadcnFade 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-shadcn-answer p {
  color: #4b5564;
  font-size: 0.97rem;
  line-height: 1.65;
  margin: 0;
  max-width: 640px;
}
@keyframes faqShadcnFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Player Analysis hub grid ============================================ */
.player-grid-section {
  padding: 4rem 0 6rem;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f8 100%);
}
.player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}
.player-card {
  position: relative;
  display: block;
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 6px 22px rgba(15, 23, 42, 0.05);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease;
  isolation: isolate;
}
.player-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(10, 47, 255, 0) 0%, rgba(10, 47, 255, 0.55) 35%, rgba(200, 230, 53, 0.65) 70%, rgba(10, 47, 255, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 2;
}
.player-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px -10px rgba(10, 47, 255, 0.22);
}
.player-card:hover::before { opacity: 1; }
.player-card-img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--navy);
}
.player-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  filter: saturate(1.1);
}
.player-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(10, 14, 26, 0.65) 100%);
  pointer-events: none;
}
.player-card:hover .player-card-img img { transform: scale(1.06); }
.player-card-body {
  padding: 1.4rem 1.45rem 1.6rem;
}
.player-card-position {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blue);
  margin-bottom: 0.55rem;
}
.player-card-body h3 {
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 0.55rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.player-card-tagline {
  color: #4b5564;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}
.player-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--blue);
  transition: gap 0.2s ease;
}
.player-card:hover .player-card-cta { gap: 0.55rem; }

/* === Glassmorphism portfolio block (reapollo adaptation) ================ */
.glass-portfolio {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 5rem;
  isolation: isolate;
  background: #050714;
}
.glass-portfolio-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 20% 30%, rgba(10, 47, 255, 0.25) 0%, transparent 60%),
    radial-gradient(50% 40% at 80% 80%, rgba(200, 230, 53, 0.15) 0%, transparent 60%),
    linear-gradient(135deg, #060818 0%, #0c0e22 100%);
  pointer-events: none;
}
.glass-portfolio .article-back { color: rgba(255,255,255,0.65); }
.glass-portfolio .article-back:hover { color: var(--white); }
.glass-portfolio-card {
  position: relative;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  padding: 3rem 2.5rem;
  overflow: hidden;
}
.glass-portfolio-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}
.glass-portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  position: relative;
}
@media (min-width: 1024px) {
  .glass-portfolio-grid { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; }
}
.glass-portfolio-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
  backdrop-filter: blur(8px);
  margin-bottom: 1.5rem;
}
.glass-portfolio-title {
  color: var(--white);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 1.1rem;
}
.glass-portfolio-bio {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 2rem;
  max-width: 36em;
}
.glass-portfolio-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-bottom: 2rem;
}
@media (max-width: 600px) {
  .glass-portfolio-highlights { grid-template-columns: 1fr; }
}
.glass-portfolio-highlight {
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.glass-portfolio-highlight:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
}
.glass-portfolio-highlight-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.glass-portfolio-highlight-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.005em;
}
.glass-portfolio-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.glass-portfolio-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Right column profile card */
.glass-portfolio-profile {
  position: relative;
  height: 100%;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.glass-portfolio-profile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 50% at 50% 0%, rgba(10, 47, 255, 0.25) 0%, transparent 70%);
  pointer-events: none;
  border-radius: inherit;
}
.glass-portfolio-avatar-wrap {
  position: relative;
  margin-bottom: 1.4rem;
}
.glass-portfolio-avatar-glow {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 47, 255, 0.35) 0%, transparent 65%);
  filter: blur(24px);
}
.glass-portfolio-avatar {
  position: relative;
  width: 144px;
  height: 144px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
}
.glass-portfolio-profile-name {
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
  letter-spacing: -0.005em;
}
.glass-portfolio-profile-role {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1.2rem;
}
.glass-portfolio-profile-tagline {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 1.5rem;
  max-width: 32ch;
}
.glass-portfolio-meta {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
  width: 100%;
  justify-content: center;
}
.glass-portfolio-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.glass-portfolio-meta-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.4);
}
.glass-portfolio-meta-value {
  font-size: 0.85rem;
  color: var(--white);
  font-weight: 600;
}
.glass-portfolio-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}
.glass-portfolio-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.glass-portfolio-link:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
}
.glass-portfolio-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
  margin-right: 0.7rem;
}
.glass-portfolio-link-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}
.glass-portfolio-link-label {
  font-size: 0.85rem;
  font-weight: 600;
}
.glass-portfolio-link-handle {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
}
.glass-portfolio-link-arrow {
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease, color 0.2s ease;
}
.glass-portfolio-link:hover .glass-portfolio-link-arrow {
  transform: translate(2px, -2px);
  color: var(--white);
}

@media (max-width: 768px) {
  .glass-portfolio { padding: 3.5rem 0 3rem; }
  .glass-portfolio-card { padding: 1.75rem 1.4rem; border-radius: 22px; }
  .glass-portfolio-profile { padding: 2rem 1.4rem; }
  .glass-portfolio-avatar { width: 120px; height: 120px; }
}

/* === Player profile training grid ======================================= */
.training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.training-item {
  position: relative;
  padding: 1.75rem 1.5rem;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.training-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(10, 47, 255, 0.12);
}
.training-num {
  display: inline-block;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}
.training-item h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.55rem;
  line-height: 1.3;
}
.training-item p {
  font-size: 0.92rem;
  color: #4b5564;
  line-height: 1.55;
  margin: 0;
}


/* === Player profile timeline (v2 — single column, comprehensive) ======== */
.player-timeline-v2 {
  position: relative;
  margin: 3.5rem auto 1rem;
  max-width: 880px;
  padding: 0;
  list-style: none;
}
.player-timeline-v2::before {
  content: '';
  position: absolute;
  left: 119px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 47, 255, 0.22) 6%, rgba(10, 47, 255, 0.22) 94%, transparent 100%);
  z-index: 0;
}
.player-timeline-v2-item {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.75rem;
  padding-bottom: 2.5rem;
  z-index: 1;
}
.player-timeline-v2-item:last-child { padding-bottom: 0; }

.player-timeline-v2-marker {
  position: relative;
  text-align: right;
  padding-right: 1.5rem;
  padding-top: 0.1rem;
  align-self: start;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  line-height: 1.1;
}
.player-timeline-v2-year {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: 0.02em;
}
.player-timeline-v2-age {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}
.player-timeline-v2-dot {
  position: absolute;
  top: 12px;
  right: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--blue);
  box-shadow: 0 0 0 4px rgba(10, 47, 255, 0.12);
}

.player-timeline-v2-card {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  padding: 1.6rem 1.8rem 1.4rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  transition: border-color 0.32s ease, box-shadow 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.player-timeline-v2-card:hover {
  border-color: rgba(10, 47, 255, 0.18);
  box-shadow: 0 14px 32px rgba(10, 47, 255, 0.1);
  transform: translateY(-2px);
}
.player-timeline-v2-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.6rem;
  line-height: 1.32;
}
.player-timeline-v2-lead {
  font-size: 0.96rem;
  color: #4b5564;
  line-height: 1.65;
  margin: 0 0 1.1rem;
}

.player-timeline-v2-meta {
  margin: 0;
  padding: 1rem 0 0.25rem;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  display: flex;
  flex-direction: column;
}
.player-timeline-v2-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.1rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
  align-items: baseline;
}
.player-timeline-v2-row:last-child { border-bottom: none; }
.player-timeline-v2-row dt {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.5);
  margin: 0;
  padding: 0;
}
.player-timeline-v2-row dd {
  margin: 0;
  font-size: 0.9rem;
  color: #2c3441;
  line-height: 1.6;
}
.player-timeline-v2-row--copy dt { color: var(--blue); }
.player-timeline-v2-row--copy dd {
  color: var(--navy);
  font-weight: 500;
}

/* Interesting fact, highlighted soft-yellow band that pops out of the list */
.player-timeline-v2-row--fact {
  margin: 0.6rem -0.85rem;
  padding: 0.95rem 0.95rem;
  background: linear-gradient(180deg, rgba(200, 230, 53, 0.16) 0%, rgba(200, 230, 53, 0.08) 100%);
  border: 1px solid rgba(200, 230, 53, 0.5);
  border-radius: 10px;
  position: relative;
  align-items: flex-start;
}
.player-timeline-v2-row--fact::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--yellow);
  border-radius: 10px 0 0 10px;
}
.player-timeline-v2-row--fact dt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #5a6e00;
  padding-top: 0.05rem;
}
.player-timeline-v2-row--fact dt svg {
  flex-shrink: 0;
  color: #8a7400;
}
.player-timeline-v2-row--fact dd {
  color: #2c3441;
  font-style: italic;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .player-timeline-v2-row--fact { margin: 0.5rem -0.5rem; }
}

.player-timeline-v2-sources {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.player-timeline-v2-sources-label {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.45);
  margin-right: 0.25rem;
}
.player-timeline-v2-sources a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.65rem;
  border: 1px solid rgba(10, 47, 255, 0.16);
  border-radius: 999px;
  background: rgba(10, 47, 255, 0.04);
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.player-timeline-v2-sources a:hover {
  background: rgba(10, 47, 255, 0.1);
  border-color: rgba(10, 47, 255, 0.4);
}
.player-timeline-v2-sources a svg { opacity: 0.65; flex-shrink: 0; }

@media (max-width: 720px) {
  .player-timeline-v2::before { left: 14px; }
  .player-timeline-v2-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding-left: 2.4rem;
    padding-bottom: 2rem;
  }
  .player-timeline-v2-marker {
    text-align: left;
    padding-right: 0;
    padding-left: 0;
    margin-left: -2.4rem;
  }
  .player-timeline-v2-year { font-size: 1.25rem; display: inline-block; }
  .player-timeline-v2-age {
    display: inline-block;
    margin-left: 0.6rem;
    margin-top: 0;
  }
  .player-timeline-v2-dot {
    top: 6px;
    right: auto;
    left: -2.85rem;
  }
  .player-timeline-v2-card { padding: 1.25rem 1.25rem 1.1rem; }
  .player-timeline-v2-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* === Methodology strip — neon-M variant (used on /football-camps/) ====== */
.methodology-strip--neon-m {
  position: relative;
  isolation: isolate;
  background: #050714 !important;
  overflow: hidden;
}
.methodology-strip--neon-m .methodology-neon-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
  pointer-events: none;
  touch-action: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}
.methodology-strip--neon-m > .container {
  position: relative;
  z-index: 2;
}
.methodology-strip--neon-m .section-tag {
  background: rgba(200, 230, 53, 0.15);
  color: var(--yellow);
  border: 1px solid rgba(200, 230, 53, 0.3);
}
.methodology-strip--neon-m .methodology-strip-head h2 {
  color: var(--white) !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.7);
}
.methodology-strip--neon-m .methodology-strip-head .section-subtitle {
  color: rgba(255, 255, 255, 0.85) !important;
}
.methodology-strip--neon-m .step-circle {
  background: var(--white);
  border: 2px solid var(--yellow);
  color: var(--blue);
}
.methodology-strip--neon-m .method-step h3 {
  color: var(--white) !important;
}
.methodology-strip--neon-m .method-step p {
  color: rgba(255, 255, 255, 0.85) !important;
}
.methodology-strip--neon-m .method-step-connector .beam-track {
  background: rgba(200, 230, 53, 0.25);
}

/* === Journal: bigger, coloured next-step tags + 4-card grid =============
   "What we cover" tags now per-category with distinct brand-tinted backgrounds. */
.next-steps-strip.next-steps-strip--four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1023px) {
  .next-steps-strip.next-steps-strip--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .next-steps-strip.next-steps-strip--four { grid-template-columns: 1fr; }
}
.next-step-num {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  padding: 0.45rem 0.95rem !important;
  border-radius: 999px !important;
  display: inline-block !important;
  text-transform: none !important;
  border: 1.5px solid currentColor;
  background: rgba(10, 47, 255, 0.08);
}
.next-step-num--players {
  color: #0a2fff;
  background: rgba(10, 47, 255, 0.10);
  border-color: rgba(10, 47, 255, 0.32);
}
.next-step-num--parents {
  color: #c47200;
  background: rgba(255, 178, 56, 0.18);
  border-color: rgba(255, 178, 56, 0.5);
}
.next-step-num--camps {
  color: #1f9d55;
  background: rgba(45, 216, 129, 0.16);
  border-color: rgba(45, 216, 129, 0.45);
}
.next-step-num--greats {
  color: #6028ce;
  background: rgba(96, 40, 206, 0.13);
  border-color: rgba(96, 40, 206, 0.4);
}

/* === Study the Greats band — distinct dark divider band for player analyses */
.study-greats-band {
  position: relative;
  background: linear-gradient(180deg, #0a0e1a 0%, #14182d 100%);
  padding: 5rem 0 6rem;
  overflow: hidden;
  isolation: isolate;
}
.study-greats-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 18% 30%, rgba(96, 40, 206, 0.28) 0%, transparent 60%),
    radial-gradient(50% 40% at 85% 75%, rgba(200, 230, 53, 0.10) 0%, transparent 60%);
  pointer-events: none;
}
.study-greats-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  color: var(--yellow);
  margin-bottom: 2rem;
  position: relative;
}
.study-greats-divider-line {
  flex: 0 1 220px;
  max-width: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200, 230, 53, 0.6) 50%, transparent 100%);
}
.study-greats-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3rem;
  position: relative;
}
.study-greats-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.85rem;
}
.study-greats-head h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 1rem;
}
.study-greats-head p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}
.study-greats-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  text-decoration: none;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  position: relative;
  max-width: 1080px;
  margin: 0 auto 2rem;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease;
}
@media (min-width: 768px) {
  .study-greats-card { grid-template-columns: 0.9fr 1.1fr; }
}
.study-greats-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 230, 53, 0.5);
}
.study-greats-card-img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.study-greats-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.study-greats-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10, 14, 26, 0.5) 100%);
  pointer-events: none;
}
.study-greats-card:hover .study-greats-card-img img { transform: scale(1.06); }
.study-greats-card-body {
  padding: 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
}
.study-greats-card-eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--yellow);
}
.study-greats-card-body h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}
.study-greats-card-body p {
  font-size: 0.97rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
.study-greats-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: 0.04em;
  margin-top: 0.4rem;
  transition: gap 0.2s ease;
}
.study-greats-card:hover .study-greats-card-cta { gap: 0.7rem; }
.study-greats-cta-row {
  text-align: center;
  margin-top: 1rem;
}

/* === FA logo cell on .safeguarding-band ================================= */
.safeguarding-band-cell--logo {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
.safeguarding-band-logo {
  width: auto;
  height: 38px;
  filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.12));
}
.safeguarding-band-cell--logo span {
  color: rgba(255,255,255,0.82);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.74rem;
}

/* === Roadblocks polish ==================================================
   Brand-aligned background, curved top + bottom (mirrors academies-hero
   pattern), tighter on-page typography, and hover popover for answers. */
.roadblocks {
  background: linear-gradient(180deg, #f4f6fc 0%, #eaeef9 100%);
  border-top-left-radius: 100% 70px;
  border-top-right-radius: 100% 70px;
  border-bottom-left-radius: 100% 70px;
  border-bottom-right-radius: 100% 70px;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.roadblocks-head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 2.5rem;
  padding: 5rem 1.25rem 0;
}
.roadblocks-head h2 {
  font-family: inherit;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 1.1rem;
}
.roadblocks-head h2 br { display: inline; }
.roadblocks-head p {
  color: #4b5564;
  font-size: 1rem;
  line-height: 1.65;
  max-width: 540px;
  margin: 0 auto;
}
.roadblocks-marquees::before,
.roadblocks-marquees::after {
  background: linear-gradient(90deg, #eaeef9 0%, transparent 100%);
}
.roadblocks-marquees::after {
  background: linear-gradient(270deg, #eaeef9 0%, transparent 100%);
}
.roadblocks-marquees {
  padding-bottom: 5rem;
}
.roadblocks-pill {
  background: var(--white);
  border: 1px solid rgba(10, 47, 255, 0.14);
  color: var(--navy);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: help;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.roadblocks-pill:hover,
.roadblocks-pill:focus {
  transform: translateY(-1px) scale(1.02);
  border-color: rgba(10, 47, 255, 0.45);
  background: var(--yellow);
  color: var(--navy);
  box-shadow: 0 8px 22px rgba(10, 47, 255, 0.16);
  outline: none;
}
/* Hover popover for the answer */
.roadblocks-popover {
  position: fixed;
  z-index: 10;
  width: 360px;
  max-width: calc(100vw - 40px);
  padding: 0.95rem 1.1rem;
  background: var(--navy);
  color: var(--white);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
  font-size: 0.9rem;
  line-height: 1.55;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.roadblocks-popover.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.roadblocks-popover::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--navy);
  border-radius: 2px;
}

/* === Player Analysis hub overhaul ======================================= */
.player-analysis-hero {
  position: relative;
  isolation: isolate;
  background: #050714;
  text-align: center;
}
.player-analysis-hero .article-hero-bg img { opacity: 0.25; }
.player-analysis-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}
.player-analysis-hero-inner {
  position: relative;
  z-index: 3;
  text-align: center;
  margin: 0 auto;
  max-width: 760px;
}
.player-analysis-hero-inner .article-back {
  display: inline-block;
  margin: 0 auto 1.25rem;
}
.player-analysis-article .article-body {
  text-align: center;
  max-width: 720px;
}
.player-analysis-article .article-lead {
  font-size: 1.05rem;
  margin-bottom: 1.4rem;
}

/* Filter bar */
.player-filters {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr) auto;
  gap: 0.6rem;
  margin: 0 auto 1.5rem;
  max-width: 1200px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .player-filters { grid-template-columns: 1fr 1fr; }
  .player-filter-input-wrap { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .player-filters { grid-template-columns: 1fr; }
}
.player-filter-input-wrap {
  position: relative;
}
.player-filter-input-wrap .player-filter-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: rgba(15,23,42,0.45);
  pointer-events: none;
}
.player-filters input[type="text"],
.player-filters select {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: var(--white);
  color: var(--navy);
  font: 500 0.95rem/1 inherit;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}
.player-filters input[type="text"] { padding-left: 42px; }
.player-filters select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%2334415a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.player-filters input[type="text"]:focus,
.player-filters select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(10, 47, 255, 0.14);
}
.player-filter-reset {
  height: 46px;
  padding: 0 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: transparent;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.player-filter-reset:hover {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.24);
}
.player-result-count {
  text-align: center;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: rgba(15, 23, 42, 0.5);
  letter-spacing: 0.06em;
  margin: 0.5rem 0 1.5rem;
}

/* Six-per-row tile grid */
.player-grid--six {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1280px) { .player-grid--six { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1023px) { .player-grid--six { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .player-grid--six { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px)  { .player-grid--six { grid-template-columns: repeat(2, 1fr); } }

.player-card--compact {
  position: relative;
  isolation: isolate;
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease, filter 0.32s ease;
}
.player-card--compact .player-card-img {
  aspect-ratio: 4 / 5;
  background: var(--navy);
}
.player-card--compact .player-card-img img {
  filter: saturate(1.1);
}
.player-card--compact .player-card-img::after {
  background: linear-gradient(180deg, transparent 60%, rgba(10, 14, 26, 0.55) 100%);
}
.player-card--compact .player-card-body {
  padding: 0.75rem 0.85rem 1rem;
}
.player-card--compact .player-card-body h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.player-card--compact .player-card-position {
  font-size: 0.65rem;
  letter-spacing: 0.13em;
  margin: 0;
  color: rgba(15, 23, 42, 0.55);
  font-weight: 700;
  text-transform: uppercase;
}
/* Neon glow on hover */
.player-card--compact::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(10, 47, 255, 0) 0%, rgba(10, 47, 255, 0.55) 35%, rgba(200, 230, 53, 0.55) 70%, rgba(10, 47, 255, 0) 100%);
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}
.player-card--compact:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 18px 40px -8px rgba(10, 47, 255, 0.32);
  filter: brightness(1.04);
}
.player-card--compact:hover::after { opacity: 1; }
.player-card.is-hidden { display: none !important; }
.player-card.is-paginated { display: none !important; }

/* "More coming soon" placeholder */
.player-card--coming-soon {
  display: block;
  border-radius: 14px;
  border: 2px dashed rgba(15, 23, 42, 0.18);
  background: rgba(15, 23, 42, 0.02);
  cursor: default;
}
.player-card--coming-soon .player-card-img {
  aspect-ratio: 4 / 5;
  background: rgba(15, 23, 42, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-coming-soon-icon {
  color: rgba(15, 23, 42, 0.32);
}
.player-card--coming-soon .player-card-body { padding: 0.75rem 0.85rem 1rem; }
.player-card--coming-soon .player-card-body h3 {
  font-size: 0.9rem; color: rgba(15, 23, 42, 0.7); margin: 0 0 0.2rem;
}
.player-card--coming-soon .player-card-position {
  color: rgba(15, 23, 42, 0.45); font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.13em;
}

/* Pagination row */
.player-pagination {
  text-align: center;
  margin-top: 2.5rem;
}
.btn-outline-blue {
  display: inline-block;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  border: 1.5px solid var(--blue);
  background: transparent;
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  font: inherit;
  font-weight: 700;
}
.btn-outline-blue:hover { background: var(--blue); color: var(--white); }

/* === Player profile rich enhancements ================================== */
/* Glass portfolio: training style block + ellipsis bottom curve */
.glass-portfolio--ellipsis-bottom {
  border-bottom-left-radius: 100% 80px;
  border-bottom-right-radius: 100% 80px;
  padding-bottom: 7rem;
}
.glass-portfolio-style {
  margin-top: 0.5rem;
  margin-bottom: 1.6rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--yellow);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}
.glass-portfolio-style-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow);
  display: block;
  margin-bottom: 0.4rem;
}
.glass-portfolio-style p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

/* Timeline section directly under hero */
.player-timeline-section {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  padding: 5rem 0 4rem;
}

/* Club history horizontal timeline */
.club-history-section {
  background: #ffffff;
  padding: 4rem 0 5rem;
}
.club-history-track {
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
}
.club-history-item {
  position: relative;
  padding: 1.5rem 1.25rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fc 100%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.club-history-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(10, 47, 255, 0.12);
  border-color: rgba(10, 47, 255, 0.2);
}
.club-history-emblem {
  width: 64px;
  height: 64px;
  margin: 0 auto 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.club-history-emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.club-history-emblem-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a2fff 0%, #2747d4 100%);
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.club-history-years {
  display: block;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--blue);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}
.club-history-body h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.3rem;
  line-height: 1.25;
}
.club-history-age {
  display: block;
  font-size: 0.78rem;
  color: rgba(15, 23, 42, 0.55);
  font-weight: 600;
}

/* Rich training accordion */
.training-rich-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 4rem 0 5rem;
}
.training-rich-grid {
  max-width: 820px;
  margin: 2.5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.training-rich-item {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.training-rich-item[open] {
  border-color: rgba(10, 47, 255, 0.25);
  box-shadow: 0 14px 32px rgba(10, 47, 255, 0.08);
}
.training-rich-item summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
}
.training-rich-item summary::-webkit-details-marker { display: none; }
.training-rich-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
}
.training-rich-summary {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.training-rich-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}
.training-rich-summary-text {
  font-size: 0.85rem;
  color: rgba(15, 23, 42, 0.6);
  line-height: 1.45;
}
.training-rich-toggle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(10, 47, 255, 0.08);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
}
.training-rich-item[open] .training-rich-toggle {
  transform: rotate(45deg);
  background: var(--blue);
  color: var(--white);
}
.training-rich-body {
  padding: 0 1.25rem 1.25rem 4.5rem;
}
@media (max-width: 600px) { .training-rich-body { padding-left: 1.25rem; } }
.training-rich-body p {
  font-size: 0.95rem;
  color: #4b5564;
  line-height: 1.65;
  margin: 0;
}
.training-rich-sources {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(15, 23, 42, 0.12);
}
.training-rich-sources-label {
  display: inline-block;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.5);
  margin-bottom: 0.55rem;
}
.training-rich-sources ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}
.training-rich-sources li { margin: 0; }
.training-rich-sources a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(10, 47, 255, 0.18);
  border-radius: 999px;
  background: rgba(10, 47, 255, 0.04);
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.training-rich-sources a:hover {
  background: rgba(10, 47, 255, 0.1);
  border-color: rgba(10, 47, 255, 0.45);
  transform: translateY(-1px);
}
.training-rich-sources a svg { flex-shrink: 0; opacity: 0.7; }

/* Diet pie + foods carousel */
.diet-macros-row {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-top: 0.5rem;
}
@media (max-width: 600px) {
  .diet-macros-row { flex-direction: column; align-items: flex-start; }
}
.diet-macros-pie-svg {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 12px var(--white);
}
.diet-macros-pie-svg::after {
  content: '';
  position: absolute;
  inset: 30px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.diet-macros-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.diet-macros-legend li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.92rem;
}
.diet-macros-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}
.diet-macros-label { color: var(--navy); font-weight: 700; min-width: 60px; font-size: 0.95rem; }
.diet-macros-value {
  color: var(--navy);
  font-weight: 800;
  font-size: 1.25rem;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: -0.01em;
}

/* Diet foods, infinity-loop carousel */
.diet-foods-carousel {
  position: relative;
  margin-top: 1.25rem;
  overflow: hidden;
  padding: 0.5rem 0;
}
.diet-foods-track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  animation: dietFoodsScroll 38s linear infinite;
}
.diet-foods-carousel:hover .diet-foods-track,
.diet-foods-carousel:focus-within .diet-foods-track { animation-play-state: paused; }
@keyframes dietFoodsScroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.diet-foods-carousel-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.diet-foods-carousel-fade--l {
  left: 0;
  background: linear-gradient(90deg, #ffffff 0%, transparent 100%);
}
.diet-foods-carousel-fade--r {
  right: 0;
  background: linear-gradient(270deg, #ffffff 0%, transparent 100%);
}
.diet-food {
  position: relative;
  padding: 0.85rem 0.85rem;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid rgba(15, 23, 42, 0.08);
  text-align: center;
  cursor: help;
  flex: 0 0 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.diet-food:hover, .diet-food:focus {
  transform: translateY(-3px);
  border-color: rgba(10, 47, 255, 0.4);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
  outline: none;
}
.diet-food-emoji {
  font-size: 2rem;
  line-height: 1;
  margin: 0;
}
/* Legacy letter-icon fallback (kept for older markup if any) */
.diet-food-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 800;
  font-size: 1rem;
}
.diet-food-name {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
}
.diet-food-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
  padding: 0.55rem 0.75rem;
  background: var(--navy);
  color: var(--white);
  border-radius: 8px;
  font-size: 0.72rem;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 5;
}
.diet-food-tooltip strong { color: var(--yellow); font-weight: 800; }
.diet-food-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--navy);
}
.diet-food:hover .diet-food-tooltip,
.diet-food:focus .diet-food-tooltip {
  opacity: 1;
}

/* Day in the life timetable */
.day-in-life {
  margin-top: 3rem;
  background: linear-gradient(135deg, #0a0e1a 0%, #14182d 100%);
  border-radius: 18px;
  padding: 2.5rem 2rem;
  color: var(--white);
}
.day-in-life-head {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  text-align: center;
  letter-spacing: -0.01em;
}
.day-in-life-sub {
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  margin: 0 0 1.5rem;
}
.day-in-life-table {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.day-in-life-row {
  display: grid;
  grid-template-columns: 70px 110px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--yellow);
  transition: background 0.2s ease;
}
.day-in-life-row:hover { background: rgba(255, 255, 255, 0.07); }
.day-in-life-row--diet { border-left-color: #0a2fff; }
.day-in-life-row--sleep { border-left-color: #6028ce; }
.day-in-life-row--strength { border-left-color: #c47200; }
.day-in-life-row--pitch { border-left-color: #1f9d55; }
.day-in-life-row--recovery { border-left-color: #0072b1; }
.day-in-life-row--wake { border-left-color: var(--yellow); }
.day-in-life-time {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--yellow);
}
.day-in-life-cat {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.day-in-life-label {
  font-size: 0.95rem;
  color: var(--white);
}
@media (max-width: 600px) {
  .day-in-life-row { grid-template-columns: 60px 1fr; }
  .day-in-life-cat { display: none; }
}

/* Try next — curved top + brighter bg */
.player-cross-links {
  background: linear-gradient(180deg, #0a0e1a 0%, #1a1f3a 100%) !important;
  color: var(--white);
  padding: 5rem 0 4rem;
  border-top-left-radius: 100% 80px;
  border-top-right-radius: 100% 80px;
  margin-top: -1px;
}
.player-cross-links .article-cross-links-head {
  color: var(--white);
  text-align: center;
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 2.5rem;
}
.player-cross-links .article-cross-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1023px) { .player-cross-links .article-cross-grid { grid-template-columns: 1fr; } }
.player-cross-links .journal-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  transition: transform 0.32s ease, border-color 0.25s ease;
}
.player-cross-links .journal-card:hover {
  border-color: rgba(200, 230, 53, 0.5);
  transform: translateY(-4px);
}
.player-cross-links .journal-card .journal-tag {
  background: var(--yellow);
  color: var(--navy);
  border: none;
  position: absolute;
  top: -0.85rem;
  left: 1.4rem;
  z-index: 3;
}
.player-cross-links .journal-card-body h3 { color: var(--white); }
.player-cross-links .journal-card:hover .journal-card-body h3 { color: var(--yellow); }
.player-cross-links .journal-card-body p { color: rgba(255, 255, 255, 0.7); }
.player-cross-links .journal-card-meta { color: rgba(255, 255, 255, 0.55); }

/* === Skills radar (FIFA-style year slider) ============================== */
.skills-radar-section {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  padding: 4rem 0 5rem;
}
.skills-radar-wrap {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 980px;
  margin: 2.5rem auto 0;
  padding: 1.5rem;
  background: var(--white);
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
}
.skills-radar-chart {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(10, 47, 255, 0.04) 0%, rgba(10, 47, 255, 0) 70%);
  border-radius: 14px;
  padding: 1rem;
}
.skills-radar-svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  overflow: visible;
}
.skills-radar-poly {
  fill: rgba(10, 47, 255, 0.18);
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill 0.3s ease;
}
.skills-radar-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.skills-radar-snapshot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding-bottom: 0.85rem;
}
.skills-radar-snapshot-year {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: 0.04em;
  line-height: 1;
}
.skills-radar-snapshot-age {
  font-size: 0.85rem;
  color: rgba(15, 23, 42, 0.65);
  font-weight: 600;
}
.skills-radar-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.skills-radar-bars li {
  display: grid;
  grid-template-columns: 80px 1fr 30px;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--navy);
}
.skills-radar-bar-label { font-weight: 600; }
.skills-radar-bar-track {
  height: 6px;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.skills-radar-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue) 0%, #5778ff 100%);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.skills-radar-bar-value {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue);
  text-align: right;
}
.skills-radar-slider-wrap { margin-top: 0.5rem; }
.skills-radar-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: linear-gradient(90deg, rgba(10, 47, 255, 0.15), rgba(10, 47, 255, 0.4));
  border-radius: 999px;
  outline: none;
}
.skills-radar-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid var(--white);
  box-shadow: 0 4px 12px rgba(10, 47, 255, 0.35);
  cursor: pointer;
}
.skills-radar-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid var(--white);
  box-shadow: 0 4px 12px rgba(10, 47, 255, 0.35);
  cursor: pointer;
}
.skills-radar-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 0.45rem;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.55);
  letter-spacing: 0.05em;
}
.skills-radar-sources {
  margin-top: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(15, 23, 42, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.skills-radar-sources-label {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.5);
  margin-right: 0.25rem;
}
.skills-radar-sources a {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(10, 47, 255, 0.18);
  border-radius: 999px;
  background: rgba(10, 47, 255, 0.04);
  transition: background 0.18s ease;
}
.skills-radar-sources a:hover { background: rgba(10, 47, 255, 0.1); }

@media (max-width: 760px) {
  .skills-radar-wrap {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.25rem;
  }
}

/* === What young players can copy ======================================== */
.what-to-copy-section {
  background: linear-gradient(180deg, #ffffff 0%, #f0f3fa 100%);
  padding: 4rem 0 5rem;
}
.what-to-copy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 2.5rem auto 0;
  max-width: 1100px;
}

/* Carousel variant: scroll-snap track with prev/next + dots */
.what-to-copy-carousel {
  position: relative;
  margin: 2.5rem auto 0;
  max-width: 1100px;
}
.what-to-copy-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0.5rem 0.5rem 1.5rem;
}
.what-to-copy-track::-webkit-scrollbar { display: none; }
.what-to-copy-track > .what-to-copy-card {
  flex: 0 0 calc(33.333% - 0.85rem);
  scroll-snap-align: start;
  min-width: 280px;
  transform: none !important;
}
@media (max-width: 1024px) { .what-to-copy-track > .what-to-copy-card { flex-basis: calc(50% - 0.65rem); } }
@media (max-width: 700px) { .what-to-copy-track > .what-to-copy-card { flex-basis: 88%; } }

.what-to-copy-nav {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid rgba(15, 23, 42, 0.1);
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
.what-to-copy-nav:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }
.what-to-copy-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.what-to-copy-nav--prev { left: -22px; }
.what-to-copy-nav--next { right: -22px; }
@media (max-width: 760px) {
  .what-to-copy-nav--prev { left: 4px; }
  .what-to-copy-nav--next { right: 4px; }
}

.what-to-copy-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.25rem;
}
.what-to-copy-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(15, 23, 42, 0.18);
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, transform 0.18s ease;
}
.what-to-copy-dot.is-active {
  background: var(--blue);
  transform: scale(1.3);
}
.what-to-copy-card {
  background: var(--white);
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease, border-color 0.32s ease;
}
.what-to-copy-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(10, 47, 255, 0.14);
  border-color: rgba(10, 47, 255, 0.2);
}
.what-to-copy-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.what-to-copy-pillar {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  background: rgba(10, 47, 255, 0.08);
  color: var(--blue);
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
}
.what-to-copy-num {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 1.4rem;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.18);
  letter-spacing: 0.04em;
}
.what-to-copy-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
}
.what-to-copy-desc {
  font-size: 0.92rem;
  color: #4b5564;
  line-height: 1.6;
  margin: 0;
}
.what-to-copy-matico {
  margin-top: auto;
  padding: 0.85rem 1rem;
  background: rgba(200, 230, 53, 0.18);
  border-left: 3px solid var(--yellow);
  border-radius: 8px;
}
.what-to-copy-matico-label {
  display: inline-block;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5a6e00;
  margin-bottom: 0.2rem;
}
.what-to-copy-matico p {
  margin: 0;
  font-size: 0.85rem;
  color: #2c3441;
  line-height: 1.55;
}
.what-to-copy-cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* === Compare players (hub-page side-by-side) ============================= */
.player-compare {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 4rem 0 5rem;
}
.player-compare-head {
  max-width: 760px;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.player-compare-head h2 {
  color: var(--navy);
  margin-top: 1rem;
}
.player-compare-head p {
  color: #4b5564;
  margin-top: 0.6rem;
}
.player-compare-controls {
  max-width: 1100px;
  margin: 0 auto 2rem;
}
.compare-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem 0.4rem 0.4rem;
  background: var(--white);
  border: 2px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
}
.compare-chip:hover {
  border-color: var(--chip-colour);
  transform: translateY(-1px);
}
.compare-chip-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(15, 23, 42, 0.08);
}
.compare-chip-name { display: inline-block; }
.compare-chip-x {
  display: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  color: var(--white);
  margin-left: 0.2rem;
}
.compare-chip.is-active {
  background: var(--chip-colour);
  border-color: var(--chip-colour);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}
.compare-chip.is-active .compare-chip-x { display: inline-flex; }

.compare-dims {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  padding: 0.4rem;
  background: rgba(15, 23, 42, 0.04);
  border-radius: 999px;
  max-width: 720px;
  margin: 0 auto;
}
.compare-dim {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.6);
  transition: background 0.18s ease, color 0.18s ease;
}
.compare-dim:hover { color: var(--navy); }
.compare-dim.is-active {
  background: var(--white);
  color: var(--blue);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.player-compare-body {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

/* Generic grid used by career, day, training */
.compare-grid {
  display: grid;
  grid-template-columns: 130px repeat(var(--cols, 2), 1fr);
  width: 100%;
}
.compare-row {
  display: contents;
}
.compare-row > .compare-cell {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 0.88rem;
  color: var(--navy);
  line-height: 1.5;
}
.compare-row:last-child > .compare-cell { border-bottom: 0; }
.compare-cell--label {
  background: rgba(15, 23, 42, 0.025);
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  position: sticky;
  left: 0;
  z-index: 1;
}
.compare-cell--time {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--blue);
}
.compare-cell--head {
  background: linear-gradient(180deg, var(--p-colour, #0a2fff) 0%, transparent 220%);
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
}
.compare-cell--head img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.35);
  flex-shrink: 0;
}
.compare-cell--head strong { display: block; line-height: 1.2; }
.compare-cell--head span {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.8;
  margin-top: 1px;
}
.compare-cell--empty {
  color: rgba(15, 23, 42, 0.25);
  text-align: center;
  font-size: 1.1rem;
}
.compare-cell--career {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.compare-emblem {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.compare-emblem--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 47, 255, 0.08);
  color: var(--blue);
  font-weight: 700;
  border-radius: 50%;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}
.compare-career-text strong { display: block; font-size: 0.88rem; }
.compare-career-text span {
  display: block;
  font-size: 0.74rem;
  color: rgba(15, 23, 42, 0.55);
  margin-top: 1px;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}
.compare-cell--day { font-size: 0.85rem; }
.compare-day-cat {
  display: block;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.45);
  margin-bottom: 0.2rem;
}
.compare-cell--training { font-size: 0.85rem; line-height: 1.55; }
.compare-empty-inline {
  font-style: italic;
  color: rgba(15, 23, 42, 0.4);
  font-size: 0.82rem;
}
.compare-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: rgba(15, 23, 42, 0.5);
}

/* Diet (vertical card stack) */
.compare-diet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
}
.compare-diet-card {
  padding: 1.5rem;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.compare-diet-card:last-child { border-right: 0; }
.compare-diet-card header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--p-colour, #0a2fff);
}
.compare-diet-card header img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.compare-diet-card header strong { display: block; color: var(--navy); }
.compare-diet-card header span {
  display: block;
  font-size: 0.74rem;
  color: rgba(15, 23, 42, 0.55);
  margin-top: 1px;
}
.compare-diet-pie {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  align-self: center;
  box-shadow: inset 0 0 0 6px var(--white), 0 6px 16px rgba(15, 23, 42, 0.08);
}
.compare-diet-macros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.compare-diet-macros li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--navy);
}
.compare-diet-macros .swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.compare-diet-summary {
  font-size: 0.85rem;
  color: #4b5564;
  line-height: 1.55;
  margin: 0;
}
.compare-diet-foods {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(15, 23, 42, 0.1);
}
.compare-diet-foods-label {
  display: block;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.5);
  margin-bottom: 0.4rem;
}
.compare-diet-foods ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.compare-diet-foods li {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--blue);
  background: rgba(10, 47, 255, 0.06);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
}

/* Skills (overlay radar) */
.compare-skills {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 320px);
  gap: 1.5rem;
  padding: 2rem;
  align-items: center;
}
.compare-skills-svg {
  width: 100%;
  max-width: 360px;
  height: auto;
  justify-self: center;
}
.compare-skills-legend {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.compare-skills-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.compare-skills-row .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.compare-skills-row strong { color: var(--navy); }
.compare-skills-snap {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.7rem;
  color: rgba(15, 23, 42, 0.55);
}
.compare-skills-bars {
  padding: 0 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.compare-skills-bar {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0.7rem;
  align-items: center;
}
.compare-skills-bar .bar-label {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}
.compare-skills-bar .bar-track {
  height: 8px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  position: relative;
  overflow: visible;
  display: block;
  margin-bottom: 2px;
}
.compare-skills-bar .bar-track:last-child { margin-bottom: 0; }
.compare-skills-bar .bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Day-in-life category-tinted left border (re-uses pattern from /journal/player-analysis-pages) */
.compare-cell--day.day-in-life-row--wake { box-shadow: inset 3px 0 0 #f59e0b; }
.compare-cell--day.day-in-life-row--diet { box-shadow: inset 3px 0 0 #0a2fff; }
.compare-cell--day.day-in-life-row--strength { box-shadow: inset 3px 0 0 #c47200; }
.compare-cell--day.day-in-life-row--pitch { box-shadow: inset 3px 0 0 #1f9d55; }
.compare-cell--day.day-in-life-row--sleep { box-shadow: inset 3px 0 0 #6028ce; }
.compare-cell--day.day-in-life-row--recovery { box-shadow: inset 3px 0 0 #0072b1; }

@media (max-width: 820px) {
  .player-compare-body { overflow-x: auto; }
  .compare-grid { min-width: 600px; grid-template-columns: 100px repeat(var(--cols, 2), 220px); }
  .compare-skills {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }
  .compare-skills-bars { padding: 0 1rem 1.5rem; }
  .compare-skills-bar { grid-template-columns: 80px 1fr; }
  .compare-diet { grid-template-columns: 1fr; }
  .compare-diet-card { border-right: 0; border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
}

/* === Player analysis hero, curved variant + subtitle ===================== */
.player-analysis-hero-sub {
  margin: 1.25rem auto 0;
  max-width: 700px;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.005em;
}
.player-analysis-hero--curved {
  border-radius: 0 0 50% 50% / 0 0 90px 90px;
  margin-bottom: -90px;
  z-index: 0;
}
.player-analysis-hero--curved + .player-grid-section--curved-top {
  position: relative;
  z-index: 1;
  padding-top: 7rem;
  background: linear-gradient(180deg, #fffce5 0%, #f8fafc 80%);
  border-radius: 90px 90px 0 0 / 60px 60px 0 0;
}
@media (max-width: 720px) {
  .player-analysis-hero--curved {
    border-radius: 0 0 50% 50% / 0 0 50px 50px;
    margin-bottom: -50px;
  }
  .player-analysis-hero--curved + .player-grid-section--curved-top {
    padding-top: 5rem;
    border-radius: 50px 50px 0 0 / 40px 40px 0 0;
  }
  .player-analysis-hero-sub { font-size: 1rem; }
}

/* === Compare picker search + chip filtering ============================== */
.compare-picker-search {
  position: relative;
  max-width: 360px;
  margin: 0 auto 1rem;
}
.compare-picker-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(15, 23, 42, 0.45);
  pointer-events: none;
}
.compare-picker-search input {
  width: 100%;
  padding: 0.6rem 1rem 0.6rem 2.4rem;
  background: var(--white);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--navy);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.compare-picker-search input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(10, 47, 255, 0.15);
}
.compare-chip.is-search-hidden { display: none; }

/* === Day-in-the-life category key/legend ================================= */
.compare-day-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  align-items: center;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.025);
  font-size: 0.78rem;
  color: rgba(15, 23, 42, 0.7);
}
.compare-day-legend-label {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.5);
  margin-right: 0.4rem;
}
.compare-day-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
}
.compare-day-legend-item .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* === Bullet-style training pillars ======================================= */
.compare-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.compare-bullets li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--navy);
}
.compare-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0.6;
}

/* === Diet, donut + macro bars + food emoji grid ========================== */
.compare-diet-donut {
  display: flex;
  align-items: center;
  justify-content: center;
}
.compare-diet-pie {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.compare-diet-pie::after {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--white);
  z-index: 1;
}
.compare-diet-kcal {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.compare-diet-kcal strong {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 1.15rem;
  color: var(--navy);
  font-weight: 800;
}
.compare-diet-kcal span {
  font-size: 0.6rem;
  color: rgba(15, 23, 42, 0.55);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

.compare-diet-macros li {
  display: grid;
  grid-template-columns: 12px 64px 1fr auto;
  gap: 0.5rem;
  align-items: center;
}
.compare-diet-macro-bar {
  height: 6px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  overflow: hidden;
  display: block;
}
.compare-diet-macro-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.compare-diet-macro-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
}

/* Food emoji grid */
.compare-diet-food-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.compare-food {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0.45rem;
  background: rgba(15, 23, 42, 0.025);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  cursor: default;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.compare-food:hover, .compare-food:focus {
  transform: translateY(-2px);
  border-color: var(--p-colour, var(--blue));
  background: var(--white);
  outline: none;
}
.compare-food-emoji {
  font-size: 1.6rem;
  line-height: 1;
}
.compare-food-name {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
  line-height: 1.25;
}
.compare-food-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.6rem 0.75rem;
  background: var(--navy);
  color: var(--white);
  border-radius: 10px;
  font-size: 0.74rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 5;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25);
}
.compare-food-tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--navy);
}
.compare-food:hover .compare-food-tooltip,
.compare-food:focus .compare-food-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.compare-food-tooltip strong {
  color: var(--yellow);
  font-weight: 700;
}

@media (max-width: 600px) {
  .compare-diet-food-grid { grid-template-columns: repeat(3, 1fr); }
}

/* === Gender tabs (hub grid + compare picker) ============================ */
.player-gender-tabs,
.compare-gender-tabs {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.3rem;
  background: rgba(15, 23, 42, 0.05);
  border-radius: 999px;
  margin: 0 auto 1.4rem;
}
.player-gender-tabs { display: flex; justify-content: center; max-width: 320px; margin: 1.5rem auto; }
.compare-gender-tabs { display: flex; justify-content: center; max-width: 280px; margin-bottom: 1rem; }
.player-gender-tab,
.compare-gender-tab {
  background: transparent;
  border: 0;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.6);
  transition: background 0.18s ease, color 0.18s ease;
}
.player-gender-tab:hover,
.compare-gender-tab:hover { color: var(--navy); }
.player-gender-tab.is-active,
.compare-gender-tab.is-active {
  background: var(--white);
  color: var(--blue);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* === Player profile, sticky section nav (left rail) ===================== */
.player-section-nav {
  position: fixed;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 1rem 0.75rem;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.1);
  max-width: 200px;
}
.player-section-nav-label {
  display: block;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.5);
  padding: 0 0.5rem 0.6rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  margin-bottom: 0.5rem;
}
.player-section-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.player-section-nav a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.65);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
  position: relative;
}
.player-section-nav a svg { color: rgba(15, 23, 42, 0.4); flex-shrink: 0; transition: color 0.18s ease; }
.player-section-nav a:hover {
  color: var(--navy);
  background: rgba(10, 47, 255, 0.04);
}
.player-section-nav a:hover svg { color: var(--blue); }
.player-section-nav a.is-active {
  color: var(--blue);
  background: rgba(10, 47, 255, 0.08);
  font-weight: 700;
}
.player-section-nav a.is-active::before {
  content: '';
  position: absolute;
  left: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--blue);
  border-radius: 0 3px 3px 0;
}
.player-section-nav a.is-active svg { color: var(--blue); }

@media (max-width: 1320px) {
  .player-section-nav { left: 0.75rem; max-width: 180px; padding: 0.85rem 0.65rem; }
  .player-section-nav a { font-size: 0.74rem; padding: 0.45rem 0.5rem; }
}
@media (max-width: 1100px) {
  .player-section-nav { display: none; }
}

/* ============================================================
   2026-05-04 polish batch
   ============================================================ */

/* === Diet food tooltip fix, was being clipped by carousel overflow:hidden === */
.diet-foods-carousel {
  overflow: visible;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
  padding-top: 70px;
  margin-top: -50px;
}
.diet-foods-track { isolation: isolate; }
.diet-food-tooltip { z-index: 50; }

/* === Neon green pulse for "Book a Place" CTA in navbar (1s sine cycle) === */
@keyframes neonPulseGreen {
  0%   { box-shadow: 0 0 0 0 rgba(131,243,110,0.0), 0 0 0 0 rgba(131,243,110,0.0); }
  50%  { box-shadow: 0 0 14px 2px rgba(131,243,110,0.85), 0 0 28px 6px rgba(131,243,110,0.45); }
  100% { box-shadow: 0 0 0 0 rgba(131,243,110,0.0), 0 0 0 0 rgba(131,243,110,0.0); }
}
@keyframes neonGlowFill {
  0%, 100% { background-color: var(--white); color: var(--blue); }
  50%      { background-color: #d6ffce; color: var(--blue); }
}
.btn-pulse-neon {
  animation: neonPulseGreen 1s ease-in-out infinite, neonGlowFill 1s ease-in-out infinite;
  position: relative;
  will-change: box-shadow, background-color;
}
.btn-pulse-neon::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1.5px solid rgba(131, 243, 110, 0);
  animation: neonRing 1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes neonRing {
  0%, 100% { border-color: rgba(131,243,110,0); transform: scale(1); }
  50%      { border-color: rgba(131,243,110,0.65); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-pulse-neon, .btn-pulse-neon::after { animation: none; }
}

/* === WhatsApp floating widget, bottom-right of every page === */
.whatsapp-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9000;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45), 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}
.whatsapp-fab:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.55), 0 4px 10px rgba(0,0,0,0.25);
}
.whatsapp-fab svg { width: 30px; height: 30px; fill: #fff; }
.whatsapp-fab::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: 0.6;
  animation: waPulse 2s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0;   }
}
.whatsapp-fab-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: #0a0e1a;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.whatsapp-fab:hover .whatsapp-fab-tooltip { opacity: 1; transform: translateY(-50%) translateX(-2px); }
.whatsapp-fab-tooltip::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: #0a0e1a;
}
@media (max-width: 640px) {
  .whatsapp-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .whatsapp-fab-tooltip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab::before { animation: none; }
}

/* === Mega menu icons, more polished base style === */
.nav-mega-icon {
  background: linear-gradient(135deg, rgba(10, 47, 255, 0.12), rgba(200, 230, 53, 0.18));
  color: var(--blue);
  border: 1px solid rgba(10, 47, 255, 0.16);
  box-shadow: 0 2px 6px rgba(10, 47, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.nav-mega-item:hover .nav-mega-icon {
  transform: scale(1.08) rotate(-3deg);
  background: linear-gradient(135deg, rgba(10, 47, 255, 0.22), rgba(200, 230, 53, 0.28));
  box-shadow: 0 4px 14px rgba(10, 47, 255, 0.18), inset 0 1px 0 rgba(255,255,255,0.7);
}
.nav-mega-icon svg { stroke-width: 1.6; }

/* === Athletes Club: redesigned for/against panel (less AI-generic) === */
.for-against {
  background: linear-gradient(180deg, var(--white) 0%, #f4f7ff 100%);
  padding: 4rem 0 5rem;
}
.for-against-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1080px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(10, 14, 26, 0.08), 0 1px 2px rgba(10, 14, 26, 0.06);
  background: var(--white);
  position: relative;
}
.for-against-grid::before {
  content: '';
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(10, 14, 26, 0.12), transparent);
  pointer-events: none;
}
.for-against-col {
  padding: 2.25rem 2rem;
  background: transparent;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
}
.for-against-col h3 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--navy);
  margin: 0 0 1.4rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(10, 14, 26, 0.08);
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.for-against-col--for h3::before {
  content: '';
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--yellow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0e1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px;
  flex-shrink: 0;
}
.for-against-col--against h3::before {
  content: '';
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(10, 14, 26, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0e1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px;
  flex-shrink: 0;
}
.for-against-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.for-against-col ul li {
  position: relative;
  padding: 0.75rem 0.85rem 0.75rem 2.6rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--navy);
  border-radius: 10px;
  transition: background 0.2s ease;
}
.for-against-col ul li:hover { background: rgba(10, 47, 255, 0.04); }
.for-against-col ul li::before {
  content: '';
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
}
.for-against-col--for ul li::before {
  background: rgba(200, 230, 53, 0.95);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0e1a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 11px;
}
.for-against-col--against ul li::before {
  background: rgba(10, 14, 26, 0.08);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0e1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 11px;
}
.for-against-col--for ul li { color: var(--navy); }
.for-against-col--against ul li { color: rgba(10, 14, 26, 0.7); }
.for-against-col ul li::after { display: none !important; }
.for-against-col .check-list li::before, .for-against-col .cross-list li::before { content: ''; }
@media (max-width: 760px) {
  .for-against-grid { grid-template-columns: 1fr; }
  .for-against-grid::before { display: none; }
  .for-against-col { padding: 1.75rem 1.4rem; }
  .for-against-col + .for-against-col { border-top: 1px solid rgba(10, 14, 26, 0.08); }
}

/* === What we do: toolbox kept centered (chips animate over bag, original behaviour) === */
@media (max-width: 899px) {
  .toolbox-section .toolbox-bucket { width: 100%; max-width: 360px; margin: 0 auto; }
}

/* === Athletes Club: subtle background variation, break the cream monotony === */
.welcome.welcome--white + .pillars-section,
.welcome.welcome--white + .methodology-strip {
  background: linear-gradient(180deg, #f4f7ff 0%, var(--white) 100%);
}
.athletes-club-tinted {
  background: linear-gradient(180deg, var(--white) 0%, rgba(10, 47, 255, 0.04) 100%);
}

/* === Bento images: ensure full fill & inherit container radius (matches video iframe behaviour) === */
.bento-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  border-radius: inherit;
}

/* === Toolbox section, new 2-col layout (bag left, text right) === */
.toolbox-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .toolbox-layout {
    grid-template-columns: 1.05fr 1.1fr;
    gap: 3.5rem;
  }
  .toolbox-bag-col { display: flex; align-items: center; justify-content: center; }
  .toolbox-text-col { padding-right: 0.5rem; }
}
.toolbox-stage--bag-only { padding: 0; min-height: auto; height: auto; }
.toolbox-stage--bag-only .toolbox-bucket {
  width: 100%;
  max-width: 520px;
  height: auto;
}
.toolbox-text-col h2 { font-size: 2.2rem; line-height: 1.15; letter-spacing: -0.01em; margin: 0.4rem 0 0.6rem; }
.toolbox-text-col p { font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.4rem; }
.toolbox-chip-track--side {
  position: relative;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 280px;
  height: auto;
  width: 100%;
}
.toolbox-chip-track--side .toolbox-chip {
  position: relative !important;
  transform: none !important;
  width: auto !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.95rem;
  background: var(--white);
  border: 1px solid rgba(10, 14, 26, 0.08);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(10, 47, 255, 0.06), 0 1px 2px rgba(0,0,0,0.04);
  opacity: 0;
  transform: translateY(8px) !important;
  transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.25s ease;
  align-self: flex-start;
}
.toolbox-chip-track--side .toolbox-chip.is-resting {
  opacity: 1;
  transform: translateY(0) !important;
}
.toolbox-chip-track--side .toolbox-chip.is-falling {
  opacity: 0;
  transform: translateY(-8px) scale(0.96) !important;
}
.toolbox-chip-track--side .toolbox-chip:hover {
  box-shadow: 0 8px 22px rgba(10, 47, 255, 0.12), 0 2px 4px rgba(0,0,0,0.06);
}
@media (min-width: 900px) {
  .toolbox-chip-track--side {
    max-height: 360px;
    overflow: hidden;
  }
}

/* === Top strip: bouncing neon glow + matched-font right links === */
.top-strip {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.top-strip > .container { position: relative; z-index: 2; }
.top-strip-glow {
  position: absolute;
  top: -150%;
  bottom: -150%;
  width: 280px;
  left: 0;
  background: radial-gradient(ellipse at center,
    rgba(131, 243, 110, 0.7) 0%,
    rgba(200, 230, 53, 0.55) 25%,
    rgba(10, 47, 255, 0.35) 55%,
    transparent 78%);
  filter: blur(22px);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
  transform: translateX(-150px);
  animation: topStripGlowPing 5.4s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  will-change: transform;
}
@keyframes topStripGlowPing {
  from { transform: translateX(-180px); }
  to   { transform: translateX(calc(100vw - 100px)); }
}
@media (prefers-reduced-motion: reduce) {
  .top-strip-glow { animation: none; opacity: 0.45; transform: translateX(40vw); }
}
.top-strip-right .top-strip-link {
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.top-strip-right .top-strip-link[href^="https://wa.me"] {
  color: var(--white);
  position: relative;
  padding-left: 1.1rem;
  letter-spacing: 0.02em;
}
.top-strip-right .top-strip-link[href^="https://wa.me"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.85rem;
  height: 0.85rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325D366'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.149-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media (max-width: 640px) {
  .top-strip-glow { width: 200px; filter: blur(18px); }
}

/* === Parent handbook FAQ ("Common parent questions") — pill container, fresher bg === */
.parent-handbook .faq-container,
[id="faqs"] .faq-container,
section#faqs .faq-container {
  background: linear-gradient(160deg, #ffffff 0%, #f0f5ff 100%);
  border-radius: 28px;
  padding: 3rem 2.5rem 2.5rem;
  border: 1px solid rgba(10, 47, 255, 0.08);
  box-shadow: 0 12px 36px rgba(10, 47, 255, 0.05), 0 2px 6px rgba(10, 14, 26, 0.03);
  position: relative;
  overflow: hidden;
}
section#faqs.welcome { background: var(--white); }
section#faqs .faq-container::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(200, 230, 53, 0.18), transparent 70%);
  pointer-events: none;
}
section#faqs .faq-container::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(10, 47, 255, 0.10), transparent 70%);
  pointer-events: none;
}
section#faqs .faq-container > .doodle-svg,
section#faqs .faq-container > h2 {
  position: relative;
  z-index: 1;
}
section#faqs .faq-accordion {
  position: relative;
  z-index: 1;
}
section#faqs .faq-item {
  background: var(--white);
  border: 1px solid rgba(10, 14, 26, 0.06);
  border-radius: 14px;
  margin-bottom: 0.8rem;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
section#faqs .faq-item:hover {
  border-color: rgba(10, 47, 255, 0.18);
  box-shadow: 0 6px 16px rgba(10, 47, 255, 0.06);
}
section#faqs .faq-item[open] {
  border-color: rgba(10, 47, 255, 0.25);
  box-shadow: 0 8px 24px rgba(10, 47, 255, 0.10);
}
@media (max-width: 760px) {
  section#faqs .faq-container { padding: 2rem 1.5rem 1.5rem; border-radius: 20px; }
}

/* === Mobile audit fixes (2026-05-04) === */

/* Hamburger: ensure ≥44×44 touch target on mobile */
.nav-hamburger {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* Gallery modal close: ≥44×44 */
.gallery-modal-close {
  min-width: 44px;
  min-height: 44px;
}

/* Footer subscribe button: bump height for tappability */
.footer-pre-newsletter .btn,
.footer-pre-newsletter button[type="submit"] {
  min-height: 44px;
}

/* Player + compare gender tabs: bump height */
.player-gender-tab,
.compare-gender-tab {
  min-height: 40px;
  padding: 0.55rem 1.1rem;
}

/* Club emblems eyebrow: bump from 0.78rem (12.48px) to 0.86rem (13.76px) for mobile readability */
.club-emblems-band-head { font-size: 0.86rem; }

/* Compare grid position labels were 10.4-11.2px — bump to 12.5px+ */
.compare-position,
.compare-card-meta,
.compare-card .compare-meta { font-size: 0.78rem !important; }

/* Player profile source links were 11.84px — bump */
.training-rich-sources a,
.training-rich-sources li { font-size: 0.84rem !important; }

/* Section subtitle on athletes-club "What This Room Has..." 12.8px → 13.5px+ */
.section-tag { font-size: 0.86rem; }

/* /about/ academies-hero-glow: ensure parent clips it (it's already overflow:hidden in most cases) */
.academies-hero,
section:has(> .academies-hero-glow) {
  overflow: hidden;
}

/* Final mobile audit nit fixes */
.player-card-position { font-size: 0.78rem !important; }   /* was 0.7rem (11.2px) */
.pricing-feature-eyebrow { font-size: 0.86rem; }            /* was 12.48px */
.training-rich-sources a { font-size: 0.86rem; }            /* was 11.84px */
.footer-socials a { min-width: 32px; min-height: 32px; padding: 4px; }

/* ============================================================
   Mobile polish — 2026-05-04 second pass
   ============================================================ */

/* === Hard-clip horizontal overflow at body/html level (mobile only) ===
   Catches any rogue wide element that escapes a misconfigured ancestor and
   stops the user from being able to scroll right into dead black space. */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  body { position: relative; }
}

/* === Hide hero scroll-cue on mobile to avoid underlap with CTA buttons === */
@media (max-width: 768px) {
  .hero-scroll-cue {
    display: none !important;
  }
  /* Also bump the hero bottom padding so CTA buttons have breathing room */
  .hero, .hero--fun, .hero--holiday, .hero--residential, .hero--athletes,
  .hero--centre, .hero--method, .hero--enquire, .hero--about {
    padding-bottom: 2.5rem;
  }
}

/* === Center-justify text content on mobile (was left) ===
   Hero text, headings, subtitles all centre on mobile. Body copy in
   articles stays left-aligned (paragraphs read better that way). */
@media (max-width: 768px) {
  .hero-text,
  .hero-text > *,
  .hero-fun-sub,
  .hero-residential-sub,
  .hero-athletes-sub,
  .hero-method-sub,
  .hero-meta-strip,
  .hero-actions,
  .hero-fun-actions,
  .hero-ctas,
  .hero-athletes-actions,
  .hero-ctas--method {
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  /* Section heads, eyebrows, intro paragraphs */
  .welcome h2,
  .welcome > .container > p,
  .welcome--narrow,
  .pillars-head,
  .pathway-head,
  .methodology-strip-head,
  .upcoming-camps-head,
  .for-against-head,
  .toolbox-section .container > .fade-in,
  section > .container > .fade-in {
    text-align: center;
  }
  /* Section tags / eyebrows always centre on mobile */
  .section-tag {
    display: inline-block;
    text-align: center;
  }

  /* === Mega menu (mobile drawer) ===
     Top-level (Camps / Weekly Training / About / Journal / Book a Place)
     and the trigger buttons are centred. The submenu items inside each
     dropdown stay LEFT-aligned for readability — they're a list, not titles. */
  .nav-links,
  .nav-links li {
    text-align: center;
  }
  .nav-link, .nav-trigger {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  /* Submenu items (the dropdown rows) — left-aligned */
  .nav-mega-inner,
  .nav-mega-item {
    text-align: left;
    justify-content: flex-start;
  }
  .nav-mega-item .nav-mega-title,
  .nav-mega-item .nav-mega-desc {
    text-align: left;
  }

  /* Footer copy stays left in columns (better legibility) but brand intro centers */
  .footer-pre-statement {
    text-align: center;
  }
  .footer-pre-newsletter {
    text-align: center;
  }
  .footer-pre-newsletter .footer-pre-input-row {
    justify-content: center;
  }
}

/* === Mobile CTA blocks: centre everything in cta-split + similar === */
@media (max-width: 768px) {
  .cta-split-text,
  .cta-split-text h2,
  .cta-split-text p,
  .cta-strip-inner,
  .cta-strip-inner h3,
  .cta-strip-inner p,
  .cta-banner-inner,
  .cta-banner-inner h2,
  .cta-banner-inner p {
    text-align: center;
  }
  .cta-split-actions,
  .cta-strip-actions,
  .cta-banner-actions {
    justify-content: center;
    align-items: center;
  }
  /* Reduce CTA padding on mobile so content has room */
  .cta-split-text { padding: 2.75rem 1.5rem; }
}

/* ============================================================
   Mobile polish round 3 — 2026-05-04
   ============================================================ */

/* === Journal: feature card stacks on mobile, body text centred === */
@media (max-width: 768px) {
  .journal-feature-card {
    grid-template-columns: 1fr !important;
    gap: 0;
  }
  .journal-feature-body {
    padding: 1.5rem 1.25rem 1.75rem;
    text-align: center;
    align-items: center;
  }
  .journal-feature-body h2 {
    font-size: 1.5rem;
    word-break: break-word;
    hyphens: auto;
  }
  .journal-feature-body p {
    font-size: 0.95rem;
  }
  /* The Camps and programmes pill should not be cut off — let it size naturally */
  .journal-feature-body .journal-tag {
    align-self: center;
  }
  /* "Four topics, written by coaches" h2 needs to fit on mobile */
  .next-steps-strip + p, /* defensive */
  section .container > h2 {
    word-break: break-word;
    hyphens: auto;
  }
  .welcome h2,
  .welcome > .container > h2 {
    font-size: 1.7rem !important;
    line-height: 1.18 !important;
    word-break: break-word;
    hyphens: auto;
  }

  /* Topic cards (next-steps-strip on journal) — centre content */
  .next-steps-strip { text-align: center; }
  .next-step {
    text-align: center;
  }
  .next-step h3, .next-step p, .next-step-num {
    text-align: center;
  }
  .next-step-num { display: inline-block; }

  /* Journal cards (the article tiles) — centre body */
  .journal-card-body {
    text-align: center;
  }
  .journal-card-body h3, .journal-card-body p, .journal-card-meta, .journal-tag {
    text-align: center;
  }
}

/* === Player profiles: mobile section nav === */
@media (max-width: 1100px) {
  .player-section-nav {
    display: flex !important;          /* Was: display:none */
    position: sticky;
    top: 56px;                         /* sit just below the navbar (mobile is sticky too) */
    left: 0;
    right: 0;
    z-index: 50;
    padding: 0.6rem 0.75rem;
    margin: 0 -1rem 1.25rem;            /* break out of container */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(10, 14, 26, 0.08);
    border-radius: 0;
    box-shadow: 0 4px 14px rgba(10, 14, 26, 0.05);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: none;
  }
  .player-section-nav::-webkit-scrollbar { display: none; }
  .player-section-nav .player-section-nav-label { display: none; }
  .player-section-nav ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .player-section-nav li { flex-shrink: 0; }
  .player-section-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem !important;
    border-radius: 999px;
    background: rgba(10, 47, 255, 0.06);
    color: var(--navy);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }
  .player-section-nav a.is-active {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
  }
  .player-section-nav a svg { width: 14px; height: 14px; }
}

/* === Methodology strip blue variant retired (replaced by default light theme on dev-centre) ===
   Parent handbook still uses --blue, dark navy bg with white text, remains unchanged. */

/* ============================================================
   Mobile polish round 4 — 2026-05-04 evening
   ============================================================ */

/* === Bring back hero scroll-cue (was hidden globally; only hide where it overlaps) ===
   Earlier the cue was clashing with hero CTAs on Holiday Fun Days. Reposition
   instead of hiding. Show on every page on mobile, just push it lower so it
   doesn't sit on top of buttons. */
@media (max-width: 768px) {
  .hero-scroll-cue {
    display: flex !important;
    bottom: 1.25rem !important;
    font-size: 0.62rem !important;
    opacity: 0.55;
  }
  .hero-scroll-cue span { letter-spacing: 0.18em; }
  /* Slightly more bottom space in heroes so cue + CTAs don't overlap */
  .hero, .hero--fun, .hero--holiday, .hero--residential, .hero--athletes,
  .hero--centre, .hero--method, .hero--enquire, .hero--about {
    padding-bottom: 5rem;
  }
}

/* === Centre the MATICO FOOTBALL logo on mobile === */
@media (max-width: 900px) {
  .navbar > .container {
    justify-content: center;
    position: relative;
  }
  .nav-logo {
    margin: 0 auto;
  }
  .nav-hamburger {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* === Foundations section: heading ABOVE the video on mobile ===
   The legacy mobile rule had .scroll-expand-video { order: -1 } which pushed
   the video before the --top heading. Override so order is natural:
   --top heading -> video -> --bottom paragraph + button. */
@media (max-width: 1023px) {
  .scroll-expand-video {
    order: 0 !important;
  }
  .scroll-expand-text--top {
    order: -1 !important;
    margin-bottom: 1rem;
  }
  .scroll-expand-text--bottom {
    order: 1 !important;
    margin-top: 1rem;
  }
}

/* === Page scroll tracker (left edge, like article tracing-beam) ===
   Used on parent-handbook. Fixed-position vertical line + animated dot
   that fills as the user scrolls down the page. */
.page-scroll-tracker {
  position: fixed;
  left: 1rem;
  top: 12vh;
  bottom: 12vh;
  width: 24px;
  z-index: 30;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.page-scroll-tracker:active { cursor: grabbing; }
.page-scroll-tracker::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(10, 47, 255, 0.16) 6%,
    rgba(10, 47, 255, 0.16) 94%,
    transparent 100%);
  border-radius: 2px;
}
.page-scroll-tracker-fill {
  position: absolute;
  left: 6px;
  top: 0;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, var(--blue) 0%, var(--yellow) 100%);
  border-radius: 2px;
  transition: height 0.12s linear;
}
.page-scroll-tracker-dot {
  position: absolute;
  left: 6px;
  top: 0;
  width: 12px;
  height: 12px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--blue);
  box-shadow: 0 0 0 4px rgba(10, 47, 255, 0.18), 0 4px 14px rgba(10, 47, 255, 0.25);
  transition: top 0.12s linear;
}
@media (max-width: 480px) {
  .page-scroll-tracker { left: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .page-scroll-tracker-fill, .page-scroll-tracker-dot { transition: none; }
}

/* === Footer pre-statement subtext: hide on mobile (FA-qualified... line) === */
@media (max-width: 768px) {
  .footer-pre-sub { display: none; }
}

/* === Bento images: stronger fill rule with absolute positioning ===
   Some image sources have internal padding causing them to appear smaller
   than the bento cell. Force absolute fill so they always cover the cell. */
.bento-item {
  position: relative;
}
.bento-item > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: inherit;
}

/* === Safeguarding bento: prevent text overflow on tight viewports === */
.handbook-bento .bento-cell h3,
.handbook-bento .bento-cell p,
.handbook-bento .bento-cell .bento-eyebrow {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
@media (max-width: 1023px) {
  .handbook-bento .bento-cell h3 { font-size: 1.02rem; line-height: 1.3; }
  .handbook-bento .bento-cell p { font-size: 0.88rem; line-height: 1.5; }
  .handbook-bento .bento-cell { padding: 1.25rem 1.25rem; }
}
@media (max-width: 600px) {
  .handbook-bento .bento-cell h3 { font-size: 0.98rem; }
}

/* === Parent handbook side nav (reuses player-section-nav patterns) ===
   Hidden < 1100px, sticky left rail on desktop. Mobile uses the same
   horizontal pill style we already added for player-section-nav. */

/* === Mobile homepage hero: push text close to navbar + stack subtext lines === */
@media (max-width: 768px) {
  /* Override the centered hero layout so content sits near the top */
  .hero#heroSection .container {
    align-items: flex-start;
    padding-top: 1.25rem;     /* small gap below navbar */
    padding-bottom: 5rem;
  }
  .hero#heroSection {
    align-items: flex-start;
    justify-content: flex-start;
  }
  .hero#heroSection .hero-text {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: flex-start;
  }
  .hero-heading-full {
    margin-top: 0.5rem !important;
    margin-bottom: 0.85rem !important;
  }
  /* Stacked subtext — each sentence on its own line, centred */
  .hero-sub-stack {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0 0 1.5rem;
    text-align: center;
  }
  .hero-sub-stack span {
    display: block;
    line-height: 1.4;
  }
}

/* === What We Offer section: ensure clear separation from scroll-morph above === */
@media (max-width: 900px) {
  /* Add breathing room above the welcome (What We Offer) section so it
     doesn't visually butt up against the morph cards above it. Also
     ensure scroll-morph clips its content. */
  .scroll-morph-section { overflow: hidden; }
  .scroll-morph-section + div + .welcome,
  .scroll-morph-section ~ .welcome:first-of-type {
    padding-top: 3rem;
  }
  /* Tab buttons: bigger touch target, more visible separator */
  .welcome-tabs {
    margin-top: 1.25rem !important;
    padding: 0.4rem;
    background: rgba(10, 47, 255, 0.04);
    border-radius: 999px;
  }
  .welcome-tabs button {
    min-height: 44px;
    padding: 0.6rem 1rem !important;
    flex: 1;
    border-radius: 999px;
  }
}

/* ==================== RESIDENTIAL 3-TIER PRICING ==================== */
/* Per Google Doc pricing tab — UK / International / UK Local Programme */
.residential-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
}
.residential-pricing-card {
  background: #fff;
  border: 1px solid rgba(10, 14, 26, 0.08);
  border-radius: 18px;
  padding: 1.75rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.residential-pricing-card--featured {
  border: 2px solid var(--blue);
  box-shadow: 0 14px 40px rgba(10, 47, 255, 0.12);
  transform: translateY(-8px);
}
.residential-pricing-flag {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
}
.residential-pricing-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue);
}
.residential-pricing-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0.4rem 0 0.5rem;
  line-height: 1.25;
}
.residential-pricing-elig {
  font-size: 0.82rem;
  color: var(--navy);
  opacity: 0.7;
  line-height: 1.5;
  margin: 0 0 1.25rem;
}
.residential-pricing-options {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.residential-pricing-options li {
  padding: 0.65rem 0.85rem;
  background: var(--soft);
  border-radius: 10px;
  border: 1px solid rgba(10, 47, 255, 0.06);
}
.residential-pricing-options li.rp-opt-highlight {
  background: linear-gradient(135deg, rgba(200, 230, 53, 0.18), rgba(10, 47, 255, 0.06));
  border-color: rgba(200, 230, 53, 0.4);
}
.rp-opt-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.rp-opt-dates {
  font-size: 0.7rem;
  color: var(--grey, #6b7280);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.rp-opt-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.rp-opt-price strong {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--blue);
  letter-spacing: -0.01em;
}
.rp-opt-eb {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  color: var(--blue);
  background: rgba(10, 47, 255, 0.1);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}
.rp-opt-std {
  font-size: 0.72rem;
  color: var(--grey, #6b7280);
  margin-top: 0.2rem;
}
.rp-cta {
  width: 100%;
  text-align: center;
  font-size: 0.88rem;
}
.residential-pricing-foot {
  max-width: 760px;
  margin: 1.25rem auto 0;
  text-align: center;
  padding: 0.85rem 1.25rem;
  background: rgba(10, 14, 26, 0.04);
  border-radius: 12px;
}
.residential-pricing-foot p {
  font-size: 0.88rem;
  color: var(--navy);
  opacity: 0.85;
  margin: 0;
  line-height: 1.55;
}

/* ===== Residential hero intro block (moved out of hero) ===== */
.residential-intro-block {
  background: #fff;
  padding: 2.5rem 0 1rem;
}
.residential-intro-text {
  max-width: 880px;
  margin: 0 auto;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--navy, #0a1a3a);
  text-align: center;
  opacity: 0.86;
}
@media (max-width: 720px) {
  .residential-intro-block { padding: 2rem 0 0.5rem; }
  .residential-intro-text { font-size: 0.98rem; line-height: 1.6; }
}

/* ===== Why-residential flip cards (homepage photos as bg, copy front) ===== */
.standard-card.why-flip-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 240px;
  border-radius: 18px;
  color: #fff;
  background: var(--navy, #0a1a3a);
  padding: 0;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.why-flip-card .why-flip-front {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 240px;
  padding: 1.6rem 1.5rem 1.3rem;
  z-index: 2;
}
.why-flip-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.5s ease, transform 0.6s ease;
}
.why-flip-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 26, 58, 0.85) 0%, rgba(10, 26, 58, 0.65) 45%, rgba(10, 26, 58, 0.92) 100%);
  z-index: 1;
  transition: background 0.4s ease;
}
.why-flip-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px -22px rgba(10, 26, 58, 0.5);
}
.why-flip-card:hover::before {
  opacity: 1;
  transform: scale(1.08);
}
.why-flip-card:hover::after {
  background: linear-gradient(180deg, rgba(10, 26, 58, 0.55) 0%, rgba(10, 26, 58, 0.82) 50%, rgba(10, 26, 58, 0.95) 100%);
}
.why-flip-card.why-flip-card--logo::before {
  background-size: 60%;
  background-repeat: no-repeat;
  background-color: var(--blue, #0046ad);
}
.why-flip-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.18rem;
  color: #fff;
  letter-spacing: -0.01em;
}
.why-flip-card p {
  margin: 0;
  font-size: 0.94rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.55;
}
.welcome .why-flip-card h3,
.welcome--white .why-flip-card h3 { color: #fff; }
.welcome .why-flip-card p,
.welcome--white .why-flip-card p { color: rgba(255, 255, 255, 0.92); }
.why-flip-hint {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--yellow, #fcd34d);
  opacity: 0.9;
}
@media (hover: none) {
  .why-flip-hint { display: none; }
  .why-flip-card::before { opacity: 0.35; }
}

/* ===== Bento photo-overlay tile (bottom-right End-of-week report) ===== */
.bento-item.bento-item--photo-overlay {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  border-radius: 18px;
  min-height: 200px;
}
.bento-item--photo-overlay img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
}
.bento-item--photo-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 26, 58, 0) 30%, rgba(10, 26, 58, 0.55) 60%, rgba(10, 26, 58, 0.92) 100%);
  z-index: 1;
}
.bento-photo-overlay-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 1.5rem 1.35rem 1.25rem;
}
.bento-photo-overlay-body .bento-item-eyebrow {
  color: var(--yellow, #fcd34d);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin-bottom: 0.4rem;
}
.bento-photo-overlay-body h3 { margin: 0 0 0.35rem; font-size: 1.1rem; color: #fff; }
.bento-photo-overlay-body p { margin: 0; font-size: 0.88rem; color: rgba(255,255,255,0.84); line-height: 1.5; }

/* ===== Ackworth facility tiles, solid blue radial + green hover, readable text ===== */
.standard-card.facility-tile {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 1.65rem 1.55rem 1.45rem;
  background: radial-gradient(circle at 30% 20%, #1c4fff 0%, #0a2fff 60%, #0922c4 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 36px -18px rgba(10, 26, 58, 0.4);
  transition: background 0.32s ease, transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}
.facility-tile:hover {
  background: radial-gradient(circle at 30% 20%, #d3ee5c 0%, #c8e635 55%, #a8c220 100%);
  color: var(--navy, #0a1a3a);
  transform: translateY(-3px);
  border-color: rgba(10, 26, 58, 0.12);
  box-shadow: 0 22px 46px -18px rgba(200, 230, 53, 0.55);
}
.facility-tile h3 {
  margin: 0 0 0.6rem;
  color: #fff;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
  transition: color 0.32s ease;
}
.facility-tile p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #fff !important;
  opacity: 1;
  transition: color 0.32s ease;
}
.facility-tile:hover h3 { color: var(--navy, #0a1a3a); }
.facility-tile:hover p { color: var(--navy, #0a1a3a) !important; }

/* ===== Footer Matico logo: prevent top-of-circle clipping ===== */
.footer-redesign .footer-brand-col .footer-logo-wrap {
  overflow: visible !important;
  align-items: center !important;
  min-height: 60px;
  padding-top: 4px;
}
.footer-redesign .footer-brand-col .footer-eagle {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

/* ===== Footer divider: visible line + symmetric breath each side =====
   The previous version had .footer-pre with padding-bottom 3rem stacking ON TOP of the
   divider's top margin — visible gap was 67px above vs 19px below. Zero the pre's bottom
   padding so the divider's margin is the only thing creating the gap. Bumped to 38px
   each side so the breath is clearly readable on every device. */
.footer-redesign .footer-pre {
  padding-top: 19px !important;
  padding-bottom: 0 !important;
}
.footer-redesign .footer-divider {
  width: 100%;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 25%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.22) 75%, transparent 100%) !important;
  margin: 38px 0 !important;
}

/* ===== About page, 'What We Stand For' — keep 50/50 grid, fit photo height to 5 cards ===== */
@media (min-width: 901px) {
  #values .features-grid {
    align-items: stretch;
  }
  #values .features-list {
    gap: 0.65rem;
  }
  #values .feature-card {
    padding: 0.9rem 1.15rem;
  }
  #values .feature-card p {
    font-size: 0.88rem;
    line-height: 1.45;
    margin-top: 0.3rem;
  }
  #values .feature-card .feature-card-header h3 {
    font-size: 1rem;
  }
  #values .features-image-wrap {
    height: 100%;
    display: flex;
  }
  #values .features-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md, 14px);
    max-height: none;
  }
}

/* ===== About stats bar, white background variant ===== */
.safeguarding-band--white {
  background: #fff;
  color: var(--navy, #0a1a3a);
}
.safeguarding-band--white .safeguarding-band-cell strong {
  color: var(--blue, #0a2fff);
}
.safeguarding-band--white .safeguarding-band-cell strong:has(.num-ticker)::after {
  background: var(--yellow, #c8e635);
}
.safeguarding-band--white .safeguarding-band-cell strong:not(:has(.num-ticker)) {
  color: var(--navy, #0a1a3a);
}
.safeguarding-band--white .safeguarding-band-cell > span {
  color: rgba(10, 26, 58, 0.7);
}
.safeguarding-band--white .safeguarding-band-cell + .safeguarding-band-cell::before {
  background: linear-gradient(180deg, transparent 0%, rgba(10,26,58,0.12) 50%, transparent 100%);
}

/* ===== What We Do page, toolbox heading single line desktop ===== */
@media (min-width: 901px) {
  .toolbox-section h2 {
    white-space: nowrap;
  }
}

/* ===== Breathing room between testimonial and final CTA ===== */
.big-testimonial + .cta-split,
.big-testimonial + .cta-split--curved {
  margin-top: 3rem;
}

/* ===== Footer wordmark moved INTO footer-pre, under the h2 ===== */
.footer-logo-wrap--pre {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.1rem;
  padding: 0;
  height: auto;
  overflow: visible;
}
.footer-logo-wrap--pre .footer-eagle {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.footer-logo-wrap--pre .footer-brand-name {
  font-family: "Baradig", "Inter", -apple-system, system-ui, sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  line-height: 1;
}
@media (max-width: 1023px) {
  .footer-logo-wrap--pre { margin-top: 0.85rem; }
  .footer-logo-wrap--pre .footer-brand-name { font-size: 1rem !important; }
  .footer-logo-wrap--pre .footer-eagle { width: 38px !important; height: 38px !important; }
}

/* ===== Athletes Club ac-fit cards, all 5 in one row on desktop ===== */
@media (min-width: 901px) {
  .ac-fit-grid.ac-fit-grid--row {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0.8rem !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
  }
  .ac-fit-grid--row .ac-fit-card {
    padding: 1.15rem 1rem !important;
  }
  .ac-fit-grid--row .ac-fit-card h3 {
    font-size: 0.9rem;
  }
  .ac-fit-grid--row .ac-fit-card p {
    font-size: 0.78rem;
  }
}
.ac-fit-card .ac-fit-icon {
  font-size: inherit !important;
  margin-bottom: 0.65rem !important;
}
.ac-fit-card .ac-fit-icon svg {
  display: inline-block;
  width: 28px;
  height: 28px;
  color: var(--blue, #0a2fff);
  background: rgba(10, 47, 255, 0.1);
  padding: 0.55rem;
  border-radius: 12px;
  box-sizing: content-box;
}
.ac-fit-card:nth-child(2) .ac-fit-icon svg,
.ac-fit-card:nth-child(5) .ac-fit-icon svg {
  color: var(--navy, #0a1a3a);
  background: rgba(200, 230, 53, 0.22);
}

/* ===== HOME SANDBOX (/home-sandbox/) ===== */
.home-outcomes-row {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 0.7rem;
  max-width: 760px;
}
.home-outcomes-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  background: rgba(10, 47, 255, 0.06);
  border: 1px solid rgba(10, 47, 255, 0.14);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy, #0a1a3a);
  letter-spacing: 0.01em;
}
.home-outcomes-row li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue, #0a2fff);
  display: inline-block;
}

.why-families-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 1180px;
  margin: 0 auto;
}
.why-families-card {
  background: #fff;
  border: 1px solid rgba(10, 14, 26, 0.08);
  border-radius: 18px;
  padding: 1.85rem 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.why-families-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -22px rgba(10, 26, 58, 0.3);
}
.why-families-icon {
  display: inline-flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(10, 47, 255, 0.1), rgba(200, 230, 53, 0.18));
  color: var(--blue, #0a2fff);
  border-radius: 14px;
  margin-bottom: 0.6rem;
}
.why-families-icon svg { width: 26px; height: 26px; }
.why-families-card h3 {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--navy, #0a1a3a);
  letter-spacing: -0.01em;
}
.why-families-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(10, 26, 58, 0.78);
}
@media (max-width: 960px) {
  .why-families-grid { grid-template-columns: 1fr; max-width: 540px; }
}

/* ===== ATHLETES CLUB SANDBOX (/athletes-club-sandbox/) ===== */
.hero--athletes-sandbox .hero-heading-ac {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  text-align: center;
  margin: 0 auto 1rem;
  max-width: 1000px;
}
.hero-ac-sub {
  color: rgba(255,255,255,0.9);
  text-align: center;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto 1.5rem;
}
.hero-meta-strip--ac {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 0.8rem;
  margin: 0 auto 1.75rem;
  padding: 0.55rem 1.1rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  color: #fff;
  font-size: 0.92rem;
  backdrop-filter: blur(8px);
}
.hero-meta-strip--ac strong { color: var(--yellow, #c8e635); font-weight: 800; }
.hero-meta-strip--ac .hero-meta-dot { color: rgba(255,255,255,0.45); }
.hero-ac-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.25rem;
  flex-wrap: wrap;
}

/* ===== AC sandbox session 4x2 grid ===== */
.ac-session-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1240px;
  margin: 0 auto;
}
.ac-session-tile {
  background: #fff;
  border: 1px solid rgba(10, 14, 26, 0.08);
  border-radius: 16px;
  padding: 1.4rem 1.25rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ac-session-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -18px rgba(10, 26, 58, 0.28);
}
.ac-session-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: rgba(10, 47, 255, 0.08);
  color: var(--blue, #0a2fff);
  border-radius: 11px;
  margin-bottom: 0.55rem;
}
.ac-session-icon svg { width: 22px; height: 22px; }
.ac-session-tile h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--navy, #0a1a3a);
  line-height: 1.25;
}
.ac-session-tile p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--navy, #0a1a3a);
  opacity: 0.7;
  line-height: 1.5;
}
.ac-soft-cta {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
@media (max-width: 960px) {
  .ac-session-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .ac-session-grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* ===== AC sandbox featured video band (dark) ===== */
.ac-featured-video {
  background: var(--navy, #0a1a3a);
  padding: 4.5rem 0;
  position: relative;
}
.ac-featured-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(10, 47, 255, 0.22), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(200, 230, 53, 0.16), transparent 45%);
  pointer-events: none;
}
.ac-featured-video > .container { position: relative; z-index: 1; }
.ac-video-frame {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #050a16;
  box-shadow: 0 26px 60px -22px rgba(0, 0, 0, 0.6), 0 4px 14px rgba(0, 0, 0, 0.25);
}
.ac-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
}
.ac-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  color: rgba(255,255,255,0.45);
  background: linear-gradient(135deg, #0a1a3a 0%, #122d6e 100%);
  text-align: center;
  z-index: 0;
}
.ac-video-placeholder p {
  margin: 0;
  font-size: 0.88rem;
  max-width: 360px;
  line-height: 1.5;
}
.ac-video-placeholder code {
  background: rgba(0,0,0,0.35);
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  font-size: 0.82rem;
}

/* ===== AC sandbox proven results ===== */
.ac-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto 3rem;
}
.ac-outcome-card {
  background: #fff;
  border: 1px solid rgba(10, 14, 26, 0.08);
  border-radius: 16px;
  padding: 1.5rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.ac-outcome-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: rgba(200, 230, 53, 0.2);
  color: var(--navy, #0a1a3a);
  border-radius: 12px;
}
.ac-outcome-icon svg { width: 24px; height: 24px; }
.ac-outcome-card h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
}
.ac-outcome-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--navy);
  opacity: 0.72;
  line-height: 1.55;
}
.ac-certificates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto 2.5rem;
}
.ac-cert-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--navy, #0a1a3a);
  box-shadow: 0 18px 40px -18px rgba(10, 26, 58, 0.35);
}
.ac-cert-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ac-cert-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,26,58,0) 55%, rgba(10,26,58,0.85) 100%);
}
.ac-cert-meta {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 2;
  color: #fff;
}
.ac-cert-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  background: var(--yellow, #c8e635);
  color: var(--navy);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.ac-cert-meta p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.ac-medium-cta {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.ac-medium-cta-lead {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 1rem;
}
@media (max-width: 960px) {
  .ac-outcomes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-certificates { grid-template-columns: 1fr; max-width: 360px; }
}

/* ===== AC sandbox final CTA refinements ===== */
.cta-split--ac .section-tag--white {
  color: var(--yellow, #c8e635);
}
.cta-split--ac .cta-split-fine {
  font-size: 0.82rem;
  opacity: 0.7;
  margin: 1rem 0 0;
}
/* Compact section-tag pill that hugs its text width, centred above the h2 */
.cta-split--ac .section-tag.cta-split-tag--compact {
  display: block !important;
  width: max-content !important;
  max-width: max-content !important;
  min-width: 0 !important;
  padding: 0.3rem 0.95rem !important;
  text-align: center !important;
  margin: 0 0 1.25rem 0 !important;
}

/* ===== Residential facility 3D flip cards ===== */
.standard-card.facility-flip3d {
  perspective: 1200px;
  background: transparent;
  border: 0;
  padding: 0;
  min-height: 240px;
  position: relative;
  overflow: visible;
  box-shadow: none;
}
.facility-flip3d-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.facility-flip3d:hover .facility-flip3d-inner {
  transform: rotateY(180deg);
}
.facility-flip3d-front,
.facility-flip3d-back {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}
.facility-flip3d-front {
  background: radial-gradient(circle at 30% 20%, #1c4fff 0%, #0a2fff 60%, #0922c4 100%);
  color: #fff;
  padding: 1.65rem 1.55rem 1.45rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 36px -18px rgba(10, 26, 58, 0.4);
}
.facility-flip3d-front h3 {
  margin: 0 0 0.55rem;
  color: #fff;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
}
.facility-flip3d-front p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #fff;
  opacity: 1;
}
.welcome .facility-flip3d-front h3,
.welcome--white .facility-flip3d-front h3 { color: #fff; }
.welcome .facility-flip3d-front p,
.welcome--white .facility-flip3d-front p { color: #fff; opacity: 1; }
.facility-flip3d-back {
  background-size: cover;
  background-position: center;
  background-color: var(--navy, #0a1a3a);
  transform: rotateY(180deg);
  box-shadow: 0 20px 44px -18px rgba(10, 26, 58, 0.55);
}
.facility-flip3d-back::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,26,58,0) 50%, rgba(10,26,58,0.35) 100%);
}
@media (hover: none) {
  .facility-flip3d:hover .facility-flip3d-inner { transform: none; }
}

@media (max-width: 1023px) {
  .residential-pricing-grid { grid-template-columns: 1fr; max-width: 580px; gap: 2rem; }
  .residential-pricing-card--featured { transform: none; }
  .residential-pricing-flag { top: -14px; }
}

/* ==================== NAV MEGA: COMING SOON ITEMS ==================== */
.nav-mega-item--coming-soon {
  opacity: 0.55;
  cursor: not-allowed;
  position: relative;
}
.nav-mega-item--coming-soon:hover {
  opacity: 0.7;
  background: transparent !important;
}
.nav-mega-soon {
  display: inline-block;
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: middle;
  line-height: 1.4;
}

/* ==================== HOMEPAGE TRUST BLOCK (Emeel intro) ==================== */
.home-trust-block {
  background: linear-gradient(135deg, var(--navy) 0%, #14182d 50%, #0a2fff 200%);
  color: var(--white);
  padding: 5rem 0 5.5rem;
  position: relative;
  isolation: isolate;
}
.home-trust-grid {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 3rem;
  align-items: center;
}
.home-trust-img {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08);
  position: relative;
}
.home-trust-img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.home-trust-text h2 {
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0.5rem 0 1rem;
  line-height: 1.15;
}
.home-trust-text p {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 1rem;
}
.home-trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.5rem;
}
.home-trust-pills .trust-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.55rem 0.95rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}
.home-trust-pills .trust-pill strong {
  color: var(--yellow);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-trust-pills .trust-pill span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.78);
}
/* Single-phrase pill variant (post pin #136): no eyebrow, full label on one line */
.home-trust-pills--single { gap: 0.55rem; }
.home-trust-pills .trust-pill--single {
  flex-direction: row;
  align-items: center;
  padding: 0.55rem 0.95rem;
}
.home-trust-pills .trust-pill--single span {
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
}
@media (max-width: 900px) {
  .home-trust-grid { grid-template-columns: 1fr; gap: 2rem; }
  .home-trust-img { max-width: 320px; margin: 0 auto; }
  .home-trust-text { text-align: center; }
  .home-trust-pills { justify-content: center; }
  .home-trust-text h2 { font-size: 1.7rem; }
}

/* ==================== STAGE 4c — 3-TIER PRICING COMPARISON (2026-05-29) ====================
   Stripe-style: rows = features, columns = tiers. Sticky tier headers on scroll. Mobile
   stacks to one card per tier with mobile-label spans revealing the tier name on each cell. */
.pcompare {
  max-width: 1180px;
  margin: 0 auto;
  background: #fff;
  border-radius: 22px;
  box-shadow:
    0 2px 6px rgba(10, 14, 26, 0.04),
    0 18px 48px rgba(10, 14, 26, 0.08);
  border: 1px solid rgba(10, 14, 26, 0.06);
  overflow: hidden;
  position: relative;
}

/* Sticky header row (rows = features). 4 columns: feature label + 3 tier columns.
   Offset by the site-header (108px desktop / 67px mobile) + the residential dates
   sticky bar (40px) so tier names stay readable while scrolling the rows. */
.pcompare-head {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 0;
  position: sticky;
  top: 156px;
  z-index: 5;
  background: linear-gradient(180deg, #fff 0%, #fff 70%, rgba(255,255,255,0) 100%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(10, 14, 26, 0.08);
}
@media (max-width: 880px) {
  .pcompare-head { top: auto; position: relative; }
}
.pcompare-head-spacer { padding: 1.5rem; }

.pcompare-tier {
  padding: 1.6rem 1.25rem 1.5rem;
  text-align: left;
  border-left: 1px solid rgba(10, 14, 26, 0.06);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #fff;
  transition: background 0.25s ease;
}
.pcompare-tier:hover { background: rgba(10, 47, 255, 0.025); }
.pcompare-tier--featured {
  background: linear-gradient(180deg, rgba(10, 47, 255, 0.04) 0%, rgba(200, 230, 53, 0.04) 100%);
  position: relative;
  z-index: 1;
}
.pcompare-tier--featured::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--blue);
  border-radius: 0;
  pointer-events: none;
}
.pcompare-tier-flag {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.3rem 0.85rem;
  border-radius: 0 0 8px 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pcompare-tier-eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}
.pcompare-tier-name {
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.25;
  color: var(--navy);
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.pcompare-tier-price {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.1rem;
}
.pcompare-tier-price-eb {
  font-size: 0.95rem;
  color: var(--navy);
}
.pcompare-tier-price-eb strong {
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.pcompare-tier-price-std {
  font-size: 0.78rem;
  color: rgba(10, 14, 26, 0.55);
  font-weight: 600;
}
.pcompare-tier-cta {
  margin-top: 0.85rem;
  font-size: 0.78rem !important;
  padding: 0.55rem 1.1rem !important;
  align-self: flex-start;
}

/* Feature rows */
.pcompare-rows { background: #fff; }
.pcompare-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(10, 14, 26, 0.06);
  transition: background 0.12s ease;
}
.pcompare-row:hover { background: rgba(10, 47, 255, 0.025); }
.pcompare-feature {
  padding: 1.05rem 1.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
  display: flex;
  align-items: center;
}
.pcompare-cell {
  padding: 1.05rem 1rem;
  font-size: 1.05rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(10, 14, 26, 0.05);
  position: relative;
}
.pcompare-row .pcompare-cell[data-tier="intl"] {
  background: linear-gradient(180deg, rgba(10, 47, 255, 0.025) 0%, rgba(200, 230, 53, 0.025) 100%);
}
.pcompare-cell--yes { color: #16a34a; }
.pcompare-cell--no  { color: rgba(10, 14, 26, 0.28); font-weight: 600; }
.pcompare-cell--star { color: var(--blue); font-size: 1.2rem; }
.pcompare-cell--addon {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue);
  background: rgba(10, 47, 255, 0.06);
}
.pcompare-row .pcompare-cell[data-tier="intl"].pcompare-cell--addon {
  background: linear-gradient(180deg, rgba(10, 47, 255, 0.09) 0%, rgba(200, 230, 53, 0.09) 100%);
}
.pcompare-mobile-label { display: none; }

/* Both-weeks cross-sell strip */
.pcompare-bothweeks {
  background: linear-gradient(135deg, var(--navy) 0%, #14182d 60%, var(--blue) 220%);
  color: #fff;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.pcompare-bothweeks-eyebrow {
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--yellow);
  white-space: nowrap;
}
.pcompare-bothweeks-prices {
  display: flex;
  gap: 1.5rem;
  flex: 1;
  font-size: 0.92rem;
  flex-wrap: wrap;
}
.pcompare-bothweeks-prices strong { color: var(--yellow); font-weight: 800; }

/* ============= MOBILE — stack into 3 vertical cards ============= */
@media (max-width: 880px) {
  .pcompare {
    background: transparent;
    box-shadow: none;
    border: none;
    overflow: visible;
  }
  /* Hide table head — tier info gets re-rendered as cards via order */
  .pcompare-head {
    display: block;
    position: relative;
    top: auto;
    background: transparent;
    border: none;
    margin-bottom: 1.25rem;
  }
  .pcompare-head-spacer { display: none; }
  .pcompare-tier {
    border: 1px solid rgba(10, 14, 26, 0.12);
    border-radius: 16px;
    background: #fff;
    padding: 1.5rem 1.25rem;
    margin: 0 0 0.75rem;
    text-align: center;
    align-items: center;
  }
  .pcompare-tier--featured {
    box-shadow: 0 8px 28px rgba(10, 47, 255, 0.18);
  }
  .pcompare-tier-cta { align-self: stretch; justify-content: center; }
  /* Feature rows: stack as a single card per row with all 3 cells inline */
  .pcompare-rows {
    background: rgba(10, 47, 255, 0.025);
    border: 1px solid rgba(10, 14, 26, 0.08);
    border-radius: 16px;
    overflow: hidden;
    margin: 0 0 0.75rem;
  }
  .pcompare-row {
    display: block;
    padding: 0.6rem 0;
  }
  .pcompare-feature {
    padding: 0.55rem 1rem 0.4rem;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(10, 14, 26, 0.55);
  }
  .pcompare-cell {
    border-left: 0;
    padding: 0.45rem 1rem;
    justify-content: flex-start;
    gap: 0.55rem;
    font-size: 0.9rem;
    font-weight: 600;
  }
  .pcompare-cell > span:first-child {
    flex-shrink: 0;
    width: 26px;
    text-align: center;
  }
  .pcompare-mobile-label {
    display: inline;
    font-size: 0.85rem;
    color: var(--navy);
    font-weight: 600;
  }
  .pcompare-cell--addon .pcompare-mobile-label { color: var(--blue); }
  .pcompare-bothweeks {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 14px;
    gap: 0.5rem;
  }
  .pcompare-bothweeks-prices { flex-direction: column; gap: 0.4rem; }
}

/* ==================== HOMEPAGE PARENT REVIEWS CAROUSEL ==================== */
.parent-reviews {
  padding: 5rem 0 4rem;
  background: var(--soft);
}
.parent-reviews-carousel {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
}
.parent-reviews-track {
  position: relative;
  min-height: 220px;
}
.parent-review {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  text-align: center;
  padding: 0 1rem;
}
.parent-review.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.parent-review-quote {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--navy);
  font-weight: 500;
  font-style: italic;
  margin: 0 0 1.25rem;
  max-width: 720px;
  margin-inline: auto;
}
.parent-review-cite {
  font-size: 0.92rem;
  color: var(--navy);
  opacity: 0.78;
}
.parent-review-cite strong {
  font-weight: 800;
  opacity: 1;
}
.parent-reviews-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
}
.pr-dot {
  /* Visible dot stays small, but tap area is 44x44 via padding (a11y/tap-target win) */
  width: 44px;
  height: 44px;
  padding: 17px;
  background-color: transparent;
  background-clip: content-box;
  background-image: radial-gradient(circle, rgba(10, 14, 26, 0.22) 100%, transparent 100%);
  background-image: none;
  position: relative;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pr-dot::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(10, 14, 26, 0.22);
  transition: background 0.2s ease, transform 0.2s ease;
}
.pr-dot:hover::before { background: rgba(10, 14, 26, 0.4); }
.pr-dot.is-active::before { background: var(--blue); transform: scale(1.25); }
/* legacy pr-dot hover/active rules superseded by ::before above */
@media (max-width: 700px) {
  .parent-review-quote { font-size: 1rem; }
  .parent-reviews-track { min-height: 280px; }
}

/* ==================== ATHLETES CLUB — "Who It's For" outcome cards ==================== */
.ac-fit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
.ac-fit-card {
  background: #fff;
  border: 1px solid rgba(10, 14, 26, 0.08);
  border-radius: 14px;
  padding: 1.5rem 1.25rem 1.4rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ac-fit-card .ac-fit-icon {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.ac-fit-card h3 {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
}
.ac-fit-card p {
  font-size: 0.86rem;
  color: var(--navy);
  opacity: 0.7;
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .ac-fit-grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* ==================== FOOTER RESTRUCTURE ==================== */
/* Compact brand row aligned with column h3 headers, tagline moved under logo,
   3rd About Us link added. Per latest review feedback. */
.footer-redesign .footer-top {
  align-items: flex-start !important;
}
/* Brand row matches the h3 row height exactly so Matico Football sits in line
   with "Football Camps". Tagline beneath is sized so its bottom edge matches
   the bottom of the 3-item link lists in each column. */
.footer-redesign .footer-brand-col .footer-logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem !important;
  margin: 0 0 0.75rem !important;
  height: 1.4rem;
  line-height: 1;
}
.footer-redesign .footer-brand-col .footer-eagle {
  width: 56px !important;
  height: 56px !important;
}
.footer-redesign .footer-brand-col .footer-brand-name {
  font-family: "Baradig", "Inter", -apple-system, system-ui, sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #fff;
  line-height: 1;
}
.footer-redesign .footer-brand-col .footer-brand-tagline {
  font-size: 0.82rem;
  font-style: italic;
  color: rgba(255,255,255,0.68);
  line-height: 1.55;
  margin: 0;
  max-width: 280px;
}

/* ===== Journal hero, Player Analyses CTA pill ===== */
.journal-hero-pa-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
  padding: 0.7rem 1.15rem 0.7rem 1rem;
  background: linear-gradient(135deg, rgba(252, 211, 77, 0.16), rgba(252, 211, 77, 0.08));
  border: 1px solid rgba(252, 211, 77, 0.55);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 0 0 0 rgba(252, 211, 77, 0);
}
.journal-hero-pa-cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(252, 211, 77, 0.28), rgba(252, 211, 77, 0.14));
  border-color: rgba(252, 211, 77, 0.85);
  box-shadow: 0 10px 30px -10px rgba(252, 211, 77, 0.45);
}
.journal-hero-pa-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.55rem;
  background: var(--yellow, #fcd34d);
  color: var(--navy, #0a1a3a);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.journal-hero-pa-label { color: #fff; }
.journal-hero-pa-arrow {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--yellow, #fcd34d);
  transition: transform 0.18s ease;
}
.journal-hero-pa-cta:hover .journal-hero-pa-arrow { transform: translateX(4px); }
@media (max-width: 640px) {
  .journal-hero-pa-cta {
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.6rem 1rem 0.6rem 0.7rem;
    font-size: 0.85rem;
  }
}

/* ===== What We Do, Matico logo in method intro ===== */
.method-matico-logo {
  display: inline-block;
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin: 0 auto 1rem;
  filter: drop-shadow(0 6px 18px rgba(10, 26, 58, 0.18));
}
@media (max-width: 640px) {
  .method-matico-logo { width: 60px; height: 60px; }
}

/* ===== Residential facility flip cards (background-image reveal) ===== */
.facility-flip-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 240px;
  border-radius: 18px;
  color: #fff;
  background: var(--navy, #0a1a3a);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.facility-flip-card .facility-flip-front {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 240px;
  padding: 1.5rem 1.4rem 1.25rem;
  z-index: 1;
}
.facility-flip-card .facility-flip-front::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  z-index: -2;
  transform: scale(1.04);
  transition: transform 0.6s ease;
}
.facility-flip-card .facility-flip-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 26, 58, 0.15) 0%, rgba(10, 26, 58, 0.55) 55%, rgba(10, 26, 58, 0.92) 100%);
  z-index: -1;
  transition: background 0.35s ease;
}
.facility-flip-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px -22px rgba(10, 26, 58, 0.55);
}
.facility-flip-card:hover .facility-flip-front::before { transform: scale(1.1); }
.facility-flip-card:hover .facility-flip-front::after {
  background: linear-gradient(180deg, rgba(10, 26, 58, 0.25) 0%, rgba(10, 26, 58, 0.7) 50%, rgba(10, 26, 58, 0.95) 100%);
}
.facility-flip-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.18rem;
  color: #fff;
  letter-spacing: -0.01em;
}
.facility-flip-card p {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.86);
  line-height: 1.55;
}
.facility-flip-hint {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--yellow, #fcd34d);
  opacity: 0.9;
}
@media (hover: none) {
  .facility-flip-hint { display: none; }
}

/* ===== FFC coming soon, stats list ===== */
.ffc-coming-soon-stats {
  list-style: none;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1rem;
}
.ffc-coming-soon-stats li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.9);
}
.ffc-coming-soon-stats strong {
  color: var(--yellow, #fcd34d);
  font-weight: 800;
}
@media (max-width: 640px) {
  .ffc-coming-soon-stats { gap: 0.5rem; }
  .ffc-coming-soon-stats li {
    font-size: 0.82rem;
    padding: 0.4rem 0.7rem;
  }
}

/* ===== Homepage positioning slab (replaces old Foundations pill section) ===== */
.home-positioning-slab {
  padding: 3rem 0 3.5rem;
  background: linear-gradient(180deg, #fff 0%, var(--light-bg, #f7f5f0) 100%);
  text-align: center;
}
.home-positioning-slab .container { max-width: 820px; }
.home-positioning-text {
  margin: 0 auto 1.5rem;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.7;
  color: var(--navy, #0a1a3a);
  max-width: 720px;
}
.home-positioning-cta { display: inline-block; }
@media (max-width: 640px) {
  .home-positioning-slab { padding: 2.25rem 0 2.5rem; }
}

/* ===== Homepage Player Analyses prominent feature card ===== */
.home-pa-feature {
  position: relative;
  padding: 4.5rem 0 5rem;
  background: linear-gradient(180deg, #f7f5f0 0%, #fff 100%);
}
.home-pa-feature-card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 0;
  background: linear-gradient(135deg, #0a1a3a 0%, #122d6e 60%, #1a3a8a 100%);
  border-radius: 28px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 28px 70px -20px rgba(10, 26, 58, 0.4), 0 4px 14px rgba(10, 26, 58, 0.12);
  transition: transform 0.32s ease, box-shadow 0.32s ease;
  position: relative;
  isolation: isolate;
}
.home-pa-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(252, 211, 77, 0.16), transparent 45%),
    radial-gradient(circle at 80% 100%, rgba(252, 211, 77, 0.1), transparent 50%);
  z-index: 0;
  pointer-events: none;
}
.home-pa-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 36px 80px -20px rgba(10, 26, 58, 0.5), 0 6px 18px rgba(10, 26, 58, 0.16);
}
.home-pa-feature-img {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  z-index: 1;
}
.home-pa-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform 0.6s ease;
}
.home-pa-feature-card:hover .home-pa-feature-img img {
  transform: scale(1.03);
}
.home-pa-feature-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, transparent 70%, rgba(10, 26, 58, 0.35) 100%);
  pointer-events: none;
}
.home-pa-feature-badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  background: var(--yellow, #fcd34d);
  color: var(--navy, #0a1a3a);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px -8px rgba(10, 26, 58, 0.4);
  z-index: 2;
}
.home-pa-feature-body {
  position: relative;
  padding: 3rem 3rem 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
}
.home-pa-feature-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow, #fcd34d);
  margin-bottom: 0.85rem;
}
.home-pa-feature-body h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}
.home-pa-feature-body p {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}
.home-pa-feature-stats {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
}
.home-pa-feature-stats li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
}
.home-pa-feature-stats strong {
  color: var(--yellow, #fcd34d);
  font-weight: 800;
}
.home-pa-feature-avatars {
  display: flex;
  align-items: center;
  margin: 0 0 1.75rem;
}
.home-pa-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid #0a1a3a;
  margin-left: -10px;
  background: var(--navy, #0a1a3a);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.home-pa-avatar:first-child { margin-left: 0; }
.home-pa-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.home-pa-avatar-more {
  margin-left: 0.85rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
}
.home-pa-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.85rem 1.4rem;
  background: var(--yellow, #fcd34d);
  color: var(--navy, #0a1a3a);
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 10px 22px -8px rgba(252, 211, 77, 0.45);
}
.home-pa-feature-card:hover .home-pa-feature-cta {
  transform: translateX(4px);
  box-shadow: 0 14px 30px -10px rgba(252, 211, 77, 0.65);
}
@media (max-width: 900px) {
  .home-pa-feature { padding: 3rem 0 3.5rem; }
  .home-pa-feature-card {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }
  .home-pa-feature-img { min-height: 280px; }
  .home-pa-feature-img img { object-position: center 20%; }
  .home-pa-feature-img::after { display: none; }
  .home-pa-feature-body { padding: 2rem 1.5rem 2.25rem; }
  .home-pa-feature-stats li { font-size: 0.78rem; padding: 0.35rem 0.65rem; }
}
@media (max-width: 480px) {
  .home-pa-avatar { width: 38px; height: 38px; }
  .home-pa-feature-cta { padding: 0.75rem 1.2rem; font-size: 0.9rem; }
}

/* ===== Residential coverflow carousel (Ackworth photos, square crops) ===== */
.residential-coverflow {
  --cf-size: 360px;
  --cf-gap: 28px;
  --cf-side-scale: 0.66;
  --cf-side-opacity: 0.42;
  position: relative;
  margin: 1rem 0 1.5rem;
  user-select: none;
}
.residential-coverflow-stage {
  position: relative;
  height: calc(var(--cf-size) + 40px);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.residential-coverflow-track {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cf-size);
  height: var(--cf-size);
  transform: translate(-50%, -50%);
}
.residential-coverflow-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cf-size);
  height: var(--cf-size);
  border-radius: 22px;
  overflow: hidden;
  background: var(--navy, #0a1a3a);
  box-shadow: 0 16px 40px -16px rgba(10, 26, 58, 0.35);
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 600ms ease,
              box-shadow 600ms ease,
              z-index 0ms 300ms;
  transform: translateX(0) scale(var(--cf-side-scale));
  opacity: 0;
  pointer-events: none;
  filter: saturate(0.85) brightness(0.92);
  z-index: 1;
}
.residential-coverflow-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Position rules driven by data-cf-active + data-cf-offset
   We compute relative offset in JS and write data-cf-offset on each slide.
   -2,-1,0,+1,+2 are the visible zones. Others stay opacity 0. */
.residential-coverflow-slide[data-cf-offset="0"] {
  transform: translateX(0) scale(1);
  opacity: 1;
  filter: saturate(1) brightness(1);
  z-index: 10;
  box-shadow: 0 26px 60px -22px rgba(10, 26, 58, 0.55), 0 2px 10px rgba(10, 26, 58, 0.12);
  transition-delay: 0ms, 0ms, 0ms, 0ms, 0ms;
}
.residential-coverflow-slide[data-cf-offset="-1"] {
  transform: translateX(calc(-1 * (var(--cf-size) * 0.62 + var(--cf-gap)))) scale(var(--cf-side-scale));
  opacity: var(--cf-side-opacity);
  z-index: 5;
}
.residential-coverflow-slide[data-cf-offset="1"] {
  transform: translateX(calc(var(--cf-size) * 0.62 + var(--cf-gap))) scale(var(--cf-side-scale));
  opacity: var(--cf-side-opacity);
  z-index: 5;
}
.residential-coverflow-slide[data-cf-offset="-2"] {
  transform: translateX(calc(-1 * (var(--cf-size) * 1.05 + var(--cf-gap) * 1.5))) scale(calc(var(--cf-side-scale) * 0.82));
  opacity: calc(var(--cf-side-opacity) * 0.5);
  z-index: 2;
}
.residential-coverflow-slide[data-cf-offset="2"] {
  transform: translateX(calc(var(--cf-size) * 1.05 + var(--cf-gap) * 1.5)) scale(calc(var(--cf-side-scale) * 0.82));
  opacity: calc(var(--cf-side-opacity) * 0.5);
  z-index: 2;
}

.residential-coverflow-dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.25rem;
}
.residential-coverflow-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  background: rgba(10, 26, 58, 0.2);
  border: 0;
  cursor: pointer;
  transition: background 0.22s ease, width 0.22s ease;
}
.residential-coverflow-dot:hover { background: rgba(10, 26, 58, 0.4); }
.residential-coverflow-dot.is-active {
  background: var(--blue, #0046ad);
  width: 28px;
}

@media (max-width: 720px) {
  .residential-coverflow {
    --cf-size: 250px;
    --cf-gap: 16px;
    --cf-side-scale: 0.6;
  }
}
@media (max-width: 480px) {
  .residential-coverflow { --cf-size: 210px; }
}

/* ===== Athletes Club video strip (moved from homepage Foundations) ===== */
.ac-video-strip {
  margin: 3rem auto 0;
  max-width: 960px;
  text-align: center;
}
.ac-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: var(--navy, #0a1a3a);
  box-shadow: 0 22px 50px -22px rgba(10, 26, 58, 0.45), 0 2px 6px rgba(10, 26, 58, 0.08);
}
.ac-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.ac-video-caption {
  margin: 1rem 0 0;
  font-size: 0.92rem;
  color: rgba(10, 26, 58, 0.62);
  letter-spacing: 0.01em;
}
@media (max-width: 640px) {
  .ac-video-strip { margin-top: 2rem; }
  .ac-video-frame { border-radius: 14px; }
}