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

: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; }
/* 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-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: 1fr; gap: 2rem; }

  .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-size: 1.3rem;
      font-weight: 800;
      letter-spacing: 0.03em;
    }
    .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-bg::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.9rem;
      color: rgba(255,255,255,0.5);
      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: 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-size: 1.3rem;
      font-weight: 800;
      letter-spacing: 0.03em;
    }
    .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;
      }
      .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; }
}

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

/* 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: 6rem 0;
}
.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 0 1.75rem;
}
.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: 4rem 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;
}
.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;
}

/* 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: 2rem auto 0;
  text-align: center;
  padding: 1rem 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;
}

@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.58rem;
  font-weight: 800;
  padding: 0.12rem 0.45rem;
  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);
}
@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; }
}

/* ==================== 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 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(10, 14, 26, 0.22);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pr-dot:hover { background: rgba(10, 14, 26, 0.4); }
.pr-dot.is-active {
  background: var(--blue);
  transform: scale(1.25);
}
@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: 22px !important;
  height: 22px !important;
}
.footer-redesign .footer-brand-col .footer-brand-name {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #fff;
  line-height: 1;
}
.footer-redesign .footer-brand-col .footer-brand-tagline {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.68);
  line-height: 1.55;
  margin: 0;
  max-width: 280px;
}