/* ========== ROUTER STYLES ========== */
.spa-page { display: none !important; }
.spa-page.active { display: block !important; }
body { margin: 0; padding: 0; overflow-x: hidden; }
h1, h2, h3 { word-break: break-word; overflow-wrap: break-word; }
img { max-width: 100%; }

/* ── GLOBAL MOBILE IMPROVEMENTS ── */
@media (max-width: 600px) {
  .section-title, h2.section-title, .hero-title { font-size: clamp(20px, 6.5vw, 30px) !important; }
  h2.sec-title { font-size: clamp(20px, 6vw, 30px) !important; }
  .info-cards-grid, .schools-grid, .steps-grid, .programs-grid,
  .pricing-cards-grid, .contact-grid, .form-row, .form-grid { grid-template-columns: 1fr !important; }
  /* Services: 1 card per row on mobile */
  .services-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .programs-strip { grid-template-columns: 1fr !important; gap: 12px !important; }
  .service-card { min-height: unset !important; padding: 24px 20px 20px !important; }
  /* Coaches: 1 card per row on mobile */
  .coaches-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .coach-img-wrap { height: 280px !important; }
  .coach-info { padding: 20px !important; }
  .coach-name { font-size: 26px !important; }
  /* Notable athletes: 1 card per row on mobile */
  .athletes-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .athlete-card { display: flex !important; flex-direction: row !important; width: 100% !important; box-sizing: border-box !important; }
  .pricing-card, .info-card, .school-card, .contact-left,
  .contact-form-wrap, .form-card, .side-card { padding: 16px !important; }
  .form-group input, .form-group select, .form-group textarea,
  .fg input, .fg select, .fg textarea {
    width: 100% !important; min-height: 48px !important;
    font-size: 16px !important; -webkit-text-size-adjust: 100%;
  }
  .form-row, .form-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .form-submit, .submit-btn { width: 100% !important; min-height: 52px !important; font-size: 15px !important; }
  .mobile-menu a, .mob-menu a {
    font-size: 16px !important; padding: 14px 0 !important; min-height: 48px; display: flex; align-items: center;
  }
  .mobile-cta, .mob-cta { width: 100% !important; text-align: center; }
  .map-embed, iframe.map-embed { height: 220px !important; width: 100% !important; }
  .whatsapp-float, .wa-float { width: 48px !important; height: 48px !important; bottom: 16px !important; right: 16px !important; }
  .whatsapp-float::after, .wa-float::after { display: none; }
  .whatsapp-float svg, .wa-float svg { width: 26px !important; height: 26px !important; }
  .hero-img-frame img, .hero-img-wrap img { object-fit: cover; max-width: 100%; width: 100% !important; }
}
.venue-strip-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.venue-strip-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.venue-strip-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,201,122,0.12);
  border: 1px solid rgba(0,201,122,0.3);
}
.venue-strip-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #00C97A;
  margin-bottom: 3px;
}
.venue-strip-value {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}
.venue-strip-value a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color 0.2s;
}
.venue-strip-value a:hover { color: #00C97A; }
/* ── VENUE STRIP BASE (global) ── */
.venue-strip {
  background: #0b1728;
  padding: 24px 5vw;
  border-top: 1px solid rgba(0,201,122,0.15);
}
/* ─── WHATSAPP FLOAT GLOBAL TOOLTIP ─── */
.whatsapp-float, .wa-float {
  position: relative;
}
.whatsapp-float::after, .wa-float::after {
  content: 'Chat on WhatsApp';
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #0b1728;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.whatsapp-float:hover::after, .wa-float:hover::after {
  opacity: 1;
}

@media (max-width: 600px) {
  .venue-strip { padding: 20px 5vw; }
  .venue-strip-inner { gap: 16px 24px; }
  .venue-strip-item { flex-basis: 100%; }
  .venue-strip-value { font-size: 13px; }
}

/* ========== INDEX STYLES ========== */

  :root {
    --green: #00C97A;
    --green-dark: #009a5c;
    --green-light: rgba(0,201,122,0.10);
    --green-glow: rgba(0,201,122,0.25);
    --navy: #0b1728;
    --white: #ffffff;
    --off-white: #f7f9fc;
    --light-bg: #f0f4f8;
    --card-bg: #ffffff;
    --text-dark: #0d1b2a;
    --text-mid: #2d4060;
    --text-muted: #6b7fa0;
    --border: rgba(0,0,0,0.08);
    --shadow-sm: 0 2px 12px rgba(0,0,0,0.07);
    --shadow-md: 0 8px 32px rgba(0,0,0,0.10);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.13);
    --shadow-green: 0 8px 32px rgba(0,201,122,0.25);
  }

  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', sans-serif;
    background: var(--white);
    color: var(--text-dark);
    overflow-x: hidden;
  }

  /* ─── SCROLL PROGRESS ─── */
  #progress-bar {
    position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
    background: linear-gradient(90deg, var(--green), #00f598);
    width: 0%; transition: width 0.1s;
  }

  /* ─── NAV ─── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 4vw; height: 72px;
    background: rgba(255,255,255,0.96);
    border-bottom: 2px solid var(--green);
    backdrop-filter: blur(16px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s, background 0.3s;
  }
  nav.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.13); }
  .nav-logo {
    text-decoration: none;
    display: flex; align-items: center;
    flex-shrink: 0;
  }
  .nav-logo img {
    height: 54px;
    width: auto;
    display: block;
    mix-blend-mode: multiply;
    filter: contrast(1.05);
    transition: opacity 0.2s;
  }
  .nav-logo img:hover { filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(0,201,122,0.6)); transform: scale(1.03); }
  .nav-logo span { display: none; }
  .nav-links { display: flex; gap: 2px; list-style: none; align-items: center; }
  .nav-links a {
    color: var(--text-mid); text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 1.2px; text-transform: uppercase;
    padding: 7px 11px; border-radius: 4px;
    transition: all 0.2s; white-space: nowrap;
    position: relative;
  }
  .nav-links a::after {
    content: ''; position: absolute; bottom: 2px; left: 50%; right: 50%;
    height: 2px; background: var(--green); border-radius: 2px;
    transition: left 0.2s, right 0.2s;
  }
  .nav-links a:hover { color: #fff; background: rgba(255,255,255,0.06); }
  .nav-links a:hover::after { left: 11px; right: 11px; }
  .nav-links a.active { color: var(--green); }
  .nav-links a.active::after { left: 11px; right: 11px; }
  .nav-cta {
    background: var(--green) !important; color: #0b1728 !important;
    border-radius: 5px; padding: 9px 18px !important; font-weight: 800 !important;
    font-size: 11.5px !important; letter-spacing: 1.5px !important;
    box-shadow: 0 4px 18px rgba(0,201,122,0.35) !important;
  }
  .nav-cta::after { display: none !important; }
  .nav-cta:hover { background: #00e68a !important; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,201,122,0.5) !important; color: #0b1728 !important; }
  .nav-wa-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; color: #25D366;
    border: 1.5px solid rgba(37,211,102,0.4);
    padding: 7px 13px; border-radius: 5px;
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
    white-space: nowrap; transition: all 0.2s;
    flex-direction: column; gap: 1px; align-items: center;
  }
  .nav-wa-btn:hover { background: rgba(37,211,102,0.12); border-color: #25D366; color: #25D366; }
  .nav-wa-phone { font-size: 9px; font-weight: 500; color: rgba(255,255,255,0.45); letter-spacing: 0.5px; text-transform: none; }
  .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
  .hamburger span { width: 24px; height: 2px; background: var(--text-dark); display: block; transition: 0.3s; border-radius: 2px; }
  .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

  /* ─── MOBILE MENU ─── */
  .mobile-menu {
    display: none; flex-direction: column;
    position: fixed; top: 72px; left: 0; right: 0; z-index: 9998;
    background: #ffffff;
    padding: 20px 5vw 28px;
    border-bottom: 2px solid var(--green);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  }
  .mobile-menu.open { display: flex; animation: slideDown 0.25s ease; }
  @keyframes slideDown { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
  .mobile-menu a {
    color: var(--text-dark); text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: color 0.2s;
  }
  .mobile-menu a:hover { color: var(--green); }
  .mobile-menu a.mobile-cta {
    background: var(--green); color: #fff !important; text-align: center;
    border-radius: 6px; padding: 14px; margin-top: 10px; border: none;
  }

  /* ─── HERO ───
     Rebuilt to be stable across browser zoom levels (70%–100%+):
     no 100vh / rigid min-height, flexible clamp()-based spacing,
     content defines its own height instead of being forced to fill the viewport. */
  #home {
    display: flex; align-items: center;
    padding: clamp(72px, 9vw, 96px) 0 clamp(32px, 5vw, 56px);
    position: relative; overflow: hidden;
    background: linear-gradient(140deg, #f0faf5 0%, #ffffff 55%, #eaf7f1 100%);
  }
  .hero-bg-img { display: none; }
  .hero-bg-overlay { display: none; }
  /* Subtle dot grid pattern */
  .hero-bg-pattern {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(0,185,107,0.12) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(135deg, transparent 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(135deg, transparent 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
  }
  /* Top accent bar */
  .hero-line-left {
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 2;
    background: linear-gradient(180deg, transparent 0%, #00b96b 25%, #00b96b 75%, transparent 100%);
  }
  /* Green soft glow behind image */
  .hero-orb {
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    filter: blur(90px);
  }
  .hero-orb-1 {
    width: 520px; height: 520px; right: 5%; top: 10%;
    background: radial-gradient(circle, rgba(0,185,107,0.18) 0%, transparent 70%);
    animation: orbFloat 9s ease-in-out infinite;
  }
  .hero-orb-2 {
    width: 280px; height: 280px; left: 30%; top: 60%;
    background: radial-gradient(circle, rgba(0,185,107,0.08) 0%, transparent 70%);
    animation: orbFloat 12s 3s ease-in-out infinite reverse;
  }
  @keyframes orbFloat {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-24px) scale(1.04); }
  }
  .hero-accent-circle {
    position: absolute; right: 18%; top: 50%; transform: translateY(-50%);
    width: 440px; height: 440px; border-radius: 50%;
    border: 1.5px solid rgba(0,185,107,0.18); pointer-events: none; z-index: 0;
    animation: pulseRing 7s ease-in-out infinite;
  }
  .hero-accent-circle2 {
    position: absolute; right: 22%; top: 50%; transform: translateY(-50%);
    width: 560px; height: 560px; border-radius: 50%;
    border: 1px solid rgba(0,185,107,0.09); pointer-events: none; z-index: 0;
    animation: pulseRing 7s 2s ease-in-out infinite;
  }
  @keyframes pulseRing {
    0%,100% { opacity:0.5; transform: translateY(-50%) scale(1); }
    50% { opacity:1; transform: translateY(-50%) scale(1.02); }
  }

  /* ── TWO-COLUMN LAYOUT ──
     max-width centered container + flexible grid; height comes from content,
     not from viewport units, so it stays stable when the browser is zoomed. */
  .hero-inner {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 48px);
  }
  .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
  }
  .hero-visual {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .hero-img-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
  }

  /* Announcement strip — compact, sits above the venue badge without
     competing visually with the CTAs further down. */
  .hero-announce {
    display: flex; flex-direction: column; gap: 3px;
    background: rgba(0,185,107,0.06);
    border: 1px solid rgba(0,185,107,0.25);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    max-width: 580px;
    animation: fadeUp 0.5s ease both;
  }
  .hero-announce-tag {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    color: #00963f; white-space: nowrap;
  }
  .hero-announce-text {
    font-size: 12.5px; color: var(--text-mid); line-height: 1.4;
  }

  /* Guest Plan strip — sits low in the hierarchy, just above the main CTA row.
     Deliberately lighter than .hero-btns so it reads as a secondary note,
     not a second row of duplicate buttons. */
  .hero-payg {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    margin: 4px 0 22px;
    padding: 10px 16px;
    border: 1px dashed rgba(0,185,107,0.35);
    border-radius: 8px;
    background: rgba(0,185,107,0.04);
    animation: fadeUp 0.5s 0.25s ease both;
    width: fit-content;
    max-width: 100%;
  }
  .hero-payg-label {
    font-size: 12.5px; font-weight: 700; color: var(--text-dark); white-space: nowrap;
  }
  .hero-payg-link {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
    color: #00963f; text-decoration: none; white-space: nowrap;
    border-bottom: 1px solid rgba(0,185,107,0.4);
    transition: color 0.2s, border-color 0.2s;
  }
  .hero-payg-link:hover { color: #00b96b; border-color: #00b96b; }
  .hero-payg-sep { color: rgba(0,0,0,0.25); font-size: 12px; }

  /* Badge */
  .hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(0,185,107,0.08);
    border: 1px solid rgba(0,185,107,0.25);
    color: #00963f;
    font-family: 'Inter', sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
    padding: 6px 14px; border-radius: 20px; margin-bottom: 34px;
    animation: fadeUp 0.5s ease both;
    width: fit-content;
  }
  .hero-badge-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #00b96b; flex-shrink:0;
    animation: pulseDot 1.8s ease-in-out infinite;
  }
  @keyframes pulseDot {
    0%,100% { opacity:1; transform:scale(1); }
    50% { opacity:0.3; transform:scale(0.5); }
  }

  /* Title */
  .hero-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(38px, 4.6vw, 72px);
    font-weight: 700;
    line-height: 1.04; letter-spacing: 1px;
    color: var(--text-dark);
    animation: fadeUp 0.5s 0.1s ease both;
  }
  .hero-title .accent {
    color: #00b96b;
    font-size: clamp(34px, 4.2vw, 66px);
  }
  /* Line-break control: desktop breaks after "BOOK YOUR" (TABLE stays with
     TENNIS COACHING on line 2). Mobile breaks after "TABLE" instead, so
     "BOOK YOUR TABLE" / "TENNIS COACHING" reads as exactly 2 lines. */
  .htl-br-mobile { display: none; }
  @media (max-width: 600px) {
    .htl-br-desktop { display: none; }
    .htl-br-mobile { display: block; }
  }
  .hero-title .outline-text {
    -webkit-text-stroke: 2px #00b96b;
    color: transparent;
    display: block;
  }

  /* Divider */
  .hero-divider {
    width: 52px; height: 3px;
    background: linear-gradient(90deg, #00b96b, rgba(0,185,107,0.15));
    margin: 20px 0 18px; border-radius: 2px;
    animation: fadeUp 0.5s 0.15s ease both;
  }

  /* Sub */
  .hero-sub {
    font-size: clamp(15px, 1.1vw, 18px); font-weight: 400; line-height: 1.65;
    color: var(--text-mid);
    margin: 20px 0 0; max-width: 520px;
    animation: fadeUp 0.5s 0.2s ease both;
  }
  .hero-sub strong { color: var(--text-dark); font-weight: 700; }

  /* Dashed divider between description and CTA buttons */
  .hero-cta-divider {
    width: 100%; max-width: 480px; height: 0;
    border-top: 1px dashed rgba(0,185,107,0.35);
    margin: 24px 0 26px;
  }

  /* Buttons */
  .hero-btns {
    display: flex; gap: 20px; flex-wrap: wrap;
    animation: fadeUp 0.5s 0.3s ease both;
  }
  .btn-primary {
    background: #00b96b; color: #fff;
    padding: 10px 24px; border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    text-decoration: none; display: inline-block;
    transition: all 0.25s; border: none; cursor: pointer;
    position: relative; overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,185,107,0.28);
  }
  .btn-primary::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(255,255,255,0.12); transform: translateX(-100%); transition: transform 0.3s;
  }
  .btn-primary:hover::after { transform: translateX(0); }
  .btn-primary:hover { background: #009a56; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,185,107,0.38); }
  .btn-outline {
    background: transparent; color: var(--text-dark);
    padding: 9px 22px; border-radius: 4px;
    border: 2px solid rgba(0,0,0,0.18);
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    text-decoration: none; display: inline-block; transition: all 0.25s;
  }
  .btn-outline:hover { border-color: #00b96b; color: #00b96b; transform: translateY(-2px); }

  /* Hero-specific button sizing (scoped so it never affects the .btn-primary
     instance used elsewhere on services.html) — matches approved reference. */
  .hero-btns .btn-primary,
  .hero-btns .btn-outline {
    display: inline-flex; align-items: center; justify-content: center;
    width: clamp(180px, 16vw, 255px);
    min-height: 60px;
    padding: 14px 26px;
    border-radius: 8px;
    font-size: 13px; letter-spacing: 1.5px;
    gap: 8px;
  }
  .hero-btns .btn-outline {
    border: 1.5px solid rgba(0,185,107,0.3);
    background: #fff;
    color: var(--text-dark);
  }
  .hero-btns .btn-outline:hover { border-color: #00b96b; }

  /* ── RIGHT: Player image column ──
     Uses aspect-ratio instead of height:100%/min-height so it can never
     mismatch the text column's height, at any zoom level. */
  .hero-visual {
    position: relative; display: flex; flex-direction: column;
    align-items: stretch; z-index: 2;
  }
  .hero-img-frame {
    position: relative; width: 100%; max-width: 520px;
    display: flex; flex-direction: column;
    margin: 0 auto;
  }
  /* Main image card — taller, closer to the approved reference (~660–690px desktop) */
  .hero-img-main {
    width: 100%; border-radius: 22px; overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,185,107,0.12);
    position: relative; height: clamp(480px, 46vw, 690px);
    background: linear-gradient(135deg, #c8f0dc, #e0f5ec);
  }
  .hero-img-main img {
    width: 100%; height: 100%; object-fit: cover; object-position: center center;
    display: block; transition: transform 0.7s ease;
    position: absolute; inset: 0;
  }
  .hero-img-main:hover img { transform: scale(1.04); }
  /* Green corner accent */
  .hero-img-main::before {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%;
    background: linear-gradient(transparent, rgba(0,185,107,0.12));
    z-index: 1; border-radius: 0 0 20px 20px;
  }
  /* Floating badge on image */
  .hero-img-badge {
    position: absolute; bottom: 24px; left: 24px; z-index: 2;
    background: #fff;
    border-left: 4px solid #00b96b;
    padding: 12px 18px; border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    animation: fadeUp 0.6s 0.5s ease both;
  }
  .hero-img-badge-title {
    font-family: 'Oswald', sans-serif;
    font-size: 20px; letter-spacing: 1px; color: var(--text-dark); line-height: 1.1;
  }
  .hero-img-badge-sub {
    font-size: 11px; color: #00b96b; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase; margin-top: 2px;
  }
  /* Small floating trophy card top right */
  .hero-img-card2 {
    position: absolute; top: 20px; right: -20px; z-index: 3;
    background: #00b96b; color: #fff;
    padding: 14px 18px; border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,185,107,0.35);
    text-align: center; min-width: 100px;
    animation: fadeUp 0.6s 0.6s ease both;
  }
  .hero-img-card2-num {
    font-family: 'Oswald', sans-serif; font-size: 28px; line-height: 1; color: #fff;
  }
  .hero-img-card2-label {
    font-size: 9px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: rgba(255,255,255,0.80); margin-top: 3px;
  }
  /* Decorative green ring behind image */
  .hero-img-ring {
    position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px;
    border-radius: 24px; border: 2px dashed rgba(0,185,107,0.20);
    pointer-events: none; z-index: 0;
    animation: ringRotate 20s linear infinite;
  }
  @keyframes ringRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

  /* Responsive */
  /* Hero responsive handled in main @media block below */

  /* ─── HERO VENUE LABEL ─── */
  .hero-venue-label {
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    line-height: 1.5;
    padding: 7px 16px !important;
    max-width: 100%;
    white-space: normal !important;
    text-align: left;
  }

  /* ─── HERO STATS ─── */
  .hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 28px;
    margin-top: 28px;
    animation: fadeUp 0.5s 0.4s ease both;
  }
  .hero-stat {
    display: flex;
    flex-direction: column;
    padding-right: 28px;
    border-right: 1px solid rgba(0,0,0,0.12);
  }
  .hero-stat:last-child { border-right: none; padding-right: 0; }
  .hero-stat-num {
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    line-height: 1;
    color: #00b96b;
    letter-spacing: 1px;
  }
  .hero-stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 4px;
  }

  /* ─── STATS STRIP ─── */
  .stats-strip {
    background: #ffffff;
    border-top: 3px solid #00b96b;
    border-bottom: 1px solid rgba(0,185,107,0.12);
    padding: 0 5vw;
    position: relative;
    z-index: 10;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  }
  .stats-strip-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1100px;
    margin: 0 auto;
  }
  .stats-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 20px;
    position: relative;
    transition: background 0.25s;
  }
  .stats-strip-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 20%; bottom: 20%;
    width: 1px;
    background: rgba(0,185,107,0.20);
  }
  .stats-strip-item:hover { background: rgba(0,185,107,0.04); }
  .stats-strip-num {
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    color: #00b96b;
    line-height: 1;
    letter-spacing: 1px;
  }
  .stats-strip-label {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #6b7fa0;
    margin-top: 5px;
    text-align: center;
  }
  /* Stats strip responsive handled in main @media block below */

  /* ─── TICKER ─── */
  .ticker-wrap {
    background: var(--green); padding: 14px 0; overflow: hidden;
    position: relative;
  }
  .ticker-wrap::before, .ticker-wrap::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1;
  }
  .ticker-wrap::before { left: 0; background: linear-gradient(90deg, var(--green), transparent); }
  .ticker-wrap::after { right: 0; background: linear-gradient(-90deg, var(--green), transparent); }
  .ticker-inner { display: flex; width: max-content; animation: ticker 30s linear infinite; }
  .ticker-inner:hover { animation-play-state: paused; }
  .ticker-item {
    font-family: 'Inter', sans-serif;
    font-size: 17px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: #fff; padding: 0 36px; white-space: nowrap;
  }
  .ticker-dot { color: rgba(255,255,255,0.55); }
  @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

  /* ─── SECTION BASE ─── */
  section { padding: 96px 5vw; }
  /* Section padding responsive handled in main @media block below */

  .section-tag {
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
    color: var(--green); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
  }
  .section-tag::before { content: ''; display: block; width: 30px; height: 2px; background: var(--green); border-radius: 2px; }
  .section-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(26px, 3.2vw, 42px); line-height: 1.05; letter-spacing: 1px;
    color: var(--text-dark);
  }

  /* ─── ABOUT ─── */
  #about { background: var(--off-white); }
  .about-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 64px; align-items: stretch; margin-top: 52px;
  }
  .about-grid > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .about-img-wrap {
    position: relative; border-radius: 16px; overflow: hidden;
    min-height: 420px; height: 100%; box-shadow: var(--shadow-lg);
    flex: 1;
  }
  .about-img-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center center; background: #f0faf5; transition: transform 0.7s ease; position: absolute; inset: 0; }
  .about-img-wrap:hover img { transform: scale(1.05); }
  .about-img-badge {
    position: absolute; bottom: 24px; left: 24px;
    background: var(--green); color: #fff;
    padding: 14px 22px; border-radius: 10px;
    font-family: 'Oswald', sans-serif; font-size: 28px; letter-spacing: 1px;
    box-shadow: 0 8px 24px rgba(0,201,122,0.35);
  }
  .about-img-badge span { display: block; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 3px; color: rgba(255,255,255,0.80); }
  .about-text-desc { font-size: 17px; color: var(--text-mid); line-height: 1.8; margin-bottom: 30px; }
  .about-features { display: flex; flex-direction: column; gap: 16px; }
  .about-feat {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--card-bg); border-radius: 10px;
    padding: 20px 22px; border-left: 4px solid var(--green);
    box-shadow: var(--shadow-sm); transition: all 0.3s;
  }
  .about-feat:hover { transform: translateX(6px); box-shadow: var(--shadow-md); }
  .about-feat-icon { font-size: 26px; flex-shrink: 0; margin-top: 2px; }
  .about-feat-title {
    font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase; color: var(--text-dark); margin-bottom: 5px;
  }
  .about-feat-desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

  /* ─── SERVICES ─── */
  #services { background: var(--white); }
  .programs-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 52px;
  }
  .program-card {
    background: var(--off-white); border-radius: 10px; padding: 28px 22px;
    border-top: 3px solid var(--green); transition: all 0.3s;
    text-decoration: none; display: flex; flex-direction: column; cursor: pointer;
    border: 1px solid var(--border); border-top: 3px solid var(--green);
  }
  .program-card:hover { background: var(--green); transform: translateY(-6px); box-shadow: var(--shadow-green); }
  .program-card:hover .program-name,
  .program-card:hover .program-desc { color: #fff; }
  .program-icon { font-size: 30px; margin-bottom: 14px; }
  .program-name { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dark); margin-bottom: 7px; transition: color 0.3s; }
  .program-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; transition: color 0.3s; }

  .services-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px; margin-top: 32px;
    align-items: stretch;
  }
  .service-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 14px; padding: 32px 28px 28px;
    position: relative; overflow: hidden; transition: all 0.35s; cursor: pointer;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
    min-height: 240px;
  }
  .service-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--green), #00f598);
    transform: scaleX(0); transform-origin: left; transition: transform 0.35s;
  }
  .service-card:hover::before { transform: scaleX(1); }
  .service-card:hover { border-color: rgba(0,201,122,0.25); transform: translateY(-8px); box-shadow: var(--shadow-lg); }
  .service-price { font-family: 'Oswald', sans-serif; font-size: 50px; color: var(--green); line-height: 1; }
  .service-price span { font-size: 22px; color: var(--text-muted); }
  .service-name { font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700; color: var(--text-dark); text-transform: uppercase; letter-spacing: 0.8px; margin: 10px 0 8px; line-height: 1.35; }
  .service-desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; flex: 1; }
  .service-icon { font-size: 32px; margin-bottom: 14px; }
  .service-book {
    display: block; margin-top: 22px;
    background: var(--green); color: #fff;
    padding: 12px 24px; border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    text-decoration: none; transition: all 0.2s; box-shadow: 0 4px 12px rgba(0,201,122,0.25);
    text-align: center; width: 100%; box-sizing: border-box;
  }
  .service-book:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,201,122,0.35); }

  /* ─── COACHES ─── */
  #coaches { background: var(--off-white); }
  .coaches-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px; margin-top: 52px;
  }
  .coach-card {
    background: var(--card-bg); border-radius: 16px; overflow: hidden;
    transition: all 0.35s; border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
  }
  .coach-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
  .coach-img-wrap {
    height: 420px; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #e8f5ee, #d0e8f7);
  }
  .coach-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.5s; display: block; }
  .coach-card:hover .coach-img-wrap img { transform: scale(1.06); }
  .coach-placeholder { font-size: 90px; opacity: 0.2; }
  .coach-badge {
    position: absolute; top: 14px; left: 14px; background: var(--green);
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: #fff; padding: 5px 12px; border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,201,122,0.35);
  }
  .coach-info { padding: 28px; }
  .coach-name { font-family: 'Oswald', sans-serif; font-size: 32px; letter-spacing: 1px; color: var(--text-dark); }
  .coach-role { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--green); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
  .coach-bio { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 18px; }
  .coach-achievements { display: flex; flex-direction: column; gap: 8px; }
  .achieve-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-mid); font-weight: 600; }
  .achieve-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

  /* ─── MEMBERSHIP ─── */
  #membership { background: var(--white); }
  .membership-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 24px; margin-top: 52px; align-items: start;
  }
  .membership-card {
    background: var(--card-bg); border: 2px solid var(--border);
    border-radius: 16px; padding: 38px 30px; transition: all 0.3s;
    box-shadow: var(--shadow-sm);
  }
  .membership-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
  .membership-card.featured {
    border-color: var(--green); border-width: 2px;
    background: linear-gradient(160deg, #f0faf5 0%, #e6f5ff 100%);
    position: relative;
    box-shadow: 0 8px 40px rgba(0,201,122,0.15);
  }
  .membership-card.featured::before {
    content: 'MOST POPULAR'; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--green); color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 900; letter-spacing: 2px;
    padding: 5px 16px; border-radius: 20px; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,201,122,0.35);
  }
  .membership-name { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
  .membership-price-wrap { display: flex; align-items: baseline; gap: 4px; margin-bottom: 24px; }
  .membership-currency { font-size: 26px; font-weight: 700; color: var(--green); }
  .membership-amount { font-family: 'Oswald', sans-serif; font-size: 62px; color: var(--text-dark); line-height: 1; }
  .membership-period { font-size: 13px; color: var(--text-muted); margin-left: 4px; }
  .membership-perks { list-style: none; margin-bottom: 28px; }
  .membership-perks li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-mid); padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
  .membership-perks li:last-child { border-bottom: none; }
  .perk-check { color: var(--green); font-weight: 900; font-size: 15px; flex-shrink: 0; }
  .perk-cross { color: #ccc; font-weight: 900; font-size: 15px; flex-shrink: 0; }

  /* ─── TESTIMONIALS ─── */
  #testimonials { background: var(--light-bg); }
  .testi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 24px; margin-top: 52px;
  }
  .testi-card {
    background: var(--card-bg); border-radius: 16px; padding: 34px 30px;
    border: 1px solid var(--border); position: relative; transition: all 0.3s;
    box-shadow: var(--shadow-sm); overflow: hidden;
  }
  .testi-card::before {
    content: '"'; position: absolute; top: -10px; left: 20px;
    font-family: 'Oswald', sans-serif; font-size: 130px;
    color: rgba(0,201,122,0.07); line-height: 1; pointer-events: none;
  }
  .testi-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(0,201,122,0.2); }
  .testi-stars { color: #f5a623; font-size: 16px; margin-bottom: 14px; letter-spacing: 3px; }
  .testi-text { font-size: 15px; color: var(--text-mid); line-height: 1.8; margin-bottom: 24px; font-style: italic; }
  .testi-author { display: flex; align-items: center; gap: 14px; }
  .testi-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; font-family: 'Oswald', sans-serif; font-size: 20px; color: #fff; flex-shrink: 0; }
  .testi-name { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dark); }
  .testi-role { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

  /* ─── CHAMPIONS ─── */
  #champions { background: var(--white); }
  .champions-intro {
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
    align-items: center; margin-top: 48px;
  }
  .champions-text p { font-size: 16px; color: var(--text-mid); line-height: 1.8; margin-bottom: 22px; }
  .trophies-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .trophy-card {
    background: var(--off-white); border-radius: 12px;
    border: 1px solid var(--border); padding: 24px 18px; text-align: center;
    transition: all 0.3s; box-shadow: var(--shadow-sm);
  }
  .trophy-card:hover { border-color: rgba(0,201,122,0.35); transform: translateY(-4px); box-shadow: var(--shadow-md); background: #f0faf5; }
  .trophy-icon { font-size: 32px; margin-bottom: 10px; }
  .trophy-title { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--text-dark); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
  .trophy-sub { font-size: 12px; color: var(--text-muted); }

  /* ─── SAFETY ─── */
  #safety {
    background: linear-gradient(135deg, #00b96b 0%, #009a5c 100%);
    padding: 80px 5vw;
    position: relative;
    overflow: hidden;
  }
  #safety::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
  }
  #safety::after {
    content: '';
    position: absolute;
    bottom: -60px; left: 10%;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
  }
  .safety-inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 64px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .safety-text h2 {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(30px,3.5vw,46px);
    letter-spacing: 2.5px;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0,0,0,0.15);
  }
  .safety-text p {
    font-size: 16px;
    color: rgba(255,255,255,0.92);
    max-width: 380px;
    line-height: 1.8;
  }
  .safety-text-divider {
    width: 48px; height: 3px;
    background: rgba(255,255,255,0.5);
    border-radius: 2px;
    margin: 18px 0;
  }
  .safety-badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    flex-wrap: nowrap;
  }
  .safety-badge {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 14px;
    padding: 26px 16px;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
  }
  .safety-badge::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,0.45);
    border-radius: 14px 14px 0 0;
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }
  .safety-badge:hover {
    background: rgba(255,255,255,0.28);
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    border-color: rgba(255,255,255,0.6);
  }
  .safety-badge:hover::before { transform: scaleX(1); }
  .safety-badge-icon { font-size: 30px; margin-bottom: 12px; display: block; }
  .safety-badge-text {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1.4;
  }

  /* ─── GALLERY ─── */
  #gallery { background: var(--off-white); }
  .gallery-intro { font-size: 16px; color: var(--text-muted); max-width: 540px; margin-top: 14px; line-height: 1.7; }
  .gallery-grid {
    display: grid; grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 220px 220px 220px;
    gap: 10px; margin-top: 36px; border-radius: 16px; overflow: hidden;
    box-shadow: var(--shadow-md);
  }
  .gallery-item { position: relative; overflow: hidden; cursor: pointer; }
  .gallery-item:nth-child(1) { grid-column: 1/6; grid-row: 1/3; }
  .gallery-item:nth-child(2) { grid-column: 6/9; grid-row: 1; }
  .gallery-item:nth-child(3) { grid-column: 9/13; grid-row: 1; }
  .gallery-item:nth-child(4) { grid-column: 6/10; grid-row: 2; }
  .gallery-item:nth-child(5) { grid-column: 10/13; grid-row: 2; }
  .gallery-item:nth-child(6) { grid-column: 1/5; grid-row: 3; }
  .gallery-item:nth-child(7) { grid-column: 5/9; grid-row: 3; }
  .gallery-item:nth-child(8) { grid-column: 9/13; grid-row: 3; }
  .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; display: block; }
  .gallery-item:hover img { transform: scale(1.08); }
  .gallery-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%);
    opacity: 0; transition: opacity 0.3s;
    display: flex; align-items: flex-end; padding: 16px;
  }
  .gallery-item:hover .gallery-overlay { opacity: 1; }
  .gallery-caption { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 1.5px; text-transform: uppercase; }
  .gallery-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 44px; }
  .gp-1 { background: linear-gradient(135deg, #c8e6d4, #a8d5c2); }
  .gp-2 { background: linear-gradient(135deg, #d4c8e6, #c2a8d5); }
  .gp-3 { background: linear-gradient(135deg, #c8d4e6, #a8c2d5); }
  .gp-4 { background: linear-gradient(135deg, #e6d4c8, #d5c2a8); }
  .gp-5 { background: linear-gradient(135deg, #c8e6e6, #a8d5d5); }
  .gp-6 { background: linear-gradient(135deg, #e6c8e6, #d5a8d5); }
  .gp-7 { background: linear-gradient(135deg, #e6e6c8, #d5d5a8); }
  .gp-8 { background: linear-gradient(135deg, #d4e6c8, #c2d5a8); }

  /* ─── CONTACT ─── */
  #contact { background: var(--white); }
  .contact-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 56px; margin-top: 52px;
    align-items: stretch;
  }
  /* Left column: flex column so it stretches full height */
  .contact-left {
    display: flex; flex-direction: column;
    background: var(--off-white); border-radius: 16px;
    padding: 38px; border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
  }
  .contact-info-list { flex: 1; }
  .contact-info-item { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 28px; }
  .contact-icon {
    width: 50px; height: 50px; border-radius: 10px;
    background: var(--green-light); border: 1px solid rgba(0,201,122,0.20);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
  }
  .contact-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; }
  .contact-value { font-size: 16px; font-weight: 600; color: var(--text-dark); line-height: 1.5; }
  .contact-socials { display: flex; gap: 10px; margin-top: auto; padding-top: 24px; }
  .social-btn {
    width: 46px; height: 46px; border-radius: 8px;
    background: var(--white); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; text-decoration: none; transition: all 0.2s; cursor: pointer;
    color: var(--text-mid);
  }
  .social-btn svg { display: block; flex-shrink: 0; }
  .social-btn:hover { background: var(--green); border-color: var(--green); transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,201,122,0.30); color: #fff; }
  .social-btn:hover polygon { fill: white !important; }
  /* Right column: form stretches full height */
  .contact-form {
    background: var(--off-white); border-radius: 16px; padding: 38px;
    border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
  }
  .contact-form form { flex: 1; display: flex; flex-direction: column; }
  .form-submit { margin-top: auto !important; }
  .contact-form-title { font-family: 'Oswald', sans-serif; font-size: 28px; letter-spacing: 1.5px; color: var(--text-dark); margin-bottom: 24px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
  .form-group.full { grid-column: 1/-1; }
  .form-group label { display: block; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
  .form-group input, .form-group select, .form-group textarea {
    width: 100%; background: var(--card-bg); border: 1.5px solid var(--border);
    border-radius: 7px; padding: 12px 14px; color: var(--text-dark);
    font-family: 'Inter', sans-serif; font-size: 15px; outline: none;
    transition: all 0.2s;
  }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--green); background: #f5fdf9; box-shadow: 0 0 0 3px var(--green-light);
  }
  .form-group select option { background: #fff; color: var(--text-dark); }
  .form-group textarea { resize: none; height: 100px; }
  .form-submit {
    width: 100%; margin-top: 8px; background: var(--green); color: #fff;
    border: none; border-radius: 7px; padding: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 17px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 16px rgba(0,201,122,0.30);
  }
  .form-submit:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,201,122,0.40); }

  /* ─── FAQ ─── */
  #faq { background: var(--light-bg); }
  .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 48px; }
  .faq-item {
    background: var(--card-bg); border: 1.5px solid var(--border);
    border-radius: 10px; padding: 22px 24px; cursor: pointer; transition: all 0.25s;
    box-shadow: var(--shadow-sm);
  }
  .faq-item:hover { border-color: rgba(0,201,122,0.35); box-shadow: var(--shadow-md); }
  .faq-item.open { border-color: var(--green); box-shadow: 0 4px 20px rgba(0,201,122,0.15); }
  .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 14px; font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700; color: var(--text-dark); }
  .faq-arrow { font-size: 16px; transition: transform 0.3s; flex-shrink: 0; color: var(--green); }
  .faq-item.open .faq-arrow { transform: rotate(180deg); }
  .faq-a { font-size: 14px; color: var(--text-muted); line-height: 1.75; margin-top: 14px; display: none; }
  .faq-item.open .faq-a { display: block; animation: fadeUp 0.3s ease; }

  /* ─── LEGAL OVERLAY ─── */
  .legal-overlay {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: rgba(11,23,40,0.97); overflow-y: auto;
  }
  .legal-overlay.active { display: block; animation: overlayIn 0.3s ease; }
  @keyframes overlayIn { from { opacity:0; } to { opacity:1; } }
  .legal-inner { max-width: 760px; margin: 0 auto; padding: 60px 24px 80px; }
  .legal-close {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.5);
    cursor: pointer; margin-bottom: 40px; background: none; border: none; transition: color 0.2s; padding: 0;
  }
  .legal-close:hover { color: #fff; }
  .legal-title { font-family: 'Oswald', sans-serif; font-size: clamp(40px, 6vw, 72px); letter-spacing: 2px; color: #fff; margin-bottom: 32px; line-height: 1.05; }
  .legal-section { margin-bottom: 32px; }
  .legal-section h3 { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .legal-section p { font-size: 15px; color: rgba(255,255,255,0.70); line-height: 1.8; margin-bottom: 12px; }
  .legal-section ul { padding-left: 20px; }
  .legal-section ul li { font-size: 15px; color: rgba(255,255,255,0.70); line-height: 1.8; margin-bottom: 6px; }
  .legal-divider { height: 2px; background: var(--green); margin: 8px 0 40px; }

  /* ─── ANIMATIONS ─── */
  @keyframes fadeUp { from { opacity:0; transform: translateY(28px); } to { opacity:1; transform: translateY(0); } }

  /* ── SCROLL ANIMATIONS ── */
  .fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1);
  }
  .fade-in.visible { opacity: 1; transform: translateY(0); }

  .fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
  }
  .fade-in-left.visible { opacity: 1; transform: translateX(0); }

  .fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
  }
  .fade-in-right.visible { opacity: 1; transform: translateX(0); }

  .fade-in-scale {
    opacity: 0;
    transform: scale(0.88) translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
  }
  .fade-in-scale.visible { opacity: 1; transform: scale(1) translateY(0); }

  .fade-in-up-slow {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1s cubic-bezier(0.22,1,0.36,1), transform 1s cubic-bezier(0.22,1,0.36,1);
  }
  .fade-in-up-slow.visible { opacity: 1; transform: translateY(0); }

  /* Stats strip slide in */
  .stats-strip-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1), background 0.25s;
  }
  .stats-strip-item.visible { opacity: 1; transform: translateY(0); }

  /* ─── COUNTER ─── */
  .counter { display: inline-block; }

  /* ─── FLOATING WHATSAPP ─── */
  .whatsapp-float {
    position: fixed; bottom: 24px; right: 24px; z-index: 900;
    width: 58px; height: 58px; border-radius: 50%;
    background: #25D366; color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; text-decoration: none;
    box-shadow: 0 4px 24px rgba(37,211,102,0.45);
    transition: all 0.3s; animation: bounceIn 1s 2s ease both;
  }
  .whatsapp-float:hover { transform: scale(1.13) rotate(-5deg); box-shadow: 0 8px 36px rgba(37,211,102,0.6); }
  @keyframes bounceIn { from { opacity:0; transform:scale(0.5); } 70% { transform:scale(1.1); } to { opacity:1; transform:scale(1); } }

  /* ─── BOOKING MODAL ─── */
  .booking-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(6px);
    align-items: center; justify-content: center; padding: 20px;
  }
  .booking-modal-overlay.open { display: flex; }
  .booking-modal {
    background: #fff; border: 1.5px solid rgba(0,201,122,0.25);
    border-radius: 16px; padding: 44px 38px; width: 100%; max-width: 530px;
    position: relative; animation: modalIn 0.3s ease;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  }
  @keyframes modalIn { from { opacity:0; transform: scale(0.92) translateY(20px); } to { opacity:1; transform: none; } }
  .booking-modal-close {
    position: absolute; top: 16px; right: 20px; background: none; border: none;
    color: var(--text-muted); font-size: 24px; cursor: pointer; line-height: 1; transition: color 0.2s;
  }
  .booking-modal-close:hover { color: var(--green); }
  .booking-modal h3 { font-family: 'Oswald', sans-serif; font-size: 32px; letter-spacing: 2px; color: var(--text-dark); margin-bottom: 6px; }
  .booking-modal p { font-size: 14px; color: var(--text-muted); margin-bottom: 28px; }
  .booking-form-group { margin-bottom: 18px; }
  .booking-form-group label {
    display: block; font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px;
  }
  .booking-form-group input, .booking-form-group select, .booking-form-group textarea {
    width: 100%; background: var(--off-white); border: 1.5px solid var(--border);
    border-radius: 7px; padding: 12px 14px; color: var(--text-dark);
    font-family: 'Inter', sans-serif; font-size: 15px; outline: none; transition: all 0.2s;
  }
  .booking-form-group input:focus, .booking-form-group select:focus, .booking-form-group textarea:focus {
    border-color: var(--green); box-shadow: 0 0 0 3px var(--green-light);
  }
  .booking-form-group select option { background: #fff; color: var(--text-dark); }
  .booking-form-group textarea { resize: vertical; min-height: 72px; }
  .booking-submit {
    width: 100%; background: var(--green); color: #fff; border: none;
    border-radius: 7px; padding: 15px;
    font-family: 'Inter', sans-serif;
    font-size: 17px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 16px rgba(0,201,122,0.30);
  }
  .booking-submit:hover { background: var(--green-dark); transform: translateY(-2px); }
  .booking-success { text-align: center; padding: 20px 0; display: none; }
  .booking-success .success-icon { font-size: 60px; margin-bottom: 16px; }
  .booking-success h4 { font-family: 'Oswald', sans-serif; font-size: 30px; letter-spacing: 2px; color: var(--green); margin-bottom: 10px; }
  .booking-success p { color: var(--text-muted); font-size: 15px; line-height: 1.7; }

  /* ─── RESPONSIVE ─── */

  /* === TABLET (max 900px) === */
  @media (max-width: 900px) {
    nav { padding: 0 4vw; height: 70px; }
    .nav-logo img { height: 56px; }
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .mobile-menu { top: 70px; }

    .hero-inner {
      grid-template-columns: 1fr;
      padding: 40px 0 60px;
      gap: 36px;
      min-height: unset;
    }
    .hero-visual { order: -1; max-width: 360px; margin: 0 auto; width: 100%; }
    .hero-img-main { min-height: 320px; aspect-ratio: 3/2; }
    .hero-img-card2 { right: -10px; }
    .hero-content { padding-top: 0; padding-bottom: 0; text-align: center; align-items: center; }
    .hero-badge { margin-left: auto; margin-right: auto; }
    .hero-divider { margin-left: auto; margin-right: auto; }
    .hero-sub { text-align: center; max-width: 100%; }
    .hero-btns { justify-content: center; }
    .hero-stats { justify-content: center; }

    .champions-intro { grid-template-columns: 1fr; gap: 30px; }
    .contact-grid { grid-template-columns: 1fr; }
    .contact-left { border-radius: 16px; }
    .faq-grid { grid-template-columns: 1fr; }
    .programs-strip { grid-template-columns: 1fr 1fr; }
    .safety-inner { grid-template-columns: 1fr; gap: 32px; }
    .safety-badges { grid-template-columns: repeat(2, 1fr); }
    .about-grid { grid-template-columns: 1fr; gap: 32px; }
    .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: unset; }
    .gallery-item { grid-column: unset !important; grid-row: unset !important; height: 180px; }
    .coaches-grid { grid-template-columns: 1fr 1fr; }
    .membership-grid { grid-template-columns: 1fr 1fr; }
    .testi-grid { grid-template-columns: 1fr; }

    section { padding: 64px 4vw; }
    .contact-form { padding: 28px 22px; }
  }

  /* === MOBILE (max 600px) === */
  @media (max-width: 600px) {
    nav { padding: 0 5vw; height: 64px; }
    .nav-logo img { height: 48px; }
    .mobile-menu { top: 64px; padding: 16px 5vw 22px; }
    .mobile-menu a { font-size: 18px; padding: 10px 0; }

    section { padding: 56px 5vw; }

    /* Hero */
    #home { padding: 64px 5vw 0; }
    .hero-inner { padding: 28px 0 48px; gap: 28px; grid-template-columns: 1fr !important; }
    .hero-visual { order: -1; max-width: 100% !important; width: 100% !important; }
    .hero-img-main { min-height: 240px; }
    .hero-img-card2 { display: none; }
    .hero-img-badge { padding: 10px 14px; bottom: 16px; left: 16px; }
    .hero-img-badge-title { font-size: 16px; }
    .hero-title { font-size: clamp(22px, 8vw, 34px) !important; line-height: 1.05; }
    .hero-sub { font-size: 14px; }
    .hero-venue-label { font-size: 10px !important; word-break: break-word; }
    .hero-btns { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
    .btn-primary, .btn-outline { width: 100%; text-align: center; padding: 14px 20px; font-size: 13px; display: flex; align-items: center; justify-content: center; min-height: 44px; }
    .hero-stats { flex-wrap: wrap; gap: 16px 24px; justify-content: center; }
    .hero-stat { padding-right: 16px; margin-right: 0; }
    .hero-stat-num { font-size: 28px; }
    .hero-accent-circle, .hero-accent-circle2, .hero-orb-1, .hero-orb-2 { display: none; }

    /* Stats strip */
    .stats-strip-inner { grid-template-columns: repeat(2, 1fr); }
    .stats-strip-item:nth-child(2)::after { display: none; }
    .stats-strip-num { font-size: 34px; }
    .stats-strip-label { font-size: 9px; letter-spacing: 1.5px; }

    /* Ticker */
    .ticker-item { font-size: 14px; padding: 0 24px; }

    /* Section headings */
    .section-title { font-size: clamp(20px, 6.5vw, 30px) !important; }
    .section-tag { font-size: 10px; }

    /* About */
    .about-img-wrap { height: 260px; min-height: unset; }
    .about-img-badge { font-size: 22px; padding: 10px 16px; }
    .about-feat { padding: 16px 16px; }
    .about-feat-icon { font-size: 22px; }
    .about-feat-title { font-size: 15px; }

    /* Services / Programs */
    .programs-strip { grid-template-columns: 1fr 1fr !important; gap: 12px; }
    .program-card { padding: 20px 16px; }
    .program-name { font-size: 15px; }
    .services-grid { grid-template-columns: 1fr !important; }
    .service-price { font-size: 40px; }

    /* Coaches */
    .coaches-grid { grid-template-columns: 1fr !important; }
    .coach-img-wrap { height: 280px !important; max-height: 280px; }
    .coach-name { font-size: 26px; }
    .coach-info { padding: 20px; }
    .achieve-item { font-size: 13px !important; }

    /* Professional Coaching Cards (programs-strip) */
    .programs-strip { grid-template-columns: 1fr !important; gap: 14px; }

    /* Membership */
    .membership-grid { grid-template-columns: 1fr !important; }
    .membership-card { padding: 28px 22px; }
    .membership-amount { font-size: 50px; }

    /* Testimonials */
    .testi-card { padding: 24px 20px; }

    /* Champions */
    .trophies-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .trophy-card { padding: 18px 12px; }
    .trophy-icon { font-size: 26px; }
    .trophy-title { font-size: 13px; }

    /* Safety */
    .safety-inner { gap: 24px; grid-template-columns: 1fr; }
    .safety-text h2 { font-size: 26px !important; }
    .safety-text p { font-size: 15px; }
    .safety-badges { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .safety-badge { padding: 20px 14px; }

    /* Gallery */
    .gallery-grid { grid-template-columns: 1fr 1fr; }
    .gallery-item { height: 160px; }

    /* Contact */
    .contact-form { padding: 22px 16px; }
    .form-row { grid-template-columns: 1fr; gap: 10px; }
    .contact-info-item { gap: 12px; }
    .contact-icon { width: 42px; height: 42px; font-size: 18px; }
    .contact-value { font-size: 14px; }
    .contact-socials { gap: 8px; margin-top: 24px; }

    /* FAQ */
    .faq-item { padding: 18px 18px; }
    .faq-q { font-size: 14px !important; overflow-wrap: break-word; word-break: break-word; }
    .faq-a { font-size: 13px !important; line-height: 1.7 !important; }
    .faq-arrow { flex-shrink: 0; margin-left: auto; }

    /* General mobile */
    section { padding: 48px 5% !important; }
    .section-title { word-break: break-word; overflow-wrap: break-word; }
    * { max-width: 100%; }
    .service-card { padding: 20px !important; }
    .service-book { display: block; width: 100%; text-align: center; }
    .ticker-item { font-size: 14px; }

    /* Booking Modal */
    .booking-modal-overlay { padding: 12px; align-items: flex-end; }
    .booking-modal { padding: 28px 20px 32px; border-radius: 16px 16px 0 0; max-height: 92vh; overflow-y: auto; }
    .booking-modal h3 { font-size: 26px; }

    /* WhatsApp float */
    .whatsapp-float { bottom: 18px; right: 18px; width: 52px; height: 52px; }

    /* Legal overlay */
    .legal-inner { padding: 40px 18px 60px; }
    .legal-title { font-size: clamp(30px, 10vw, 52px); }
  }

  /* === SMALL MOBILE (max 400px) === */
  @media (max-width: 400px) {
    nav { height: 60px; }
    .nav-logo img { height: 44px; }
    .mobile-menu { top: 60px; }
    .hero-title { font-size: clamp(20px, 9vw, 32px) !important; }
    .hero-visual { max-width: 240px; }
    .stats-strip-num { font-size: 30px; }
    .programs-strip { grid-template-columns: 1fr !important; }
    .trophies-grid { grid-template-columns: 1fr !important; }
    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-item { height: 200px; }
    .safety-badges { grid-template-columns: repeat(2, 1fr) !important; }
    .safety-badge { padding: 16px 10px; }
    .section-title { font-size: clamp(20px, 6vw, 30px) !important; }
  }

  /* === TABLET (480px-768px): Professional coaching 2-col === */
  @media (min-width: 481px) and (max-width: 768px) {
    .programs-strip { grid-template-columns: 1fr 1fr !important; }
  }

/* ═══════════════════════════════════════════════════════
   FIX 2 — FULL MOBILE RESPONSIVE (max-width: 768px)
   Applies to ALL pages / sections
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Global ── */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { overflow-x: hidden; max-width: 100vw; }
  .spa-page { overflow-x: hidden; }
  img { max-width: 100%; height: auto; }
  section, .section-inner, .container { padding-left: 18px !important; padding-right: 18px !important; }

  /* ── Nav ── */
  nav { padding: 0 16px !important; height: 60px !important; }
  .nav-logo img { max-height: 40px !important; width: auto !important; }
  .nav-links { display: none !important; }
  .hamburger { display: flex !important; }
  .mobile-menu { width: 100% !important; }
  .mobile-menu.open { display: flex !important; flex-direction: column !important; }
  .mobile-menu a, .mobile-menu .mob-link { font-size: 16px !important; padding: 14px 20px !important; width: 100% !important; box-sizing: border-box; }

  /* ── Hero sections ── */
  .hero-inner, .hero-content, .hero-split, [class*="hero-grid"] {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 20px !important;
    padding: 80px 18px 40px !important;
  }
  .hero-title, [class*="hero-title"] { font-size: clamp(22px, 7vw, 34px) !important; line-height: 1.05 !important; }
  .hero-subtitle, [class*="hero-sub"] { font-size: 15px !important; }
  .hero-cta, .hero-actions, [class*="hero-btn"] { flex-direction: column !important; gap: 12px !important; width: 100% !important; }
  .hero-cta a, .hero-actions a, [class*="hero-btn"] a { width: 100% !important; text-align: center !important; box-sizing: border-box; }
  .hero-img, [class*="hero-img"], .hero-visual { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; }

  /* ── Stats strip ── */
  .stats-strip, .stats-grid, [class*="stats"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* ── Section headings ── */
  .section-title { font-size: clamp(20px, 6vw, 30px) !important; }
  .section-subtitle { font-size: 14px !important; padding: 0 !important; }

  /* ── Services grid ── */
  .services-grid, [class*="service-grid"], [class*="services-list"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* ── Coaching packages ── */
  .pricing-grid, .pc-grid, [class*="packages-grid"], [class*="coaching-grid"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .pricing-card-v2, .pc-card, [class*="package-card"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .pc-btn {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 13px 20px !important;
    font-size: 13px !important;
    margin-top: 14px !important;
  }

  /* ── Membership cards ── */
  .membership-grid, [class*="membership-grid"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .membership-card { width: 100% !important; box-sizing: border-box !important; }

  /* ── Contact / booking form ── */
  .contact-grid, .contact-layout, [class*="contact-inner"], [class*="booking-grid"] {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .contact-form input, .contact-form textarea, .contact-form select,
  [class*="form-input"], [class*="form-field"] input, [class*="form-field"] textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
  }
  .form-submit, [class*="form-submit"], [class*="form-btn"] {
    width: 100% !important;
    padding: 14px !important;
    font-size: 14px !important;
  }

  /* ── WhatsApp button ── */
  a[href*="api.whatsapp.com"] {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }

  /* ── Buttons universal ── */
  .btn-primary, .btn-outline, .btn-green, .cta-btn, [class*="btn-primary"], [class*="btn-outline"] {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 13px 20px !important;
    font-size: 14px !important;
  }

  /* ── Champions / Success Stories ── */
  .champions-grid, [class*="champions-list"], [class*="success-grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .champion-card, [class*="champion-item"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Venue strip ── */
  .venue-strip, [class*="venue-grid"], [class*="location-grid"] {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* ── Two-column layouts ── */
  .two-col, .split-grid, [class*="two-col"], [class*="split-layout"],
  .about-grid, [class*="about-inner"] {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* ── Cards and grid items ── */
  .card-grid, .features-grid, .benefits-grid, [class*="card-grid"],
  [class*="features-grid"], [class*="benefits-list"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── FAQ ── */
  .faq-list, [class*="faq-grid"] { gap: 10px !important; }
  .faq-item { padding: 14px 16px !important; }

  /* ── Club Account page specifics ── */
  .ca-grid, [class*="account-grid"], [class*="payment-grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .ca-card, [class*="account-card"] { width: 100% !important; box-sizing: border-box !important; }

  /* ── Testimonials ── */
  .testimonials-grid, [class*="testimonial-grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── Coaches grid ── */
  .coaches-grid, [class*="coaches-grid"], [class*="team-grid"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* ── Progress bar / scroll indicators ── */
  #progress-bar, #scroll-progress { height: 3px !important; }

  /* ── Reduce padding on sections ── */
  section { padding-top: 48px !important; padding-bottom: 48px !important; }
  .section-tag { margin-bottom: 10px !important; }
}

@media (max-width: 480px) {
  .coaches-grid, [class*="coaches-grid"], [class*="team-grid"] {
    grid-template-columns: 1fr !important;
  }
  .stats-strip, .stats-grid, [class*="stats"] {
    grid-template-columns: 1fr 1fr !important;
  }
  nav { padding: 0 12px !important; }
  .hero-title, [class*="hero-title"] { font-size: clamp(20px, 8vw, 32px) !important; }
}

/* ══════════════════════════════════════════
   GLOBAL MOBILE IMPROVEMENTS — All Pages
   Max-width: 768px comprehensive fix
══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Hero h1 (coaching / contact / champions pages) ── */
  .hero-h1 { 
    font-size: clamp(24px, 7vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0.8px !important;
    text-align: center !important;
  }
  .mem-hero-h1 {
    font-size: clamp(24px, 7vw, 38px) !important;
    line-height: 1.08 !important;
    text-align: center !important;
  }

  /* ── Hero layout: always single column, centered ── */
  .mem-hero-inner,
  [class*="hero-inner"],
  [class*="page-hero"] .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 80px 18px 36px !important;
    text-align: center !important;
  }
  .page-hero { padding: 80px 18px 40px !important; }

  /* ── Hero buttons centered ── */
  .hero-btns, .mem-hero-btns, [class*="hero-btn"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .hero-btns a, .mem-hero-btns a,
  .btn-primary, .btn-outline {
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* ── Hero image: hide on very small screens, show below content ── */
  .hero-img-frame, .mem-hero-right,
  [class*="hero-visual"] {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  .hero-img-main { min-height: 220px !important; }
  .hero-img-card2 { right: 8px !important; top: 10px !important; }
  .hero-accent-circle, .hero-accent-circle2,
  .hero-orb-1, .hero-orb-2 { display: none !important; }

  /* ── Badge centered ── */
  .hero-badge, .mem-hero-badge,
  [class*="hero-badge"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── Stats strip: 2 columns ── */
  .stats-strip-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }

  /* ── Section padding ── */
  section {
    padding: 48px 18px !important;
  }
  .section-inner, .container, [class*="-inner"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
    max-width: 100% !important;
  }

  /* ── About grid ── */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* ── Pricing cards ── */
  .pricing-grid, .pc-grid, .pricing-cards-grid,
  [class*="pricing-grid"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* ── Coaches / team grid ── */
  .coaches-grid, [class*="coach-grid"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* ── Steps grid ── */
  .steps-grid, [class*="steps-grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── Programs / cards grid ── */
  .programs-grid, .info-cards-grid,
  .schools-grid, [class*="programs-grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── Footer ── */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  .footer-brand { grid-column: 1 / -1 !important; }

  /* ── Mobile menu styling ── */
  .mobile-menu {
    top: 60px !important;
    padding: 16px 0 24px !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
  }
  .mobile-menu a {
    font-size: 15px !important;
    padding: 13px 20px !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    display: block !important;
  }
  .mobile-menu a.mobile-cta {
    margin: 12px 16px 4px !important;
    border-radius: 8px !important;
    text-align: center !important;
    padding: 13px 20px !important;
    border-bottom: none !important;
  }

  /* ── Whatsapp float ── */
  .whatsapp-float, .wa-float {
    width: 50px !important;
    height: 50px !important;
    bottom: 20px !important;
    right: 16px !important;
  }

  /* ── Horizontal scroll tables ── */
  table, .payment-table { 
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── School cards / two-col layouts ── */
  .schools-coaching-inner,
  [class*="coaching-inner"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

@media (max-width: 480px) {
  .coaches-grid, [class*="coach-grid"] {
    grid-template-columns: 1fr !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
  .stats-strip-inner {
    grid-template-columns: 1fr 1fr !important;
  }
  .hero-h1, .mem-hero-h1 {
    font-size: clamp(22px, 9vw, 34px) !important;
  }
}


/* ─── FOOTER ─── */
footer {
  background: linear-gradient(160deg, #0b1728 0%, #0d1730 55%, #14163a 100%) !important;
  padding: 64px 5vw 0 !important;
  border-top: 3px solid #00C97A !important;
  font-family: 'Inter', sans-serif;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 0;
}
.footer-logo-img {
  display: block;
  height: 72px;
  width: 72px;
  margin-bottom: 18px;
  object-fit: cover;
  border-radius: 50%;
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1;
  transition: opacity 0.2s, transform 0.2s;
  mix-blend-mode: normal;
  filter: none;
  box-shadow: 0 0 0 2px rgba(0,201,122,0.55), 0 4px 18px rgba(0,201,122,0.25);
}
.footer-logo-img:hover { transform: translateY(-2px); }
.footer-logo-img:hover { opacity: 0.85; }
.footer-logo-text { display: none !important; }
.footer-logo-text span { display: none !important; }
.footer-tagline {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  max-width: 270px;
  margin-bottom: 4px;
}
.footer-col-title {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #00C97A !important;
  margin-bottom: 18px;
}
.footer-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links li {
  margin-bottom: 0;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
}
.footer-links a {
  font-size: 13px;
  color: rgba(255,255,255,0.65) !important;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: #00C97A !important; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  background: rgba(0,0,0,0.25) !important;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom span,
.footer-bottom > span {
  font-size: 12px;
  color: rgba(255,255,255,0.45) !important;
  letter-spacing: 0.5px;
}
.footer-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-legal a {
  font-size: 12px;
  color: rgba(255,255,255,0.45) !important;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal a:hover { color: #00C97A !important; }
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    text-align: center !important;
  }
  .footer-grid > div { width: 100% !important; }
  .footer-logo-img { margin: 0 auto 12px !important; }
  .footer-tagline { max-width: 100% !important; text-align: center !important; margin: 0 auto 4px !important; }
  .footer-col-title { text-align: center !important; }
  .footer-links { align-items: center !important; }
  .footer-links li { text-align: center !important; }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 18px 5vw !important;
  }
  .footer-legal { justify-content: center !important; }
}

/* ── Pricing cards (homepage membership-plans section) ── */
#membership-plans { background: var(--off-white); }
#membership-plans .pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 860px;
  margin-top: 40px;
}
#membership-plans .pricing-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--border);
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex; flex-direction: column;
}
#membership-plans .pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
#membership-plans .pricing-card.popular {
  border-color: var(--green);
  box-shadow: var(--shadow-green), var(--shadow-md);
}
#membership-plans .pricing-card.popular:hover {
  box-shadow: 0 24px 64px rgba(0,201,122,0.3), var(--shadow-lg);
}
#membership-plans .popular-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--green); color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 5px 18px; border-radius: 20px;
  white-space: nowrap;
}
#membership-plans .pricing-plan-name {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
#membership-plans .pricing-price {
  font-family: 'Oswald', sans-serif;
  font-size: 64px; font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
  margin-bottom: 6px;
}
#membership-plans .pricing-price sup {
  font-size: 28px;
  vertical-align: super;
  font-weight: 700;
}
#membership-plans .pricing-price-note {
  font-size: 13px; color: var(--text-muted);
  margin-bottom: 28px;
}
#membership-plans .pricing-divider {
  height: 1px; background: var(--border);
  margin-bottom: 24px;
}
#membership-plans .pricing-features {
  list-style: none;
  flex: 1;
  margin-bottom: 32px;
  padding: 0;
}
#membership-plans .pricing-features li {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; color: var(--text-mid);
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}
#membership-plans .pricing-features li:last-child { border-bottom: none; }
#membership-plans .pricing-features li::before {
  content: '';
  width: 20px; height: 20px;
  min-width: 20px;
  background: var(--green-light);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300C97A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px; background-position: center; background-repeat: no-repeat;
}
#membership-plans .pricing-btn {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 15px 28px;
  min-height: 48px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  text-decoration: none;
  transition: all 0.22s;
  cursor: pointer;
  margin-top: auto;
}
#membership-plans .pricing-btn-outline {
  background: transparent;
  border: 2px solid var(--green);
  color: var(--green);
}
#membership-plans .pricing-btn-outline:hover {
  background: var(--green);
  color: #fff;
  transform: scale(1.02);
}
#membership-plans .pricing-btn-filled {
  background: var(--green);
  border: 2px solid var(--green);
  color: #fff;
  box-shadow: var(--shadow-green);
}
#membership-plans .pricing-btn-filled:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  transform: scale(1.02);
}
@media (max-width: 600px) {
  #membership-plans .pricing-grid { grid-template-columns: 1fr !important; max-width: 100%; }
  #membership-plans .pricing-card { padding: 32px 24px !important; }
  #membership-plans .pricing-price { font-size: 64px !important; }
  #membership-plans .pricing-btn { width: 100% !important; }
}

/* === LEGAL OVERLAY MOBILE FIXES === */
.legal-overlay {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 99999 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  display: none;
  padding: 20px 16px !important;
}
.legal-overlay.active { display: block !important; animation: overlayIn 0.3s ease; }
@keyframes overlayIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.legal-close {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: #fff !important;
  border: 2px solid #00C97A !important;
  color: #0b1728 !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  margin-bottom: 20px !important;
  display: block !important;
  min-height: 44px !important;
}
.legal-close:hover { background: #00C97A !important; color: #fff !important; }
.legal-overlay h1, .legal-overlay h2, .legal-overlay h3 { word-break: break-word; }
@media (max-width: 600px) {
  .legal-overlay { padding: 16px 16px !important; font-size: 14px !important; }
  .legal-overlay p, .legal-overlay li { font-size: 14px !important; line-height: 1.7 !important; }
  .legal-title { font-size: clamp(20px, 6vw, 28px) !important; }
}
/* Footer legal links - bigger touch targets on mobile */
@media (max-width: 600px) {
  .footer-legal a, .legal-links a {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 4px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ENHANCED MOBILE IMPROVEMENTS — Comprehensive Fix
   Covers all pages, all sections
══════════════════════════════════════════════════════════════ */

/* ── Touch target minimum size ── */
@media (max-width: 768px) {
  a, button, [role="button"], input[type="submit"], input[type="button"] {
    min-height: 44px;
  }

  /* ── Nav: cleaner compact look ── */
  nav {
    height: 60px !important;
    padding: 0 16px !important;
  }
  .nav-logo img {
    height: 42px !important;
  }
  .nav-wa-btn {
    display: none !important;
  }
  .hamburger {
    display: flex !important;
  }
  .nav-links {
    display: none !important;
  }

  /* ── Mobile menu: smooth full-width ── */
  .mobile-menu {
    top: 60px !important;
    left: 0 !important; right: 0 !important;
    padding: 0 !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
  }
  .mobile-menu a {
    padding: 15px 20px !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    display: flex !important;
    align-items: center !important;
    min-height: 52px !important;
  }
  .mobile-menu a.mobile-cta {
    margin: 12px 16px 16px !important;
    border-radius: 8px !important;
    border-bottom: none !important;
    justify-content: center !important;
    font-size: 14px !important;
    min-height: 50px !important;
  }

  /* ── Hero: mobile-first layout ── */
  #home {
    padding-top: 60px !important;
  }
  .hero-inner {
    grid-template-columns: 1fr !important;
    padding: 24px 0 40px !important;
    gap: 24px !important;
    min-height: unset !important;
  }
  .hero-visual {
    order: -1 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .hero-img-main {
    min-height: 220px !important;
    border-radius: 14px !important;
  }
  .hero-img-card2 { display: none !important; }
  .hero-img-ring { display: none !important; }
  .hero-content {
    text-align: center !important;
    align-items: center !important;
    padding: 0 !important;
  }
  .hero-btns {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .btn-primary, .btn-outline {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    min-height: 50px !important;
    font-size: 13px !important;
  }
  .hero-stats {
    justify-content: center !important;
    gap: 14px 20px !important;
  }
  .hero-stat {
    padding-right: 20px !important;
  }

  /* ── Stats strip: 2x2 grid ── */
  .stats-strip-inner {
    grid-template-columns: 1fr 1fr !important;
  }
  .stats-strip-item:nth-child(2)::after { display: none !important; }
  .stats-strip-num { font-size: 30px !important; }
  .stats-strip-label { font-size: 9px !important; }

  /* ── Ticker: smaller on mobile ── */
  .ticker-item { font-size: 13px !important; padding: 0 20px !important; }

  /* ── About section ── */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-top: 32px !important;
  }
  .about-img-wrap {
    min-height: 240px !important;
    height: 240px !important;
  }
  .about-text-desc { font-size: 15px !important; }
  .about-feat { padding: 14px 16px !important; }
  .about-feat:hover { transform: none !important; }

  /* ── Services: single column ── */
  .programs-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 28px !important;
  }
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 20px !important;
  }
  .service-card {
    padding: 22px 18px !important;
    min-height: unset !important;
  }
  .service-card:hover { transform: none !important; }
  .service-price { font-size: 38px !important; }

  /* ── Coaches: single column on small, 2-col on tablet ── */
  .coaches-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .coach-img-wrap { height: 220px !important; }
  .coach-name { font-size: 20px !important; }
  .coach-role { font-size: 11px !important; }
  .coach-bio { font-size: 13px !important; }
  .coach-info { padding: 16px !important; }

  /* ── Membership cards ── */
  .membership-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .membership-card { padding: 26px 20px !important; }

  /* ── Testimonials ── */
  .testi-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .testi-card:hover { transform: none !important; }

  /* ── Champions section ── */
  .champions-intro {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .trophies-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* ── Safety badges ── */
  .safety-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .safety-badges { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .safety-badge { padding: 18px 12px !important; }
  .safety-badge:hover { transform: none !important; }

  /* ── Gallery ── */
  .gallery-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: unset !important;
  }
  .gallery-item {
    grid-column: unset !important;
    grid-row: unset !important;
    height: 150px !important;
  }

  /* ── Contact form ── */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .contact-form { padding: 20px 16px !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 10px !important; }
  .contact-info-item { gap: 12px !important; }
  .contact-icon { width: 40px !important; height: 40px !important; font-size: 16px !important; }

  /* ── FAQ ── */
  .faq-item { padding: 16px 16px !important; }
  .faq-q { font-size: 14px !important; }
  .faq-a { font-size: 13px !important; }

  /* ── Footer ── */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  .footer-brand { grid-column: 1 / -1 !important; }
  .footer-logo-img { height: 56px !important; width: 56px !important; }

  /* ── Booking modal ── */
  .booking-modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .booking-modal {
    padding: 24px 18px 32px !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
  .booking-modal h3 { font-size: 24px !important; }

  /* ── Pricing cards (services page) ── */
  .pricing-cards-grid, .pkg-intro-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  /* ── Athlete cards ── */
  .athletes-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .athlete-card {
    flex-direction: row !important;
    width: 100% !important;
  }

  /* ── General hover effects disable for touch ── */
  @media (hover: none) {
    .about-feat:hover,
    .service-card:hover,
    .coach-card:hover,
    .testi-card:hover,
    .safety-badge:hover,
    .program-card:hover,
    .membership-card:hover {
      transform: none !important;
      box-shadow: inherit !important;
    }
  }

  /* ── Prevent horizontal overflow ── */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  section {
    overflow-x: hidden !important;
  }
}

/* ── Coaches: 1 column on phones ── */
@media (max-width: 480px) {
  .coaches-grid {
    grid-template-columns: 1fr !important;
  }
  .programs-strip {
    grid-template-columns: 1fr !important;
  }
  .pricing-cards-grid, .pkg-intro-grid {
    grid-template-columns: 1fr !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
  .gallery-item { height: 160px !important; }
  .hero-stat-num { font-size: 26px !important; }
  .stats-strip-num { font-size: 28px !important; }

  /* ── Section titles smaller ── */
  .section-title {
    font-size: clamp(20px, 7vw, 28px) !important;
  }

  /* ── Safe padding on all sections ── */
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── Ultra small phones (360px and below) ── */
@media (max-width: 360px) {
  nav { height: 56px !important; padding: 0 12px !important; }
  .nav-logo img { height: 38px !important; }
  .hero-title { font-size: clamp(20px, 9vw, 28px) !important; }
  .btn-primary, .btn-outline { font-size: 12px !important; padding: 12px 16px !important; }
  .trophies-grid { grid-template-columns: 1fr !important; }
  .safety-badges { grid-template-columns: 1fr 1fr !important; }
  .gallery-item { height: 130px !important; }
}

/* ══════════════════════════════════════════════════════
   IMAGE-BASED TARGETED FIXES (Mobile UI Issues)
   Fixes identified from screenshots
══════════════════════════════════════════════════════ */

/* ── FIX 1: Nav phone number hidden on mobile — too cluttered ── */
@media (max-width: 768px) {
  /* Hide the inline WhatsApp/phone button in nav (not the hamburger) */
  nav > div > a:first-child {
    display: none !important;
  }
  /* Also hide by class if added */
  .nav-phone-btn {
    display: none !important;
  }
  /* Keep Book Now button but make it smaller */
  nav > div > a.nav-cta,
  nav > div > a[href*="jotform"] {
    padding: 8px 14px !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
  }
  /* Nav: logo + book now + hamburger only */
  nav {
    gap: 10px !important;
  }
}

/* ── FIX 2: Mobile menu — solid background, no bleed-through ── */
@media (max-width: 768px) {
  .mobile-menu,
  div[id*="Menu"],
  div[id*="mobMenu"],
  div[id*="mobileMenu"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    /* Ensure full coverage */
    position: fixed !important;
    z-index: 9998 !important;
    left: 0 !important;
    right: 0 !important;
    border-bottom: 3px solid var(--green, #00C97A) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important;
    padding: 0 0 16px 0 !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
  }
  .mobile-menu.open,
  div[id*="Menu"].open,
  div[id*="mobMenu"].open,
  div[id*="mobileMenu"].open {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Menu items */
  .mobile-menu a,
  div[id*="Menu"] a,
  div[id*="mobMenu"] a,
  div[id*="mobileMenu"] a {
    padding: 15px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    color: #0d1b2a !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    min-height: 54px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }
  /* Active / green items */
  .mobile-menu a[style*="25D366"],
  div[id*="Menu"] a[style*="25D366"],
  div[id*="mobileMenu"] a[style*="25D366"] {
    color: #25D366 !important;
  }
  /* Book Now CTA inside menu */
  .mobile-menu .mobile-cta,
  .mobile-menu a.mobile-cta,
  div[id*="mobileMenu"] .mobile-cta {
    margin: 10px 16px 4px !important;
    border-radius: 8px !important;
    border-bottom: none !important;
    justify-content: center !important;
    background: var(--green, #00C97A) !important;
    color: #fff !important;
    min-height: 52px !important;
    font-size: 14px !important;
  }
  /* X close button alignment */
  .hamburger,
  #hamburger,
  [id*="hbg"],
  [id*="hamburger"] {
    z-index: 9999 !important;
    position: relative !important;
  }
}

/* ── FIX 3: Athletes grid — force single column, prevent overflow ── */
@media (max-width: 768px) {
  /* All athlete grid variants */
  .athletes-grid,
  .athletes-grid-v2,
  [class*="athletes-grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Vertical card layout — full width */
  .athlete-card-v2 {
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .acv2-header {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 90px !important;
    flex-shrink: unset !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 20px 20px 16px !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
  }
  .acv2-header-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .acv2-initials {
    display: inline-flex !important;
    width: 34px !important; height: 34px !important;
    font-size: 12px !important; margin-bottom: 0 !important;
  }
  .acv2-rank { font-size: 10px !important; letter-spacing: 1.2px !important; }
  .acv2-medal { font-size: 44px !important; }
  .acv2-body {
    width: 100% !important;
    min-width: 0 !important;
    flex: unset !important;
    padding: 16px 20px 20px !important;
    overflow: visible !important;
  }
  .acv2-name {
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .acv2-badge {
    font-size: 10px !important;
    padding: 5px 12px !important;
    margin-bottom: 10px !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  .acv2-desc {
    font-size: 13px !important;
    line-height: 1.65 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    margin-bottom: 14px !important;
  }
  .acv2-btn {
    font-size: 11px !important;
    padding: 8px 16px !important;
  }

  /* Old athlete card style too */
  .athlete-card {
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

/* ── FIX 4: Hero image — not too tall on mobile ── */
@media (max-width: 768px) {
  .hero-img-main {
    max-height: 300px !important;
    min-height: 200px !important;
    aspect-ratio: 4/3 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .hero-img-main img {
    object-fit: cover !important;
    object-position: top center !important;
    height: 100% !important;
  }
  /* Coach image in hero if any */
  .hero-img-wrap img,
  [class*="hero-img"] img {
    max-height: 300px !important;
    object-fit: cover !important;
    object-position: top center !important;
    width: 100% !important;
    border-radius: 14px !important;
  }
}

/* ── FIX 5: WhatsApp float button — not overlapping content ── */
@media (max-width: 768px) {
  .whatsapp-float,
  .wa-float,
  a[href*="api.whatsapp.com"][style*="fixed"],
  a[href*="api.whatsapp.com"].whatsapp-float {
    bottom: 20px !important;
    right: 16px !important;
    width: 50px !important;
    height: 50px !important;
    z-index: 800 !important;
  }
  /* No tooltip on mobile */
  .whatsapp-float::after,
  .wa-float::after {
    display: none !important;
  }
}




  :root {
    --green: #00C97A;
    --green-dark: #009a5c;
    --green-light: rgba(0,201,122,0.10);
    --navy: #0b1728;
    --white: #ffffff;
    --off-white: #f7f9fc;
    --card-bg: #ffffff;
    --text-dark: #0d1b2a;
    --text-mid: #2d4060;
    --text-muted: #6b7fa0;
    --border: rgba(0,0,0,0.08);
    --shadow-sm: 0 2px 12px rgba(0,0,0,0.07);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.13);
  }

  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { font-family:'Inter',sans-serif; background:var(--white); color:var(--text-dark); overflow-x:hidden; }

  #progress-bar { position:fixed; top:0; left:0; height:3px; z-index:9999; background:linear-gradient(90deg,var(--green),#00f598); width:0%; transition:width 0.1s; }

  /* NAV */
  nav { position:fixed; top:0; left:0; right:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; padding:0 4vw; height:72px; background: rgba(255,255,255,0.96); border-bottom: 2px solid var(--green); backdrop-filter:blur(16px); box-shadow: 0 2px 20px rgba(0,0,0,0.08); transition:box-shadow 0.3s, background 0.3s; }
  nav.scrolled { box-shadow:0 4px 30px rgba(0,0,0,0.13); }
  .nav-logo { text-decoration:none; display:flex; align-items:center; flex-shrink:0; }
  .nav-logo img { height:54px; width:auto; display:block; mix-blend-mode: multiply; filter: contrast(1.05); transition: opacity 0.2s; }
  .nav-logo img:hover { filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(0,201,122,0.6)); transform: scale(1.03); }
  .nav-logo span { display: none; }
  .nav-links { display:flex; gap:2px; list-style:none; align-items:center; }
  .nav-links a { color: var(--text-mid); text-decoration:none; font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; padding:7px 11px; border-radius:4px; transition:all 0.2s; white-space:nowrap; position:relative; }
  .nav-links a::after { content:''; position:absolute; bottom:2px; left:50%; right:50%; height:2px; background:var(--green); border-radius:2px; transition:left 0.2s, right 0.2s; }
  .nav-links a:hover { color:var(--green); background:var(--green-light); }
  .nav-links a:hover::after { left:11px; right:11px; }
  .nav-links a.active { color:var(--green); }
  .nav-links a.active::after { left:11px; right:11px; }
  .nav-cta { background:var(--green)!important; color:#0b1728!important; border-radius:5px; padding:9px 18px!important; font-weight:800!important; font-size:11.5px!important; letter-spacing:1.5px!important; box-shadow:0 4px 18px rgba(0,201,122,0.35)!important; }
  .nav-cta::after { display:none!important; }
  .nav-cta:hover { background:#00e68a!important; transform:translateY(-1px); box-shadow:0 6px 24px rgba(0,201,122,0.5)!important; color:#0b1728!important; }
  .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; }
  .hamburger span { width:24px; height:2px; background:var(--text-dark); display:block; transition:0.3s; border-radius:2px; }
  .hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
  .hamburger.open span:nth-child(2) { opacity:0; }
  .hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

  /* MOBILE MENU */
  .mobile-menu { display:none; flex-direction:column; position:fixed; top:72px; left:0; right:0; z-index:999; background: #ffffff; padding:20px 5vw 28px; border-bottom:2px solid var(--green); box-shadow:0 8px 24px rgba(0,0,0,0.1); }
  .mobile-menu.open { display:flex; animation:slideDown 0.25s ease; }
  @keyframes slideDown { from{opacity:0;transform:translateY(-12px);} to{opacity:1;transform:translateY(0);} }
  .mobile-menu a { color: var(--text-dark); text-decoration:none; font-family:'Inter',sans-serif; font-size:20px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:12px 0; border-bottom: 1px solid rgba(0,0,0,0.06); transition:color 0.2s; }
  .mobile-menu a:hover,.mobile-menu a.active-mobile { color:var(--green); }
  .mobile-menu a.mobile-cta { background:var(--green); color:#fff!important; text-align:center; border-radius:6px; padding:14px; margin-top:10px; border:none; }

  /* SECTION BASE */
  section { padding:88px 5vw; }
  .section-tag { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--green); margin-bottom:12px; }
  .section-tag::before { content:''; display:block; width:30px; height:2px; background:var(--green); border-radius:2px; }
  .section-title { font-family:'Oswald',sans-serif; font-size:clamp(26px,3.2vw,42px); letter-spacing:1px; color:var(--text-dark); line-height:1.05; margin-bottom:14px; }
  .section-title .accent { color:var(--green); }
  .section-subtitle { font-size:16px; color:var(--text-muted); max-width:560px; line-height:1.75; margin-bottom:52px; }

  /* ─── HERO styles are now inline-scoped inside the section element ─── */

  /* ─── TICKER STRIP ─── */
  .ticker-wrap { background:var(--green); padding:14px 0; overflow:hidden; position:relative; }
  .ticker-wrap::before,.ticker-wrap::after { content:''; position:absolute; top:0; bottom:0; width:60px; z-index:1; }
  .ticker-wrap::before { left:0; background:linear-gradient(90deg,var(--green),transparent); }
  .ticker-wrap::after { right:0; background:linear-gradient(-90deg,var(--green),transparent); }
  .ticker-inner { display:flex; width:max-content; animation:ticker 28s linear infinite; }
  .ticker-inner:hover { animation-play-state:paused; }
  .ticker-item { font-family:'Oswald',sans-serif; font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:#fff; padding:0 28px; white-space:nowrap; display:inline-flex; align-items:center; gap:28px; }
  .ticker-dot { color:rgba(255,255,255,0.75); font-size:10px; }
  @keyframes ticker { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

  /* ─── COACHING PACKAGES ─── */
  #coaching-packages { background:var(--white); }

  /* Top row: intro cards */
  .pkg-intro-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:56px; }
  .pkg-intro-card { background:#f7f9fc; border:2px solid transparent; border-radius:16px; padding:28px 22px; transition:all 0.3s; cursor:default; position:relative; overflow:hidden; }
  .pkg-intro-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--green); transform:scaleX(0); transition:transform 0.3s; transform-origin:left; }
  .pkg-intro-card:hover { border-color:var(--green); background:#fff; transform:translateY(-5px); box-shadow:0 12px 40px rgba(0,201,122,0.14); }
  .pkg-intro-card:hover::before { transform:scaleX(1); }
  .pkg-intro-icon { font-size:36px; margin-bottom:14px; display:block; }
  .pkg-intro-name { font-size:14px; font-weight:800; color:var(--text-dark); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px; }
  .pkg-intro-desc { font-size:13px; color:var(--text-muted); line-height:1.65; }

  /* Bottom row: pricing cards */
  .pricing-cards-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .pricing-card-v2 { background:#fff; border:1.5px solid rgba(0,0,0,0.09); border-radius:16px; padding:28px 22px 24px; transition:all 0.3s; box-shadow:var(--shadow-sm); position:relative; display:flex; flex-direction:column; }
  .pricing-card-v2:hover { transform:translateY(-6px); box-shadow:0 16px 48px rgba(0,0,0,0.12); border-color:var(--green); }
  .pricing-card-v2.featured { border-color:var(--green); border-width:2px; box-shadow:0 8px 36px rgba(0,201,122,0.18); background:linear-gradient(155deg,#f0faf5 0%,#fff 100%); }
  .feat-badge { position:absolute; top:-1px; left:50%; transform:translateX(-50%); background:var(--green); color:#fff; font-size:9px; font-weight:900; letter-spacing:2px; text-transform:uppercase; padding:5px 14px; border-radius:0 0 10px 10px; white-space:nowrap; box-shadow:0 4px 14px rgba(0,201,122,0.35); }
  .pc-icon { font-size:34px; margin-bottom:12px; display:block; }
  .pc-price-row { display:flex; align-items:baseline; gap:2px; margin-bottom:4px; }
  .pc-currency { font-size:20px; font-weight:700; color:var(--green); }
  .pc-amount { font-family:'Oswald',sans-serif; font-size:52px; color:var(--text-dark); line-height:1; }
  .pc-duration { font-size:13px; color:var(--text-muted); font-weight:600; margin-left:4px; }
  .pc-name { font-size:14px; font-weight:800; color:var(--text-dark); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; }
  .pc-desc { font-size:13px; color:var(--text-muted); line-height:1.65; flex:1; margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid rgba(0,0,0,0.07); }
  .pc-btn { display:block; width:100%; text-align:center; background:var(--green); color:#fff; padding:13px 20px; border-radius:7px; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; text-decoration:none; transition:all 0.25s; box-shadow:0 4px 14px rgba(0,201,122,0.22); }
  .pc-btn:hover { background:var(--green-dark); transform:translateY(-2px); box-shadow:0 6px 22px rgba(0,201,122,0.38); }

  /* ─── SCHOOLS ─── */
  #schools-coaching { background:#0b1728; padding:60px 5vw; }
  #schools-coaching .section-tag { color:var(--green); }
  #schools-coaching .section-tag::before { background:var(--green); }
  #schools-coaching .section-title { color:#fff; }
  #schools-coaching .section-subtitle { color:rgba(255,255,255,0.55); margin-bottom:36px; }
  .schools-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .school-card { background:rgba(255,255,255,0.03); border:1px solid rgba(0,201,122,0.16); border-radius:16px; padding:28px 28px 24px; transition:all 0.3s; box-shadow:0 4px 20px rgba(0,0,0,0.18); backdrop-filter:blur(8px); display:flex; flex-direction:column; }
  .school-card:hover { transform:translateY(-4px); border-color:rgba(0,201,122,0.40); box-shadow:0 12px 40px rgba(0,0,0,0.28); }
  .school-card-header { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
  .school-icon { font-size:28px; flex-shrink:0; }
  .school-name { font-family:'Oswald',sans-serif; font-size:22px; letter-spacing:1px; color:#fff; margin-bottom:2px; }
  .school-type { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--green); }
  .school-options { display:flex; gap:10px; margin-bottom:20px; }
  .school-option { flex:1; display:flex; align-items:center; gap:10px; background:rgba(0,201,122,0.07); border:1px solid rgba(0,201,122,0.14); border-radius:8px; padding:10px 12px; }
  .school-option-icon { width:30px; height:30px; border-radius:6px; background:rgba(0,201,122,0.14); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
  .school-option-label { font-size:12px; font-weight:700; color:#fff; margin-bottom:1px; }
  .school-option-sub { font-size:11px; color:rgba(255,255,255,0.45); }
  .school-btn { display:inline-block; width:100%; text-align:center; background:transparent; color:var(--green); padding:10px 20px; border-radius:6px; border:1.5px solid rgba(0,201,122,0.35); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; text-decoration:none; transition:all 0.25s; margin-top:auto; }
  .school-btn:hover { background:var(--green); color:#fff; border-color:var(--green); transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,201,122,0.38); }

  /* ─── WHO WE COACH ─── */
  #coaching-categories { background:var(--off-white); }
  .categories-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .category-card { background:var(--card-bg); border:2px solid var(--border); border-radius:18px; padding:38px 26px; text-align:center; transition:all 0.35s; box-shadow:var(--shadow-sm); cursor:default; position:relative; overflow:hidden; }
  .category-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--green); transform:scaleX(0); transition:transform 0.3s; transform-origin:center; }
  .category-card:hover { border-color:var(--green); box-shadow:0 10px 40px rgba(0,201,122,0.18); transform:translateY(-6px); }
  .category-card:hover::after { transform:scaleX(1); }
  .cat-emoji { font-size:46px; margin-bottom:18px; display:block; }
  .cat-title { font-family:'Oswald',sans-serif; font-size:20px; letter-spacing:1px; color:var(--text-dark); margin-bottom:10px; }
  .cat-desc { font-size:14px; color:var(--text-muted); line-height:1.72; }

  /* ─── COACHES ─── */
  #our-coaches { background: var(--off-white); }
  .coaches-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; margin-top: 52px; }
  .coach-card { background: var(--card-bg); border-radius: 16px; overflow: hidden; transition: all 0.35s; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
  .coach-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
  .coach-img-wrap { height: 420px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #e8f5ee, #d0e8f7); }
  .coach-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.5s; display: block; }
  .coach-card:hover .coach-img-wrap img { transform: scale(1.06); }
  .coach-badge { position: absolute; top: 14px; left: 14px; background: var(--green); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; padding: 5px 12px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,201,122,0.35); }
  .coach-info { padding: 28px; }
  .coach-name { font-family: 'Oswald', sans-serif; font-size: 32px; letter-spacing: 1px; color: var(--text-dark); }
  .coach-role { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--green); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
  .coach-bio { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 18px; }
  .coach-achievements { display: flex; flex-direction: column; gap: 8px; }
  .achieve-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-mid); font-weight: 600; }
  .achieve-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

  /* ─── SAFETY ─── */
  #safety-standards { background:linear-gradient(135deg,#f0faf5 0%,#e8f9f0 100%); border-top:1px solid rgba(0,201,122,0.15); border-bottom:1px solid rgba(0,201,122,0.15); }
  .safety-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:40px; }
  .safety-item { display:flex; align-items:flex-start; gap:16px; background:var(--white); border:1px solid rgba(0,201,122,0.15); border-radius:14px; padding:24px 22px; transition:all 0.3s; box-shadow:var(--shadow-sm); }
  .safety-item:hover { border-color:var(--green); transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,201,122,0.15); }
  .safety-check { width:40px; height:40px; border-radius:50%; background:rgba(0,201,122,0.12); border:2px solid rgba(0,201,122,0.25); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; color:var(--green); font-weight:900; }
  .safety-text-block { flex:1; }
  .safety-item-title { font-size:15px; font-weight:700; color:var(--text-dark); margin-bottom:4px; }
  .safety-item-desc { font-size:13px; color:var(--text-muted); line-height:1.6; }
  .safety-cta { text-align:center; }

  /* LEGAL OVERLAY */
  .legal-overlay { display:none; position:fixed; inset:0; z-index:2000; background:rgba(11,23,40,0.97); overflow-y:auto; }
  .legal-overlay.active { display:block; animation:overlayIn 0.3s ease; }
  @keyframes overlayIn { from{opacity:0;} to{opacity:1;} }
  .legal-inner { max-width:760px; margin:0 auto; padding:60px 24px 80px; }
  .legal-close { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.5); cursor:pointer; margin-bottom:40px; background:none; border:none; transition:color 0.2s; padding:0; }
  .legal-close:hover { color:#fff; }
  .legal-title { font-family:'Oswald',sans-serif; font-size:clamp(40px,6vw,72px); letter-spacing:2px; color:#fff; margin-bottom:32px; line-height:1.05; }
  .legal-divider { height:2px; background:var(--green); margin:8px 0 40px; }
  .legal-section { margin-bottom:32px; }
  .legal-section h3 { font-size:18px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--green); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.08); }
  .legal-section p { font-size:15px; color:rgba(255,255,255,0.70); line-height:1.8; margin-bottom:12px; }
  .legal-section ul { padding-left:20px; }
  .legal-section ul li { font-size:15px; color:rgba(255,255,255,0.70); line-height:1.8; margin-bottom:6px; }

  /* WHATSAPP */
  .whatsapp-float { position:fixed; bottom:24px; right:24px; z-index:9998; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px rgba(37,211,102,0.50); transition:all 0.25s; text-decoration:none; }
  .whatsapp-float:hover { transform:scale(1.1); box-shadow:0 10px 34px rgba(37,211,102,0.60); }

  /* ANIMATIONS */
  @keyframes fadeUp { from{opacity:0;transform:translateY(28px);} to{opacity:1;transform:translateY(0);} }
  .fade-in { opacity:0; transform:translateY(40px); transition:opacity 0.75s cubic-bezier(0.22,1,0.36,1),transform 0.75s cubic-bezier(0.22,1,0.36,1); }
  .fade-in.visible { opacity:1; transform:translateY(0); }
  .fade-in-right { opacity:0; transform:translateX(50px); transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1); }
  .fade-in-right.visible { opacity:1; transform:translateX(0); }
  .fade-in-scale { opacity:0; transform:scale(0.93); transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1),transform 0.7s cubic-bezier(0.22,1,0.36,1); }
  .fade-in-scale.visible { opacity:1; transform:scale(1); }

  /* RESPONSIVE */
  @media (max-width:900px) {
    nav { padding:0 4vw; height:70px; }
    .nav-logo img { height:56px; }
    .nav-links { display:none; }
    .hamburger { display:flex; }
    .mobile-menu { top:70px; }
    /* hero responsive now handled inline in section style block */
    section { padding:64px 4vw; }
    #schools-coaching { padding:64px 4vw; }
    .pkg-intro-grid { grid-template-columns:1fr 1fr; }
    .pricing-cards-grid { grid-template-columns:1fr 1fr; }
    .schools-grid { grid-template-columns:1fr; }
    .categories-grid { grid-template-columns:1fr 1fr; }
    .coaches-grid-2 { grid-template-columns:1fr 1fr; }
    .safety-grid { grid-template-columns:1fr 1fr; }
  }
  @media (max-width:600px) {
    nav { padding:0 5vw; height:64px; }
    .nav-logo img { height:48px; }
    .mobile-menu { top:64px; padding:16px 5vw 22px; }
    .mobile-menu a { font-size:18px; padding:10px 0; }
    section { padding:56px 5vw; }
    #schools-coaching { padding:56px 5vw; }
    /* hero mobile styles handled inline in section style block */
    .section-title { font-size:clamp(20px,6.5vw,30px)!important; }
    .pkg-intro-grid { grid-template-columns:1fr 1fr; gap:12px; }
    .pricing-cards-grid { grid-template-columns:1fr!important; }
    .categories-grid { grid-template-columns:1fr 1fr!important; }
    .coaches-grid { grid-template-columns: 1fr !important; }
    .coach-img-wrap { height: 300px; }
    .coach-name { font-size: 26px; }
    .coach-info { padding: 20px; }
    .safety-grid { grid-template-columns:1fr!important; }
    .pc-amount { font-size:44px; }
  }
  @media (max-width:400px) {
    nav { height:60px; }
    .nav-logo img { height:44px; }
    .mobile-menu { top:60px; }
    #hero { padding:72px 4% 36px; }
    .hero-h1 { font-size:clamp(20px,9vw,30px); }
    .hero-img-wrap img { max-height:210px; }
    .pkg-intro-grid { grid-template-columns:1fr!important; }
    .categories-grid { grid-template-columns:1fr!important; }
  }





  :root {
    --green: #00C97A;
    --green-dark: #009a5c;
    --green-light: rgba(0,201,122,0.10);
    --green-glow: rgba(0,201,122,0.25);
    --navy: #0b1728;
    --white: #ffffff;
    --off-white: #f7f9fc;
    --light-bg: #f0f4f8;
    --card-bg: #ffffff;
    --text-dark: #0d1b2a;
    --text-mid: #2d4060;
    --text-muted: #6b7fa0;
    --border: rgba(0,0,0,0.08);
    --shadow-sm: 0 2px 12px rgba(0,0,0,0.07);
    --shadow-md: 0 8px 32px rgba(0,0,0,0.10);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.13);
    --shadow-green: 0 8px 32px rgba(0,201,122,0.25);
  }

  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', sans-serif;
    background: var(--white);
    color: var(--text-dark);
    overflow-x: hidden;
  }

  /* ─── SCROLL PROGRESS ─── */
  #progress-bar {
    position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
    background: linear-gradient(90deg, var(--green), #00f598);
    width: 0%; transition: width 0.1s;
  }

  /* ─── NAV ─── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 5vw; height: 72px;
    background: rgba(255,255,255,0.96);
    border-bottom: 2px solid var(--green);
    backdrop-filter: blur(16px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s;
  }
  nav.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.13); }
  .nav-logo {
    text-decoration: none;
    display: flex; align-items: center;
    flex-shrink: 0;
  }
  .nav-logo img {
    height: 54px; width: auto; display: block;
    mix-blend-mode: multiply;
    filter: contrast(1.05);
    transition: opacity 0.2s;
  }
  .nav-logo img:hover { filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(0,201,122,0.6)); transform: scale(1.03); }
  .nav-links { display: flex; gap: 2px; list-style: none; align-items: center; }
  .nav-links a {
    color: var(--text-mid); text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 1.2px; text-transform: uppercase;
    padding: 7px 11px; border-radius: 4px;
    transition: all 0.2s; white-space: nowrap;
  }
  .nav-links a:hover { color: var(--green); background: var(--green-light); }
  .nav-links a.active { color: var(--green); }
  .nav-cta {
    background: var(--green) !important; color: #fff !important;
    border-radius: 4px; padding: 10px 18px !important; font-weight: 700 !important;
  }
  .nav-cta:hover { background: var(--green-dark) !important; transform: scale(1.04); }
  .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
  .hamburger span { width: 26px; height: 2px; background: var(--text-dark); display: block; transition: 0.3s; border-radius: 2px; }
  .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

  /* ─── MOBILE MENU ─── */
  .mobile-menu {
    display: none; flex-direction: column;
    position: fixed; top: 72px; left: 0; right: 0; z-index: 9998;
    background: #ffffff;
    padding: 20px 5vw 28px;
    border-bottom: 2px solid var(--green);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  }
  .mobile-menu.open { display: flex; animation: slideDown 0.25s ease; }
  @keyframes slideDown { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
  .mobile-menu a {
    color: var(--text-dark); text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: color 0.2s;
  }
  .mobile-menu a:hover { color: var(--green); }
  .mobile-menu a.mobile-cta {
    background: var(--green); color: #fff !important; text-align: center;
    border-radius: 6px; padding: 14px; margin-top: 10px; border: none;
  }

  /* ─── HERO — all styles now live in the inline <style> inside #ca-hero ─── */
  /* (The hero is fully self-contained with #ca-hero scoped rules above) */

  /* ─── TICKER STRIP ─── */
  .ticker-wrap {
    background: var(--green); padding: 14px 0; overflow: hidden;
    position: relative;
  }
  .ticker-wrap::before, .ticker-wrap::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1;
  }
  .ticker-wrap::before { left: 0; background: linear-gradient(90deg, var(--green), transparent); }
  .ticker-wrap::after { right: 0; background: linear-gradient(-90deg, var(--green), transparent); }
  .ticker-inner { display: flex; width: max-content; animation: ticker 30s linear infinite; }
  .ticker-inner:hover { animation-play-state: paused; }
  .ticker-item {
    font-family: 'Inter', sans-serif;
    font-size: 17px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: #fff; padding: 0 36px; white-space: nowrap;
  }
  .ticker-dot { color: rgba(255,255,255,0.55); }
  @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

  /* ─── MAIN CONTENT ─── */
  .main-content {
    padding: 80px 5vw 100px;
    background: var(--off-white);
  }
  .content-wrapper {
    max-width: 820px;
    margin: 0 auto;
  }

  /* ─── SECTION TAG / TITLE ─── */
  .section-tag {
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
    color: var(--green); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
  }
  .section-tag::before { content: ''; display: block; width: 30px; height: 2px; background: var(--green); border-radius: 2px; }
  .section-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(26px, 3.2vw, 42px); line-height: 1.05; letter-spacing: 1px;
    color: var(--text-dark); margin-bottom: 40px;
  }

  /* ─── PAYMENT CARDS ─── */
  .payment-card {
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: 0;
  }
  .payment-card-header {
    background: linear-gradient(135deg, var(--navy) 0%, #152641 100%);
    padding: 24px 32px;
    display: flex; align-items: center; gap: 16px;
  }
  .payment-card-icon {
    width: 50px; height: 50px; border-radius: 12px;
    background: var(--green);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
  }
  .payment-card-title {
    font-family: 'Oswald', sans-serif;
    font-size: 22px; letter-spacing: 1.5px; color: #fff;
  }
  .payment-card-subtitle {
    font-size: 13px; color: rgba(255,255,255,0.55);
    margin-top: 3px; letter-spacing: 0.5px;
  }
  .payment-card-body {
    padding: 32px;
  }

  /* ─── BANK DETAIL ROWS ─── */
  .bank-details { display: flex; flex-direction: column; gap: 16px; }
  .bank-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    background: var(--off-white);
    border-radius: 10px;
    border-left: 3px solid var(--green);
    gap: 12px;
    transition: background 0.2s, box-shadow 0.2s;
  }
  .bank-row:hover { background: #eef8f3; box-shadow: var(--shadow-sm); }
  .bank-row-label {
    font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 4px;
  }
  .bank-row-value {
    font-family: 'Inter', sans-serif;
    font-size: 16px; font-weight: 700; color: var(--text-dark); letter-spacing: 0.5px;
  }
  .bank-row-value.mono { font-family: 'Courier New', monospace; letter-spacing: 2px; font-size: 15px; }
  .copy-btn {
    background: var(--green); color: #fff;
    border: none; border-radius: 6px; cursor: pointer;
    padding: 8px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
  }
  .copy-btn:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: var(--shadow-green); }
  .copy-btn.copied { background: #009a5c; }

  /* Bank address row */
  .bank-address-row {
    padding: 14px 18px;
    background: var(--off-white);
    border-radius: 10px;
    border-left: 3px solid rgba(0,201,122,0.35);
  }
  .bank-address-text {
    font-size: 13px; color: var(--text-muted); line-height: 1.7;
  }
  .bank-address-text strong { color: var(--text-mid); }
  /* Wise brand badge */
  .wise-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: #163300; border-radius: 6px;
    padding: 4px 10px 4px 8px;
    margin-left: 8px; vertical-align: middle;
    position: relative; top: -1px;
  }
  .wise-badge-text {
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    color: #9fe870;
  }

  /* ─── OR DIVIDER ─── */
  .or-divider {
    display: flex; align-items: center; gap: 20px;
    margin: 40px 0;
  }
  .or-divider::before, .or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,201,122,0.4), transparent);
  }
  .or-circle {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--green);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: 2px;
    color: var(--green);
    box-shadow: var(--shadow-green);
    flex-shrink: 0;
  }

  /* ─── PAYPAL CARD ─── */
  .paypal-card-body {
    padding: 36px 32px;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
  }
  .paypal-logo-wrap {
    margin-bottom: 20px;
    display: flex; align-items: center; justify-content: center;
  }
  .paypal-recipient {
    font-size: 14px; color: var(--text-muted); margin-bottom: 6px;
    letter-spacing: 0.5px;
  }
  .paypal-name {
    font-family: 'Oswald', sans-serif;
    font-size: 22px; letter-spacing: 1px; color: var(--text-dark);
    margin-bottom: 28px;
  }
  .paypal-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: #0070ba; color: #fff;
    padding: 14px 40px; border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 15px; font-weight: 700; letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.25s;
    box-shadow: 0 6px 20px rgba(0,112,186,0.35);
    min-height: 52px;
  }
  .paypal-btn:hover { background: #005ea6; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,112,186,0.45); }
  .paypal-note {
    font-size: 12px; color: var(--text-muted); margin-top: 14px;
    letter-spacing: 0.5px;
  }

  /* ─── AFTER PAYMENT BANNER (prominent) ─── */
  @keyframes borderPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,201,122,0.5), 0 12px 40px rgba(0,201,122,0.2); }
    50% { box-shadow: 0 0 0 6px rgba(0,201,122,0), 0 16px 50px rgba(0,201,122,0.32); }
  }
  .info-banner {
    background: linear-gradient(135deg, #003d1f 0%, #00542a 40%, #006633 100%);
    border: 2px solid rgba(0,201,122,0.5);
    border-radius: 18px;
    padding: 36px 36px;
    margin: 40px 0;
    position: relative; overflow: hidden;
    animation: borderPulse 2.8s ease-in-out infinite;
  }
  /* Decorative green orb inside banner */
  .info-banner::before {
    content: ''; position: absolute;
    top: -60px; right: -60px;
    width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,201,122,0.18) 0%, transparent 70%);
    pointer-events: none;
  }
  .info-banner::after {
    content: ''; position: absolute;
    bottom: -40px; left: 20%;
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,201,122,0.1) 0%, transparent 70%);
    pointer-events: none;
  }
  .info-banner-inner {
    position: relative; z-index: 1;
    display: flex; gap: 24px; align-items: flex-start;
  }
  .info-banner-icon {
    font-size: 42px; flex-shrink: 0; line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(0,201,122,0.5));
  }
  .info-banner-body { flex: 1; }
  .info-banner-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
    color: #9fe870; margin-bottom: 10px;
  }
  .info-banner-tag::before { content: ''; display: block; width: 20px; height: 1.5px; background: #9fe870; border-radius: 2px; }
  .info-banner-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(20px, 3vw, 26px); letter-spacing: 1.5px;
    color: #ffffff; margin-bottom: 10px; line-height: 1.1;
  }
  .info-banner-text {
    font-size: 15px; color: rgba(255,255,255,0.72); line-height: 1.75;
    margin-bottom: 24px; max-width: 520px;
  }
  .info-banner-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--green); color: #fff;
    padding: 16px 36px; border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s;
    box-shadow: 0 6px 24px rgba(0,185,107,0.45);
    border: none; cursor: pointer;
    position: relative; overflow: hidden;
    min-height: 52px;
  }
  .info-banner-btn::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(255,255,255,0.12); transform: translateX(-100%); transition: transform 0.3s;
  }
  .info-banner-btn:hover::after { transform: translateX(0); }
  .info-banner-btn:hover { background: #00e088; transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0,185,107,0.55); }
  /* Keep old .btn-primary for steps section */
  .btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--green); color: #fff;
    padding: 12px 28px; border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(0,185,107,0.28);
    border: none; cursor: pointer;
    position: relative; overflow: hidden;
  }
  .btn-primary::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(255,255,255,0.12); transform: translateX(-100%); transition: transform 0.3s;
  }
  .btn-primary:hover::after { transform: translateX(0); }
  .btn-primary:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,185,107,0.38); }

  /* ─── STEPS SECTION ─── */
  .steps-section {
    padding: 80px 5vw 100px;
    background: var(--white);
  }
  .steps-wrapper {
    max-width: 820px;
    margin: 0 auto;
  }
  .steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
  }
  .step-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 26px;
    text-align: center;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: all 0.35s;
    overflow: hidden;
  }
  .step-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--green), #00f598);
    transform: scaleX(0); transform-origin: left; transition: transform 0.35s;
  }
  .step-card:hover::before { transform: scaleX(1); }
  .step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .step-number {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--green-light);
    border: 2px solid var(--green);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 22px; font-weight: 700; color: var(--green);
    margin: 0 auto 20px;
    transition: all 0.3s;
  }
  .step-card:hover .step-number {
    background: var(--green); color: #fff;
    box-shadow: var(--shadow-green);
  }
  .step-icon { font-size: 30px; margin-bottom: 14px; }
  .step-title {
    font-family: 'Inter', sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--text-dark); margin-bottom: 10px;
  }
  .step-desc {
    font-size: 13px; color: var(--text-muted); line-height: 1.7;
  }
  .steps-arrow {
    display: none;
  }

  /* ─── WHATSAPP FLOAT ─── */
  .whatsapp-float {
    position: fixed; bottom: 28px; right: 28px; z-index: 900;
    width: 58px; height: 58px; border-radius: 50%;
    background: #25d366;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(37,211,102,0.45);
    transition: all 0.3s; text-decoration: none;
    animation: fadeUp 1s 0.8s ease both;
  }
  .whatsapp-float:hover { background: #20bc5a; transform: scale(1.12); box-shadow: 0 8px 32px rgba(37,211,102,0.55); }

  /* ─── FADE ANIMATIONS ─── */
  .fade-in, .fade-in-up {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s ease;
  }
  .fade-in-left {
    opacity: 0; transform: translateX(-24px);
    transition: opacity 0.65s ease, transform 0.65s ease;
  }
  .fade-in-right {
    opacity: 0; transform: translateX(24px);
    transition: opacity 0.65s ease, transform 0.65s ease;
  }
  .fade-in-scale {
    opacity: 0; transform: scale(0.94);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .fade-in.visible, .fade-in-up.visible,
  .fade-in-left.visible, .fade-in-right.visible, .fade-in-scale.visible {
    opacity: 1; transform: none;
  }

  /* ─── LEGAL OVERLAYS ─── */
  .legal-overlay {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: var(--white); overflow-y: auto; padding: 60px 5vw;
  }
  .legal-overlay.active { display: block; }
  .legal-close {
    background: var(--green); color: #fff; border: none; padding: 10px 22px;
    border-radius: 6px; cursor: pointer; font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 700; margin-bottom: 36px;
  }
  .legal-title {
    font-family: 'Oswald', sans-serif; font-size: 40px; letter-spacing: 2px; margin-bottom: 16px;
  }
  .legal-divider { width: 52px; height: 3px; background: var(--green); margin-bottom: 32px; border-radius: 2px; }
  .legal-section { margin-bottom: 28px; }
  .legal-section h3 {
    font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700;
    color: var(--text-dark); margin-bottom: 10px;
  }
  .legal-section p, .legal-section li { font-size: 14px; color: var(--text-mid); line-height: 1.8; }
  .legal-section ul { padding-left: 20px; }
  .legal-section li { margin-bottom: 6px; }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 900px) {
    nav { padding: 0 4vw; height: 70px; }
    .nav-logo img { height: 56px; }
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .mobile-menu { top: 70px; }
    .steps-grid { grid-template-columns: 1fr; gap: 16px; }
  }
  @media (max-width: 600px) {
    .payment-card-header { padding: 18px 18px; gap: 12px; }
    .payment-card-body { padding: 18px; }
    .paypal-card-body { padding: 22px 18px; }
    .info-banner { padding: 28px 20px; }
    .info-banner-inner { flex-direction: column; gap: 14px; }
    .info-banner-btn { width: 100%; justify-content: center; min-height: 52px; font-size: 15px; }
    .bank-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .copy-btn { align-self: flex-end; min-height: 44px; padding: 10px 16px; font-size: 13px; }
    .steps-section { padding: 44px 5vw 60px; }
    .section-title { font-size: clamp(20px, 6vw, 30px); }
    .bank-row-value { font-size: 15px; }
    .bank-row-value.mono { font-size: 13px; letter-spacing: 1px; word-break: break-all; }
    .paypal-btn { width: 100%; justify-content: center; min-height: 52px; font-size: 15px; padding: 15px 24px; border-radius: 12px; }
    .step-desc { font-size: 14px; }
    .section-tag { font-size: 11px; }
  }
  @media (max-width: 400px) {
    nav { height: 60px; }
    .nav-logo img { height: 44px; }
    .mobile-menu { top: 60px; }
  }





*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --green:#00c97a;
  --green-dark:#00a864;
  --green-glow:rgba(0,201,122,0.18);
  --navy:#0a1628;
  --navy2:#0f2040;
  --white:#ffffff;
  --off-white:#f7f9f8;
  --text-dark:#0a1628;
  --text-mid:#4a5568;
  --text-muted:#718096;
  --border:#e2e8f0;
  --shadow-sm:0 2px 8px rgba(10,22,40,0.06);
  --shadow-md:0 8px 32px rgba(10,22,40,0.10);
  --shadow-lg:0 20px 60px rgba(10,22,40,0.14);
  --t:0.3s cubic-bezier(0.4,0,0.2,1);
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--white);color:var(--text-dark);overflow-x:hidden}

/* SCROLL PROGRESS BAR */
#scroll-progress{position:fixed;top:0;left:0;height:3px;background:var(--green);z-index:2000;transition:width 0.1s linear;width:0%}

/* ─── NAV ─── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 4vw; height: 72px;
    background: rgba(255,255,255,0.96);
    border-bottom: 2px solid var(--green);
    backdrop-filter: blur(16px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s, background 0.3s;
  }
  nav.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.13); }
  .nav-logo {
    text-decoration: none;
    display: flex; align-items: center;
    flex-shrink: 0;
  }
  .nav-logo img {
    height: 54px;
    width: auto;
    display: block;
    mix-blend-mode: multiply;
    filter: contrast(1.05);
    transition: opacity 0.2s;
  }
  .nav-logo img:hover { filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(0,201,122,0.6)); transform: scale(1.03); }
  .nav-logo span { display: none; }
  .nav-links { display: flex; gap: 2px; list-style: none; align-items: center; }
  .nav-links a {
    color: var(--text-mid); text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 1.2px; text-transform: uppercase;
    padding: 7px 11px; border-radius: 4px;
    transition: all 0.2s; white-space: nowrap;
    position: relative;
  }
  .nav-links a::after {
    content: ''; position: absolute; bottom: 2px; left: 50%; right: 50%;
    height: 2px; background: var(--green); border-radius: 2px;
    transition: left 0.2s, right 0.2s;
  }
  .nav-links a:hover { color: var(--green); background: rgba(0,201,122,0.10); }
  .nav-links a:hover::after { left: 11px; right: 11px; }
  .nav-links a.active { color: var(--green); }
  .nav-links a.active::after { left: 11px; right: 11px; }
  .nav-cta {
    background: var(--green) !important; color: #0b1728 !important;
    border-radius: 5px; padding: 9px 18px !important; font-weight: 800 !important;
    font-size: 11.5px !important; letter-spacing: 1.5px !important;
    box-shadow: 0 4px 18px rgba(0,201,122,0.35) !important;
  }
  .nav-cta::after { display: none !important; }
  .nav-cta:hover { background: #00e68a !important; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,201,122,0.5) !important; color: #0b1728 !important; }
  .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
  .hamburger span { width: 24px; height: 2px; background: var(--text-dark); display: block; transition: 0.3s; border-radius: 2px; }
  .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

  /* ─── MOBILE MENU ─── */
  .mobile-menu {
    display: none; flex-direction: column;
    position: fixed; top: 72px; left: 0; right: 0; z-index: 9998;
    background: #ffffff;
    padding: 20px 5vw 28px;
    border-bottom: 2px solid var(--green);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  }
  .mobile-menu.open { display: flex; animation: slideDown 0.25s ease; }
  @keyframes slideDown { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
  .mobile-menu a {
    color: var(--text-dark); text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: color 0.2s;
  }
  .mobile-menu a:hover { color: var(--green); }
  .mobile-menu a.mobile-cta {
    background: var(--green); color: #fff !important; text-align: center;
    border-radius: 6px; padding: 14px; margin-top: 10px; border: none;
  }

/* WHATSAPP FLOAT */
.wa-float{
  position:fixed;bottom:28px;right:28px;z-index:900;
  width:58px;height:58px;border-radius:50%;
  background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  box-shadow:0 4px 16px rgba(0,0,0,0.18);
  transition:var(--t);
}
.wa-float:hover{transform:scale(1.10);box-shadow:0 6px 20px rgba(0,0,0,0.22);}
@keyframes waPulseC{}
.stb{position:fixed;bottom:28px;left:28px;z-index:900;background:var(--white);border:1.5px solid var(--border);color:var(--navy);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;transition:var(--t);opacity:0;pointer-events:none;box-shadow:var(--shadow-sm)}
.stb.show{opacity:1;pointer-events:all}
.stb:hover{background:var(--green);border-color:var(--green);color:#fff}

/* SECTION BASE */
section{padding:96px 5vw}
.wrap{max-width:1280px;margin:0 auto}
.section-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(0,201,122,0.1);border:1.5px solid rgba(0,201,122,0.3);color:var(--green-dark);padding:6px 14px;border-radius:100px;font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:1rem;font-family:'Inter',sans-serif}
.section-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green)}
h2.sec-title{font-family:'Oswald',sans-serif;font-size:clamp(26px,3.2vw,42px);font-weight:700;color:var(--text-dark);line-height:1.05;margin-bottom:0.8rem;letter-spacing:0.01em}
h2.sec-title span{color:var(--green)}
.sec-sub{font-size:0.97rem;color:var(--text-muted);line-height:1.8;max-width:520px}

/* ANIMATIONS */
@keyframes up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.25}}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes orb1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.05)}}
@keyframes orb2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20px,30px) scale(1.08)}}
.reveal{opacity:0;transform:translateY(36px);transition:opacity 0.65s ease,transform 0.65s ease}
.reveal.on{opacity:1;transform:none}
.d1{transition-delay:0.08s}.d2{transition-delay:0.16s}.d3{transition-delay:0.24s}.d4{transition-delay:0.32s}

/* ===================== HERO (matches Membership hero design) ===================== */
#page-contact .venue-hero-section{min-height:auto;display:flex;align-items:center;padding:88px 5% 56px;background:linear-gradient(140deg,#f0faf5 0%,#ffffff 55%,#eaf7f1 100%);position:relative;overflow:hidden}
.hero-dot-grid{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,201,122,0.12) 1.5px,transparent 1.5px);background-size:26px 26px;pointer-events:none;z-index:0}
.hero-accent-bar{position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--green) 0%,var(--green-dark) 100%);z-index:1}
.hero-orb1{position:absolute;top:8%;right:10%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(0,201,122,0.08) 0%,transparent 70%);pointer-events:none;z-index:0;animation:orb1 8s ease-in-out infinite}
.hero-orb2{position:absolute;bottom:10%;left:8%;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(0,201,122,0.06) 0%,transparent 70%);pointer-events:none;z-index:0;animation:orb2 10s ease-in-out infinite}
#page-contact .venue-hero-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;width:100%;position:relative;z-index:2}
#page-contact .venue-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,201,122,0.1);border:1.5px solid rgba(0,201,122,0.3);color:var(--green-dark);padding:6px 16px;border-radius:100px;font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:1.2rem;width:fit-content;font-family:'Inter',sans-serif;animation:vhFadeUp 0.6s ease both}
#page-contact .venue-hero-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);animation:vhBlink 2s infinite;flex-shrink:0}
@keyframes vhBlink{0%,100%{opacity:1}50%{opacity:0.25}}
@keyframes vhFadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes vhSlideR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
#page-contact .venue-hero-h1{font-family:'Oswald',sans-serif;font-size:clamp(28px,3.6vw,48px);font-weight:700;color:var(--text-dark);line-height:1.05;margin-bottom:0.9rem;letter-spacing:1.5px;animation:vhFadeUp 0.6s 0.1s ease both}
#page-contact .venue-hero-h1 span{color:#00b96b}
#page-contact .venue-hero-divider{width:52px;height:3px;background:var(--green);border-radius:2px;margin-bottom:1.2rem;animation:vhFadeUp 0.6s 0.15s ease both}
#page-contact .venue-hero-sub{font-size:1rem;color:var(--text-mid);line-height:1.8;margin-bottom:2rem;max-width:460px;animation:vhFadeUp 0.6s 0.2s ease both}
#page-contact .venue-hero-btns{display:flex;gap:1rem;flex-wrap:wrap;animation:vhFadeUp 0.6s 0.25s ease both}
#page-contact .venue-btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:#fff;padding:15px 28px;border-radius:10px;font-family:'Inter',sans-serif;font-size:0.88rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;transition:all 0.25s;box-shadow:0 6px 22px rgba(0,201,122,0.4);border:none;cursor:pointer}
#page-contact .venue-btn-primary:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,201,122,0.5)}
#page-contact .venue-btn-outline{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--text-dark);padding:14px 28px;border-radius:10px;font-family:'Inter',sans-serif;font-size:0.88rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;transition:all 0.25s;border:1.5px solid rgba(10,22,40,0.18)}
#page-contact .venue-btn-outline:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
#page-contact .venue-hero-right{animation:vhSlideR 0.9s 0.3s cubic-bezier(0.22,1,0.36,1) both}
#page-contact .venue-img-wrap{position:relative;width:100%;border-radius:20px;overflow:visible}
#page-contact .venue-img-wrap img{position:relative;z-index:2;width:100%;border-radius:20px;display:block;box-shadow:0 20px 60px rgba(0,0,0,0.18),0 0 0 1px rgba(0,201,122,0.15);transition:transform 0.7s ease}
#page-contact .venue-img-wrap:hover img{transform:scale(1.02)}
#page-contact .venue-img-dot-grid{position:absolute;inset:-10px;z-index:0;pointer-events:none;border-radius:24px;background-image:radial-gradient(circle,rgba(0,201,122,0.18) 1.5px,transparent 1.5px);background-size:26px 26px;animation:vhDotGrid 6s ease-in-out infinite}
@keyframes vhDotGrid{0%,100%{background-position:0 0;opacity:0.7}50%{background-position:13px 13px;opacity:1}}
#page-contact .venue-img-ring{position:absolute;top:-22px;left:-22px;right:-22px;bottom:-22px;border-radius:28px;border:2px dashed rgba(0,201,122,0.28);pointer-events:none;z-index:1;animation:vhRingRotate 20s linear infinite}
@keyframes vhRingRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#page-contact .venue-img-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(50px)}
#page-contact .venue-img-orb-a{width:260px;height:260px;top:-30px;right:-40px;background:radial-gradient(circle,rgba(0,201,122,0.18) 0%,transparent 70%);animation:vhOrbFloat 8s ease-in-out infinite}
#page-contact .venue-img-orb-b{width:180px;height:180px;bottom:-20px;left:-30px;background:radial-gradient(circle,rgba(0,201,122,0.12) 0%,transparent 70%);animation:vhOrbFloat 11s 2s ease-in-out infinite reverse}
@keyframes vhOrbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.05)}}
.hero-stats-card{background:var(--navy);border-radius:24px;padding:2rem;box-shadow:0 0 0 1px rgba(0,201,122,0.2),0 20px 60px rgba(0,201,122,0.12),0 8px 32px rgba(10,22,40,0.3);position:relative;overflow:hidden}
.hero-stats-card::before{content:'';position:absolute;top:-60px;right:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(0,201,122,0.12) 0%,transparent 70%);pointer-events:none}
.hsc-title{font-family:'Oswald',sans-serif;font-size:0.75rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:1.4rem}
.hsc-item{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,0.06)}
.hsc-item:last-child{border-bottom:none;padding-bottom:0}
.hsc-icon{font-size:1.6rem;flex-shrink:0;width:44px;text-align:center}
.hsc-info{display:flex;flex-direction:column;gap:2px}
.hsc-label{font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.4);font-family:'Inter',sans-serif}
.hsc-value{font-size:0.95rem;font-weight:600;color:rgba(255,255,255,0.92);font-family:'Inter',sans-serif}
.hsc-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(0,201,122,0.15);border:1px solid rgba(0,201,122,0.3);color:var(--green);padding:4px 10px;border-radius:100px;font-size:0.68rem;font-weight:700;letter-spacing:0.06em;margin-top:4px;font-family:'Inter',sans-serif}
.hsc-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);animation:blink 2s infinite}

/* TICKER */
.ticker-strip{background:var(--green);padding:14px 0;overflow:hidden;position:relative}
.ticker-track{display:flex;white-space:nowrap;animation:ticker 28s linear infinite}
.ticker-item{font-family:'Oswald',sans-serif;font-size:0.92rem;font-weight:600;color:#fff;letter-spacing:0.08em;padding:0 24px;flex-shrink:0;display:inline-flex;align-items:center;gap:16px}
.ticker-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.5);flex-shrink:0}

/* STATS STRIP */
.stats-strip{background:var(--white);border-top:3px solid var(--green);border-bottom:1px solid rgba(0,201,122,0.12);padding:0 5%;box-shadow:0 4px 24px rgba(0,0,0,0.06)}
.stats-strip-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.ss-item{text-align:center;padding:28px 20px;position:relative}
.ss-item:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(0,201,122,0.20)}
.ss-num{font-family:'Oswald',sans-serif;font-size:2.4rem;font-weight:700;color:var(--green);display:block;line-height:1;letter-spacing:1px}
.ss-label{font-size:0.72rem;color:var(--text-muted);margin-top:6px;font-weight:700;font-family:'Inter',sans-serif;letter-spacing:2.5px;text-transform:uppercase}

/* ===================== GET IN TOUCH (landing page exact) ===================== */
#contact { background: var(--white); }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; margin-top: 52px; align-items: stretch;
}
.contact-left {
  display: flex; flex-direction: column;
  background: var(--off-white); border-radius: 16px;
  padding: 38px; border: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.contact-info-list { flex: 1; }
.contact-info-item { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 28px; }
.contact-icon {
  width: 50px; height: 50px; border-radius: 10px;
  background: rgba(0,201,122,0.10); border: 1px solid rgba(0,201,122,0.20);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.contact-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; }
.contact-value { font-size: 16px; font-weight: 600; color: var(--text-dark); line-height: 1.5; }
.contact-socials { display: flex; gap: 10px; margin-top: auto; padding-top: 24px; }
.social-btn {
  width: 46px; height: 46px; border-radius: 8px;
  background: var(--white); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; text-decoration: none; transition: all 0.2s; cursor: pointer;
}
.social-btn:hover { background: var(--off-white); border-color: rgba(0,201,122,0.4); transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,201,122,0.25); }
.contact-form-wrap {
  background: var(--off-white); border-radius: 16px; padding: 38px;
  border: 1px solid var(--border); box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  display: flex; flex-direction: column;
}
.contact-form-title { font-family: 'Oswald', sans-serif; font-size: 28px; letter-spacing: 1.5px; color: var(--text-dark); margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-group { display: flex; flex-direction: column; }
.form-group.full { grid-column: 1/-1; }
.form-group label { display: block; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; background: var(--white); border: 1.5px solid var(--border);
  border-radius: 7px; padding: 12px 14px; color: var(--text-dark);
  font-family: 'Inter', sans-serif; font-size: 15px; outline: none; transition: all 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--green); background: #f5fdf9; box-shadow: 0 0 0 3px rgba(0,201,122,0.10);
}
.form-group select option { background: #fff; color: var(--text-dark); }
.form-group textarea { resize: none; height: 100px; }
.form-submit {
  width: 100%; margin-top: 8px; background: var(--green); color: #fff;
  border: none; border-radius: 7px; padding: 16px; font-family: 'Inter', sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 16px rgba(0,201,122,0.30);
}
.form-submit:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,201,122,0.40); }

/* ===================== CONTACT INFO CARDS ===================== */
#contact-info{background:var(--white)}
.info-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem}
.info-card{background:var(--white);border-radius:16px;border:1px solid var(--border);border-top:3px solid var(--green);padding:36px;transition:all 0.35s cubic-bezier(0.4,0,0.2,1);box-shadow:var(--shadow-sm)}
.info-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,201,122,0.15),var(--shadow-md)}
.info-card-emoji{font-size:48px;margin-bottom:18px;display:block;line-height:1}
.info-card h3{font-family:'Oswald',sans-serif;font-size:1.3rem;font-weight:700;color:var(--text-dark);margin-bottom:10px;letter-spacing:0.02em}
.info-pill{display:inline-flex;align-items:center;gap:5px;background:rgba(0,201,122,0.1);border:1px solid rgba(0,201,122,0.25);color:var(--green-dark);padding:4px 12px;border-radius:100px;font-size:0.69rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;margin-bottom:14px;font-family:'Inter',sans-serif}
.info-value{font-size:1rem;font-weight:600;color:var(--green);font-family:'Inter',sans-serif;margin-bottom:6px;display:block}
.info-sub{font-size:0.8rem;color:var(--text-muted);margin-bottom:16px;font-family:'Inter',sans-serif}
.info-card a.btn-small{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--green);color:var(--green);padding:9px 20px;border-radius:8px;font-size:0.83rem;font-weight:700;text-decoration:none;font-family:'Inter',sans-serif;transition:var(--t)}
.info-card a.btn-small:hover{background:var(--green);color:#fff}
.hours-rows{display:flex;flex-direction:column;gap:0;margin-bottom:16px}
.hour-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:0.88rem;font-family:'Inter',sans-serif}
.hour-row:last-child{border-bottom:none}
.hour-row .hl{color:var(--text-mid);font-weight:500}
.hour-row .hv{color:var(--text-dark);font-weight:600}

/* ===================== CONTACT FORM ===================== */
#contact-form{background:var(--off-white)}
.form-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:start;margin-top:3rem}
.form-card{background:var(--white);border-radius:20px;padding:48px;box-shadow:var(--shadow-md)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-full{grid-column:1/-1}
.fg label{display:block;font-size:0.75rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-mid);margin-bottom:8px;font-family:'Inter',sans-serif}
.fg input,.fg select,.fg textarea{width:100%;padding:14px 18px;border:2px solid rgba(0,0,0,0.10);border-radius:8px;font-size:0.93rem;font-family:'Inter',sans-serif;color:var(--text-dark);background:#fff;transition:border-color 0.25s,box-shadow 0.25s;outline:none;-webkit-appearance:none;appearance:none}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,201,122,0.12)}
.fg textarea{resize:vertical;min-height:120px}
.fg select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a5568' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.submit-btn{width:100%;padding:0 32px;height:52px;background:var(--green);color:#fff;border:none;border-radius:12px;font-size:0.9rem;font-weight:700;font-family:'Inter',sans-serif;letter-spacing:0.06em;cursor:pointer;transition:var(--t);margin-top:4px;display:flex;align-items:center;justify-content:center}
.submit-btn:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,201,122,0.4)}
.form-success{background:rgba(0,201,122,0.1);border:1px solid rgba(0,201,122,0.3);color:var(--green-dark);border-radius:8px;padding:16px;font-size:0.9rem;font-weight:600;margin-top:14px;text-align:center;display:none;font-family:'Inter',sans-serif}
/* Right side info cards */
.side-cards{display:flex;flex-direction:column;gap:16px}
.side-card{background:var(--white);border-radius:14px;padding:28px;border-left:4px solid var(--green);box-shadow:var(--shadow-sm);transition:transform 0.3s ease,box-shadow 0.3s ease}
.side-card:hover{transform:translateX(6px);box-shadow:var(--shadow-md)}
.side-card h4{font-family:'Oswald',sans-serif;font-size:1.05rem;font-weight:700;color:var(--text-dark);margin-bottom:8px;letter-spacing:0.02em}
.side-card p{font-size:0.85rem;color:var(--text-muted);line-height:1.7;margin-bottom:14px;font-family:'Inter',sans-serif}
.side-card a.btn-small{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--green);color:var(--green);padding:8px 16px;border-radius:8px;font-size:0.8rem;font-weight:700;text-decoration:none;font-family:'Inter',sans-serif;transition:var(--t)}
.side-card a.btn-small:hover{background:var(--green);color:#fff}
.side-card-icon{font-size:1.4rem;margin-bottom:8px;display:block}




/* ===================== CTA STRIP ===================== */
#cta{background:var(--green);padding:80px 5%;text-align:center}
.cta-heading{font-family:'Oswald',sans-serif;font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:700;color:#fff;margin-bottom:12px;letter-spacing:0.02em}
.cta-sub{font-size:1rem;color:rgba(255,255,255,0.85);margin-bottom:2rem;font-family:'Inter',sans-serif;max-width:520px;margin-left:auto;margin-right:auto;margin-bottom:2rem}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn-cta-white{background:#fff;color:var(--green);padding:15px 32px;border-radius:12px;font-weight:700;text-decoration:none;font-size:0.93rem;font-family:'Inter',sans-serif;transition:var(--t);display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 20px rgba(0,0,0,0.12)}
.btn-cta-white:hover{background:var(--off-white);transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,0.18)}
.btn-cta-outline{border:2px solid rgba(255,255,255,0.7);color:#fff;padding:14px 30px;border-radius:12px;font-weight:700;text-decoration:none;font-size:0.93rem;font-family:'Inter',sans-serif;transition:var(--t);display:inline-flex;align-items:center;gap:8px}
.btn-cta-outline:hover{border-color:#fff;background:rgba(255,255,255,0.12);transform:translateY(-2px)}

/* LEGAL */
.legal-body h3{font-family:'Oswald',sans-serif;font-size:1.05rem;font-weight:600;color:var(--text-dark);margin:1.5rem 0 0.5rem;letter-spacing:0.01em}
.legal-body p{font-size:0.88rem;color:var(--text-mid);line-height:1.75;font-family:'Inter',sans-serif}

/* ===================== RESPONSIVE ===================== */

/* ── TABLET (≤900px) ── */
@media(max-width:900px){
  /* Nav */
  nav { padding: 0 4vw; height: 70px; }
  .nav-logo img { height: 56px; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .hamburger { display: flex; }
  .mob-menu { top: 70px; }

  /* Hero */
  #page-contact .venue-hero-section { padding: 90px 5% 50px !important; min-height: auto !important; }
  #page-contact .venue-hero-inner { grid-template-columns: 1fr !important; gap: 2rem !important; }
  #page-contact .venue-hero-h1 { font-size: clamp(24px, 7vw, 36px) !important; }
  #page-contact .venue-hero-right { order: -1 !important; }
  #page-contact .venue-img-wrap img { max-height: 320px !important; object-fit: cover !important; width: 100% !important; }
  #page-contact .venue-img-ring { display: none !important; }

  /* Stats strip */
  .stats-strip-inner { grid-template-columns: repeat(2,1fr); }
  .ss-item:nth-child(2)::after { display: none; }

  /* Contact section */
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .form-layout { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .info-cards-grid { grid-template-columns: 1fr; }

  /* FAQ */
  .faq-grid { grid-template-columns: 1fr; }

  /* CTA */
  #cta { padding: 60px 5%; }
}

/* ── MOBILE (≤600px) ── */
@media(max-width:600px){
  /* Nav */
  nav { padding: 0 5vw; height: 64px; }
  .nav-logo img { height: 46px; }
  .mob-menu { top: 64px; padding: 14px 5vw 20px; }
  .mob-menu a { font-size: 17px; padding: 11px 0; }

  /* Section spacing */
  section { padding: 56px 5% 48px; }

  /* Hero */
  #page-contact .venue-hero-section { padding: 80px 5% 40px !important; }
  #page-contact .venue-hero-inner { gap: 1.6rem !important; text-align: center !important; padding: 0 !important; }
  #page-contact .venue-hero-badge { font-size: 0.68rem !important; padding: 5px 12px !important; margin-left: auto !important; margin-right: auto !important; }
  #page-contact .venue-hero-divider { margin-left: auto !important; margin-right: auto !important; }
  #page-contact .venue-hero-h1 { font-size: clamp(22px, 8vw, 34px) !important; margin-bottom: 0.7rem !important; }
  #page-contact .venue-hero-sub { font-size: 0.92rem !important; line-height: 1.7 !important; margin-bottom: 1.4rem !important; margin-left: auto !important; margin-right: auto !important; }
  #page-contact .venue-hero-btns { flex-direction: column !important; gap: 0.7rem !important; align-items: center !important; }
  #page-contact .venue-btn-primary,
  #page-contact .venue-btn-outline { width: 100% !important; max-width: 320px !important; justify-content: center !important; padding: 14px 20px !important; font-size: 0.82rem !important; }
  #page-contact .venue-img-wrap img { max-height: 260px !important; border-radius: 14px !important; }
  #page-contact .venue-img-orb-a, #page-contact .venue-img-orb-b { display: none !important; }

  /* Stats strip */
  .stats-strip { padding: 0 4%; }
  .stats-strip-inner { grid-template-columns: repeat(2,1fr); }
  .ss-num { font-size: 1.7rem; }
  .ss-label { font-size: 0.62rem; letter-spacing: 1.5px; }
  .ss-item { padding: 18px 10px; }
  .ss-item:nth-child(2)::after { display: none; }

  /* Ticker */
  .ticker-strip { padding: 10px 0; }
  .ticker-item { font-size: 0.8rem; padding: 0 16px; }

  /* Contact info */
  .contact-left { padding: 22px 18px; border-radius: 14px; }
  .contact-info-item { gap: 12px; margin-bottom: 18px; }
  .contact-icon { width: 44px; height: 44px; font-size: 18px; border-radius: 8px; flex-shrink: 0; }
  .contact-label { font-size: 10px; letter-spacing: 1.5px; }
  .contact-value { font-size: 14px; }
  .contact-socials { gap: 8px; padding-top: 18px; flex-wrap: wrap; }
  .social-btn { width: 44px; height: 44px; }

  /* ── SEND A MESSAGE FORM ── */
  .contact-form-wrap { padding: 22px 18px; border-radius: 14px; }
  .contact-form-title {
    font-size: 22px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--green);
  }

  /* Stack all form rows to single column */
  .form-row { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }

  .form-group label {
    font-size: 10px;
    letter-spacing: 1.2px;
    margin-bottom: 6px;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 13px 14px;
    font-size: 15px;
    border-radius: 9px;
    border-width: 1.5px;
    /* Bigger touch targets */
    min-height: 48px;
  }
  .form-group textarea { height: 110px; resize: none; }
  .form-group select {
    background-position: right 14px center;
    padding-right: 36px;
  }

  /* Submit button — full width, taller, more prominent */
  .form-submit {
    height: 54px;
    font-size: 15px;
    letter-spacing: 2px;
    border-radius: 10px;
    margin-top: 6px;
    box-shadow: 0 6px 20px rgba(0,201,122,0.35);
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }

  /* Older form card (contact-form section) */
  .form-card { padding: 22px 18px; border-radius: 14px; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .fg input, .fg select, .fg textarea { padding: 13px 14px; font-size: 15px; min-height: 48px; }
  .fg label { font-size: 0.7rem; }
  .submit-btn { height: 52px; font-size: 0.88rem; border-radius: 10px; }

  /* Side cards */
  .side-card { padding: 18px 16px; }
  .side-card h4 { font-size: 0.95rem; }
  .side-card p { font-size: 0.82rem; margin-bottom: 10px; }

  /* Map section */
  .map-embed { height: 220px !important; }

  /* FAQ */
  .faq-question { font-size: 0.88rem; padding: 16px 14px; }
  .faq-answer { font-size: 0.84rem; padding: 0 14px 14px; }

  /* CTA */
  #cta { padding: 50px 5%; }
  .cta-heading { font-size: clamp(1.5rem, 6vw, 2rem); }
  .cta-sub { font-size: 0.9rem; }
  .cta-btns { flex-direction: column; align-items: center; gap: 0.8rem; }
  .btn-cta-white, .btn-cta-outline { width: 100%; max-width: 300px; justify-content: center; padding: 14px 20px; font-size: 0.88rem; }

  /* WhatsApp float & scroll-to-top */
  .wa-float { bottom: 18px; right: 18px; width: 50px; height: 50px; }
  .stb { bottom: 18px; left: 18px; width: 40px; height: 40px; font-size: 1rem; }

  /* Sec titles */
  h2.sec-title { font-size: clamp(20px, 6vw, 30px); }
  .section-tag { font-size: 0.68rem; padding: 5px 12px; }
}

/* ── SMALL MOBILE (≤400px) ── */
@media(max-width:400px){
  nav { height: 58px; }
  .nav-logo img { height: 40px; }
  .mob-menu { top: 58px; }
  #page-contact .venue-hero-section { padding: 72px 4% 36px !important; }
  #page-contact .venue-hero-h1 { font-size: clamp(20px, 9vw, 30px) !important; }
  #page-contact .venue-img-wrap img { max-height: 210px !important; }
  section { padding: 46px 4% 38px; }
  .ss-num { font-size: 1.5rem; }
}





  :root {
    --green: #00C97A;
    --green-dark: #009a5c;
    --green-light: rgba(0,201,122,0.10);
    --green-glow: rgba(0,201,122,0.25);
    --navy: #0b1728;
    --white: #ffffff;
    --off-white: #f7f9fc;
    --light-bg: #f0f4f8;
    --card-bg: #ffffff;
    --text-dark: #0d1b2a;
    --text-mid: #2d4060;
    --text-muted: #6b7fa0;
    --border: rgba(0,0,0,0.08);
    --shadow-sm: 0 2px 12px rgba(0,0,0,0.07);
    --shadow-md: 0 8px 32px rgba(0,0,0,0.10);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.13);
    --shadow-green: 0 8px 32px rgba(0,201,122,0.25);
  }

  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', sans-serif;
    background: var(--white);
    color: var(--text-dark);
    overflow-x: hidden;
  }

  /* ─── SCROLL PROGRESS ─── */
  #progress-bar {
    position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
    background: linear-gradient(90deg, var(--green), #00f598);
    width: 0%; transition: width 0.1s;
  }

  /* ─── NAV ─── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 5vw; height: 72px;
    background: rgba(255,255,255,0.96);
    border-bottom: 2px solid var(--green);
    backdrop-filter: blur(16px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s;
  }
  nav.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.13); }
  .nav-logo {
    text-decoration: none;
    display: flex; align-items: center;
    flex-shrink: 0;
  }
  .nav-logo img {
    height: 54px; width: auto; display: block;
    mix-blend-mode: multiply;
    filter: contrast(1.05);
    transition: opacity 0.2s;
  }
  .nav-logo img:hover { filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(0,201,122,0.6)); transform: scale(1.03); }
  .nav-links { display: flex; gap: 2px; list-style: none; align-items: center; }
  .nav-links a {
    color: var(--text-mid); text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 1.2px; text-transform: uppercase;
    padding: 7px 11px; border-radius: 4px;
    transition: all 0.2s; white-space: nowrap;
  }
  .nav-links a:hover { color: var(--green); background: var(--green-light); }
  .nav-links a.active { color: var(--green); }
  .nav-cta {
    background: var(--green) !important; color: #fff !important;
    border-radius: 4px; padding: 10px 18px !important; font-weight: 700 !important;
  }
  .nav-cta:hover { background: var(--green-dark) !important; transform: scale(1.04); }
  .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
  .hamburger span { width: 26px; height: 2px; background: var(--text-dark); display: block; transition: 0.3s; border-radius: 2px; }
  .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

  /* ─── MOBILE MENU ─── */
  .mobile-menu {
    display: none; flex-direction: column;
    position: fixed; top: 72px; left: 0; right: 0; z-index: 9998;
    background: #ffffff;
    padding: 20px 5vw 28px;
    border-bottom: 2px solid var(--green);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  }
  .mobile-menu.open { display: flex; animation: slideDown 0.25s ease; }
  @keyframes slideDown { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
  .mobile-menu a {
    color: var(--text-dark); text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: color 0.2s;
  }
  .mobile-menu a:hover { color: var(--green); }
  .mobile-menu a.mobile-cta {
    background: var(--green); color: #fff !important; text-align: center;
    border-radius: 6px; padding: 14px; margin-top: 10px; border: none;
  }

  /* ═══════════════════════════════════════════
     HERO — Two-column, matches index.html style
  ═══════════════════════════════════════════ */
  .page-hero {
    min-height: auto;
    display: flex;
    align-items: center;
    padding: 88px 5% 56px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(140deg, #f0faf5 0%, #ffffff 55%, #eaf7f1 100%);
  }

  /* Dot-grid background pattern — identical to index.html */
  .hero-bg-pattern {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(0,185,107,0.12) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(135deg, transparent 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(135deg, transparent 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
  }

  /* Left green accent bar */
  .hero-line-left {
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 2;
    background: linear-gradient(180deg, transparent 0%, #00b96b 25%, #00b96b 75%, transparent 100%);
  }

  /* Floating orbs */
  .hero-orb {
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    filter: blur(90px);
  }
  .hero-orb-1 {
    width: 520px; height: 520px; right: 5%; top: 10%;
    background: radial-gradient(circle, rgba(0,185,107,0.18) 0%, transparent 70%);
    animation: orbFloat 9s ease-in-out infinite;
  }
  .hero-orb-2 {
    width: 280px; height: 280px; left: 30%; top: 60%;
    background: radial-gradient(circle, rgba(0,185,107,0.08) 0%, transparent 70%);
    animation: orbFloat 12s 3s ease-in-out infinite reverse;
  }
  @keyframes orbFloat {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-24px) scale(1.04); }
  }

  /* Decorative pulse rings */
  .hero-accent-circle {
    position: absolute; right: 18%; top: 50%; transform: translateY(-50%);
    width: 440px; height: 440px; border-radius: 50%;
    border: 1.5px solid rgba(0,185,107,0.18); pointer-events: none; z-index: 0;
    animation: pulseRing 7s ease-in-out infinite;
  }
  .hero-accent-circle2 {
    position: absolute; right: 22%; top: 50%; transform: translateY(-50%);
    width: 560px; height: 560px; border-radius: 50%;
    border: 1px solid rgba(0,185,107,0.09); pointer-events: none; z-index: 0;
    animation: pulseRing 7s 2s ease-in-out infinite;
  }
  @keyframes pulseRing {
    0%,100% { opacity:0.5; transform: translateY(-50%) scale(1); }
    50% { opacity:1; transform: translateY(-50%) scale(1.02); }
  }

  /* ── TWO-COLUMN INNER LAYOUT ── */
  .hero-inner {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
  }

  /* LEFT: text content */
  .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 40px;
  }

  /* Hero Logo */
  .hero-logo-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    animation: fadeUp 0.4s ease both;
  }
  .hero-logo-img {
    height: 72px;
    width: auto;
    display: block;
    mix-blend-mode: multiply;
    filter: contrast(1.05) drop-shadow(0 4px 16px rgba(0,185,107,0.18));
    transition: transform 0.3s;
  }
  .hero-logo-img:hover { transform: scale(1.04); }
  .hero-logo-divider {
    width: 1.5px;
    height: 48px;
    background: linear-gradient(180deg, transparent, rgba(0,185,107,0.5), transparent);
    flex-shrink: 0;
  }
  .hero-logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .hero-logo-text strong {
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dark);
    line-height: 1.2;
  }
  .hero-logo-text span {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #00b96b;
  }

  /* Badge */
  .hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(0,201,122,0.1);
    border: 1.5px solid rgba(0,201,122,0.3);
    color: var(--green-dark);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 6px 16px; border-radius: 100px; margin-bottom: 1.2rem;
    animation: fadeUp 0.5s ease both;
    width: fit-content;
  }
  .hero-badge-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0;
    animation: blink 2s infinite;
  }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.25} }

  /* Heading */
  .hero-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(28px, 3.6vw, 48px);
    line-height: 1.05; letter-spacing: 1.5px;
    color: var(--text-dark);
    text-transform: uppercase;
    animation: fadeUp 0.5s 0.1s ease both;
    margin-bottom: 0;
  }
  .hero-title .accent { color: #00b96b; }

  /* Divider */
  .hero-divider {
    width: 52px; height: 3px;
    background: linear-gradient(90deg, #00b96b, rgba(0,185,107,0.15));
    margin: 20px 0 18px; border-radius: 2px;
    animation: fadeUp 0.5s 0.15s ease both;
  }

  /* Subtitle */
  .hero-sub {
    font-size: 15px; font-weight: 400; line-height: 1.8;
    color: var(--text-mid);
    margin: 0 0 32px; max-width: 440px;
    animation: fadeUp 0.5s 0.2s ease both;
  }

  /* CTA Buttons */
  .hero-btns {
    display: flex; gap: 12px; flex-wrap: wrap;
    animation: fadeUp 0.5s 0.3s ease both;
  }
  /* CTA Buttons — exact match to contact us page */
  .btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--green); color: #fff;
    padding: 15px 28px; border-radius: 10px;
    font-family: 'Inter', sans-serif; font-size: 0.88rem;
    font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    text-decoration: none; transition: all 0.25s;
    box-shadow: 0 6px 22px rgba(0,201,122,0.4);
    border: none; cursor: pointer;
    position: relative; overflow: hidden;
  }
  .btn-primary:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,201,122,0.5); }
  .btn-outline {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--text-dark);
    padding: 14px 28px; border-radius: 10px;
    font-family: 'Inter', sans-serif; font-size: 0.88rem;
    font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    text-decoration: none; transition: all 0.25s;
    border: 1.5px solid rgba(10,22,40,0.18);
  }
  .btn-outline:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,201,122,0.15); }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── RIGHT: Image wrapper — matches contact us page exactly ── */
  .hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 2;
    animation: fadeUp 0.6s 0.25s ease both;
  }

  /* Image wrapper */
  .hero-img-wrap {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: visible;
  }
  .hero-img-wrap img {
    position: relative; z-index: 2;
    width: 100%; max-height: 460px; object-fit: cover; object-position: center top;
    border-radius: 20px; display: block;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,201,122,0.15);
    transition: transform 0.7s ease;
  }
  .hero-img-wrap:hover img { transform: scale(1.02); }

  /* Animated dot grid behind image */
  .img-dot-grid {
    position: absolute; inset: -10px; z-index: 0; pointer-events: none;
    border-radius: 24px;
    background-image: radial-gradient(circle, rgba(0,201,122,0.18) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    animation: dotGridShift 6s ease-in-out infinite;
  }
  @keyframes dotGridShift {
    0%,100% { background-position: 0 0; opacity: 0.7; }
    50% { background-position: 13px 13px; opacity: 1; }
  }

  /* Dashed rotating ring around image */
  .hero-img-ring {
    position: absolute; top: -22px; left: -22px; right: -22px; bottom: -22px;
    border-radius: 28px;
    border: 2px dashed rgba(0,201,122,0.28);
    pointer-events: none; z-index: 1;
    animation: ringRotate 20s linear infinite;
  }
  @keyframes ringRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

  /* Floating glow orbs */
  .img-orb {
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    filter: blur(50px);
  }
  .img-orb-a {
    width: 260px; height: 260px; top: -30px; right: -40px;
    background: radial-gradient(circle, rgba(0,201,122,0.18) 0%, transparent 70%);
    animation: orbFloat 8s ease-in-out infinite;
  }
  .img-orb-b {
    width: 180px; height: 180px; bottom: -20px; left: -30px;
    background: radial-gradient(circle, rgba(0,201,122,0.12) 0%, transparent 70%);
    animation: orbFloat 11s 2s ease-in-out infinite reverse;
  }
  @keyframes orbFloat {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-18px) scale(1.05); }
  }
  .stat-desc {
    font-size: 12px; font-weight: 500;
    color: rgba(255,255,255,0.48);
    letter-spacing: 0.5px;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 10px;
  }
  .stat-pill {
    background: rgba(0,201,122,0.15);
    border: 1px solid rgba(0,201,122,0.28);
    color: var(--green);
    font-size: 10px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Floating "Est. 2008" accent badge */
  .hero-float-badge {
    position: absolute;
    top: -18px; right: -22px;
    background: var(--green);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 14px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    padding: 10px 18px; border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,185,107,0.4);
    z-index: 3;
    animation: fadeUp 0.6s 0.55s ease both;
  }

  /* ─── SECTION BASE ─── */
  section {
    padding: 80px 5vw;
  }
  .section-tag {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase;
    color: var(--green);
    background: var(--green-light);
    padding: 6px 14px; border-radius: 30px;
    margin-bottom: 16px;
  }
  .section-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(26px, 3.2vw, 42px);
    font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    line-height: 1.05;
  }
  .section-sub {
    font-size: 16px; color: var(--text-muted);
    max-width: 540px;
    margin-bottom: 52px;
    line-height: 1.65;
  }

  /* ─── PRICING SECTION ─── */
  #pricing, #membership-plans {
    background: var(--off-white);
  }
  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 860px;
  }
  .pricing-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 40px 36px;
    box-shadow: var(--shadow-md);
    border: 1.5px solid var(--border);
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex; flex-direction: column;
  }
  .pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
  }
  .pricing-card.popular {
    border-color: var(--green);
    box-shadow: var(--shadow-green), var(--shadow-md);
  }
  .pricing-card.popular:hover {
    box-shadow: 0 24px 64px rgba(0,201,122,0.3), var(--shadow-lg);
  }
  .popular-badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--green); color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    padding: 5px 18px; border-radius: 20px;
    white-space: nowrap;
  }
  .pricing-plan-name {
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
  }
  .pricing-price {
    font-family: 'Oswald', sans-serif;
    font-size: 64px; font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
    margin-bottom: 6px;
  }
  .pricing-price sup {
    font-size: 28px;
    vertical-align: super;
    font-weight: 700;
  }
  .pricing-price-note {
    font-size: 13px; color: var(--text-muted);
    margin-bottom: 28px;
  }
  .pricing-divider {
    height: 1px; background: var(--border);
    margin-bottom: 24px;
  }
  .pricing-features {
    list-style: none;
    flex: 1;
    margin-bottom: 32px;
  }
  .pricing-features li {
    display: flex; align-items: center; gap: 12px;
    font-size: 15px; color: var(--text-mid);
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-weight: 500;
  }
  .pricing-features li:last-child { border-bottom: none; }
  .pricing-features li::before {
    content: '';
    width: 20px; height: 20px;
    min-width: 20px;
    background: var(--green-light);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300C97A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 12px; background-position: center; background-repeat: no-repeat;
  }
  .pricing-btn {
    display: block;
    text-align: center;
    padding: 15px 28px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 15px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    text-decoration: none;
    transition: all 0.22s;
    cursor: pointer;
  }
  .pricing-btn-outline {
    background: transparent;
    border: 2px solid var(--green);
    color: var(--green);
  }
  .pricing-btn-outline:hover {
    background: var(--green);
    color: #fff;
    transform: scale(1.02);
  }
  .pricing-btn-filled {
    background: var(--green);
    border: 2px solid var(--green);
    color: #fff;
    box-shadow: var(--shadow-green);
  }
  .pricing-btn-filled:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
    transform: scale(1.02);
  }

  /* ─── COMING SOON ─── */
  #coming-soon {
    background: linear-gradient(140deg, #f0faf5 0%, #ffffff 55%, #eaf7f1 100%);
    padding: 80px 5vw;
  }
  #coming-soon .section-tag,
  #coming-soon .section-title { text-align: center; display: block; }
  #coming-soon .section-title { margin-bottom: 40px; }

  .coming-soon-card {
    background: var(--navy);
    border-radius: 20px;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,201,122,0.12);
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: unset;
  }
  .coming-soon-card::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(0,201,122,0.10) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none; z-index: 0;
  }
  /* Left content pane */
  .cs-left {
    padding: 48px 40px;
    position: relative; z-index: 1;
    display: flex; flex-direction: column; justify-content: center;
    border-right: 1px solid rgba(255,255,255,0.06);
  }
  /* Right form pane */
  .cs-right {
    padding: 48px 40px;
    position: relative; z-index: 1;
    display: flex; flex-direction: column; justify-content: center;
    background: rgba(255,255,255,0.02);
  }
  .coming-soon-glow {
    position: absolute; right: -40px; top: -40px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,201,122,0.20) 0%, transparent 70%);
    filter: blur(50px);
    pointer-events: none; z-index: 0;
  }
  .coming-soon-label {
    font-family: 'Inter', sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase;
    color: var(--green);
    background: rgba(0,201,122,0.12);
    border: 1px solid rgba(0,201,122,0.28);
    padding: 5px 12px; border-radius: 20px;
    display: inline-block;
    margin-bottom: 16px;
    width: fit-content;
  }
  .coming-soon-card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(22px, 2.8vw, 32px);
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.1;
    margin-bottom: 12px;
  }
  .coming-soon-card h3 span { color: var(--green); }
  .coming-soon-card p {
    font-size: 14px; color: rgba(255,255,255,0.55);
    line-height: 1.7;
    margin: 0;
  }
  /* Right pane: form label */
  .cs-form-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 10px;
  }
  .cs-form-title {
    font-family: 'Oswald', sans-serif;
    font-size: 18px; font-weight: 700;
    color: #fff; text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }
  .cs-form-sub {
    font-size: 13px; color: rgba(255,255,255,0.42);
    margin-bottom: 24px; line-height: 1.5;
  }
  .notify-form {
    display: flex; flex-direction: column; gap: 10px;
  }
  .notify-input {
    width: 100%;
    padding: 13px 16px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
  }
  .notify-input::placeholder { color: rgba(255,255,255,0.30); }
  .notify-input:focus { border-color: var(--green); background: rgba(255,255,255,0.09); }
  .notify-btn {
    padding: 13px 28px;
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    cursor: pointer;
    transition: all 0.22s;
    box-shadow: 0 4px 16px rgba(0,201,122,0.30);
  }
  .notify-btn:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,201,122,0.40); }
  .notify-success {
    display: none;
    align-items: center; gap: 10px;
    margin-top: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 600;
    color: var(--green);
  }
  .notify-success.show { display: flex; }
  .notify-success-icon {
    width: 26px; height: 26px;
    background: rgba(0,201,122,0.18);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
  }
  /* Coming soon feature pills */
  .cs-features {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 20px;
  }
  .cs-feature-pill {
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 5px 12px; border-radius: 20px;
    display: flex; align-items: center; gap: 6px;
  }
  .cs-feature-pill::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); flex-shrink: 0;
  }
  @media (max-width: 700px) {
    .coming-soon-card { grid-template-columns: 1fr; }
    .cs-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 36px 28px; }
    .cs-right { padding: 32px 28px; }
  }

  /* ─── PROGRAMS ─── */
  #programs {
    background: var(--white);
  }
  .programs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .program-card {
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s;
    cursor: default;
  }
  .program-card:hover {
    border-color: var(--green);
    box-shadow: var(--shadow-green);
    transform: translateY(-5px);
  }
  .program-icon {
    font-size: 40px;
    margin-bottom: 16px;
    display: block;
    line-height: 1;
  }
  .program-card h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 18px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dark);
  }

  /* ─── FAQ ─── */
  #faq-section {
    background: #eef2f7;
  }
  .faq-list {
    max-width: 1100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .faq-item {
    background: var(--card-bg);
    border: 1.5px solid #e0e6ef;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  .faq-item:hover { border-color: rgba(0,201,122,0.45); box-shadow: 0 4px 16px rgba(0,201,122,0.10); }
  .faq-item.open { border-color: var(--green); box-shadow: 0 4px 20px rgba(0,201,122,0.14); }
  .faq-q {
    display: flex; justify-content: space-between; align-items: center;
    padding: 22px 26px;
    font-size: 15px; font-weight: 700;
    color: var(--text-dark);
    user-select: none;
    gap: 12px;
    font-family: 'Inter', sans-serif;
  }
  .faq-arrow {
    color: var(--green);
    font-size: 13px;
    transition: transform 0.3s;
    flex-shrink: 0;
  }
  .faq-item.open .faq-arrow { transform: rotate(180deg); }
  .faq-a {
    max-height: 0; overflow: hidden;
    padding: 0 26px;
    font-size: 14px; color: var(--text-muted);
    line-height: 1.75;
    transition: max-height 0.35s ease, padding 0.3s ease;
  }
  .faq-item.open .faq-a {
    max-height: 300px;
    padding: 0 26px 22px;
  }
  @media (max-width: 768px) {
    .faq-list { grid-template-columns: 1fr; }
  }

  /* ─── WHATSAPP ─── */
  .whatsapp-float {
    position: fixed; bottom: 28px; right: 28px; z-index: 9998;
    width: 56px; height: 56px;
    background: #25D366; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 24px rgba(37,211,102,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 32px rgba(37,211,102,0.55);
  }

  /* ─── LEGAL OVERLAY ─── */
  .legal-overlay {
    display: none; position: fixed; inset: 0; z-index: 9000;
    background: var(--white); overflow-y: auto;
    padding: 48px 5vw;
    scroll-behavior: smooth;
  }
  .legal-overlay.active { display: block; }
  @media (max-width: 900px) {
    .legal-overlay { padding-top: 96px; }
  }
  .legal-close {
    background: var(--green-light); border: none;
    color: var(--green); font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 700;
    padding: 10px 20px; border-radius: 6px;
    cursor: pointer; margin-bottom: 32px;
    letter-spacing: 1px; text-transform: uppercase;
    transition: background 0.2s;
  }
  .legal-close:hover { background: var(--green); color: #fff; }
  .legal-title {
    font-family: 'Oswald', sans-serif;
    font-size: 36px; font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .legal-divider { height: 3px; background: var(--green); width: 60px; margin-bottom: 36px; }
  .legal-section { margin-bottom: 28px; }
  .legal-section h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 18px; font-weight: 700;
    text-transform: uppercase;
    color: var(--text-dark);
    margin-bottom: 10px;
  }
  .legal-section p, .legal-section li {
    font-size: 15px; color: var(--text-mid);
    line-height: 1.7;
  }
  .legal-section ul { padding-left: 20px; }
  .legal-section li { margin-bottom: 6px; }
  .legal-inner { max-width: 760px; margin: 0 auto; }

  /* ─── TICKER STRIP ─── */
  .ticker-wrap {
    background: var(--green); padding: 14px 0; overflow: hidden;
    position: relative;
  }
  .ticker-wrap::before, .ticker-wrap::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1;
  }
  .ticker-wrap::before { left: 0; background: linear-gradient(90deg, var(--green), transparent); }
  .ticker-wrap::after { right: 0; background: linear-gradient(-90deg, var(--green), transparent); }
  .ticker-inner { display: flex; width: max-content; animation: ticker 30s linear infinite; }
  .ticker-inner:hover { animation-play-state: paused; }
  .ticker-item {
    font-family: 'Inter', sans-serif;
    font-size: 17px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: #fff; padding: 0 36px; white-space: nowrap;
  }
  .ticker-dot { color: rgba(255,255,255,0.55); }
  @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

  /* ─── SCROLL ANIMATIONS ─── */
  .fade-in {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  .fade-in.visible { opacity: 1; transform: translateY(0); }
  .fade-in-left {
    opacity: 0; transform: translateX(-28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  .fade-in-left.visible { opacity: 1; transform: translateX(0); }
  .fade-in-right {
    opacity: 0; transform: translateX(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  .fade-in-right.visible { opacity: 1; transform: translateX(0); }
  .fade-in-scale {
    opacity: 0; transform: scale(0.94);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  .fade-in-scale.visible { opacity: 1; transform: scale(1); }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 1024px) {
    .hero-inner {
      gap: 32px;
    }
    .hero-stats-card {
      padding: 36px 28px;
    }
    .hero-float-badge {
      right: -8px;
    }
  }

  @media (max-width: 900px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 480px; }
    .programs-grid { grid-template-columns: repeat(2, 1fr); }

    /* Hero stacks to single column on mobile */
    .hero-inner {
      grid-template-columns: 1fr;
      min-height: auto;
      padding: 60px 0 80px;
      gap: 40px;
    }
    .page-hero {
      min-height: auto;
      padding-top: 100px;
      padding-bottom: 60px;
      align-items: flex-start;
    }
    .hero-visual {
      justify-content: flex-start;
    }
    .hero-stats-card {
      max-width: 100%;
    }
    .hero-float-badge {
      top: -16px; right: 12px;
    }
    .hero-img-ring { display: none; }
    .hero-accent-circle, .hero-accent-circle2 { display: none; }
  }

  @media (max-width: 600px) {
    .programs-grid { grid-template-columns: repeat(2, 1fr); }
    .coming-soon-card { padding: 40px 24px; }
    .hero-stats-card { padding: 32px 20px; }
    .stat-value { font-size: 18px; }
    .stats-card-title { font-size: 18px; }
  }




/* =====================================================
   GLOBAL MOBILE IMPROVEMENTS — All Pages
   ===================================================== */

/* ── Hide desktop WhatsApp nav wrapper on mobile ── */
@media (max-width: 900px) {
  .nav-wa-wrap { display: none !important; }
}

/* ── NAV: tighter on tablet ── */
@media (max-width: 1100px) {
  .nav-links a { font-size: 12px !important; padding: 7px 8px !important; letter-spacing: 0.5px !important; }
  nav { padding: 0 3vw !important; }
}

/* ── Mobile menu: full polish ── */
@media (max-width: 900px) {
  .mobile-menu, .mob-menu {
    padding: 0 !important;
    border-bottom: 2px solid var(--green) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
  }
  .mobile-menu a, .mob-menu a {
    padding: 15px 5vw !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    display: flex !important;
    align-items: center !important;
  }
  .mobile-menu a.mobile-cta, .mob-menu a.mob-cta {
    margin: 12px 5vw 16px !important;
    border-radius: 8px !important;
    padding: 14px !important;
    justify-content: center !important;
    font-size: 14px !important;
    border-bottom: none !important;
    text-align: center !important;
  }
  /* WhatsApp link in mobile menu — styled as a button */
  .mobile-menu a[href*="whatsapp"], .mob-menu a[href*="whatsapp"] {
    background: rgba(37,211,102,0.08) !important;
    color: #1a9e4c !important;
    font-weight: 700 !important;
    border-bottom: 1px solid rgba(37,211,102,0.15) !important;
  }
}

/* ── Hero sections: better mobile spacing & centering ── */
@media (max-width: 768px) {
  /* Index hero */
  #page-index #home .hero-inner {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 90px 5vw 60px !important;
    gap: 32px !important;
  }
  #page-index .hero-img-frame { max-width: 300px !important; margin: 0 auto !important; }
  #page-index .hero-img-main { min-height: 260px !important; }
  #page-index .hero-img-card2 { right: -8px !important; top: 12px !important; min-width: 80px !important; padding: 10px 12px !important; }
  #page-index .hero-img-card2-num { font-size: 16px !important; }
  #page-index .hero-img-card2-label { font-size: 9px !important; }
  #page-index .hero-img-badge { left: 12px !important; bottom: 12px !important; padding: 8px 12px !important; }
  #page-index .hero-img-badge-title { font-size: 14px !important; }
  #page-index .hero-img-badge-sub { font-size: 9px !important; }
  #page-index .hero-accent-circle, #page-index .hero-accent-circle2 { display: none !important; }

  /* ── HERO IMAGE CONSISTENCY across all non-home pages ── */
  .page-hero .hero-img-wrap img,
  .page-hero .hero-img-wrap > img,
  #hero .hero-img-wrap img,
  #hero .hero-right img {
    max-height: 420px;
    object-fit: cover;
    width: 100%;
  }
  .page-hero .hero-img-wrap,
  #hero .hero-img-wrap {
    max-height: 420px;
  }

  /* All page heroes with .hero-inner two-col */
  .page-hero .hero-inner, #hero .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    text-align: center !important;
  }
  .page-hero .hero-content, #hero .hero-content, #hero > div:first-of-type { text-align: center !important; }
  .page-hero .hero-btns, #hero .hero-btns { justify-content: center !important; }
  .page-hero .hero-badge, #hero .hero-badge { margin: 0 auto 20px !important; }
  .page-hero .hero-divider, #hero .hero-divider { margin: 16px auto 16px !important; }
  .hero-right, .hero-img-col { order: -1 !important; }
  .hero-img-wrap img { max-height: 260px !important; object-fit: cover !important; }
  .img-ring { display: none !important; }

  /* Hide decorative circles/orbs on mobile for perf */
  .hero-orb-1, .hero-orb-2, .hero-orb1, .hero-orb2 { display: none !important; }
}

/* ── Stats strip: always 2 columns on mobile ── */
@media (max-width: 768px) {
  .stats-strip-inner, .stats-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }
  .stats-strip-item, .ss-item {
    padding: 18px 10px !important;
    border-right: 1px solid rgba(0,0,0,0.07) !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
  }
  .stats-strip-num, .ss-num { font-size: 1.8rem !important; }
  .stats-strip-label, .ss-label { font-size: 10px !important; }
}

/* ── Services grid ── */
@media (max-width: 768px) {
  .pkg-intro-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .pricing-cards-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .schools-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .categories-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .service-card { padding: 22px 18px !important; }
}

/* ── Membership pricing ── */
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr !important; max-width: 360px !important; margin: 0 auto !important; gap: 20px !important; }
  .pricing-card { padding: 28px 22px !important; }
  .pricing-price { font-size: 56px !important; }
  .coming-soon-card { flex-direction: column !important; gap: 28px !important; padding: 32px 20px !important; }
}

/* ── Contact page ── */
@media (max-width: 768px) {
  .info-cards-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .form-layout { grid-template-columns: 1fr !important; gap: 20px !important; }
  .form-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .contact-left, .contact-form-wrap { padding: 24px 18px !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* ── Club Account ── */
@media (max-width: 768px) {
  .ca-grid, .payment-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .bank-row { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .copy-btn { width: 100% !important; text-align: center !important; }
  .payment-card-header { padding: 18px 20px !important; gap: 12px !important; }
  .payment-card-body { padding: 20px !important; }
}

/* ── Champions / Success Stories ── */
@media (max-width: 768px) {
  .champions-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .champion-card { padding: 24px 18px !important; }
  .trophies-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .champions-intro { grid-template-columns: 1fr !important; gap: 28px !important; text-align: center !important; }
}

/* ── Coaches grid ── */
@media (max-width: 600px) {
  .coaches-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .coach-card { max-width: 340px !important; margin: 0 auto !important; width: 100% !important; }
}

/* ── Gallery ── */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    gap: 6px !important;
  }
  .gallery-item { grid-column: auto !important; grid-row: auto !important; height: 160px !important; }
}

/* ── FAQ ── */
@media (max-width: 768px) {
  .faq-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .faq-grid .faq-item { width: 100% !important; }
  .faq-q { font-size: 14px !important; padding: 16px 18px !important; }
  .faq-a { font-size: 13px !important; }
  /* contact page faq */
  .faq-question { font-size: 14px !important; }
  .faq-answer { font-size: 13px !important; }
}

/* ── New 2-card pricing: mobile stack ── */
@media (max-width: 600px) {
  #membership-plans .membership-grid { grid-template-columns: 1fr !important; max-width: 100% !important; }
  #membership-plans .membership-card { padding: 28px 24px !important; }
  #membership-plans .pricing-btn, #membership-plans a.pricing-btn-outline, #membership-plans a.pricing-btn-filled { width: 100% !important; min-height: 48px !important; box-sizing: border-box; }
  #pricing .pricing-grid { grid-template-columns: 1fr !important; max-width: 100% !important; }
  #pricing .pricing-card { padding: 32px 24px !important; }
  #pricing .pricing-price { font-size: 64px !important; }
  #pricing .pricing-btn { width: 100% !important; min-height: 48px !important; box-sizing: border-box; }
}


@media (max-width: 768px) {
  .safety-inner { display: grid !important; grid-template-columns: 1fr !important; gap: 28px !important; text-align: center !important; }
  .safety-badges { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; justify-items: center; }
  .safety-badge { min-width: unset !important; width: 100%; }
  #cta, #safety { padding: 56px 5vw !important; }
  .cta-heading { font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important; }
  .cta-btns { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .btn-cta-white, .btn-cta-outline { justify-content: center !important; width: 100% !important; }
}

/* ── Ticker strip ── */
@media (max-width: 768px) {
  .ticker-item { font-size: 11px !important; padding: 0 16px !important; }
  .ticker-wrap, .ticker-strip { padding: 10px 0 !important; }
}

/* ── Venue strip ── */
@media (max-width: 768px) {
  .venue-strip { padding: 20px 5vw !important; }
  .venue-strip-inner { flex-direction: column !important; gap: 16px !important; }
}

/* ── Map embed ── */
@media (max-width: 768px) {
  .map-embed, iframe[src*="google.com/maps"] { height: 220px !important; border-radius: 12px !important; }
}

/* ── Section spacing on mobile ── */
@media (max-width: 768px) {
  section { padding: 52px 5vw !important; }
  .section-title { line-height: 1.1 !important; margin-bottom: 10px !important; }
  .section-subtitle { font-size: 14px !important; line-height: 1.7 !important; margin-bottom: 32px !important; }
}

/* ── Floating WhatsApp button ── */
@media (max-width: 768px) {
  .whatsapp-float, .wa-float { width: 48px !important; height: 48px !important; bottom: 16px !important; right: 16px !important; }
  .whatsapp-float svg, .wa-float svg { width: 26px !important; height: 26px !important; }
}

/* ── Scroll-to-top button ── */
@media (max-width: 768px) {
  .stb, #scrollToTop { bottom: 76px !important; right: 16px !important; width: 38px !important; height: 38px !important; font-size: 14px !important; }
}

/* ── Booking modal ── */
@media (max-width: 768px) {
  .booking-modal { padding: 24px 18px 28px !important; margin: 0 12px !important; max-height: 92vh !important; overflow-y: auto !important; border-radius: 16px !important; }
  .booking-modal h3 { font-size: 20px !important; }
  .booking-form-group input, .booking-form-group select, .booking-form-group textarea { font-size: 15px !important; padding: 12px 14px !important; }
  .booking-submit { font-size: 14px !important; padding: 14px !important; }
}

/* ── Legal overlay ── */
@media (max-width: 768px) {
  .legal-overlay { padding: 80px 5vw 40px !important; }
  .legal-title { font-size: 26px !important; }
  .legal-section p, .legal-section li { font-size: 14px !important; }
}

/* ── Mobile menu top positioning ── */
@media (max-width: 900px) {
  .mobile-menu { top: 60px !important; }
}
@media (max-width: 768px) {
  .mobile-menu { top: 60px !important; }
}
@media (max-width: 380px) {
  .mobile-menu { top: 56px !important; }
}

/* ── Small mobile (≤380px) ── */
@media (max-width: 380px) {
  nav { height: 56px !important; }
  .nav-logo img { max-height: 36px !important; }
  .mobile-menu { top: 56px !important; }
  .mob-menu { top: 56px !important; }
  section { padding: 44px 4vw !important; }
  .hero-img-wrap img { max-height: 200px !important; }
  .pkg-intro-grid { grid-template-columns: 1fr !important; }
  .categories-grid { grid-template-columns: 1fr !important; }
}



/* ===== HERO SESSION TIMES ===== */
.hero-times {
  margin-top: 28px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(0,201,122,0.25);
  border-radius: 14px;
  padding: 18px 22px;
  backdrop-filter: blur(8px);
  max-width: 420px;
}
.hero-times-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #00C97A;
  margin-bottom: 14px;
}
.hero-times-grid {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 14px;
}
.hero-time-item {
  flex: 1;
}
.hero-time-day {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 3px;
}
.hero-time-hrs {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #00C97A;
  margin-bottom: 3px;
  letter-spacing: 0.3px;
}
.hero-time-note {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.5px;
}
.hero-time-divider {
  width: 1px;
  height: 48px;
  background: rgba(0,201,122,0.25);
  margin: 0 20px;
  flex-shrink: 0;
}
.hero-times-venue {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  border-top: 1px solid rgba(0,201,122,0.15);
  padding-top: 12px;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .hero-times { max-width: 100%; padding: 16px 18px; margin-top: 22px; }
  .hero-time-hrs { font-size: 15px; }
  .hero-time-day { font-size: 13px; }
  .hero-time-divider { margin: 0 14px; }
}
/* ===== LEGAL OVERLAY — MASTER REDESIGN ===== */
.legal-overlay {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: #f7f9fc !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
.legal-overlay.active {
  display: block !important;
  animation: legalFadeIn 0.25s ease;
}
@keyframes legalFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.legal-inner {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 32px 40px 80px !important;
}
.legal-close {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: sticky !important;
  top: 16px !important;
  z-index: 10 !important;
  background: #fff !important;
  border: 2px solid #00C97A !important;
  color: #0b1728 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  margin-bottom: 32px !important;
  min-height: 44px !important;
  box-shadow: 0 2px 12px rgba(0,201,122,0.15) !important;
  transition: all 0.2s !important;
}
.legal-close:hover {
  background: #00C97A !important;
  color: #fff !important;
  transform: translateX(-3px) !important;
}
.legal-title {
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(32px, 6vw, 56px) !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: #0b1728 !important;
  margin-bottom: 16px !important;
  line-height: 1.1 !important;
}
.legal-divider {
  height: 4px !important;
  background: linear-gradient(90deg, #00C97A, #00f598) !important;
  border-radius: 4px !important;
  margin: 0 0 40px !important;
  width: 80px !important;
}
.legal-section {
  margin-bottom: 36px !important;
  padding-bottom: 32px !important;
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}
.legal-section:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}
.legal-section h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #00C97A !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
  border: none !important;
}
.legal-section p {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  color: #2d4060 !important;
  line-height: 1.85 !important;
  margin-bottom: 10px !important;
}
.legal-section ul {
  padding-left: 0 !important;
  list-style: none !important;
  margin: 0 !important;
}
.legal-section ul li {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  color: #2d4060 !important;
  line-height: 1.8 !important;
  margin-bottom: 10px !important;
  padding-left: 22px !important;
  position: relative !important;
}
.legal-section ul li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 10px !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #00C97A !important;
}
@media (max-width: 600px) {
  .legal-inner { padding: 20px 20px 60px !important; }
  .legal-title  { font-size: clamp(26px, 8vw, 38px) !important; }
  .legal-section p, .legal-section ul li { font-size: 14px !important; }
  .legal-close  { font-size: 12px !important; padding: 10px 16px !important; }
}
/* ===== END LEGAL OVERLAY REDESIGN ===== */




/*
 * ═══════════════════════════════════════════════════════════════════
 *  UNIFIED INTERNAL HERO STYLES
 *  Master reference: Membership page hero
 *  Applied to: Services, Club Account, Contact, Champions, Policy
 *  DO NOT change Home page hero (page-index)
 * ═══════════════════════════════════════════════════════════════════
 */

/* ── SECTION: same layout as Membership hero (min-height:auto, flex centered) ── */
#page-services #hero,
#page-contact #hero,
#page-membership #hero,
#page-champions #hero,
#page-policy #policy-hero {
  min-height: auto !important;
  display: flex !important;
  align-items: center !important;
  padding: 88px 5% 56px !important;
  background: linear-gradient(140deg, #f0faf5 0%, #ffffff 55%, #eaf7f1 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ── INNER GRID: identical 2-col layout, same gap as Membership (4rem = 64px) ── */
#page-services .svc-hero-inner,
#page-contact .hero-inner,
#page-champions .hero-inner,
#page-policy .ph-inner,
#page-membership .mem-hero-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4rem !important;
  align-items: center !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ── TEXT COLUMN: flex column, vertically centered, same max-width ── */
#page-services .svc-hero-inner > div:first-child,
#page-contact .hero-inner > div:first-child,
#page-champions .hero-inner > div:first-child,
#page-policy .ph-inner > div:first-child,
#page-membership .mem-hero-inner > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  max-width: 520px !important;
}

/* ── IMAGE WRAPPER: same border-radius and overflow as Membership ── */
#page-services .svc-img-wrap,
#page-contact .hero-img-wrap,
#page-champions .hero-img-wrap,
#page-policy .ph-img-wrap,
#page-membership .mem-img-wrap {
  position: relative !important;
  width: 100% !important;
  border-radius: 20px !important;
  overflow: visible !important;
}

/* ── IMAGE: natural width-driven sizing, matching Membership inline style ── */
#page-services .svc-img-wrap img,
#page-contact .hero-img-wrap img,
#page-champions .hero-img-wrap img,
#page-policy .ph-img-wrap img,
#page-membership .mem-img-wrap img {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  border-radius: 20px !important;
  display: block !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,201,122,0.15) !important;
  transition: transform 0.7s ease !important;
}

/* ── IMAGE HOVER ── */
#page-services .svc-img-wrap:hover img,
#page-contact .hero-img-wrap:hover img,
#page-champions .hero-img-wrap:hover img,
#page-policy .ph-img-wrap:hover img,
#page-membership .mem-img-wrap:hover img {
  transform: scale(1.02) !important;
}

/* ── TABLET (≤900px): single column, image floats above text ── */
@media (max-width: 900px) {
  #page-services #hero,
  #page-contact #hero,
  #page-membership #hero,
  #page-champions #hero,
  #page-policy #policy-hero {
    padding: 88px 5% 52px !important;
  }
  #page-services .svc-hero-inner,
  #page-contact .hero-inner,
  #page-champions .hero-inner,
  #page-policy .ph-inner,
  #page-membership .mem-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  /* Image column goes above text on tablet/mobile */
  #page-services .svc-hero-right,
  #page-contact .hero-right,
  #page-champions .hero-right,
  #page-policy .ph-right,
  #page-membership .mem-hero-right {
    order: -1 !important;
  }
  #page-services .svc-img-wrap img,
  #page-contact .hero-img-wrap img,
  #page-champions .hero-img-wrap img,
  #page-policy .ph-img-wrap img,
  #page-membership .mem-img-wrap img {
    max-height: 320px !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
  #page-services .svc-hero-inner > div:first-child,
  #page-contact .hero-inner > div:first-child,
  #page-champions .hero-inner > div:first-child,
  #page-policy .ph-inner > div:first-child,
  #page-membership .mem-hero-inner > div:first-child {
    max-width: 100% !important;
    text-align: center !important;
    align-items: center !important;
  }
}

/* ── MOBILE (≤600px): compact padding, smaller image ── */
@media (max-width: 600px) {
  #page-services #hero,
  #page-contact #hero,
  #page-membership #hero,
  #page-champions #hero,
  #page-policy #policy-hero {
    padding: 80px 5% 40px !important;
  }
  #page-services .svc-img-wrap img,
  #page-contact .hero-img-wrap img,
  #page-champions .hero-img-wrap img,
  #page-policy .ph-img-wrap img,
  #page-membership .mem-img-wrap img {
    max-height: 260px !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 14px !important;
  }
  #page-services .svc-img-wrap,
  #page-contact .hero-img-wrap,
  #page-champions .hero-img-wrap,
  #page-policy .ph-img-wrap,
  #page-membership .mem-img-wrap {
    border-radius: 14px !important;
  }
  /* Hide decorative ring on small mobile */
  #page-services .svc-img-ring,
  #page-contact .img-ring,
  #page-champions .img-ring,
  #page-policy .ph-img-ring,
  #page-membership .mem-img-ring {
    display: none !important;
  }
  /* Stack hero buttons vertically */
  #page-services .svc-hero-btns,
  #page-contact .hero-btns,
  #page-champions .hero-btns,
  #page-policy .ph-btns,
  #page-membership .mem-hero-btns {
    flex-direction: column !important;
    gap: 0.7rem !important;
    width: 100% !important;
  }
  #page-services .svc-hero-btns a,
  #page-contact .hero-btns a,
  #page-champions .hero-btns a,
  #page-policy .ph-btns a,
  #page-membership .mem-hero-btns a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

/* ── VERY SMALL MOBILE (≤380px): maintain consistent image height across all pages ── */
@media (max-width: 380px) {
  #page-services .svc-img-wrap img,
  #page-contact .hero-img-wrap img,
  #page-champions .hero-img-wrap img,
  #page-policy .ph-img-wrap img,
  #page-membership .mem-img-wrap img {
    max-height: 220px !important;
    height: auto !important;
  }
}




/* ================================================================
   DULWICH TTC — MOBILE-ONLY FIX SHEET
   Targets: 320px – 768px  |  Does NOT touch desktop (>768px)
   Sections covered:
     1. Global resets
     2. Navigation
     3. Hero
     4. Community (About)
     5. Athletes Coached
     6. Footer
     7. WhatsApp float
================================================================ */

/* ─── 1. GLOBAL MOBILE RESETS ─────────────────────────────────── */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  *, *::before, *::after {
    box-sizing: border-box !important;
  }
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow-x: hidden !important;
  }
  /* Consistent section vertical padding */
  section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .section-tag {
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
    margin-bottom: 8px !important;
  }
  .section-title {
    font-size: clamp(22px, 6.5vw, 32px) !important;
    line-height: 1.1 !important;
    margin-bottom: 10px !important;
  }
}

/* ─── 2. NAVIGATION ───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Compact nav bar */
  nav {
    height: 62px !important;
    padding: 0 16px !important;
    gap: 0 !important;
  }
  .nav-logo img {
    height: 44px !important;
    width: auto !important;
  }
  .nav-links {
    display: none !important;
  }
  /* Hide phone number button — too cluttered on mobile */
  .nav-phone-btn,
  nav > div > a:first-child {
    display: none !important;
  }
  /* Book Now — slim and compact on mobile */
  nav > div > a.nav-cta,
  nav > div > a[href*="jotform"],
  a.nav-cta {
    padding: 6px 12px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    white-space: nowrap !important;
    border-radius: 5px !important;
    min-height: unset !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #00C97A !important;
    color: #0b1728 !important;
    box-shadow: 0 2px 8px rgba(0,201,122,0.25) !important;
    transform: none !important;
  }
  .hamburger {
    display: flex !important;
    margin-left: 6px !important;
  }
  /* Book Now div wrapper — no extra margin/gap */
  nav > div:not(.hamburger) {
    gap: 6px !important;
    margin-left: auto !important;
  }

  /* Mobile menu — solid white, no bleed */
  .mobile-menu,
  #mobileMenu, #mobMenu, #mobile-menu {
    top: 62px !important;
    background: #ffffff !important;
    padding: 0 0 20px 0 !important;
    max-height: calc(100vh - 62px) !important;
    overflow-y: auto !important;
    z-index: 9990 !important;
    border-bottom: 3px solid #00C97A !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.20) !important;
  }
  .mobile-menu a,
  #mobileMenu a, #mobMenu a {
    padding: 16px 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    display: flex !important;
    align-items: center !important;
    min-height: 54px !important;
    color: #0d1b2a !important;
    background: transparent !important;
  }
  .mobile-menu a[style*="25D366"] {
    color: #25D366 !important;
  }
  .mobile-menu .mobile-cta,
  #mobileMenu .mobile-cta {
    margin: 12px 18px 0 !important;
    border-radius: 8px !important;
    border-bottom: none !important;
    justify-content: center !important;
    background: #00C97A !important;
    color: #fff !important;
    min-height: 52px !important;
    font-size: 14px !important;
  }
}

/* ─── 3. HERO ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #home {
    padding: 62px 20px 0 !important;
  }
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px 0 44px !important;
    min-height: unset !important;
    text-align: center !important;
  }
  /* Image first (above text) */
  .hero-visual {
    order: -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  /* Controlled image height */
  .hero-img-main {
    min-height: 220px !important;
    max-height: 290px !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .hero-img-main img {
    object-fit: cover !important;
    object-position: top center !important;
  }
  /* Hide decorative elements that waste space */
  .hero-img-card2,
  .hero-img-ring,
  .hero-accent-circle,
  .hero-accent-circle2,
  .hero-orb-1,
  .hero-orb-2 {
    display: none !important;
  }
  /* Floating badge inside image */
  .hero-img-badge {
    bottom: 14px !important;
    left: 14px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
  }
  .hero-img-badge-title { font-size: 15px !important; }
  .hero-img-badge-sub { font-size: 9px !important; }

  /* Text content */
  .hero-content {
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .hero-badge {
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 9px !important;
    padding: 6px 12px !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.5 !important;
  }
  .hero-title {
    font-size: clamp(26px, 7.5vw, 38px) !important;
    line-height: 1.05 !important;
    letter-spacing: 1px !important;
    text-align: center !important;
  }
  .hero-divider {
    margin: 16px auto !important;
  }
  .hero-sub {
    font-size: 14px !important;
    line-height: 1.75 !important;
    text-align: center !important;
    max-width: 100% !important;
  }
  /* Buttons: stacked, full width */
  .hero-btns {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 4px !important;
  }
  .hero-btns .btn-primary,
  .hero-btns .btn-outline {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    min-height: 50px !important;
    font-size: 13px !important;
    padding: 12px 20px !important;
    box-sizing: border-box !important;
  }
  /* Stats row */
  .hero-stats {
    justify-content: center !important;
    gap: 12px 18px !important;
    margin-top: 20px !important;
    flex-wrap: wrap !important;
  }
  .hero-stat {
    padding-right: 18px !important;
  }
  .hero-stat-num { font-size: 26px !important; }
  .hero-stat-label { font-size: 9px !important; }
}

@media (max-width: 430px) {
  .hero-title {
    font-size: clamp(24px, 8vw, 34px) !important;
  }
  .hero-img-main {
    min-height: 200px !important;
    max-height: 260px !important;
  }
}

/* ─── 4. COMMUNITY (ABOUT) SECTION ────────────────────────────── */
@media (max-width: 768px) {
  #about {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  /* Single column layout */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-top: 28px !important;
  }
  /* Image column */
  .about-grid > div:first-child {
    gap: 12px !important;
  }
  /* Primary image */
  .about-img-wrap {
    border-radius: 16px !important;
    overflow: hidden !important;
    width: 100% !important;
    min-height: 220px !important;
    position: relative !important;
  }
  /* First image (team photo) */
  .about-img-wrap:first-child,
  .about-grid > div > .about-img-wrap:first-of-type {
    min-height: 220px !important;
    max-height: 260px !important;
  }
  /* Second image (paddle photo) */
  .about-grid > div > .about-img-wrap:last-of-type {
    min-height: 160px !important;
    max-height: 190px !important;
  }
  .about-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    position: absolute !important;
    inset: 0 !important;
  }
  .about-img-badge {
    font-size: 20px !important;
    padding: 10px 16px !important;
    bottom: 14px !important;
    left: 14px !important;
    border-radius: 8px !important;
  }
  /* Text column */
  .about-text-desc {
    font-size: 15px !important;
    line-height: 1.75 !important;
    margin-bottom: 20px !important;
  }
  .about-features {
    gap: 12px !important;
  }
  .about-feat {
    padding: 14px 16px !important;
    border-radius: 10px !important;
    gap: 12px !important;
  }
  .about-feat:hover {
    transform: none !important;
  }
  .about-feat-icon { font-size: 22px !important; }
  .about-feat-title {
    font-size: 14px !important;
    margin-bottom: 4px !important;
  }
  .about-feat-desc { font-size: 13px !important; }
}

/* ─── 5. NOTABLE ATHLETES COACHED ────────────────────────────── */
@media (max-width: 768px) {
  /* HARD override — always 1 column */
  .athletes-grid,
  .athletes-grid-v2,
  [class*="athletes-grid"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 28px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Full-width vertical card */
  .athlete-card-v2 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 14px !important;
  }
  .athlete-card-v2:hover {
    transform: none !important;
  }
  /* Full-width top header banner */
  .acv2-header {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 90px !important;
    flex-shrink: unset !important;
    padding: 20px 20px 16px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    border-radius: 0 !important;
  }
  .acv2-header::after { display: none !important; }
  .acv2-medal { font-size: 44px !important; }
  .acv2-header-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .acv2-initials {
    width: 34px !important; height: 34px !important;
    font-size: 12px !important; margin-bottom: 0 !important;
  }
  .acv2-rank { font-size: 10px !important; letter-spacing: 1.2px !important; }

  /* Body: generous padding, full width */
  .acv2-body {
    width: 100% !important;
    min-width: 0 !important;
    flex: unset !important;
    padding: 16px 20px 20px !important;
    overflow: visible !important;
  }
  .acv2-name {
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
  .acv2-badge {
    font-size: 10px !important;
    padding: 5px 12px !important;
    margin-bottom: 10px !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
  }
  .acv2-desc {
    font-size: 13px !important;
    line-height: 1.65 !important;
    margin-bottom: 14px !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }
  .acv2-btn {
    font-size: 11px !important;
    padding: 8px 16px !important;
    letter-spacing: 1px !important;
  }

  /* Old-style .athlete-card fallback */
  .athlete-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

/* ─── 6. FOOTER ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  footer {
    padding: 40px 20px 0 !important;
  }
  /* Single column, centered */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    text-align: center !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }
  /* Each column separated by a subtle line */
  .footer-grid > div {
    width: 100% !important;
    padding: 22px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }
  .footer-grid > div:last-child {
    border-bottom: none !important;
  }

  /* Logo + club info block */
  .footer-grid > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .footer-grid > div:first-child > div:first-child {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }
  .footer-logo-img {
    height: 60px !important;
    width: 60px !important;
    margin: 0 auto 10px !important;
    display: block !important;
  }
  .footer-tagline {
    max-width: 100% !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin: 0 auto 4px !important;
  }

  /* Column titles */
  .footer-col-title {
    text-align: center !important;
    margin-bottom: 14px !important;
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
  }
  /* Links centered */
  .footer-links {
    align-items: center !important;
    gap: 8px !important;
  }
  .footer-links li,
  .footer-links a {
    text-align: center !important;
    font-size: 14px !important;
  }
  .footer-links a {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* "Programs" column 2 — hide the duplicate heading, rename it */
  /* Both columns 2 & 3 have "Programs" — hide the 3rd column title */
  .footer-grid > div:nth-child(3) .footer-col-title {
    display: none !important;
  }
  /* Merge both program link lists visually */
  .footer-grid > div:nth-child(2),
  .footer-grid > div:nth-child(3) {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* "Have a Query?" column */
  .footer-grid > div:last-child {
    padding-top: 22px !important;
  }
  /* Phone number */
  .footer-grid > div:last-child ul li:first-child {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    color: #fff !important;
    text-align: center !important;
  }
  /* Follow Us label */
  .footer-grid > div:last-child ul li:last-child {
    text-align: center !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    margin-top: 6px !important;
  }
  /* Social icons row */
  .footer-grid > div:last-child > div {
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
  .footer-grid > div:last-child > div a {
    width: 44px !important;
    height: 44px !important;
  }

  /* Footer bottom bar */
  .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 20px 20px 32px !important;
    /* Extra bottom padding so WhatsApp button doesn't cover legal links */
    padding-bottom: 80px !important;
  }
  .footer-bottom > span {
    font-size: 12px !important;
    text-align: center !important;
  }
  /* Legal links */
  .footer-legal {
    justify-content: center !important;
    align-items: center !important;
    gap: 8px 18px !important;
    flex-wrap: wrap !important;
  }
  .footer-legal a {
    font-size: 13px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 6px !important;
    color: rgba(255,255,255,0.6) !important;
  }
}

/* ─── 7. WHATSAPP FLOATING BUTTON ─────────────────────────────── */
@media (max-width: 768px) {
  /* Safe position — won't cover legal links */
  .whatsapp-float,
  .wa-float,
  a.whatsapp-float,
  a.wa-float {
    bottom: 22px !important;
    right: 18px !important;
    width: 52px !important;
    height: 52px !important;
    z-index: 800 !important;
    box-shadow: 0 4px 20px rgba(37,211,102,0.45) !important;
  }
  /* Hide tooltip on mobile */
  .whatsapp-float::after,
  .wa-float::after {
    display: none !important;
  }
  /* SVG size */
  .whatsapp-float svg,
  .wa-float svg {
    width: 26px !important;
    height: 26px !important;
  }
}

/* ─── 8. STATS STRIP ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .stats-strip-inner {
    grid-template-columns: 1fr 1fr !important;
  }
  .stats-strip-item:nth-child(2)::after {
    display: none !important;
  }
  .stats-strip-num {
    font-size: 30px !important;
  }
  .stats-strip-label {
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
  }
}

/* ─── 9. SMALL PHONE OVERRIDES (≤ 480px) ─────────────────────── */
@media (max-width: 480px) {
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hero-title {
    font-size: clamp(24px, 8vw, 34px) !important;
  }
  .athletes-grid,
  .athletes-grid-v2 {
    grid-template-columns: 1fr !important;
  }
  .acv2-header {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
  }
  .footer-bottom {
    padding-bottom: 88px !important;
  }
}

/* ─── 10. EXTRA-SMALL (≤ 360px) ──────────────────────────────── */
@media (max-width: 360px) {
  nav {
    height: 58px !important;
    padding: 0 14px !important;
  }
  .nav-logo img {
    height: 38px !important;
  }
  .hero-title {
    font-size: clamp(22px, 9vw, 30px) !important;
  }
  .hero-img-main {
    max-height: 240px !important;
  }
  .acv2-header {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
  }
  .footer-bottom {
    padding-bottom: 90px !important;
  }
}

/* ─── ATHLETE CARDS: FORCE SINGLE COLUMN ON ALL MOBILE (FINAL OVERRIDE) ─── */
@media (max-width: 768px) {
  .athletes-grid-v2,
  div[class*="athletes-grid"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    flex-direction: unset !important;
    gap: 16px !important;
    margin-top: 24px !important;
    width: 100% !important;
  }
  .athlete-card-v2 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border-top: 3px solid #00c97a !important;
    box-shadow: 0 3px 16px rgba(0,0,0,0.09) !important;
    border-left: none !important; border-right: none !important; border-bottom: none !important;
    background: #ffffff !important;
  }
  .acv2-header {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 90px !important;
    flex-shrink: unset !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 20px 20px 16px !important;
    box-sizing: border-box !important;
  }
  .acv2-header-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .acv2-initials {
    display: inline-flex !important;
    width: 34px !important; height: 34px !important;
    font-size: 12px !important; margin-bottom: 0 !important;
  }
  .acv2-rank { font-size: 10px !important; letter-spacing: 1.2px !important; }
  .acv2-medal { font-size: 44px !important; }
  .acv2-body {
    width: 100% !important;
    min-width: 0 !important;
    flex: unset !important;
    padding: 16px 20px 20px !important;
    background: #ffffff !important;
  }
  .acv2-name {
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
    word-break: break-word !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  .acv2-badge {
    font-size: 10px !important;
    padding: 5px 12px !important;
    margin-bottom: 10px !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
  }
  .acv2-desc {
    font-size: 13px !important;
    line-height: 1.65 !important;
    margin-bottom: 14px !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }
  .acv2-btn {
    font-size: 11px !important;
    padding: 8px 16px !important;
  }
}



/* ── HOME COACHES CAROUSEL ── */
.coaches-carousel-wrap {
  position: relative;
}
/* Desktop: normal grid */
.coaches-grid-home {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 52px;
}
/* Mobile: carousel */
@media (max-width: 700px) {
  .coaches-carousel-wrap { margin-top: 28px; }
  .coaches-grid-home {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .coaches-grid-home::-webkit-scrollbar { display: none; }
  .coaches-grid-home .coach-card {
    flex: 0 0 92vw !important;
    max-width: 92vw !important;
    scroll-snap-align: center;
    margin: 0 4vw 0 0 !important;
    border-radius: 20px;
  }
  .coaches-grid-home .coach-card:first-child { margin-left: 4vw !important; }
  .coach-card .coach-img-wrap { height: 320px !important; }
  .coach-card .coach-info { padding: 22px 20px 24px !important; }
  .coach-card .coach-name { font-size: 28px !important; }
  .coach-card .coach-role { font-size: 11px !important; margin-bottom: 10px !important; }
  .coach-card .coach-bio { font-size: 13.5px !important; line-height: 1.65 !important; margin-bottom: 14px !important; }
  .coach-card .achieve-item { font-size: 12.5px !important; }

  /* Dot indicators */
  .coaches-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
  }
  .coaches-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(0,201,122,0.25);
    border: 2px solid rgba(0,201,122,0.4);
    cursor: pointer;
    transition: all 0.25s;
  }
  .coaches-dot.active {
    background: var(--green);
    border-color: var(--green);
    transform: scale(1.2);
  }

  /* Nav arrows */
  .coaches-nav {
    display: flex !important;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
  }
  .coaches-nav-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2px solid var(--green);
    background: transparent;
    color: var(--green);
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
  }
  .coaches-nav-btn:hover,
  .coaches-nav-btn:active {
    background: var(--green);
    color: #fff;
  }

  /* Counter badge */
  .coaches-counter {
    display: flex !important;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    margin-top: 6px;
  }
}
/* Hide mobile-only elements on desktop */
.coaches-dots,
.coaches-nav,
.coaches-counter { display: none; }



    @keyframes svc-orb1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.05)}}
    @keyframes svc-orb2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20px,30px) scale(1.08)}}
    #page-services .svc-hero-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;width:100%;position:relative;z-index:2}
    #page-services .svc-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,201,122,0.1);border:1.5px solid rgba(0,201,122,0.3);color:var(--green-dark);padding:6px 16px;border-radius:100px;font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:1.2rem;width:fit-content;font-family:'Inter',sans-serif;animation:svc-fadeUp 0.6s ease both}
    #page-services .svc-hero-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);animation:svc-blink 2s infinite}
    @keyframes svc-blink{0%,100%{opacity:1}50%{opacity:0.25}}
    @keyframes svc-fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
    @keyframes svc-slideR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
    #page-services .svc-hero-h1{font-family:'Oswald',sans-serif;font-size:clamp(28px,3.6vw,48px);font-weight:700;color:var(--text-dark);line-height:1.05;margin-bottom:0.9rem;letter-spacing:1.5px;animation:svc-fadeUp 0.6s 0.1s ease both}
    #page-services .svc-hero-h1 span{color:#00b96b}
    #page-services .svc-hero-divider{width:52px;height:3px;background:var(--green);border-radius:2px;margin-bottom:1.2rem;animation:svc-fadeUp 0.6s 0.15s ease both}
    #page-services .svc-hero-sub{font-size:1rem;color:var(--text-mid);line-height:1.8;margin-bottom:2rem;max-width:460px;animation:svc-fadeUp 0.6s 0.2s ease both}
    #page-services .svc-hero-btns{display:flex;gap:1rem;flex-wrap:wrap;animation:svc-fadeUp 0.6s 0.25s ease both}
    #page-services .svc-btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:#fff;padding:15px 28px;border-radius:10px;font-family:'Inter',sans-serif;font-size:0.88rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;transition:all 0.25s;box-shadow:0 6px 22px rgba(0,201,122,0.4);border:none;cursor:pointer}
    #page-services .svc-btn-primary:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,201,122,0.5)}
    #page-services .svc-btn-outline{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--text-dark);padding:14px 28px;border-radius:10px;font-family:'Inter',sans-serif;font-size:0.88rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;transition:all 0.25s;border:1.5px solid rgba(10,22,40,0.18)}
    #page-services .svc-btn-outline:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
    #page-services .svc-hero-right{animation:svc-slideR 0.9s 0.3s cubic-bezier(0.22,1,0.36,1) both}
    #page-services .svc-img-wrap{position:relative;width:100%;border-radius:20px;overflow:visible}
    #page-services .svc-img-wrap img{position:relative;z-index:2;width:100%;border-radius:20px;display:block;box-shadow:0 20px 60px rgba(0,0,0,0.18),0 0 0 1px rgba(0,201,122,0.15);transition:transform 0.7s ease}
    #page-services .svc-img-wrap:hover img{transform:scale(1.02)}
    #page-services .svc-img-dot-grid{position:absolute;inset:-10px;z-index:0;pointer-events:none;border-radius:24px;background-image:radial-gradient(circle,rgba(0,201,122,0.18) 1.5px,transparent 1.5px);background-size:26px 26px;animation:svc-dotGrid 6s ease-in-out infinite}
    @keyframes svc-dotGrid{0%,100%{background-position:0 0;opacity:0.7}50%{background-position:13px 13px;opacity:1}}
    #page-services .svc-img-ring{position:absolute;top:-22px;left:-22px;right:-22px;bottom:-22px;border-radius:28px;border:2px dashed rgba(0,201,122,0.28);pointer-events:none;z-index:1;animation:svc-ringRotate 20s linear infinite}
    @keyframes svc-ringRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
    #page-services .svc-img-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(50px)}
    #page-services .svc-img-orb-a{width:260px;height:260px;top:-30px;right:-40px;background:radial-gradient(circle,rgba(0,201,122,0.18) 0%,transparent 70%);animation:svc-orbFloat 8s ease-in-out infinite}
    #page-services .svc-img-orb-b{width:180px;height:180px;bottom:-20px;left:-30px;background:radial-gradient(circle,rgba(0,201,122,0.12) 0%,transparent 70%);animation:svc-orbFloat 11s 2s ease-in-out infinite reverse}
    @keyframes svc-orbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.05)}}
    @media(max-width:900px){
      #page-services .svc-hero-inner{grid-template-columns:1fr;gap:2rem}
      #page-services .svc-hero-right{order:-1}
      #page-services .svc-img-wrap img{max-height:320px;object-fit:cover}
      #page-services .svc-img-ring{display:none}
      #page-services .svc-hero-sub{text-align:center;max-width:100%}
      #page-services .svc-hero-btns{justify-content:center}
      #page-services .svc-hero-divider{margin-left:auto;margin-right:auto}
      #page-services .svc-hero-badge{margin-left:auto;margin-right:auto}
      #page-services .svc-hero-h1{text-align:center}
    }
    @media(max-width:600px){
      #page-services .svc-hero-h1{font-size:clamp(22px,8vw,34px);margin-bottom:0.7rem}
      #page-services .svc-hero-sub{font-size:0.92rem;line-height:1.7;margin-bottom:1.4rem}
      #page-services .svc-hero-btns{flex-direction:column;gap:0.7rem}
      #page-services .svc-btn-primary,#page-services .svc-btn-outline{width:100%;justify-content:center;padding:14px 20px;font-size:0.82rem}
      #page-services .svc-img-wrap img{max-height:260px;border-radius:14px;object-fit:cover}
      #page-services .svc-img-orb-a,#page-services .svc-img-orb-b{display:none}
    }
  


    @keyframes ca-orb1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.05)}}
    @keyframes ca-orb2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20px,30px) scale(1.08)}}
    @keyframes ca-fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
    @keyframes ca-slideR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
    @keyframes ca-blink{0%,100%{opacity:1}50%{opacity:0.25}}
    @keyframes ca-dotGridShift{0%,100%{background-position:0 0;opacity:0.7}50%{background-position:13px 13px;opacity:1}}
    @keyframes ca-ringRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
    @keyframes ca-orbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.05)}}

    /* ── Inner grid ── */
    #ca-hero .ca-hero-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;width:100%;position:relative;z-index:2}

    /* ── Badge ── */
    #ca-hero .ca-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,201,122,0.1);border:1.5px solid rgba(0,201,122,0.3);color:var(--green-dark);padding:6px 16px;border-radius:100px;font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:1.2rem;width:fit-content;font-family:'Inter',sans-serif;animation:ca-fadeUp 0.6s ease both}
    #ca-hero .ca-hero-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;animation:ca-blink 2s infinite}

    /* ── Heading ── */
    #ca-hero .ca-hero-h1{font-family:'Oswald',sans-serif;font-size:clamp(28px,3.6vw,48px);font-weight:700;color:var(--text-dark);line-height:1.05;margin-bottom:0.9rem;letter-spacing:1.5px;animation:ca-fadeUp 0.6s 0.1s ease both}
    #ca-hero .ca-hero-h1 span{color:#00b96b}

    /* ── Divider ── */
    #ca-hero .ca-hero-divider{width:52px;height:3px;background:var(--green);border-radius:2px;margin-bottom:1.2rem;animation:ca-fadeUp 0.6s 0.15s ease both}

    /* ── Subtext ── */
    #ca-hero .ca-hero-sub{font-size:1rem;color:var(--text-mid);line-height:1.8;margin-bottom:2rem;max-width:460px;animation:ca-fadeUp 0.6s 0.2s ease both}

    /* ── Buttons row ── */
    #ca-hero .ca-hero-btns{display:flex;gap:1rem;flex-wrap:wrap;animation:ca-fadeUp 0.6s 0.25s ease both}
    #ca-hero .ca-btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:#fff;padding:15px 28px;border-radius:10px;font-family:'Inter',sans-serif;font-size:0.88rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;transition:all 0.25s;box-shadow:0 6px 22px rgba(0,201,122,0.4);border:none;cursor:pointer}
    #ca-hero .ca-btn-primary:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,201,122,0.5)}
    #ca-hero .ca-btn-outline{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--text-dark);padding:14px 28px;border-radius:10px;font-family:'Inter',sans-serif;font-size:0.88rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;transition:all 0.25s;border:1.5px solid rgba(10,22,40,0.18)}
    #ca-hero .ca-btn-outline:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}

    /* ── Right column ── */
    #ca-hero .ca-hero-right{animation:ca-slideR 0.9s 0.3s cubic-bezier(0.22,1,0.36,1) both}

    /* ── Image wrapper ── */
    #ca-hero .ca-img-wrap{position:relative;width:100%;border-radius:20px;overflow:visible}
    #ca-hero .ca-img-wrap img{position:relative;z-index:2;width:100%;height:440px;min-height:440px;max-height:440px;object-fit:cover;object-position:center top;border-radius:20px;display:block;box-shadow:0 20px 60px rgba(0,0,0,0.18),0 0 0 1px rgba(0,201,122,0.15);transition:transform 0.7s ease}
    #ca-hero .ca-img-wrap:hover img{transform:scale(1.02)}

    /* ── Image decorations ── */
    #ca-hero .ca-img-dot-grid{position:absolute;inset:-10px;z-index:0;pointer-events:none;border-radius:24px;background-image:radial-gradient(circle,rgba(0,201,122,0.18) 1.5px,transparent 1.5px);background-size:26px 26px;animation:ca-dotGridShift 6s ease-in-out infinite}
    #ca-hero .ca-img-ring{position:absolute;top:-22px;left:-22px;right:-22px;bottom:-22px;border-radius:28px;border:2px dashed rgba(0,201,122,0.28);pointer-events:none;z-index:1;animation:ca-ringRotate 20s linear infinite}
    #ca-hero .ca-img-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(50px)}
    #ca-hero .ca-img-orb-a{width:260px;height:260px;top:-30px;right:-40px;background:radial-gradient(circle,rgba(0,201,122,0.18) 0%,transparent 70%);animation:ca-orbFloat 8s ease-in-out infinite}
    #ca-hero .ca-img-orb-b{width:180px;height:180px;bottom:-20px;left:-30px;background:radial-gradient(circle,rgba(0,201,122,0.12) 0%,transparent 70%);animation:ca-orbFloat 11s 2s ease-in-out infinite reverse}

    /* ── Tablet (≤900px): single column, image above ── */
    @media(max-width:900px){
      #ca-hero .ca-hero-inner{grid-template-columns:1fr;gap:2rem}
      #ca-hero .ca-hero-right{order:-1}
      #ca-hero .ca-img-wrap img{height:320px;min-height:320px;max-height:320px;object-fit:cover}
      #ca-hero .ca-img-ring{display:none}
      #ca-hero .ca-hero-sub{max-width:100%;text-align:center}
      #ca-hero .ca-hero-btns{justify-content:center}
      #ca-hero .ca-hero-badge{margin-left:auto;margin-right:auto}
      #ca-hero .ca-hero-divider{margin-left:auto;margin-right:auto}
    }

    /* ── Mobile (≤600px): compact, stacked buttons ── */
    @media(max-width:600px){
      #ca-hero{padding:80px 5% 40px}
      #ca-hero .ca-hero-h1{font-size:clamp(22px,8vw,34px)}
      #ca-hero .ca-hero-btns{flex-direction:column;gap:0.7rem}
      #ca-hero .ca-btn-primary,#ca-hero .ca-btn-outline{width:100%;justify-content:center;padding:14px 20px;font-size:0.82rem;box-sizing:border-box}
      #ca-hero .ca-img-wrap img{height:260px;min-height:260px;max-height:260px;border-radius:14px}
      #ca-hero .ca-img-wrap{border-radius:14px}
      #ca-hero .ca-img-orb-a,#ca-hero .ca-img-orb-b{display:none}
    }

    /* ── Very small (≤380px) ── */
    @media(max-width:380px){
      #ca-hero .ca-img-wrap img{height:220px;min-height:220px;max-height:220px}
    }
  


    @keyframes orb1m{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.05)}}
    @keyframes orb2m{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20px,30px) scale(1.08)}}
    #page-membership .mem-hero-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;width:100%;position:relative;z-index:2}
    #page-membership .mem-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,201,122,0.1);border:1.5px solid rgba(0,201,122,0.3);color:var(--green-dark);padding:6px 16px;border-radius:100px;font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:1.2rem;width:fit-content;font-family:'Inter',sans-serif;animation:fadeUpM 0.6s ease both}
    #page-membership .mem-hero-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);animation:blinkM 2s infinite}
    @keyframes blinkM{0%,100%{opacity:1}50%{opacity:0.25}}
    @keyframes fadeUpM{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
    @keyframes slideRM{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
    #page-membership .mem-hero-h1{font-family:'Oswald',sans-serif;font-size:clamp(28px,3.6vw,48px);font-weight:700;color:var(--text-dark);line-height:1.05;margin-bottom:0.9rem;letter-spacing:1.5px;animation:fadeUpM 0.6s 0.1s ease both}
    #page-membership .mem-hero-h1 span{color:#00b96b}
    #page-membership .mem-hero-divider{width:52px;height:3px;background:var(--green);border-radius:2px;margin-bottom:1.2rem;animation:fadeUpM 0.6s 0.15s ease both}
    #page-membership .mem-hero-sub{font-size:1rem;color:var(--text-mid);line-height:1.8;margin-bottom:2rem;max-width:460px;animation:fadeUpM 0.6s 0.2s ease both}
    #page-membership .mem-hero-btns{display:flex;gap:1rem;flex-wrap:wrap;animation:fadeUpM 0.6s 0.25s ease both}
    #page-membership .mem-btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:#fff;padding:15px 28px;border-radius:10px;font-family:'Inter',sans-serif;font-size:0.88rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;transition:all 0.25s;box-shadow:0 6px 22px rgba(0,201,122,0.4);border:none;cursor:pointer}
    #page-membership .mem-btn-primary:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,201,122,0.5)}
    #page-membership .mem-btn-outline{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--text-dark);padding:14px 28px;border-radius:10px;font-family:'Inter',sans-serif;font-size:0.88rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;transition:all 0.25s;border:1.5px solid rgba(10,22,40,0.18)}
    #page-membership .mem-btn-outline:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
    #page-membership .mem-hero-right{animation:slideRM 0.9s 0.3s cubic-bezier(0.22,1,0.36,1) both}
    #page-membership .mem-img-wrap{position:relative;width:100%;border-radius:20px;overflow:visible}
    #page-membership .mem-img-wrap img{position:relative;z-index:2;width:100%;border-radius:20px;display:block;box-shadow:0 20px 60px rgba(0,0,0,0.18),0 0 0 1px rgba(0,201,122,0.15);transition:transform 0.7s ease}
    #page-membership .mem-img-wrap:hover img{transform:scale(1.02)}
    #page-membership .mem-img-dot-grid{position:absolute;inset:-10px;z-index:0;pointer-events:none;border-radius:24px;background-image:radial-gradient(circle,rgba(0,201,122,0.18) 1.5px,transparent 1.5px);background-size:26px 26px;animation:dotGridShiftM 6s ease-in-out infinite}
    @keyframes dotGridShiftM{0%,100%{background-position:0 0;opacity:0.7}50%{background-position:13px 13px;opacity:1}}
    #page-membership .mem-img-ring{position:absolute;top:-22px;left:-22px;right:-22px;bottom:-22px;border-radius:28px;border:2px dashed rgba(0,201,122,0.28);pointer-events:none;z-index:1;animation:ringRotateM 20s linear infinite}
    @keyframes ringRotateM{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
    #page-membership .mem-img-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(50px)}
    #page-membership .mem-img-orb-a{width:260px;height:260px;top:-30px;right:-40px;background:radial-gradient(circle,rgba(0,201,122,0.18) 0%,transparent 70%);animation:orbFloatM 8s ease-in-out infinite}
    #page-membership .mem-img-orb-b{width:180px;height:180px;bottom:-20px;left:-30px;background:radial-gradient(circle,rgba(0,201,122,0.12) 0%,transparent 70%);animation:orbFloatM 11s 2s ease-in-out infinite reverse}
    @keyframes orbFloatM{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.05)}}
    @media(max-width:900px){
      #page-membership .mem-hero-inner{grid-template-columns:1fr;gap:2rem}
      #page-membership .mem-hero-right{order:-1}
      #page-membership .mem-img-wrap img{max-height:320px;object-fit:cover}
      #page-membership .mem-img-ring{display:none}
    }
    @media(max-width:600px){
      #page-membership .mem-hero-h1{font-size:clamp(22px,8vw,34px)}
      #page-membership .mem-hero-btns{flex-direction:column;gap:0.7rem}
      #page-membership .mem-btn-primary,#page-membership .mem-btn-outline{width:100%;justify-content:center;padding:14px 20px;font-size:0.82rem}
      #page-membership .mem-img-wrap img{max-height:260px;border-radius:14px}
      #page-membership .mem-img-orb-a,#page-membership .mem-img-orb-b{display:none}
    }
  



  :root {
    --green: #00C97A;
    --green-dark: #009a5c;
    --green-light: rgba(0,201,122,0.10);
    --green-glow: rgba(0,201,122,0.25);
    --navy: #0b1728;
    --white: #ffffff;
    --off-white: #f7f9fc;
    --light-bg: #f0f4f8;
    --card-bg: #ffffff;
    --text-dark: #0d1b2a;
    --text-mid: #2d4060;
    --text-muted: #6b7fa0;
    --border: rgba(0,0,0,0.08);
    --shadow-sm: 0 2px 12px rgba(0,0,0,0.07);
    --shadow-md: 0 8px 32px rgba(0,0,0,0.10);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.13);
    --shadow-green: 0 8px 32px rgba(0,201,122,0.25);
  }

  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', sans-serif;
    background: var(--white);
    color: var(--text-dark);
    overflow-x: hidden;
  }

  /* ─── SCROLL PROGRESS ─── */
  #progress-bar {
    position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
    background: linear-gradient(90deg, var(--green), #00f598);
    width: 0%; transition: width 0.1s;
  }

  /* ─── NAV ─── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 5vw; height: 72px;
    background: rgba(255,255,255,0.96);
    border-bottom: 2px solid var(--green);
    backdrop-filter: blur(16px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s;
  }
  nav.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.13); }
  .nav-logo {
    text-decoration: none;
    display: flex; align-items: center;
    flex-shrink: 0;
  }
  .nav-logo img {
    height: 54px; width: auto; display: block;
    mix-blend-mode: multiply; filter: contrast(1.05);
    transition: opacity 0.2s;
  }
  .nav-logo img:hover { opacity: 0.85; }
  .nav-links { display: flex; gap: 4px; list-style: none; }
  .nav-links a {
    color: var(--text-mid); text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 1.2px; text-transform: uppercase;
    padding: 7px 11px; border-radius: 4px;
    transition: all 0.2s; white-space: nowrap;
  }
  .nav-links a:hover { color: var(--green); background: var(--green-light); }
  .nav-links a.active { color: var(--green); }
  .nav-cta {
    background: var(--green) !important; color: #fff !important;
    border-radius: 4px; padding: 10px 18px !important; font-weight: 700 !important;
  }
  .nav-cta:hover { background: var(--green-dark) !important; transform: scale(1.04); }
  .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
  .hamburger span { width: 26px; height: 2px; background: var(--text-dark); display: block; transition: 0.3s; border-radius: 2px; }
  .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

  /* ─── MOBILE MENU ─── */
  .mobile-menu {
    display: none; flex-direction: column;
    position: fixed; top: 72px; left: 0; right: 0; z-index: 9998;
    background: #ffffff;
    padding: 20px 5vw 28px;
    border-bottom: 2px solid var(--green);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  }
  .mobile-menu.open { display: flex; animation: slideDown 0.25s ease; }
  @keyframes slideDown { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
  .mobile-menu a {
    color: var(--text-dark); text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: color 0.2s;
  }
  .mobile-menu a:hover, .mobile-menu a.active { color: var(--green); }
  .mobile-menu a.mobile-cta {
    background: var(--green); color: #fff !important; text-align: center;
    border-radius: 6px; padding: 14px; margin-top: 10px; border: none;
  }

  /* ─── HERO — styles handled by inline scoped block inside the section ─── */

  /* ─── STATS STRIP ─── */
  .stats-strip {
    background: #ffffff;
    border-top: 3px solid #00b96b;
    border-bottom: 1px solid rgba(0,185,107,0.12);
    padding: 0 5vw;
    position: relative; z-index: 10;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  }
  .stats-strip-inner {
    display: grid; grid-template-columns: repeat(4, 1fr);
    max-width: 1100px; margin: 0 auto;
  }
  .stats-strip-item {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 18px 20px; position: relative;
    transition: background 0.25s;
  }
  .stats-strip-item:not(:last-child)::after {
    content: ''; position: absolute; right: 0; top: 20%; bottom: 20%;
    width: 1px; background: rgba(0,185,107,0.20);
  }
  .stats-strip-item:hover { background: rgba(0,185,107,0.04); }
  .stats-strip-num {
    font-family: 'Oswald', sans-serif; font-size: 36px; color: #00b96b;
    line-height: 1; letter-spacing: 1px;
  }
  .stats-strip-label {
    font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase; color: #6b7fa0;
    margin-top: 5px; text-align: center;
  }

  /* ─── TICKER ─── */
  .ticker-wrap {
    background: var(--green); padding: 14px 0; overflow: hidden; position: relative;
  }
  .ticker-wrap::before, .ticker-wrap::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1;
  }
  .ticker-wrap::before { left: 0; background: linear-gradient(90deg, var(--green), transparent); }
  .ticker-wrap::after { right: 0; background: linear-gradient(-90deg, var(--green), transparent); }
  .ticker-inner { display: flex; width: max-content; animation: ticker 30s linear infinite; }
  .ticker-inner:hover { animation-play-state: paused; }
  .ticker-item {
    font-family: 'Inter', sans-serif;
    font-size: 17px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: #fff; padding: 0 36px; white-space: nowrap;
  }
  .ticker-dot { color: rgba(255,255,255,0.55); }
  @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

  /* ─── SECTION BASE ─── */
  section { padding: 96px 5vw; }
  .section-tag {
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
    color: var(--green); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
  }
  .section-tag::before { content: ''; display: block; width: 30px; height: 2px; background: var(--green); border-radius: 2px; }
  .section-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(26px, 3.2vw, 42px); line-height: 1.05; letter-spacing: 1px;
    color: var(--text-dark); margin-bottom: 12px;
  }
  .section-title .accent { color: var(--green); }
  .section-sub {
    font-size: 16px; color: var(--text-muted); line-height: 1.7; max-width: 600px; margin-bottom: 52px;
  }

  /* ─── ABOUT / COACH STYLE ─── */
  .about-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 64px; align-items: stretch; margin-top: 52px;
  }
  .about-img-wrap {
    position: relative; border-radius: 24px; overflow: hidden;
    min-height: 560px; height: 100%;
    flex: 1;
  }
  .about-img-inner {
    border-radius: 20px; overflow: hidden;
    height: 560px; position: relative; z-index: 1;
    box-shadow: 0 32px 80px rgba(0,201,122,0.18);
  }
  .about-img-inner img {
    width: 100%; height: 100%; object-fit: cover; object-position: top center;
    display: block; transition: transform 0.7s ease;
  }
  .about-img-inner:hover img { transform: scale(1.04); }
  .about-img-badge {
    position: absolute; bottom: 24px; left: 24px; z-index: 3;
    background: #fff; border-left: 4px solid var(--green);
    padding: 14px 20px; border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  }
  .about-img-badge-title {
    font-family: 'Oswald', sans-serif; font-size: 20px; letter-spacing: 1px;
    color: var(--text-dark); line-height: 1.2;
  }
  .about-img-badge-sub {
    font-size: 11px; color: var(--green); font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase; margin-top: 2px;
  }
  .about-img-card2 {
    position: absolute; top: 20px; right: -16px; z-index: 3;
    background: var(--green); color: #fff;
    padding: 16px 20px; border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,201,122,0.40);
    text-align: center; min-width: 100px;
  }
  .about-img-card2-num {
    font-family: 'Oswald', sans-serif; font-size: 32px; line-height: 1; color: #fff;
  }
  .about-img-card2-label {
    font-size: 9px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: rgba(255,255,255,0.80); margin-top: 3px;
  }
  .about-img-ring {
    position: absolute; inset: -16px;
    border-radius: 26px; border: 2px dashed rgba(0,185,107,0.20);
    pointer-events: none; z-index: 0;
    animation: ringRotate 20s linear infinite;
  }
  @keyframes ringRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

  .about-text { display: flex; flex-direction: column; justify-content: center; }
  .coach-divider {
    width: 40px; height: 3px;
    background: linear-gradient(90deg, var(--green), rgba(0,201,122,0.2));
    border-radius: 2px; margin: 16px 0 20px;
  }
  .about-text-desc { font-size: 15px; color: var(--text-mid); line-height: 1.85; margin-bottom: 18px; }
  .about-features { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
  .about-feat {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--card-bg); border-radius: 10px;
    padding: 18px 22px; border-left: 4px solid var(--green);
    box-shadow: var(--shadow-sm); transition: all 0.3s;
  }
  .about-feat:hover { transform: translateX(6px); box-shadow: var(--shadow-md); }
  .about-feat-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
  .about-feat-title {
    font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dark); margin-bottom: 4px;
  }
  .about-feat-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

  /* ─── ATHLETE CARDS ─── */
  .athletes-grid {
    display: grid; grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px; margin-top: 52px;
  }
  .athlete-card {
    background: var(--card-bg); border-radius: 16px;
    border: 1px solid var(--border); overflow: hidden;
    transition: all 0.35s; box-shadow: var(--shadow-sm);
  }
  .athlete-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0,201,122,0.18), var(--shadow-lg);
    border-color: rgba(0,201,122,0.25);
  }
  .athlete-card-banner {
    background: linear-gradient(135deg, #0b1728 0%, #122038 60%, #0d2518 100%);
    height: 140px;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
  }
  .athlete-card-banner::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0,201,122,0.12) 0%, transparent 60%);
  }
  .athlete-card-banner::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 40px;
    background: linear-gradient(transparent, rgba(0,201,122,0.08));
    pointer-events: none;
  }
  .athlete-emoji { font-size: 60px; line-height: 1; position: relative; z-index: 1; }
  .athlete-initials {
    position: absolute; top: 12px; left: 14px;
    background: var(--green); color: #fff;
    font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: 1px;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,201,122,0.40);
    z-index: 2;
  }
  .athlete-card-body { padding: 28px 24px 32px; }
  .athlete-name {
    font-family: 'Oswald', sans-serif; font-size: 26px; letter-spacing: 1px;
    color: var(--text-dark); margin-bottom: 10px;
  }
  .athlete-achievement {
    display: inline-flex; align-items: center;
    background: var(--green-light); border: 1px solid rgba(0,201,122,0.25);
    color: var(--green-dark); font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    padding: 5px 12px; border-radius: 20px; margin-bottom: 14px;
    transition: background 0.25s;
  }
  .athlete-card:hover .athlete-achievement {
    background: rgba(0,201,122,0.15);
    border-color: rgba(0,201,122,0.40);
  }
  .athlete-desc { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 18px; }
  .athlete-btn {
    display: inline-block;
    border: 2px solid var(--green); color: var(--green);
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    padding: 8px 18px; border-radius: 4px; text-decoration: none;
    transition: all 0.25s;
  }
  .athlete-btn:hover { background: var(--green); color: #fff; transform: translateY(-2px); }

  /* ─── COMMUNITY ─── */
  .community-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 32px; margin-top: 52px;
  }
  .community-card {
    background: #fff; border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid var(--border);
    transition: all 0.3s;
  }
  .community-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.13); transform: translateY(-4px); }
  .community-card-title {
    font-family: 'Oswald', sans-serif; font-size: 20px; letter-spacing: 1px;
    color: #fff; margin: 0;
    padding: 20px 28px;
    background: var(--green);
  }
  .community-list { list-style: none; display: flex; flex-direction: column; gap: 0; padding: 8px 16px 16px; }
  .community-list li {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 14px; color: var(--text-mid); line-height: 1.5;
    padding: 10px 12px; border-radius: 8px;
    transition: background 0.2s;
  }
  .community-list li:hover { background: rgba(0,201,122,0.06); }
  .community-list li + li { border-top: 1px solid rgba(0,0,0,0.04); }
  .community-list li::before {
    content: ''; display: block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--green); flex-shrink: 0; margin-top: 6px;
  }

  /* ─── CTA STRIP ─── */
  #cta {
    background: var(--green);
    padding: 80px 5vw;
    text-align: center;
  }
  .cta-title {
    font-family: 'Oswald', sans-serif; font-size: clamp(28px, 4vw, 40px);
    letter-spacing: 2px; color: #fff; margin-bottom: 14px; line-height: 1.1;
  }
  .cta-sub {
    font-size: 16px; color: rgba(255,255,255,0.80); margin-bottom: 36px;
    max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.7;
  }
  .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
  .btn-white {
    background: #fff; color: var(--green);
    padding: 12px 28px; border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    text-decoration: none; display: inline-block; transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  }
  .btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }

  /* ─── LEGAL OVERLAY ─── */
  .legal-overlay {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: rgba(11,23,40,0.97); overflow-y: auto;
  }
  .legal-overlay.active { display: block; animation: overlayIn 0.3s ease; }
  @keyframes overlayIn { from { opacity:0; } to { opacity:1; } }
  .legal-inner { max-width: 760px; margin: 0 auto; padding: 60px 24px 80px; }
  .legal-close {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.5);
    cursor: pointer; margin-bottom: 40px; background: none; border: none; transition: color 0.2s; padding: 0;
  }
  .legal-close:hover { color: #fff; }
  .legal-title { font-family: 'Oswald', sans-serif; font-size: clamp(40px, 6vw, 72px); letter-spacing: 2px; color: #fff; margin-bottom: 32px; line-height: 1.05; }
  .legal-section { margin-bottom: 32px; }
  .legal-section h3 { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .legal-section p { font-size: 15px; color: rgba(255,255,255,0.70); line-height: 1.8; margin-bottom: 12px; }
  .legal-section ul { padding-left: 20px; }
  .legal-section ul li { font-size: 15px; color: rgba(255,255,255,0.70); line-height: 1.8; margin-bottom: 6px; }
  .legal-divider { height: 2px; background: var(--green); margin: 8px 0 40px; }

  /* ─── WHATSAPP FLOAT ─── */
  .whatsapp-float {
    position: fixed; bottom: 24px; right: 24px; z-index: 800;
    width: 58px; height: 58px; border-radius: 50%;
    background: #25d366; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 28px rgba(37,211,102,0.45);
    transition: all 0.3s; text-decoration: none;
  }
  .whatsapp-float:hover { transform: scale(1.12); box-shadow: 0 12px 36px rgba(37,211,102,0.55); }

  /* ─── ANIMATIONS ─── */
  @keyframes fadeUp { from { opacity:0; transform: translateY(28px); } to { opacity:1; transform: translateY(0); } }

  .fade-in {
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1);
  }
  .fade-in.visible { opacity: 1; transform: translateY(0); }
  .fade-in-left {
    opacity: 0; transform: translateX(-50px);
    transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
  }
  .fade-in-left.visible { opacity: 1; transform: translateX(0); }
  .fade-in-right {
    opacity: 0; transform: translateX(50px);
    transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
  }
  .fade-in-right.visible { opacity: 1; transform: translateX(0); }
  .fade-in-scale {
    opacity: 0; transform: scale(0.92);
    transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
  }
  .fade-in-scale.visible { opacity: 1; transform: scale(1); }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 900px) {
    nav { padding: 0 4vw; height: 70px; }
    .nav-logo img { height: 56px; }
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .mobile-menu { top: 70px; }

    #hero { padding: 90px 5% 50px; min-height: auto; }
    /* hero inner/image handled by inline scoped styles */

    /* Coach story mobile */
    #coach-story .about-grid { grid-template-columns: 1fr; gap: 40px; }
    #coach-story .about-img-inner { height: 420px; }
    .about-img-card2 { right: -8px; top: 16px; }
    .about-img-ring { display: none; }

    .athletes-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
    .community-grid { grid-template-columns: 1fr; }

    section { padding: 64px 4vw; }
    .stats-strip-inner { grid-template-columns: repeat(2, 1fr); }
    .stats-strip-item:nth-child(2)::after { display: none; }
  }

  @media (max-width: 600px) {
    nav { padding: 0 5vw; height: 64px; }
    .nav-logo img { height: 48px; }
    .mobile-menu { top: 64px; padding: 16px 5vw 22px; }
    .mobile-menu a { font-size: 18px; padding: 10px 0; }
    section { padding: 52px 5vw; }

    #hero { padding: 80px 5% 40px; }
    /* hero inner/image/buttons handled by inline scoped styles */

    .stats-strip-inner { grid-template-columns: repeat(2, 1fr); }
    .stats-strip-item:nth-child(2)::after { display: none; }
    .stats-strip-num { font-size: 34px; }
    .stats-strip-label { font-size: 9px; letter-spacing: 1.5px; }

    .ticker-item { font-size: 14px; padding: 0 24px; }
    .section-title { font-size: clamp(20px, 6.5vw, 30px) !important; }
    .section-tag { font-size: 10px; }

    #coach-story .about-img-inner { height: 340px; }
    .about-img-card2 { display: none; }
    .about-img-badge { bottom: 16px; left: 16px; padding: 10px 14px; }
    .about-img-badge-title { font-size: 16px; }
    .about-img-wrap { overflow: hidden; border-radius: 24px; }

    .athletes-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .athlete-card {
      display: flex !important; flex-direction: row !important;
      border-radius: 16px; width: 100% !important; box-sizing: border-box !important;
    }
    .athlete-card-banner {
      width: 110px !important; min-width: 110px !important;
      height: auto !important; min-height: unset !important;
      flex-direction: column !important;
      align-items: center !important; justify-content: center !important;
      padding: 18px 10px !important;
    }
    .athlete-card-banner::after { display: none; }
    .athlete-emoji { font-size: 44px !important; }
    .athlete-initials { position: relative !important; top: auto !important; left: auto !important; margin-bottom: 8px !important; }
    .athlete-card-body { padding: 16px 16px 18px !important; flex: 1; min-width: 0; }
    .athlete-name { font-size: 18px !important; margin-bottom: 6px !important; }
    .athlete-achievement { font-size: 9px !important; padding: 3px 9px !important; margin-bottom: 8px !important; letter-spacing: 0.8px !important; }
    .athlete-desc { font-size: 12.5px !important; line-height: 1.6 !important; margin-bottom: 10px !important;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .athlete-btn { font-size: 10px !important; padding: 7px 14px !important; }

    .community-grid { grid-template-columns: 1fr; }
    .community-card { padding: 22px 18px; }
    .community-list li { font-size: 13px; padding: 8px 10px; }

    #cta { padding: 60px 5vw; }
    .cta-title { font-size: clamp(24px, 8vw, 32px); }
    .cta-btns { flex-direction: column; align-items: center; }
    .btn-white, .btn-outline-white { width: 100%; max-width: 300px; text-align: center; padding: 14px 20px; }

    .legal-inner { padding: 40px 18px 60px; }
    .legal-title { font-size: clamp(30px, 10vw, 52px); }
    .whatsapp-float { bottom: 18px; right: 18px; width: 52px; height: 52px; }
  }

  @media (max-width: 400px) {
    nav { height: 60px; }
    .nav-logo img { height: 44px; }
    .mobile-menu { top: 60px; }
    .section-title { font-size: clamp(20px, 6vw, 30px) !important; }
  }


  .coach-v2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  .coach-v2-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(26px, 2.8vw, 40px);
    color: var(--text-dark);
    letter-spacing: 1.5px;
    line-height: 1.08;
  }
  .coach-v2-para {
    font-size: 15px; color: var(--text-mid);
    line-height: 1.85; margin-bottom: 16px;
  }
  .coach-v2-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px; margin: 28px 0 28px;
  }
  .coach-v2-stat {
    background: #fff;
    border: 1px solid rgba(0,201,122,0.20);
    border-radius: 10px; padding: 14px 8px;
    text-align: center; transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  }
  .coach-v2-stat:hover {
    border-color: var(--green);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,201,122,0.15);
  }
  .coach-v2-stat-val {
    font-family: 'Oswald', sans-serif; font-size: 24px;
    color: var(--green); line-height: 1; letter-spacing: 1px;
  }
  .coach-v2-stat-lbl {
    font-size: 8px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--text-muted);
    margin-top: 5px; line-height: 1.4;
  }
  .coach-v2-achs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .coach-v2-ach {
    display: flex; gap: 14px; align-items: flex-start;
    background: #fff; border-radius: 10px;
    padding: 14px 18px;
    border-left: 4px solid var(--green);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s;
  }
  .coach-v2-ach:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 20px rgba(0,201,122,0.12);
  }
  .coach-v2-ach-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
  .coach-v2-ach-title {
    font-size: 12px; font-weight: 700;
    color: var(--text-dark); letter-spacing: 0.5px;
    text-transform: uppercase; margin-bottom: 3px;
  }
  .coach-v2-ach-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

  /* Image — sized to the photo's own aspect ratio instead of being
     stretched to match the text column, so the complete photograph
     is visible with no forced cropping and no empty letterbox bars. */
  .coach-v2-img-wrap {
    position: relative; border-radius: 18px; overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.13), 0 0 0 1px rgba(0,201,122,0.12);
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .coach-v2-img-wrap img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    display: block; transition: transform 0.7s ease;
  }
  .coach-v2-img-wrap:hover img { transform: scale(1.03); }
  .coach-v2-img-badge {
    position: absolute; bottom: 24px; left: 24px; right: 24px;
    background: rgba(255,255,255,0.96);
    border-left: 4px solid var(--green);
    padding: 14px 18px; border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
    backdrop-filter: blur(8px);
  }
  .coach-v2-img-badge-name {
    font-family: 'Oswald', sans-serif; font-size: 17px;
    color: var(--text-dark); letter-spacing: 1.5px;
  }
  .coach-v2-img-badge-sub {
    font-size: 10px; color: var(--green); font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase; margin-top: 3px;
  }

  @media (max-width: 768px) {
    .coach-v2-grid { grid-template-columns: 1fr; gap: 36px; }
    .coach-v2-right { order: -1; }
    .coach-v2-img-wrap { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
    .coach-v2-stats { grid-template-columns: repeat(2, 1fr); }
    .coach-v2-achs { grid-template-columns: 1fr; }
  }




    @keyframes champ-orb1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.05)}}
    @keyframes champ-orb2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20px,30px) scale(1.08)}}
    #page-champions .champ-hero-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;width:100%;position:relative;z-index:2}
    #page-champions .champ-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,201,122,0.1);border:1.5px solid rgba(0,201,122,0.3);color:var(--green-dark);padding:6px 16px;border-radius:100px;font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:1.2rem;width:fit-content;font-family:'Inter',sans-serif;animation:champ-fadeUp 0.6s ease both}
    #page-champions .champ-hero-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);animation:champ-blink 2s infinite}
    @keyframes champ-blink{0%,100%{opacity:1}50%{opacity:0.25}}
    @keyframes champ-fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
    @keyframes champ-slideR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
    #page-champions .champ-hero-h1{font-family:'Oswald',sans-serif;font-size:clamp(28px,3.6vw,48px);font-weight:700;color:var(--text-dark);line-height:1.05;margin-bottom:0.9rem;letter-spacing:1.5px;animation:champ-fadeUp 0.6s 0.1s ease both}
    #page-champions .champ-hero-h1 span{color:#00b96b}
    #page-champions .champ-hero-divider{width:52px;height:3px;background:var(--green);border-radius:2px;margin-bottom:1.2rem;animation:champ-fadeUp 0.6s 0.15s ease both}
    #page-champions .champ-hero-sub{font-size:1rem;color:var(--text-mid);line-height:1.8;margin-bottom:2rem;max-width:460px;animation:champ-fadeUp 0.6s 0.2s ease both}
    #page-champions .champ-hero-btns{display:flex;gap:1rem;flex-wrap:wrap;animation:champ-fadeUp 0.6s 0.25s ease both}
    #page-champions .champ-btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:#fff;padding:15px 28px;border-radius:10px;font-family:'Inter',sans-serif;font-size:0.88rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;transition:all 0.25s;box-shadow:0 6px 22px rgba(0,201,122,0.4);border:none;cursor:pointer}
    #page-champions .champ-btn-primary:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,201,122,0.5)}
    #page-champions .champ-btn-outline{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--text-dark);padding:14px 28px;border-radius:10px;font-family:'Inter',sans-serif;font-size:0.88rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;transition:all 0.25s;border:1.5px solid rgba(10,22,40,0.18)}
    #page-champions .champ-btn-outline:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
    #page-champions .champ-hero-right{animation:champ-slideR 0.9s 0.3s cubic-bezier(0.22,1,0.36,1) both}
    #page-champions .champ-img-wrap{position:relative;width:100%;border-radius:20px;overflow:hidden;height:460px}
    #page-champions .champ-img-wrap img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:20px;display:block;box-shadow:0 20px 60px rgba(0,0,0,0.18),0 0 0 1px rgba(0,201,122,0.15);transition:transform 0.7s ease}
    #page-champions .champ-img-wrap:hover img{transform:scale(1.02)}
    #page-champions .champ-img-dot-grid{position:absolute;inset:-10px;z-index:0;pointer-events:none;border-radius:24px;background-image:radial-gradient(circle,rgba(0,201,122,0.18) 1.5px,transparent 1.5px);background-size:26px 26px;animation:champ-dotGrid 6s ease-in-out infinite}
    @keyframes champ-dotGrid{0%,100%{background-position:0 0;opacity:0.7}50%{background-position:13px 13px;opacity:1}}
    #page-champions .champ-img-ring{position:absolute;top:-22px;left:-22px;right:-22px;bottom:-22px;border-radius:28px;border:2px dashed rgba(0,201,122,0.28);pointer-events:none;z-index:1;animation:champ-ringRotate 20s linear infinite}
    @keyframes champ-ringRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
    #page-champions .champ-img-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(50px)}
    #page-champions .champ-img-orb-a{width:260px;height:260px;top:-30px;right:-40px;background:radial-gradient(circle,rgba(0,201,122,0.18) 0%,transparent 70%);animation:champ-orbFloat 8s ease-in-out infinite}
    #page-champions .champ-img-orb-b{width:180px;height:180px;bottom:-20px;left:-30px;background:radial-gradient(circle,rgba(0,201,122,0.12) 0%,transparent 70%);animation:champ-orbFloat 11s 2s ease-in-out infinite reverse}
    @keyframes champ-orbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.05)}}
    @media(max-width:900px){
      #page-champions .champ-hero-inner{grid-template-columns:1fr;gap:2rem}
      #page-champions .champ-hero-right{order:-1}
      #page-champions .champ-img-wrap{height:320px}
      #page-champions .champ-img-ring{display:none}
      #page-champions .champ-hero-sub{text-align:center;max-width:100%}
      #page-champions .champ-hero-btns{justify-content:center}
      #page-champions .champ-hero-divider{margin-left:auto;margin-right:auto}
      #page-champions .champ-hero-badge{margin-left:auto;margin-right:auto}
      #page-champions .champ-hero-h1{text-align:center}
    }
    @media(max-width:600px){
      #page-champions .champ-hero-h1{font-size:clamp(22px,8vw,34px);margin-bottom:0.7rem}
      #page-champions .champ-hero-sub{font-size:0.92rem;line-height:1.7;margin-bottom:1.4rem}
      #page-champions .champ-hero-btns{flex-direction:column;gap:0.7rem}
      #page-champions .champ-btn-primary,#page-champions .champ-btn-outline{width:100%;justify-content:center;padding:14px 20px;font-size:0.82rem}
      #page-champions .champ-img-wrap{height:260px;border-radius:14px}
      #page-champions .champ-img-orb-a,#page-champions .champ-img-orb-b{display:none}
    }
  


  .coach-v2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  .coach-v2-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(26px, 2.8vw, 40px);
    color: var(--text-dark);
    letter-spacing: 1.5px;
    line-height: 1.08;
  }
  .coach-v2-para {
    font-size: 15px; color: var(--text-mid);
    line-height: 1.85; margin-bottom: 16px;
  }
  .coach-v2-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px; margin: 28px 0 28px;
  }
  .coach-v2-stat {
    background: #fff;
    border: 1px solid rgba(0,201,122,0.20);
    border-radius: 10px; padding: 14px 8px;
    text-align: center; transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  }
  .coach-v2-stat:hover {
    border-color: var(--green);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,201,122,0.15);
  }
  .coach-v2-stat-val {
    font-family: 'Oswald', sans-serif; font-size: 24px;
    color: var(--green); line-height: 1; letter-spacing: 1px;
  }
  .coach-v2-stat-lbl {
    font-size: 8px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--text-muted);
    margin-top: 5px; line-height: 1.4;
  }
  .coach-v2-achs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .coach-v2-ach {
    display: flex; gap: 14px; align-items: flex-start;
    background: #fff; border-radius: 10px;
    padding: 14px 18px;
    border-left: 4px solid var(--green);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s;
  }
  .coach-v2-ach:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 20px rgba(0,201,122,0.12);
  }
  .coach-v2-ach-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
  .coach-v2-ach-title {
    font-size: 12px; font-weight: 700;
    color: var(--text-dark); letter-spacing: 0.5px;
    text-transform: uppercase; margin-bottom: 3px;
  }
  .coach-v2-ach-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

  /* Image — sized to the photo's own aspect ratio instead of being
     stretched to match the text column, so the complete photograph
     is visible with no forced cropping and no empty letterbox bars. */
  .coach-v2-img-wrap {
    position: relative; border-radius: 18px; overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.13), 0 0 0 1px rgba(0,201,122,0.12);
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .coach-v2-img-wrap img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    display: block; transition: transform 0.7s ease;
  }
  .coach-v2-img-wrap:hover img { transform: scale(1.03); }
  .coach-v2-img-badge {
    position: absolute; bottom: 24px; left: 24px; right: 24px;
    background: rgba(255,255,255,0.96);
    border-left: 4px solid var(--green);
    padding: 14px 18px; border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
    backdrop-filter: blur(8px);
  }
  .coach-v2-img-badge-name {
    font-family: 'Oswald', sans-serif; font-size: 17px;
    color: var(--text-dark); letter-spacing: 1.5px;
  }
  .coach-v2-img-badge-sub {
    font-size: 10px; color: var(--green); font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase; margin-top: 3px;
  }

  @media (max-width: 768px) {
    .coach-v2-grid { grid-template-columns: 1fr; gap: 36px; }
    .coach-v2-right { order: -1; }
    .coach-v2-img-wrap { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
    .coach-v2-stats { grid-template-columns: repeat(2, 1fr); }
    .coach-v2-achs { grid-template-columns: 1fr; }
  }



/* ══ ATHLETE CARDS — PREMIUM MOBILE REDESIGN ══ */
.athletes-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.athlete-card-v2 {
  background: var(--card-bg);
  border-radius: 18px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.35s;
  display: flex;
  flex-direction: column;
}
.athlete-card-v2:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,201,122,0.18);
  border-color: rgba(0,201,122,0.3);
}
.acv2-header {
  background: linear-gradient(135deg, #0b1728 0%, #102035 60%, #0d2818 100%);
  padding: 28px 24px 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  min-height: 130px;
}
.acv2-header::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,201,122,0.15) 0%, transparent 65%);
}
.acv2-header::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 50px;
  background: linear-gradient(transparent, rgba(0,201,122,0.07));
}
.acv2-medal {
  font-size: 56px;
  line-height: 1;
  position: relative; z-index: 2;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  flex-shrink: 0;
}
.acv2-header-info { position: relative; z-index: 2; flex: 1; }
.acv2-initials {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,201,122,0.45); margin-bottom: 8px;
}
.acv2-rank {
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--green);
}
.acv2-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.acv2-name {
  font-family: 'Oswald', sans-serif; font-size: 24px; letter-spacing: 1px;
  color: var(--text-dark); line-height: 1.1; margin-bottom: 10px;
}
.acv2-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,201,122,0.08); border: 1px solid rgba(0,201,122,0.22);
  color: #009a5c; font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 20px; margin-bottom: 14px;
}
.acv2-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.acv2-desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.7; flex: 1; margin-bottom: 18px; }
.acv2-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid var(--green); color: var(--green);
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 9px 18px; border-radius: 6px; text-decoration: none;
  transition: all 0.25s; width: fit-content;
}
.acv2-btn:hover { background: var(--green); color: #fff; transform: translateY(-2px); }
.acv2-btn svg { transition: transform 0.2s; }
.acv2-btn:hover svg { transform: translateX(3px); }

/* ══ MOBILE — FULL-WIDTH VERTICAL PROFILE CARDS ══ */
@media (max-width: 900px) {
  .athletes-grid-v2 { grid-template-columns: 1fr !important; gap: 16px !important; }
}

@media (max-width: 768px) {
  .athletes-grid-v2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 24px !important;
    width: 100% !important;
  }

  /* Full-width vertical card — 1 per row */
  .athlete-card-v2 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border-top: 3px solid #00c97a !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: 0 3px 18px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.05) !important;
    background: #ffffff !important;
    transition: none !important;
  }
  .athlete-card-v2:hover { transform: none !important; box-shadow: 0 3px 18px rgba(0,0,0,0.09) !important; }
  .athlete-card-v2:active { opacity: 0.95 !important; }

  /* Full-width top header banner */
  .acv2-header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 84px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    padding: 20px 20px 16px !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #0b1728 0%, #102035 60%, #0d2818 100%) !important;
  }
  .acv2-header::before {
    content: '' !important;
    position: absolute !important; inset: 0 !important;
    background: linear-gradient(135deg, rgba(0,201,122,0.12) 0%, transparent 60%) !important;
    border-radius: 0 !important;
  }
  .acv2-header::after { display: none !important; }

  /* Large medal */
  .acv2-medal {
    font-size: 48px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    filter: drop-shadow(0 3px 10px rgba(0,0,0,0.5)) !important;
  }

  /* Initials + rank visible next to medal */
  .acv2-header-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    position: relative !important;
    z-index: 2 !important;
    flex: 1 !important;
  }
  .acv2-initials {
    display: inline-flex !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 12px !important;
    margin-bottom: 0 !important;
  }
  .acv2-rank {
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
    line-height: 1.3 !important;
    color: #00c97a !important;
  }

  /* Card body — full width, generous padding */
  .acv2-body {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: unset !important;
    padding: 18px 20px 20px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
  }

  /* Name: large, fully readable */
  .acv2-name {
    font-size: 21px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    color: #0a1628 !important;
    margin-bottom: 9px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: normal !important;
  }

  /* Green achievement badge */
  .acv2-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: 100% !important;
    width: auto !important;
    background: rgba(0,201,122,0.08) !important;
    border: 1px solid rgba(0,201,122,0.25) !important;
    color: #008a52 !important;
  }

  /* Description: full text, comfortable reading */
  .acv2-desc {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    color: #5a6b7c !important;
    margin-bottom: 16px !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }

  /* See More button */
  .acv2-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    padding: 9px 18px !important;
    border-radius: 7px !important;
    border: 2px solid #00c97a !important;
    border-width: 2px !important;
    color: #00c97a !important;
    background: transparent !important;
    text-decoration: none !important;
    width: fit-content !important;
    margin-top: 0 !important;
  }
}



/* ════════════════════════════════════════════════════════════
   ATHLETES COACHED — FINAL MOBILE OVERRIDE
   Full-width vertical profile cards, 1 per row.
   Overrides ALL previous mobile rules for this section.
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Grid: single column, clean vertical stack */
  .athletes-grid-v2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    flex-direction: unset !important;
    gap: 16px !important;
    margin-top: 28px !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  /* Card: full-width vertical layout — NOT horizontal */
  .athlete-card-v2 {
    display: flex !important;
    flex-direction: column !important;   /* vertical stack */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.05) !important;
    background: #ffffff !important;
    border-top: 3px solid #00c97a !important;
  }
  .athlete-card-v2:hover { transform: none !important; }
  .athlete-card-v2:active { opacity: 0.96 !important; }

  /* Header: full-width dark banner at top of card */
  .acv2-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 20px 16px !important;
    gap: 14px !important;
    background: linear-gradient(135deg, #0b1728 0%, #0d2818 100%) !important;
    box-sizing: border-box !important;
  }
  .acv2-header::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(0,201,122,0.12) 0%, transparent 60%) !important;
    border-radius: 0 !important;
  }
  .acv2-header::after { display: none !important; }

  /* Medal: large, prominent */
  .acv2-medal {
    font-size: 48px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 3px 10px rgba(0,0,0,0.5)) !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Initials + rank: shown inline next to medal */
  .acv2-header-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    position: relative !important;
    z-index: 2 !important;
    flex: 1 !important;
  }
  .acv2-initials {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
    margin-bottom: 0 !important;
  }
  .acv2-rank {
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    color: #00c97a !important;
    line-height: 1.3 !important;
  }

  /* Body: full-width, generous padding */
  .acv2-body {
    display: flex !important;
    flex-direction: column !important;
    flex: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 18px 20px 20px !important;
    background: #ffffff !important;
  }

  /* Name: large, readable */
  .acv2-name {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    color: #0a1628 !important;
    margin-bottom: 10px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* Badge: green uppercase tag */
  .acv2-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    padding: 5px 12px !important;
    margin-bottom: 12px !important;
    border-radius: 20px !important;
    background: rgba(0,201,122,0.08) !important;
    border: 1px solid rgba(0,201,122,0.25) !important;
    color: #008a52 !important;
    white-space: normal !important;
    overflow: visible !important;
    max-width: 100% !important;
  }

  /* Description: full text, comfortable reading */
  .acv2-desc {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    color: #5a6b7c !important;
    margin-bottom: 16px !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }

  /* CTA button */
  .acv2-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    padding: 9px 18px !important;
    border-radius: 7px !important;
    border: 2px solid #00c97a !important;
    color: #00c97a !important;
    background: transparent !important;
    text-decoration: none !important;
    width: fit-content !important;
    margin-top: auto !important;
  }
}



  :root {
    --green: #00C97A;
    --green-dark: #009a5c;
    --green-light: rgba(0,201,122,0.10);
    --navy: #0b1728;
    --white: #ffffff;
    --off-white: #f7f9fc;
    --card-bg: #ffffff;
    --text-dark: #0d1b2a;
    --text-mid: #2d4060;
    --text-muted: #6b7fa0;
    --border: rgba(0,0,0,0.08);
    --shadow-sm: 0 2px 12px rgba(0,0,0,0.07);
    --shadow-md: 0 8px 32px rgba(0,0,0,0.10);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.13);
    --shadow-green: 0 8px 32px rgba(0,201,122,0.25);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Inter', sans-serif; background: var(--white); color: var(--text-dark); overflow-x: hidden; }
  #progress-bar { position:fixed; top:0; left:0; height:3px; z-index:9999; background:linear-gradient(90deg,var(--green),#00f598); width:0%; transition:width 0.1s; }
  nav { position:fixed; top:0; left:0; right:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; padding:0 4vw; height:72px; background: rgba(255,255,255,0.96); border-bottom: 2px solid var(--green); backdrop-filter:blur(16px); box-shadow: 0 2px 20px rgba(0,0,0,0.08); transition:box-shadow 0.3s, background 0.3s; }
  nav.scrolled { box-shadow:0 4px 30px rgba(0,0,0,0.13); }
  .nav-logo { text-decoration:none; display:flex; align-items:center; flex-shrink:0; }
  .nav-logo img { height:54px; width:auto; display:block; mix-blend-mode: multiply; filter: contrast(1.05); transition: opacity 0.2s; }
  .nav-logo img:hover { filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(0,201,122,0.6)); transform: scale(1.03); }
  .nav-logo span { display: none; }
  .nav-links { display:flex; gap:2px; list-style:none; align-items:center; }
  .nav-links a { color: var(--text-mid); text-decoration:none; font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; padding:7px 11px; border-radius:4px; transition:all 0.2s; white-space:nowrap; position:relative; }
  .nav-links a::after { content:''; position:absolute; bottom:2px; left:50%; right:50%; height:2px; background:var(--green); border-radius:2px; transition:left 0.2s, right 0.2s; }
  .nav-links a:hover { color:var(--green); background:var(--green-light); }
  .nav-links a:hover::after { left:11px; right:11px; }
  .nav-links a.active { color:var(--green); }
  .nav-links a.active::after { left:11px; right:11px; }
  .nav-cta { background:var(--green)!important; color:#0b1728!important; border-radius:5px; padding:9px 18px!important; font-weight:800!important; font-size:11.5px!important; letter-spacing:1.5px!important; box-shadow:0 4px 18px rgba(0,201,122,0.35)!important; }
  .nav-cta::after { display:none!important; }
  .nav-cta:hover { background:#00e68a!important; transform:translateY(-1px); box-shadow:0 6px 24px rgba(0,201,122,0.5)!important; color:#0b1728!important; }
  .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; }
  .hamburger span { width:24px; height:2px; background:var(--text-dark); display:block; transition:0.3s; border-radius:2px; }
  .hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
  .hamburger.open span:nth-child(2) { opacity:0; }
  .hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
  .mobile-menu { display:none; flex-direction:column; position:fixed; top:72px; left:0; right:0; z-index:999; background: #ffffff; padding:20px 5vw 28px; border-bottom:2px solid var(--green); box-shadow:0 8px 24px rgba(0,0,0,0.1); }
  .mobile-menu.open { display:flex; animation:slideDown 0.25s ease; }
  @keyframes slideDown { from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:translateY(0);} }
  .mobile-menu a { color: var(--text-dark); text-decoration:none; font-family:'Inter',sans-serif; font-size:20px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:12px 0; border-bottom: 1px solid rgba(0,0,0,0.06); transition:color 0.2s; }
  .mobile-menu a:hover { color:var(--green); }
  .mobile-menu a.mobile-cta { background:var(--green); color:#fff!important; text-align:center; border-radius:6px; padding:14px; margin-top:10px; border:none; }

  /* ── SECTION BASE ── */
  .policy-section {
    padding: 80px 5vw;
  }
  .policy-section:first-of-type {
    padding-top: 80px;
  }
  .policy-section:nth-child(odd) { background: var(--white); }
  .policy-section:nth-child(even) { background: var(--off-white); }
  .policy-section-inner { max-width: 860px; margin: 0 auto; }

  .section-tag {
    font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:4px; text-transform:uppercase;
    color:var(--green); margin-bottom:10px; display:flex; align-items:center; gap:8px;
  }
  .section-tag::before { content:''; display:block; width:30px; height:2px; background:var(--green); border-radius:2px; }
  .section-title {
    font-family:'Oswald',sans-serif; font-size:clamp(26px,3.2vw,42px); letter-spacing:1px;
    color:var(--text-dark); line-height:1.05; margin-bottom:28px;
  }
  .policy-divider {
    width:100%; height:2px; background:linear-gradient(90deg,var(--green),rgba(0,201,122,0.08));
    border-radius:2px; margin-bottom:32px;
  }

  /* ── POLICY CONTENT BLOCKS ── */
  .policy-block { margin-bottom: 32px; }
  .policy-block-title {
    font-family:'Inter',sans-serif; font-size:13px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
    color:var(--green); margin-bottom:10px; padding-bottom:8px;
    border-bottom:1px solid rgba(0,201,122,0.18);
  }
  .policy-block p {
    font-family:'Inter',sans-serif; font-size:15px; color:var(--text-mid); line-height:1.85; margin-bottom:10px;
  }
  .policy-block ul {
    padding-left: 0; list-style: none; display:flex; flex-direction:column; gap:8px; margin-top:4px;
  }
  .policy-block ul li {
    font-family:'Inter',sans-serif; font-size:15px; color:var(--text-mid); line-height:1.75;
    padding-left:22px; position:relative;
  }
  .policy-block ul li::before {
    content:''; position:absolute; left:0; top:10px;
    width:7px; height:7px; border-radius:50%; background:var(--green); flex-shrink:0;
  }

  /* ── MISSION INTRO BOX ── */
  .mission-box {
    background:var(--white); border-left:5px solid var(--green); border-radius:0 12px 12px 0;
    padding:28px 32px; box-shadow:var(--shadow-md);
    font-family:'Inter',sans-serif; font-size:16px; color:var(--text-mid); line-height:1.9;
    margin-bottom:0;
  }

  /* ── MISSION STATEMENT CARDS ── */
  .mission-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 36px;
  }
  .mission-card {
    background: var(--white);
    border-radius: 14px;
    padding: 28px 24px 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    border: 1px solid rgba(0,201,122,0.10);
    position: relative;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s;
  }
  .mission-card::before {
    content: '';
    position: absolute; top:0; left:0; right:0; height:4px;
    background: linear-gradient(90deg, var(--green), rgba(0,201,122,0.3));
    border-radius: 14px 14px 0 0;
  }
  .mission-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,0.11); }
  .mission-card-num {
    font-family: 'Oswald', sans-serif;
    font-size: 42px; font-weight: 700; line-height: 1;
    color: rgba(0,201,122,0.18);
    position: absolute; top: 14px; right: 20px;
    letter-spacing: -1px;
    user-select: none;
  }
  .mission-card-icon {
    width: 42px; height: 42px; border-radius: 10px;
    background: rgba(0,201,122,0.10);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; margin-bottom: 14px;
  }
  .mission-card-title {
    font-family: 'Oswald', sans-serif;
    font-size: 15px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--text-dark); margin-bottom: 8px; line-height: 1.3;
  }
  .mission-card p {
    font-family: 'Inter', sans-serif;
    font-size: 14px; color: var(--text-muted); line-height: 1.75;
    margin: 0;
  }
  .mission-signed {
    display: flex; align-items: center; gap: 12px;
    margin-top: 32px; padding: 20px 24px;
    background: rgba(0,201,122,0.06); border-radius: 10px;
    border: 1px solid rgba(0,201,122,0.15);
  }
  .mission-signed-icon { font-size: 22px; flex-shrink: 0; }
  .mission-signed-text { font-family:'Inter',sans-serif; font-size:13px; color:var(--text-muted); line-height:1.6; }
  .mission-signed-text strong { color: var(--text-dark); }

  /* ── MEMBERSHIP T&C ACCORDION ── */
  .tc-intro {
    background: var(--navy); color: rgba(255,255,255,0.88);
    border-radius: 14px; padding: 24px 28px; margin-bottom: 28px;
    font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.8;
    border-left: 5px solid var(--green);
  }
  .tc-intro strong { color: var(--green); }
  .tc-accordion { display: flex; flex-direction: column; gap: 10px; }
  .tc-item {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
  }
  .tc-item.open { box-shadow: 0 6px 24px rgba(0,0,0,0.09); }
  .tc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; cursor: pointer;
    gap: 12px; user-select: none;
  }
  .tc-header:hover { background: rgba(0,201,122,0.04); }
  .tc-header-left { display: flex; align-items: center; gap: 14px; }
  .tc-header-icon {
    width: 36px; height: 36px; border-radius: 8px;
    background: rgba(0,201,122,0.10);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
  }
  .tc-item.open .tc-header-icon { background: var(--green); }
  .tc-header-title {
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 700; letter-spacing: 0.5px;
    color: var(--text-dark);
  }
  .tc-chevron {
    flex-shrink: 0; width: 22px; height: 22px;
    border-radius: 50%; border: 1.5px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.25s, background 0.2s, border-color 0.2s;
    color: var(--text-muted); font-size: 12px;
  }
  .tc-item.open .tc-chevron {
    transform: rotate(180deg);
    background: var(--green); border-color: var(--green); color: #fff;
  }
  .tc-body {
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
  }
  .tc-item.open .tc-body { max-height: 500px; }
  .tc-body-inner {
    padding: 0 22px 22px 22px;
    border-top: 1px solid rgba(0,201,122,0.10);
    padding-top: 16px;
  }
  .tc-body-inner p {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px; color: var(--text-mid); line-height: 1.85; margin-bottom: 10px;
  }
  .tc-body-inner p:last-child { margin-bottom: 0; }
  .tc-body-inner ul {
    padding-left: 0; list-style: none;
    display: flex; flex-direction: column; gap: 8px; margin-top: 4px;
  }
  .tc-body-inner ul li {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px; color: var(--text-mid); line-height: 1.75;
    padding-left: 22px; position: relative;
  }
  .tc-body-inner ul li::before {
    content: ''; position: absolute; left: 0; top: 9px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  }
  .tc-body-inner a { color: var(--green); text-decoration: none; font-weight: 600; }
  .tc-body-inner a:hover { text-decoration: underline; }
  .tc-highlight {
    background: rgba(0,201,122,0.06); border-left: 3px solid var(--green);
    border-radius: 0 8px 8px 0; padding: 10px 14px; margin-top: 10px;
    font-size: 13px; color: var(--text-mid); font-style: italic;
  }
  .tc-chairman-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--green); color: #0b1728;
    padding: 6px 14px; border-radius: 20px;
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase; margin-top: 20px;
  }

  @media (max-width: 700px) {
    .mission-cards-grid { grid-template-columns: 1fr; }
    .tc-header { padding: 15px 16px; }
    .tc-body-inner { padding: 0 16px 18px; padding-top: 14px; }
  }

  /* ── ANIMATIONS ── */
  .fade-in { opacity:0; transform:translateY(32px); transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1),transform 0.7s cubic-bezier(0.22,1,0.36,1); }
  .fade-in.visible { opacity:1; transform:translateY(0); }

  /* ── FOOTER (reuse existing) ── */
  footer {
    background: #0b1728 !important;
    padding: 56px 5vw 0 !important;
    color: rgba(255,255,255,0.7) !important;
  }
  .footer-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
    gap: 48px !important;
    padding-bottom: 40px !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }
  .footer-logo-img { height: 70px !important; width: 70px !important; display:block; margin-bottom:12px; }
  .footer-logo-text { font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:3px; color:rgba(255,255,255,0.45)!important; text-transform:uppercase; margin-bottom:8px; }
  .footer-logo-text span { color:var(--green)!important; }
  .footer-tagline { font-size:13px; color:rgba(255,255,255,0.45)!important; line-height:1.7; max-width:280px; }
  .footer-col-title { font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:#00C97A!important; margin-bottom:18px; }
  .footer-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
  .footer-links a, .footer-links li { font-size:14px; color:#00C97A!important; text-decoration:none; transition:color 0.2s; }
  .footer-links a:hover { color:#fff!important; }
  .footer-bottom { display:flex; align-items:center; justify-content:space-between; padding:18px 0; background:rgba(0,0,0,0.25)!important; border-top:1px solid rgba(255,255,255,0.07); flex-wrap:wrap; gap:10px; }
  .footer-bottom span { font-size:12px; color:rgba(255,255,255,0.45)!important; }
  .footer-legal { display:flex; gap:20px; flex-wrap:wrap; }
  .footer-legal a { font-size:12px; color:rgba(255,255,255,0.45)!important; text-decoration:none; transition:color 0.2s; }
  .footer-legal a:hover { color:#00C97A!important; }

  /* WHATSAPP */
  .whatsapp-float { position:fixed; bottom:24px; right:24px; z-index:9998; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px rgba(37,211,102,0.50); transition:all 0.25s; text-decoration:none; }
  .whatsapp-float:hover { transform:scale(1.1); box-shadow:0 10px 34px rgba(37,211,102,0.60); }

  @media (max-width: 900px) {
    nav { padding:0 4vw; height:70px; }
    .nav-logo img { height:56px; }
    .nav-links { display:none; }
    .hamburger { display:flex; }
    .mobile-menu { top:70px; }
    .policy-section { padding:56px 4vw; }
  }
  @media (max-width: 600px) {
    .footer-grid { grid-template-columns:1fr!important; gap:28px!important; text-align:center!important; }
    .footer-tagline { max-width:100%!important; }
    .footer-bottom { flex-direction:column!important; text-align:center!important; }
    .footer-legal { justify-content:center!important; }
  }



/* ── POLICY HERO (matches Contact page style) ── */
#policy-hero {
  min-height: auto;
  display: flex;
  align-items: center;
  padding: 88px 5% 56px;
  background: linear-gradient(140deg, #f0faf5 0%, #ffffff 55%, #eaf7f1 100%);
  position: relative;
  overflow: hidden;
}
.ph-dot-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0,201,122,0.12) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  pointer-events: none; z-index: 0;
}
.ph-accent-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
  z-index: 1;
}
.ph-orb1 {
  position: absolute; top: 8%; right: 10%;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,201,122,0.08) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
  animation: phOrb1 8s ease-in-out infinite;
}
.ph-orb2 {
  position: absolute; bottom: 10%; left: 8%;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,201,122,0.06) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
  animation: phOrb2 10s ease-in-out infinite;
}
@keyframes phOrb1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-20px) scale(1.05)} }
@keyframes phOrb2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-20px,30px) scale(1.08)} }
.ph-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
  width: 100%; position: relative; z-index: 2;
}
.ph-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,201,122,0.1); border: 1.5px solid rgba(0,201,122,0.3);
  color: var(--green-dark); padding: 6px 16px; border-radius: 100px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 1.2rem; width: fit-content;
  font-family: 'Inter', sans-serif;
  animation: phUp 0.6s ease both;
}
.ph-badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); animation: phBlink 2s infinite;
}
@keyframes phUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes phBlink { 0%,100%{opacity:1} 50%{opacity:0.25} }
.ph-h1 {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 700; color: var(--text-dark);
  line-height: 1.05; margin-bottom: 0.9rem;
  letter-spacing: 1.5px;
  animation: phUp 0.6s 0.1s ease both;
}
.ph-h1 span { color: #00b96b; }
.ph-divider {
  width: 52px; height: 3px; background: var(--green);
  border-radius: 2px; margin-bottom: 1.2rem;
  animation: phUp 0.6s 0.15s ease both;
}
.ph-sub {
  font-size: 1rem; color: var(--text-mid); line-height: 1.8;
  margin-bottom: 2rem; max-width: 460px;
  animation: phUp 0.6s 0.2s ease both;
}
.ph-btns {
  display: flex; gap: 1rem; flex-wrap: wrap;
  animation: phUp 0.6s 0.25s ease both;
}
.ph-btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--green); color: #fff;
  padding: 15px 28px; border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: 0.88rem;
  font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; transition: all 0.25s;
  box-shadow: 0 6px 22px rgba(0,201,122,0.4);
}
.ph-btn-primary:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,201,122,0.5); }
.ph-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--text-dark);
  padding: 14px 28px; border-radius: 10px;
  font-family: 'Inter', sans-serif; font-size: 0.88rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; transition: all 0.25s;
  border: 1.5px solid rgba(10,22,40,0.18);
}
.ph-btn-secondary:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }

/* Right — image card */
.ph-right {
  animation: phSlideR 0.9s 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes phSlideR { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
.ph-img-wrap {
  position: relative; width: 100%;
  border-radius: 20px; overflow: visible;
}
.ph-img-wrap img {
  position: relative; z-index: 2;
  width: 100%; border-radius: 20px; display: block;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,201,122,0.15);
  transition: transform 0.7s ease;
  object-fit: cover; max-height: 480px;
}
.ph-img-wrap:hover img { transform: scale(1.02); }
.ph-dot-bg {
  position: absolute; inset: -10px; z-index: 0; pointer-events: none;
  border-radius: 24px;
  background-image: radial-gradient(circle, rgba(0,201,122,0.18) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  animation: phDotShift 6s ease-in-out infinite;
}
@keyframes phDotShift { 0%,100%{background-position:0 0;opacity:0.7} 50%{background-position:13px 13px;opacity:1} }
.ph-img-ring {
  position: absolute; top: -22px; left: -22px; right: -22px; bottom: -22px;
  border-radius: 28px; border: 2px dashed rgba(0,201,122,0.28);
  pointer-events: none; z-index: 1;
  animation: phRingRotate 20s linear infinite;
}
@keyframes phRingRotate { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.ph-orb-a {
  position: absolute; width: 260px; height: 260px; top: -30px; right: -40px;
  background: radial-gradient(circle, rgba(0,201,122,0.18) 0%, transparent 70%);
  border-radius: 50%; filter: blur(50px); pointer-events: none; z-index: 0;
  animation: phOrbFloat 8s ease-in-out infinite;
}
.ph-orb-b {
  position: absolute; width: 180px; height: 180px; bottom: -20px; left: -30px;
  background: radial-gradient(circle, rgba(0,201,122,0.12) 0%, transparent 70%);
  border-radius: 50%; filter: blur(50px); pointer-events: none; z-index: 0;
  animation: phOrbFloat 11s 2s ease-in-out infinite reverse;
}
@keyframes phOrbFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-18px) scale(1.05)} }

/* Info pills on image */
.ph-info-card {
  background: var(--navy); border-radius: 24px; padding: 2rem;
  box-shadow: 0 0 0 1px rgba(0,201,122,0.2), 0 20px 60px rgba(0,201,122,0.12), 0 8px 32px rgba(10,22,40,0.3);
  position: relative; overflow: hidden;
}
.ph-info-card::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle,rgba(0,201,122,0.12) 0%,transparent 70%);
  pointer-events: none;
}
.ph-card-title {
  font-family: 'Oswald', sans-serif; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin-bottom: 1.4rem;
}
.ph-card-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ph-card-item:last-child { border-bottom: none; padding-bottom: 0; }
.ph-card-icon { font-size: 1.6rem; flex-shrink: 0; width: 44px; text-align: center; }
.ph-card-info { display: flex; flex-direction: column; gap: 2px; }
.ph-card-label {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.4); font-family: 'Inter', sans-serif;
}
.ph-card-value {
  font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.92);
  font-family: 'Inter', sans-serif;
}
.ph-card-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(0,201,122,0.15); border: 1px solid rgba(0,201,122,0.3);
  color: var(--green); padding: 4px 10px; border-radius: 100px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  margin-top: 4px; font-family: 'Inter', sans-serif;
}
.ph-card-badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--green); animation: phBlink 2s infinite;
}

/* Stats strip */
.ph-stats-strip {
  background: var(--white); border-top: 3px solid var(--green);
  border-bottom: 1px solid rgba(0,201,122,0.12);
  padding: 0 5%; box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.ph-stats-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
}
.ph-stat { text-align: center; padding: 28px 20px; position: relative; }
.ph-stat:not(:last-child)::after {
  content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px;
  background: rgba(0,201,122,0.20);
}
.ph-stat-num {
  font-family: 'Oswald', sans-serif; font-size: 2.4rem; font-weight: 700;
  color: var(--green); display: block; line-height: 1; letter-spacing: 1px;
}
.ph-stat-label {
  font-size: 0.72rem; color: var(--text-muted); margin-top: 6px;
  font-weight: 700; font-family: 'Inter', sans-serif;
  letter-spacing: 2.5px; text-transform: uppercase;
}

/* Ticker */
.ph-ticker { background: var(--green); padding: 14px 0; overflow: hidden; }
.ph-ticker-track { display: flex; white-space: nowrap; animation: phTicker 28s linear infinite; }
@keyframes phTicker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ph-ticker-item {
  font-family: 'Oswald', sans-serif; font-size: 0.92rem; font-weight: 600;
  color: #fff; letter-spacing: 0.08em; padding: 0 24px;
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 16px;
}
.ph-ticker-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); flex-shrink: 0; }

/* Responsive */
@media (max-width: 900px) {
  #policy-hero { padding: 90px 5% 40px; }
  .ph-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .ph-right { order: -1; }
  .ph-img-wrap img { max-height: 320px; object-fit: cover; }
  .ph-img-ring { display: none; }
  .ph-stats-inner { grid-template-columns: repeat(2, 1fr); }
  .ph-stat:nth-child(2)::after { display: none; }
}
@media (max-width: 600px) {
  #policy-hero { padding: 80px 5% 36px; min-height: auto; }
  .ph-h1 { font-size: clamp(26px, 8vw, 38px); }
  .ph-sub { font-size: 0.92rem; }
  .ph-btns { flex-direction: column; }
  .ph-btn-primary, .ph-btn-secondary { width: 100%; justify-content: center; }
  .ph-orb-a, .ph-orb-b { display: none; }
  .ph-img-wrap img { max-height: 240px; border-radius: 14px; }
  .ph-stats-inner { grid-template-columns: repeat(2, 1fr); }
  .ph-ticker-item { font-size: 14px; padding: 0 18px; }
  .ph-stat-num { font-size: 1.9rem; }
}



/* ===== HERO IMAGE CONSISTENCY FIX (added) =====
   Standardizes hero image box across all inner pages so images no longer
   appear "chota/bara" (small/big) inconsistently between pages. */
.ca-img-wrap, .champ-img-wrap, .mem-img-wrap, .ph-img-wrap, .svc-img-wrap, .venue-img-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}
.ca-img-wrap img, .champ-img-wrap img, .mem-img-wrap img, .ph-img-wrap img, .svc-img-wrap img, .venue-img-wrap img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,201,122,0.15) !important;
  display: block !important;
  transition: transform 0.7s ease;
}
@media (max-width: 900px) {
  .ca-img-wrap, .champ-img-wrap, .mem-img-wrap, .ph-img-wrap, .svc-img-wrap, .venue-img-wrap { aspect-ratio: 3 / 2 !important; }
}
@media (max-width: 600px) {
  .ca-img-wrap, .champ-img-wrap, .mem-img-wrap, .ph-img-wrap, .svc-img-wrap, .venue-img-wrap { aspect-ratio: 4 / 3 !important; }
}
/* Legal pages standalone layout */
.legal-page-hero{background:linear-gradient(140deg,#f0faf5 0%,#ffffff 55%,#eaf7f1 100%);padding:70px 5% 40px;text-align:center}
.legal-page-hero h1{font-family:'Oswald',sans-serif;font-size:clamp(28px,4vw,42px);font-weight:700;color:var(--text-dark, #0A1220);letter-spacing:1px;margin:0 0 8px}
.legal-page-hero p{color:var(--text-muted,#667085);font-family:'Inter',sans-serif;font-size:0.9rem}
.legal-page-body{max-width:860px;margin:0 auto;padding:50px 5% 90px}
.legal-page-body h3{font-family:'Oswald',sans-serif;font-size:1.15rem;margin:1.8rem 0 0.6rem;color:var(--text-dark,#0A1220)}
.legal-page-body p, .legal-page-body li{font-family:'Inter',sans-serif;font-size:0.97rem;line-height:1.7;color:var(--text-mid,#3a4557)}
.legal-page-body ul{padding-left:1.3rem}


/* ===== NEW FOOTER (footer2) ===== */

  .footer2{position:relative;background:#18002F;padding:60px 60px 0;overflow:hidden;}
  .footer2-cta{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:36px;}
  .footer2-cta h2{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(22px,3vw,32px);letter-spacing:0.5px;color:#25D366;margin:0 0 8px;}
  .footer2-cta p{font-family:'Inter',sans-serif;font-size:14px;color:rgba(255,255,255,0.8);margin:0;}
  .footer2-cta-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}
  .footer2-paddle-box{width:44px;height:44px;border-radius:8px;background:#fff;border:1px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:5px;}
  .footer2-paddle-box img{width:100%;height:100%;object-fit:contain;}
  .footer2-whatsapp{display:inline-flex;align-items:center;gap:9px;border:1.5px solid rgba(37,211,102,0.45);color:#25D366;padding:12px 22px;border-radius:6px;font-family:'Inter',sans-serif;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:all 0.2s;background:rgba(37,211,102,0.05);}
  .footer2-whatsapp:hover{background:rgba(37,211,102,0.14);border-color:#25D366;}
  .footer2-divider{border:none;border-top:1px solid rgba(255,255,255,0.08);margin:0;}
  .footer2-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding:44px 0 36px;}
  .footer2-brand-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
  .footer2-logo-box{width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;padding:6px;}
  .footer2-logo-box img{width:100%;height:100%;object-fit:contain;}
  .footer2-brand-name{font-family:'Oswald',sans-serif;font-weight:700;font-size:16px;color:#00C97A;margin:0;}
  .footer2-brand-sub{font-family:'Inter',sans-serif;font-size:12px;color:rgba(255,255,255,0.7);margin:3px 0 0;}
  .footer2-desc{font-family:'Inter',sans-serif;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,0.8);margin:0 0 20px;max-width:360px;}
  .footer2-social{display:flex;gap:10px;}
  .footer2-social a{width:38px;height:38px;border-radius:9px;background:rgba(0,201,122,0.14);border:1px solid rgba(0,201,122,0.25);display:flex;align-items:center;justify-content:center;color:#00C97A;text-decoration:none;transition:all 0.2s;}
  .footer2-social a:hover{background:var(--green);border-color:var(--green);}
  .footer2-social a:hover svg{stroke:#18002F;}
  .footer2-social a:hover svg[fill="#00C97A"]{fill:#18002F;}
  .footer2-social a:hover svg polygon{fill:#00C97A;}
  .footer2-col-title{font-family:'Inter',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:#25D366;margin-bottom:18px;}
  .footer2-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
  .footer2-links a{font-family:'Inter',sans-serif;font-size:13.5px;color:rgba(255,255,255,0.85);text-decoration:none;transition:color 0.2s;}
  .footer2-links a:hover{color:var(--green);}
  .footer2-query-item{display:flex;align-items:flex-start;gap:11px;margin-bottom:16px;}
  .footer2-query-icon{width:32px;height:32px;border-radius:7px;background:rgba(0,201,122,0.14);border:1px solid rgba(0,201,122,0.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .footer2-query-icon svg{width:15px;height:15px;}
  .footer2-query-text{font-family:'Inter',sans-serif;font-size:13.5px;color:rgba(255,255,255,0.85);line-height:1.5;padding-top:6px;}
  .footer2-query-text a{color:inherit;text-decoration:none;}
  .footer2-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:22px 0;}
  .footer2-bottom span{font-family:'Inter',sans-serif;font-size:12.5px;color:rgba(255,255,255,0.65);}
  .footer2-legal{display:flex;gap:26px;}
  .footer2-legal a{font-family:'Inter',sans-serif;font-size:12.5px;color:rgba(255,255,255,0.65);text-decoration:none;transition:color 0.2s;}
  .footer2-legal a:hover{color:var(--green);}
  .footer2-totop{position:fixed;right:26px;bottom:26px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;transition:all 0.2s;z-index:400;backdrop-filter:blur(6px);}
  .footer2-totop:hover{background:var(--green);border-color:var(--green);}
  @media (max-width:900px){.footer2{padding:44px 24px 0;}.footer2-grid{grid-template-columns:1fr 1fr;gap:32px 24px;}}
  @media (max-width:560px){.footer2-grid{grid-template-columns:1fr;}.footer2-cta{flex-direction:column;}.footer2-bottom{flex-direction:column;align-items:flex-start;}}


/* ===== ATHLETES GRID — DEFINITIVE MOBILE FIX (added, wins over all earlier patches) ===== */
@media screen and (max-width: 700px) {
  div.athletes-grid-v2.athletes-grid-v2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
    padding: 0 !important;
    margin-top: 24px !important;
  }
  div.athlete-card-v2.athlete-card-v2 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
  }
  div.athlete-card-v2.athlete-card-v2 .acv2-header {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  div.athlete-card-v2.athlete-card-v2 .acv2-name {
    font-size: 1.15rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  div.athlete-card-v2.athlete-card-v2 .acv2-body {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 18px !important;
  }
}

/* ===== Hall/venue photo: mask the unwanted logo baked into the top-left
   corner of the source photograph (contact.html + services.html hero).
   A soft dark vignette blends naturally into a gym/hall photo background
   without cropping out the table-tennis content. ===== */
/* ===== Success Stories — coach-story section spacing fix =====
   Base padding reduced from 96px to 60px (desktop); tablet/mobile
   scaled down further per client spec, to remove the excessive
   gap above/below the coach photo while staying balanced. */
@media (max-width: 900px) {
  #coach-story { padding: 50px 5vw !important; }
}
@media (max-width: 600px) {
  #coach-story { padding: 40px 5vw !important; }
}

.hall-logo-mask {
  position: absolute; top: 0; left: 0;
  width: 34%; height: 26%;
  max-width: 160px; max-height: 100px;
  background: linear-gradient(135deg, rgba(8,14,28,0.62) 0%, rgba(8,14,28,0.28) 55%, rgba(8,14,28,0) 100%);
  border-radius: 20px 0 40px 0;
  z-index: 3;
  pointer-events: none;
}
.payg-box { max-width: 100% !important; }
@media (max-width: 600px) {
  .payg-box { flex-direction: column !important; }
  .payg-box > a { border-left: none !important; border-top: 1px solid rgba(0,0,0,0.08); }
  .payg-card { padding: 22px 20px !important; }
  .payg-card > div:first-child span:last-child { font-size: 19px !important; }
}
@media (max-width: 768px) {
  .pkg-intro-card { max-width: 100%; }
}

/* ===== Homepage hero: announcement + guest-plan strip, centered on tablet/mobile ===== */
@media (max-width: 900px) {
  .hero-announce, .hero-payg { margin-left: auto; margin-right: auto; justify-content: center; }
}
@media (max-width: 600px) {
  .hero-announce { flex-direction: column; gap: 2px; text-align: center; padding: 10px 14px; }
  .hero-payg { flex-direction: column; gap: 4px; text-align: center; padding: 12px 16px; }
  .hero-payg-sep { display: none; }
}

/* ===== Fix: "eyebrow" section-tag pills were stretching full-width site-wide
   due to conflicting display:flex/block rules earlier in this file. Force
   them back to compact, content-hugging pills everywhere. ===== */
.section-tag {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
}
#coming-soon .section-tag {
  display: inline-flex !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== "Notable Athletes Coached" (homepage) — responsive card grid =====
   Desktop keeps the existing 3-column vertical card design untouched.
   Tablet: 2 columns. Mobile: single-column stacked cards, icon-left /
   content-right layout, matching the approved mobile reference. */
@media (max-width: 900px) and (min-width: 601px) {
  #championsGrid.nac-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .nac-heading {
    font-size: 27px !important;
    letter-spacing: 1px !important;
    margin-bottom: 18px !important;
    display: flex !important; align-items: center !important; gap: 8px !important;
  }
  #championsGrid.nac-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 36px !important;
  }
  .nac-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px 18px 18px 22px !important;
    border-radius: 20px !important;
  }
  .nac-accent {
    top: 0 !important; left: 0 !important; right: auto !important;
    width: 60px !important; height: 4px !important;
    border-radius: 0 0 6px 0 !important;
  }
  .nac-icon {
    flex-shrink: 0 !important;
    width: 60px !important; height: 60px !important;
    margin-bottom: 0 !important;
    border-radius: 14px !important;
    background: rgba(0,185,107,0.08) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 26px !important;
  }
  .nac-body { flex: 1 1 auto !important; min-width: 0 !important; }
  .nac-body > div:first-child { font-size: 18px !important; line-height: 1.2 !important; }
  .nac-card p { font-size: 14.5px !important; line-height: 1.6 !important; }
  .nac-card a { display: block !important; text-align: right !important; }
}

/* =====================================================================
   HOMEPAGE HERO — MOBILE CENTERING FIX
   Several older mobile rules accumulated in this file with fixed pixel
   caps / inconsistent padding, which could pull hero elements off the
   true horizontal center on small screens. This block is scoped to
   #page-index #home only (desktop and all other pages are untouched)
   and placed last so it reliably wins the cascade, giving every hero
   element the same centered container and equal left/right spacing.
   ===================================================================== */
@media (max-width: 600px) {
  #page-index #home {
    overflow-x: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Single shared centered container for every hero element.
     Keep flex (not block) so hero-visual's order:-1 still puts the
     coach image first, matching the required visual stacking order. */
  #page-index #home .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  #page-index #home .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    transform: none !important;
  }

  /* Coach image: centered, ~90% of the content width, no offset */
  #page-index #home .hero-visual {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 28px !important;
    order: -1 !important;
    transform: none !important;
  }
  #page-index #home .hero-img-frame {
    width: 90% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0 !important; right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
  #page-index #home .hero-img-main {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Welcome card + Venue pill: same centered width as everything else */
  #page-index #home .hero-announce {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
  #page-index #home .hero-badge.hero-venue-label {
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    transform: none !important;
  }

  /* Heading + divider + description: centered, full width, no overflow */
  #page-index #home .hero-title {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
  }
  #page-index #home .hero-divider {
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }
  #page-index #home .hero-sub {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
  }
  #page-index #home .hero-cta-divider {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* CTA buttons: centered row, no left drift */
  #page-index #home .hero-btns {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    transform: none !important;
  }

  /* Decorative background graphics must never cause horizontal scroll */
  #page-index #home .hero-bg-pattern,
  #page-index #home .hero-line-left,
  #page-index #home .hero-orb-1,
  #page-index #home .hero-orb-2,
  #page-index #home .hero-accent-circle,
  #page-index #home .hero-accent-circle2,
  #page-index #home .hero-img-ring,
  #page-index #home .hero-img-card2 {
    display: none !important;
  }

  /* Image overlays stay pinned to the image container itself, not the viewport */
  #page-index #home .hero-img-badge {
    position: absolute !important;
    left: 14px !important;
    right: auto !important;
    bottom: 14px !important;
  }
}

/* WhatsApp float button — explicitly excluded from hero centering, stays fixed */
#page-index .whatsapp-float,
#page-index .wa-float {
  margin: 0 !important;
  transform: none !important;
}