/* MPL – Main Stylesheet – Extracted from approved mockup */

    /* ===== CSS CUSTOM PROPERTIES ===== */
    :root {
      --orange: #FF6B00;
      --orange-light: #FF8C33;
      --orange-glow: rgba(255,107,0,0.15);
      --dark: #0A0A0A;
      --surface: #141414;
      --surface2: #1A1A1A;
      --border: #2A2A2A;
      --muted: #888;
      --text: #E8E8E8;
      --white: #FFFFFF;
      --green: #25D366;
      /* Theme fonts (W1 siteContent.theme.fonts, design-w1-w3 v2 Condition 6):
       * the build's own defaults, one token per font ROLE rather than per
       * literal family name, so every font-family declaration below can be
       * rewritten once here instead of at each of the twelve call sites, and
       * site-live.js's applyTheme() can repoint a role at runtime without
       * touching markup. `--font-arabic` is consumed by rtl.css (loaded after
       * this file on Arabic pages) and by the Latin/Arabic heading combo rule
       * there. */
      --font-head: 'Bebas Neue';
      --font-body: 'Outfit';
      --font-arabic: 'Tajawal';
      /* Two token families were referenced across the codebase (404.astro,
       * CoachProfile.astro, CoachesIndex.astro, an inline dialog in
       * site-live.js) but never DEFINED anywhere — `var(--clr-text)` with no
       * fallback is invalid at computed-value time, so every one of those
       * declarations silently fell back to the inherited/initial value.
       * Mapped to the real tokens above so they finally resolve. */
      --clr-orange: var(--orange);
      --clr-text: var(--text);
      --clr-text-muted: var(--muted);
      --clr-border: var(--border);
      --clr-surface: var(--surface);
      /* Live campaign banner (offer-banner, 2026-09-15): the owner's approved
       * reference is a dark green banner, not brand orange, so the strip and
       * the generated offer banner (campaign.css) get their own pair of
       * tokens rather than repurposing --green (WhatsApp brand colour,
       * exempt from the ink rules below and not this shade). Both computed
       * to clear 4.5:1 against every ink colour used on them — see
       * scripts/verify-a11y-static.mjs. */
      --campaign-green: #0B2E22;
      --campaign-green-line: #27D187;
      --header-h: 72px;
      /* 0, not 42px. This variable is the space ABOVE the fixed header, and
         it was defaulting to the height of an offer banner that no template
         renders -- so every page whose strip ships hidden reserved 42px of
         nothing above the header. It is set to the strip's real height by
         Header.astro when the strip renders, and back to 0 by hideStrip(). */
      --offer-banner-h: 0px;
      --radius: 8px;
      --radius-lg: 16px;
      --transition: 0.25s ease;
    }

    /* ===== RESET & BASE ===== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--offer-banner-h) + 12px); overflow-x: hidden; }
    body {
      font-family: var(--font-body), system-ui, -apple-system, sans-serif;
      background: var(--dark);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
    }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    img { max-width: 100%; display: block; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }

    /* ===== SKIP LINK (a11y) ===== */
    .skip-link {
      position: absolute;
      top: -100%;
      left: 0;
      z-index: 100000;
      padding: 8px 16px;
      background: var(--orange);
      color: var(--white);
      font-weight: 600;
      text-decoration: none;
    }
    .skip-link:focus {
      top: 0;
      clip: auto;
      clip-path: none;
    }

    /* ===== UTILITY ===== */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .container--narrow {
      max-width: 780px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .section-label {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 12px;
    }
    .section-title {
      font-family: var(--font-head), cursive;
      font-size: clamp(36px, 5vw, 64px);
      font-weight: 400;
      letter-spacing: 2px;
      line-height: 1;
    }

    /* ===== BUTTONS ===== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: var(--radius);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transition: all var(--transition);
      cursor: pointer;
      border: 2px solid transparent;
    }
    .btn--primary {
      background: var(--orange);
      color: var(--white);
      border-color: var(--orange);
    }
    .btn--primary:hover {
      background: var(--orange-light);
      border-color: var(--orange-light);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(255,107,0,0.4);
    }
    .btn--outline {
      background: transparent;
      color: var(--white);
      border-color: rgba(255,255,255,0.3);
    }
    .btn--outline:hover {
      border-color: var(--white);
      background: rgba(255,255,255,0.08);
      transform: translateY(-2px);
    }
    .btn--ghost {
      background: transparent;
      color: var(--orange);
      border-color: var(--orange);
    }
    .btn--ghost:hover {
      background: var(--orange);
      color: var(--white);
    }
    .btn--sm { padding: 10px 20px; font-size: 12px; }

    /* ===== STANDALONE PAGE HERO =====
       Clears the FIXED header. `.page-hero` had NO rule anywhere: five content
       fragments each carried their own inline padding-top and the two component
       pages carried none, so /coaches/, /coaches-ar/ and /programs/ rendered
       their <h1> UNDERNEATH the header — measured live at 36px of overlap on
       the coaches page, i.e. the top half of "OUR COACHES" was sliced off.
       The strip (.summer-strip) is position:relative and therefore already in
       flow, so only the fixed header needs clearing here. */
    .page-hero {
      padding-top: calc(var(--header-h, 72px) + 48px);
    }

    /* ===== HEADER ===== */
    .site-header {
      position: fixed;
      top: var(--offer-banner-h);
      left: 0;
      right: 0;
      z-index: 1000;
      height: var(--header-h);
      background: rgba(10,10,10,0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
      transition: background var(--transition), box-shadow var(--transition);
    }
    .site-header.scrolled {
      background: rgba(10,10,10,0.97);
      box-shadow: 0 4px 32px rgba(0,0,0,0.5);
    }
    .site-header .container {
      height: 100%;
      display: flex;
      align-items: center;
      gap: 40px;
    }
    .site-logo {
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }
    .site-logo__img {
      height: 36px;
      width: auto;
    }

    .site-nav {
      display: flex;
      align-items: center;
      gap: 4px;
      flex: 1;
    }
    .site-nav a {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.3px;
      padding: 6px 12px;
      border-radius: 6px;
      color: var(--muted);
      transition: color var(--transition), background var(--transition);
    }
    .site-nav a:hover, .site-nav a.active {
      color: var(--white);
      background: var(--surface2);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }

    .lang-switcher {
      display: flex;
      align-items: center;
      gap: 2px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 3px;
    }
    .lang-switcher__btn {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      padding: 5px 10px;
      border-radius: 4px;
      color: var(--muted);
      background: none;
      border: none;
      cursor: pointer;
      transition: all var(--transition);
      line-height: 1.4;
      box-sizing: border-box;
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .lang-switcher__btn.active, .lang-switcher__btn:hover {
      background: var(--orange);
      color: var(--white);
    }

    .nav__toggle {
      display: none;
      flex-direction: column;
      gap: 5px;
      padding: 10px;
      background: none;
      border: none;
      cursor: pointer;
    }
    .nav__toggle span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--white);
      border-radius: 2px;
      transition: all var(--transition);
    }
    .nav__toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .nav__toggle.open span:nth-child(2) { opacity: 0; }
    .nav__toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    /* ===== MOBILE NAV ===== */
    .mobile-nav {
      display: none;
      position: fixed;
      top: calc(var(--header-h) + var(--offer-banner-h));
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(10,10,10,0.97);
      backdrop-filter: blur(20px);
      z-index: 999;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--transition);
    }
    .mobile-nav.open {
      display: flex;
      opacity: 1;
      pointer-events: all;
    }
    .mobile-nav a {
      font-family: var(--font-head), cursive;
      font-size: 32px;
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--muted);
      padding: 12px 32px;
      border-radius: var(--radius);
      transition: all var(--transition);
    }
    .mobile-nav a:hover { color: var(--white); background: var(--surface2); }

    /* ===== STATS BAR ===== */
    .stats-bar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      margin-top: calc(var(--header-h) + var(--offer-banner-h));
      overflow: hidden;
    }
    .stats-bar .container {
      display: flex;
      align-items: stretch;
    }
    .stats-bar__item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px 12px;
      border-right: 1px solid var(--border);
      position: relative;
    }
    .stats-bar__item:last-child { border-right: none; }
    .stats-bar__item::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--orange);
      transform: scaleX(0);
      transition: transform 0.6s ease;
    }
    .stats-bar__item.animated::after { transform: scaleX(1); }
    /* .stats-bar carries the whole page's offset for the FIXED header
       (margin-top: header + strip). Hiding the row therefore removes that
       offset and slides the hero's top band under the header — a regression
       introduced the moment an empty published stats array was allowed to hide
       the row. `[hidden]` elements still match sibling combinators, so the
       offset moves to whatever follows instead of being lost. */
    .stats-bar[hidden] + .hero {
      margin-top: calc(var(--header-h) + var(--offer-banner-h));
    }
    .stats-bar__number {
      font-family: var(--font-head), cursive;
      font-size: 44px;
      font-weight: 400;
      color: var(--orange);
      letter-spacing: 1px;
      line-height: 1;
    }
    .stats-bar__suffix {
      display: inline;
      font-size: 28px;
    }
    .stats-bar__label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 4px;
    }

    /* ===== HERO ===== */
    /* 100vh is right on a phone, where the content nearly fills it (746 of 812px
       at 375x812). On a desktop the same rule reserved a full 900px screen for
       609px of content - 291px of dead space, 145 above and 145 below, because
       the flex centring splits the slack. Cap it from 1024px up so the hero
       still dominates the fold without the empty bands. */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      background: var(--dark);
    }
    @media (min-width: 1024px) {
      .hero { min-height: min(100vh, 760px); }
    }

    .hero__bg {
      position: absolute;
      inset: 0;
      background-image: url('../images/hero-athlete-real.webp');
      background-size: cover;
      background-position: center right;
      opacity: 0.38;
      pointer-events: none;
    }
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(10,10,10,0.95) 45%, rgba(10,10,10,0.4) 100%);
      pointer-events: none;
      z-index: 0;
    }
    .hero::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 120px;
      background: linear-gradient(transparent, var(--dark));
      pointer-events: none;
      z-index: 0;
    }
    .hero .container {
      position: relative;
      z-index: 1;
      padding-top: 40px;
      padding-bottom: 60px;
    }
    .hero__content {
      max-width: 960px;
    }
    .hero__tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 6px 16px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 24px;
    }
    .hero__tag::before {
      content: '';
      width: 6px;
      height: 6px;
      background: var(--orange);
      border-radius: 50%;
      flex-shrink: 0;
    }
    .hero__title {
      font-family: var(--font-head), cursive;
      font-size: clamp(64px, 10vw, 130px);
      font-weight: 400;
      letter-spacing: 3px;
      line-height: 0.95;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 28px;
    }
    .hero__title em {
      font-style: normal;
      color: var(--orange);
      position: relative;
    }
    .hero__subtitle {
      font-size: clamp(16px, 2vw, 20px);
      color: var(--muted);
      max-width: 560px;
      margin-bottom: 40px;
      line-height: 1.6;
    }
    .hero__cta {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 48px;
    }
    /* An emptied payment row must actually disappear, label and all.
       `display:flex` here outranks the user-agent's `[hidden]{display:none}` —
       author styles always beat the UA sheet — so setting the attribute alone
       left "We Accept" sitting over nothing. Scoped rather than a global
       `[hidden]` rule, which would change behaviour for markup that already
       relies on a display class winning. */
    .hero__payments[hidden],
    .footer__payments[hidden] {
      display: none;
    }
    /* Contact rows, social icons and the map are hidden when the website's
       Contact settings leave them empty (single source: no built-in fallback).
       Each of these carries a display class, so the attribute alone would not
       hide it (same reason as the payment rows above). */
    .footer__contact-item[hidden],
    .footer__social[hidden],
    .visit-lab__detail[hidden],
    .map-placeholder[hidden],
    .map-placeholder__frame[hidden],
    .map-placeholder__overlay[hidden] {
      display: none;
    }
    .hero__payments {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    .hero__payments-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--muted);
      margin-right: 4px;
    }
    .payment-badge {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.3px;
      transition: all var(--transition);
    }
    .payment-badge:hover {
      border-color: var(--orange);
      color: var(--orange);
    }

    /* ===== METHOD SECTION ===== */
    .method {
      background: var(--surface);
      padding: 60px 0;
    }
    .method .container > .section-label { color: var(--orange); }
    .method .section-title { color: var(--white); }
    .method__header {
      text-align: center;
      margin-bottom: 60px;
    }
    .method__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    .method__item {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 36px 28px;
      text-align: center;
      transition: all var(--transition);
      position: relative;
      overflow: hidden;
    }
    .method__item::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--orange);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }
    .method__item:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px var(--border); }
    .method__item:hover::before { transform: scaleX(1); }
    .method__icon {
      width: 72px;
      height: 72px;
      background: rgba(255,107,0,.1);
      border: 1px solid rgba(255,107,0,.22);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      color: var(--orange);
      transition: background .3s, box-shadow .3s;
    }
    .method__item:hover .method__icon {
      background: rgba(255,107,0,.18);
      box-shadow: 0 0 24px rgba(255,107,0,.25);
    }
    .method__title {
      font-family: var(--font-head), cursive;
      font-size: 20px;
      font-weight: 400;
      letter-spacing: 1.5px;
      color: var(--white);
      margin-bottom: 12px;
      text-transform: uppercase;
    }
    .method__desc {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.7;
    }

    /* ===== PROGRAMS SECTION ===== */
    .programs {
      background: var(--dark);
      padding: 60px 0;
    }
    .programs__header {
      text-align: center;
      margin-bottom: 40px;
    }
    .programs__header .section-title { color: var(--white); }
    .programs__tabs {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 48px;
      flex-wrap: wrap;
    }
    .programs__tab {
      padding: 10px 24px;
      border-radius: 100px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      border: 2px solid var(--border);
      color: var(--muted);
      background: var(--surface);
      cursor: pointer;
      transition: all var(--transition);
    }
    .programs__tab:hover { border-color: var(--orange); color: var(--orange); }
    .programs__tab.active {
      background: var(--orange);
      border-color: var(--orange);
      color: var(--white);
    }
    .programs__grid {
      display: grid;
      /* minmax(0, 1fr), not 1fr. A `1fr` track has an automatic MINIMUM equal
         to its content, so one long unbroken string in any card -- a programme
         name, a feature line, a description -- widens the track and scrolls the
         whole page sideways. Capping the minimum at 0 makes the track
         authoritative and the content wrap inside it. */
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 24px;
    }
    /* Same reason one level down: a grid ITEM also defaults to min-width:auto. */
    .programs__grid > * { min-width: 0; }
    /* Every CMS-fed text sink in a card wraps rather than widening it. These
       carry owner-authored strings of unbounded length and shape. */
    .program-card__name,
    .program-card__sessions,
    .program-card__features li,
    .program-card__price { overflow-wrap: anywhere; }
    .programs__grid .program-card {
      grid-column: span 2;
    }
    /* The `:nth-child(4) { grid-column: 2 / span 2 }` pin that lived here is
       DELETED. It was written for a fixed seven-card grid where card 4 opened
       the second row; the card count is now owner-authored and variable, so
       pinning the fourth DOM child to columns 2-3 strands the row whenever the
       count is not seven. summer.css was overriding it with `span 2 !important`,
       which hid the problem for exactly as long as the summer offer ran --
       config.ts tells the operator to switch SUMMER_ACTIVE off now that it has
       ended, which would have re-exposed it.

       A lone card on the final row is centred by .program-card--lone instead,
       set from main.js against the cards that are actually VISIBLE. It cannot
       be done in CSS: :nth-child counts DOM position, and the category tabs
       hide cards with display:none while leaving them in the DOM, so a CSS
       rule centres whichever card is 3n+1 in the DOM rather than the one the
       reader can see. Clicking "Recovery" hid one card and brought the ragged
       row straight back.

       Kept above 769px on purpose: below that the grid is a single column and
       pinning anything to column 3 creates implicit columns and scrolls the
       page sideways. */
    .program-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px 20px;
      position: relative;
      transition: all var(--transition);
      display: flex;
      flex-direction: column;
    }
    .program-card:hover {
      border-color: var(--orange);
      transform: translateY(-6px);
      box-shadow: 0 20px 60px rgba(255,107,0,0.12);
    }
    .program-card:hover .btn--primary {
      background: var(--orange-light);
      border-color: var(--orange-light);
    }
    .program-card__badge {
      position: absolute;
      top: -1px;
      right: 24px;
      background: var(--orange);
      color: var(--white);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 0 0 8px 8px;
    }
    .program-card__name {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 8px;
    }
    .program-card__price {
      font-family: var(--font-head), cursive;
      font-size: 52px;
      font-weight: 400;
      color: var(--white);
      letter-spacing: 1px;
      line-height: 1;
      margin-bottom: 4px;
    }
    .program-card__price span {
      font-size: 16px;
      font-weight: 600;
      color: var(--muted);
      letter-spacing: 0;
    }
    .program-card__sessions {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 24px;
      /* Was `nowrap`, which is safe only for the short baked strings. This line
         now also carries `lead.description` from the platform, and two live MPL
         programmes hold 369-character descriptions: one of those as a card's
         lead produces a single ~2,500px line, expands the grid track (its
         min-width is auto) and scrolls the whole page sideways at every
         viewport -- undoing the mobile-overflow fix from a single reorder in
         the admin. */
      white-space: normal;
      overflow-wrap: anywhere;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--border);
    }
    .program-card__features {
      flex: 1;
      margin-bottom: 28px;
    }
    .program-card__features li {
      font-size: 13px;
      color: var(--text);
      padding: 6px 0;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      white-space: normal;
      line-height: 1.45;
    }
    .price-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 12px;
      margin-top: 4px;
    }
    .price-grid > span {
      font-size: 13px;
      font-weight: 700;
      color: var(--orange);
      line-height: 1.3;
      white-space: nowrap;
    }
    .price-grid > span small {
      display: block;
      font-size: 10px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .program-card__features li::before {
      content: '';
      width: 6px;
      height: 6px;
      background: var(--orange);
      border-radius: 50%;
      flex-shrink: 0;
    }
    .program-card .btn { width: 100%; }

    /* ===== COACHES SECTION ===== */
    .coaches {
      background: var(--surface);
      padding: 60px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .coaches__header {
      text-align: center;
      margin-bottom: 60px;
    }
    .coaches__header .section-title { color: var(--white); }
    .coaches__grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }
    .coach-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 40px 28px;
      text-align: center;
      transition: all var(--transition);
      display: flex;
      flex-direction: column;
    }
    .coach-card:hover {
      border-color: var(--orange);
      transform: translateY(-6px);
      box-shadow: 0 20px 60px rgba(255,107,0,0.1);
    }
    .coach-card__avatar {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto 20px;
      border: 3px solid rgba(255,107,0,0.4);
      box-shadow: 0 0 0 6px rgba(255,107,0,0.08);
    }
    .coach-card__avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .coach-card__name {
      font-size: 18px;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 6px;
    }
    /* Same defect class as the programme grid: a `1fr` track's minimum is its
       content, and these two fields are API strings (firstName, and the joined
       specialties[]) with no length bound. An unbroken 40-character name
       widened the track and scrolled the page at 320/390. */
    .coaches__grid > * { min-width: 0; }
    .coach-card__name,
    .coach-card__specialty,
    /* __exp joined this list when it became a CMS sink: certifications are
       owner strings accepted up to 100 unbroken characters, and a pasted
       verification URL is ~64 of them. Adding a text sink without adding it
       here is how the same overflow keeps coming back on a different field. */
    .coach-card__exp { overflow-wrap: anywhere; }
    .coach-card__specialty {
      font-size: 11px;
      color: var(--orange);
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-bottom: 8px;
      flex: 1;
    }
    .coach-card__exp {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 24px;
      margin-top: auto;
    }
    .coach-card .btn { width: 100%; margin-top: auto; }
    .coaches__footer {
      text-align: center;
      margin-top: 40px;
    }
    .coaches__footer a {
      color: var(--orange);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.5px;
      transition: color var(--transition);
    }
    .coaches__footer a:hover { color: var(--orange-light); }

    /* ===== RESULTS SECTION ===== */
    .results {
      background: var(--dark);
      padding: 60px 0;
      overflow: hidden;
    }
    .results__header {
      text-align: center;
      margin-bottom: 48px;
    }
    .results__header .section-title { color: var(--white); }
    .results__track {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      padding: 8px 24px 24px;
      cursor: grab;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }
    .results__track::-webkit-scrollbar { height: 4px; }
    .results__track::-webkit-scrollbar-track { background: transparent; }
    .results__track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .results__track.dragging { cursor: grabbing; }
    .result-card {
      flex-shrink: 0;
      width: 260px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px;
      scroll-snap-align: start;
      transition: all var(--transition);
    }
    .result-card:hover { border-color: var(--orange); transform: translateY(-4px); }
    .result-card__visuals {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    .result-card__img {
      flex: 1;
      aspect-ratio: 1;
      background: var(--surface2);
      border-radius: var(--radius);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
    }
    .result-card__img.after {
      border-color: rgba(255,107,0,0.35);
      background: rgba(255,107,0,0.06);
    }
    .result-card__img svg {
      width: 36px;
      height: 36px;
      opacity: 0.5;
    }
    .result-card__img.after svg {
      opacity: 1;
    }
    .result-card__img-label {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--muted);
    }
    .result-card__img.after .result-card__img-label {
      color: var(--orange);
    }
    /* A real owner-uploaded photograph fills the frame; the BEFORE/AFTER label
     * moves on top of it with a scrim so it stays legible against any image.
     * Boxes with no photo keep the placeholder outline exactly as before. */
    /* The silhouette SVG stays in flow (it is what gives the box height on
       engines without aspect-ratio support); the photograph is layered over it. */
    .result-card__img--photo svg { visibility: hidden; }
    .result-card__img--photo img {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .result-card__img--photo .result-card__img-label {
      position: absolute;
      bottom: 6px;
      inset-inline-start: 6px;
      z-index: 1;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(0,0,0,0.62);
      color: #fff;
    }
    /* White on BOTH labels once a photo is behind them. Orange on the 62%
       scrim over a bright photograph (a white gym wall is the common case)
       computes to about 2.2:1 -- below even the 3:1 non-text floor, let alone
       4.5:1 for 9px text. White is 5.7:1 in the worst case. The orange
       treatment is kept for the placeholder boxes, which have a known ground. */
    .result-card__img--photo.after .result-card__img-label { color: #fff; }
    @media (min-width: 769px) {
      .programs__grid .program-card--lone {
        grid-column: 3 / span 2;
      }
    }
    .result-card__caption {
      margin-top: 10px;
      font-size: 12px;
      line-height: 1.6;
      color: var(--muted);
    }
    .result-card__arrow {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .result-card__arrow svg {
      width: 18px;
      height: 18px;
      fill: var(--orange);
    }
    .result-card__stat {
      font-family: var(--font-head), cursive;
      font-size: 36px;
      font-weight: 400;
      color: var(--orange);
      letter-spacing: 1px;
      margin-bottom: 6px;
    }
    .result-card__name {
      font-size: 15px;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 4px;
    }
    .result-card__duration {
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

/* ===== ANNOUNCEMENT / PROMO STRIP =====
   Lives here, not in summer.css, because it is the owner's announcement bar
   and has to work in every build. It ships hidden; visibility is owned at
   runtime by syncOffers (a live offer) and applyAnnouncementBar (an owner
   announcement). Moved from summer.css, which only loads while the summer
   promo is active. */
/* ── Promo strip (sitewide, above offer banner) ─────────────────── */
/* [hidden] must defeat the display:flex below — hideStrip() sets the hidden
   attribute, and the UA rule [hidden]{display:none} loses to a class
   selector, so an expired/disabled strip stayed visible and the close
   button did nothing. */
.summer-strip[hidden] { display: none !important; }

.summer-strip {
  position: relative;
  height: var(--summer-strip-h, 36px);
  background: var(--campaign-green);
  border-bottom: 1px solid var(--campaign-green-line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  z-index: 9999;
}

.summer-strip__flag {
  display: inline-flex;
  flex-shrink: 0;
  /* ink colour set by a11y.css (white on the dark-green strip; see its
     comment for the contrast rationale). */
}

.summer-strip__link {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.02em;
  padding: 0 48px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}

.summer-strip__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--on-orange, #0A0A0A);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.summer-strip__cta[hidden] { display: none; }

.summer-strip__link strong { font-weight: 700; }

.summer-strip__link:hover { text-decoration: underline; }

.summer-strip__close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.2);
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  flex-shrink: 0;
}

.summer-strip__close:hover { background: rgba(0,0,0,0.4); }

[dir="rtl"] .summer-strip__link { padding: 0 0 0 48px; }
[dir="rtl"] .summer-strip__close { right: auto; left: 12px; }

@media (max-width: 480px) {
  .summer-strip__link { font-size: 11px; }
  .summer-strip__cta { display: none; }
}

    /* ===== ASSESSMENT BANNER ===== */
    .assessment-banner {
      background: var(--surface);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: 60px 0;
      position: relative;
      overflow: hidden;
    }
    .assessment-banner::before {
      content: '';
      position: absolute;
      top: 50%;
      right: -100px;
      transform: translateY(-50%);
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(255,107,0,0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .assessment-banner .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    .assessment-banner__content .section-title { color: var(--white); }
    .assessment-banner__subtitle {
      font-size: 16px;
      color: var(--muted);
      margin-top: 16px;
      line-height: 1.7;
    }
    .assessment-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .form-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .form-field label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--muted);
    }
    .form-field input,
    .form-field select {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 16px;
      font-size: 14px;
      color: var(--white);
      font-family: inherit;
      transition: border-color var(--transition);
      width: 100%;
    }
    .form-field input::placeholder { color: var(--muted); }
    .form-field input:focus,
    .form-field select:focus {
      /* No `outline: none` here. A border-colour swap is not a focus indicator:
         it vanishes in forced-colours mode and is invisible to anyone who
         cannot perceive the hue change. The visible ring lives in a11y.css. */
      border-color: var(--orange);
    }
    .form-field select option { background: var(--surface2); }
    .assessment-success {
      display: none;
      background: rgba(37,211,102,0.1);
      border: 1px solid rgba(37,211,102,0.3);
      border-radius: var(--radius);
      padding: 16px 20px;
      font-size: 14px;
      color: var(--green);
      margin-top: 8px;
    }
    .assessment-success a {
      color: var(--green);
      font-weight: 700;
      text-decoration: underline;
    }

    /* ===== VISIT LAB ===== */
    .visit-lab {
      background: var(--dark);
      padding: 60px 0;
    }
    .visit-lab .container {
      display: grid;
      /* minmax(0, ...) on both tracks, and min-width:0 on the children. A `1fr`
         track's minimum is its CONTENT, so the baked address line pushed this
         grid 3px past a 320px viewport — clipped by overflow-x:hidden, so
         scrollWidth never saw it and a width-based check could not either.
         Reachable in production whenever the API is down and the baked address
         stands. Third grid on this site with the same defect, after the
         programme grid and the two coach grids. */
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
      gap: 60px;
      align-items: start;
    }
    .visit-lab .container > * { min-width: 0; }
    .visit-lab__header { margin-bottom: 40px; }
    .visit-lab__header .section-title { color: var(--white); }
    .visit-lab__details { display: flex; flex-direction: column; gap: 24px; }
    .visit-lab__detail {
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }
    /* A flex ITEM defaults to min-width:auto, so the text column beside the
       icon was sized by its longest line rather than by the space left over —
       the address and the email pushed 3px past a 320px viewport. Bounding the
       grid above was not enough; the same default applies at every level, and
       these two fields are the longest unbroken strings on the homepage. */
    .visit-lab__detail > * { min-width: 0; }
    .visit-lab__detail-value,
    .visit-lab__detail-value a { overflow-wrap: anywhere; }
    .visit-lab__detail-icon {
      width: 44px;
      height: 44px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .visit-lab__detail-icon svg {
      width: 20px;
      height: 20px;
      stroke: var(--orange);
      fill: none;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .visit-lab__detail-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 4px;
    }
    .visit-lab__detail-value {
      font-size: 15px;
      color: var(--text);
      font-weight: 500;
    }
    .visit-lab__detail-value a {
      color: var(--orange);
      transition: color var(--transition);
    }
    .visit-lab__detail-value a:hover { color: var(--orange-light); }
    .visit-lab__cta { margin-top: 32px; }
    .map-link {
      display: block;
      text-decoration: none;
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: transform var(--transition), box-shadow var(--transition);
    }
    .map-link:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 48px rgba(255,107,0,0.2);
    }
    .map-placeholder {
      background: var(--surface);
      border: 2px solid var(--border);
      border-radius: var(--radius-lg);
      height: 400px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: border-color var(--transition);
    }
    .map-link:hover .map-placeholder {
      border-color: var(--orange);
    }
    .map-placeholder iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      filter: grayscale(0.8) brightness(0.6) contrast(1.2);
      transition: filter 0.4s ease;
    }
    .map-link:hover .map-placeholder iframe {
      filter: grayscale(0.3) brightness(0.7) contrast(1.1);
    }
    .map-placeholder__overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      z-index: 2;
      background: rgba(10,10,10,0.45);
      transition: background 0.3s ease;
    }
    .map-link:hover .map-placeholder__overlay {
      background: rgba(10,10,10,0.3);
    }
    .map-placeholder__pin {
      width: 64px;
      height: 64px;
      background: rgba(255,107,0,0.15);
      border: 2px solid rgba(255,107,0,0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;
      animation: pinPulse 2s ease-in-out infinite;
    }
    @keyframes pinPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,0,0.3); }
      50% { box-shadow: 0 0 0 12px rgba(255,107,0,0); }
    }
    .map-placeholder__overlay strong {
      color: var(--white);
      font-size: 16px;
    }
    .map-placeholder__tap {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--orange);
      background: rgba(255,107,0,0.1);
      border: 1px solid rgba(255,107,0,0.3);
      padding: 6px 16px;
      border-radius: 100px;
      margin-top: 4px;
    }

    /* ===== CTA BANNER ===== */
    .cta-banner {
      padding: 60px 0;
      text-align: center;
      background: linear-gradient(135deg, var(--surface) 0%, rgba(255,107,0,0.05) 50%, var(--surface) 100%);
      border-top: 1px solid var(--border);
      position: relative;
      overflow: hidden;
    }
    .cta-banner::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 300px;
      background: radial-gradient(ellipse, rgba(255,107,0,0.15) 0%, transparent 70%);
      pointer-events: none;
    }
    .cta-banner .container { position: relative; z-index: 1; }
    .cta-banner__title {
      font-family: var(--font-head), cursive;
      font-size: clamp(48px, 7vw, 96px);
      font-weight: 400;
      color: var(--white);
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 16px;
    }
    .cta-banner__title em {
      font-style: normal;
      color: var(--orange);
    }
    .cta-banner__sub {
      font-size: 18px;
      color: var(--muted);
      margin-bottom: 40px;
    }

    /* ===== FOOTER ===== */
    .site-footer {
      background: var(--surface);
      border-top: 1px solid var(--border);
      padding: 64px 0 32px;
    }
    /* Grid items default to min-width:auto, so any child that cannot shrink
     * sets a width floor for the whole track. Belt-and-braces against the next
     * unwrappable row landing in here. */
    .footer__grid > * { min-width: 0; }
    .footer__grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 48px;
    }
    .footer__brand-logo {
      margin-bottom: 12px;
    }
    .footer-logo__img {
      height: 40px;
      width: auto;
    }
    .footer__tagline {
      font-size: 14px;
      color: var(--muted);
      margin-bottom: 24px;
      line-height: 1.6;
    }
    .footer__socials {
      display: flex;
      /* Eight icons at 38px with 10px gaps need 374px on one line. The footer
       * grid collapses to a single column under 768px, but a nowrap flex row
       * keeps a 374px min-content floor, which widened the whole track and
       * scrolled the page sideways on a 320px phone. Wrapping costs nothing at
       * any width where the row already fits. */
      flex-wrap: wrap;
      gap: 10px;
    }
    .footer__social {
      width: 38px;
      height: 38px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition);
    }
    .footer__social svg {
      width: 17px;
      height: 17px;
      fill: var(--muted);
      transition: fill var(--transition);
    }
    .footer__social:hover {
      background: var(--orange);
      border-color: var(--orange);
    }
    .footer__social:hover svg { fill: #fff; }
    .footer__col-title {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 20px;
    }
    .footer__links {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .footer__links a {
      font-size: 14px;
      color: var(--muted);
      transition: color var(--transition);
    }
    .footer__links a:hover { color: var(--orange); }
    .footer__contact-item {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      margin-bottom: 12px;
    }
    .footer__contact-item span:first-child {
      flex-shrink: 0;
      margin-top: 2px;
    }
    .footer__contact-item svg {
      width: 15px;
      height: 15px;
      stroke: var(--orange);
      fill: none;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .footer__contact-item span:last-child {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.5;
    }
    .footer__bottom {
      border-top: 1px solid var(--border);
      padding-top: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
    }
    .footer__copy {
      font-size: 13px;
      color: var(--muted);
    }
    .footer__credit {
      font-size: 11px;
      color: var(--muted);
      opacity: .6;
      margin-top: 4px;
    }
    .dynovix-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      text-decoration: none;
      color: inherit;
      opacity: .5;
      transition: opacity .3s;
    }
    .dynovix-badge:hover { opacity: 1; }
    .dynovix-badge svg { flex-shrink: 0; }
    .dynovix-badge strong { color: #888; font-weight: 600; }
    .footer__payments {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .footer__payments-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--muted);
      margin-right: 4px;
    }

    /* ===== WHATSAPP FAB ===== */
    .whatsapp-fab {
      position: fixed;
      bottom: 28px;
      left: 28px;
      z-index: 999;
      width: 56px;
      height: 56px;
      background: var(--green);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 24px rgba(37,211,102,0.4);
      transition: all var(--transition);
    }
    .whatsapp-fab:hover {
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 16px 40px rgba(37,211,102,0.5);
    }
    .whatsapp-fab svg {
      width: 28px;
      height: 28px;
      fill: white;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1100px) {
      .coaches__grid { grid-template-columns: 1fr 1fr; }
      .programs__grid { gap: 16px; }
      .program-card { padding: 22px 16px; }
    }

    @media (max-width: 768px) {
      :root { --header-h: 64px; }

      .site-nav { display: none; }
      .nav__toggle { display: flex; }
      .header-actions .btn--primary { display: none; }
      .lang-switcher { display: flex; }

      .stats-bar .container { overflow-x: auto; }
      /* 120px x 5 published tiles = 600px, which exceeds the content box below
         about 648px — so on a 600px tablet or a landscape phone the last tile
         was clipped and the row scrolled sideways inside itself. The row is
         owner-sized now, so the floor has to flex rather than be a fixed
         number chosen when there were four. */
      .stats-bar__item { min-width: 0; flex: 1 1 96px; }

      .hero__title { letter-spacing: 1px; }
      .hero__cta { gap: 12px; flex-direction: column; }
      .hero__cta .btn { width: 100%; min-width: unset; }

      .method__grid { grid-template-columns: 1fr 1fr; gap: 16px; }

      .programs__grid { grid-template-columns: 1fr; }
      .programs__grid .program-card { grid-column: span 1; }

      .coaches__grid { grid-template-columns: 1fr 1fr; }

      .results__track { padding: 8px 16px 20px; }

      .assessment-banner .container { grid-template-columns: 1fr; gap: 40px; }

      .visit-lab .container { grid-template-columns: minmax(0, 1fr); }
      .map-placeholder { height: 300px; }

      .footer__grid { grid-template-columns: 1fr; gap: 32px; }
      .footer__bottom { flex-direction: column; align-items: flex-start; }

      .whatsapp-fab { bottom: 20px; left: 20px; width: 50px; height: 50px; }
    }

    @media (max-width: 480px) {
      .method__grid { grid-template-columns: 1fr; }
      .coaches__grid { grid-template-columns: 1fr; }

      /* Stats bar: 2-up grid instead of one row, to prevent overflow.
         The tile COUNT is owner-published, not fixed at four — this used to
         hard-code the dividers as "bottom border on items 1 and 2", which is
         only correct for exactly four tiles. Publish five and the fifth sat
         alone at half width with a gap beside it and no divider above it. The
         rules below are positional rather than counted, so any number works. */
      .stats-bar .container { flex-wrap: wrap; overflow-x: hidden; }
      .stats-bar__item { flex: 0 0 50%; min-width: 0; width: 50%; box-sizing: border-box; }
      .stats-bar__item:nth-child(odd)  { border-right: 1px solid var(--border); }
      .stats-bar__item:nth-child(even) { border-right: none; }
      /* every tile divides from the row below it, except the tiles on the last
         row — the last tile, and its left-column neighbour when both share it */
      .stats-bar__item { border-bottom: 1px solid var(--border); }
      .stats-bar__item:nth-last-child(1),
      .stats-bar__item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
      /* an odd tile with nothing after it is alone on its row: give it the row */
      .stats-bar__item:nth-child(odd):last-child {
        flex-basis: 100%;
        width: 100%;
        border-right: none;
      }
      .stats-bar__number { font-size: 32px; }
      .stats-bar__label  { font-size: 10px; }
    }

  /* ===== PAGE TRANSITION OVERLAY ===== */
  @keyframes mpl-fade-out { from { opacity: 1; } to { opacity: 0; } }
  #page-transition {
    position: fixed; inset: 0; background: #0A0A0A;
    z-index: 99999; opacity: 1; pointer-events: none;
    transition: opacity .35s ease;
    animation: mpl-fade-out .6s ease .3s forwards;
  }
  #page-transition.out { opacity: 0; }

  /* ===== PAYMENT PILLS ===== */
  .pay-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 800;
    letter-spacing: 0.03em; white-space: nowrap; border: 1px solid transparent;
    box-sizing: border-box; min-height: 28px;
  }
  .pay-pill--mada    { background: #007bff; color: #fff; }
  .pay-pill--visa    { background: #1434CB; color: #fff; }
  .pay-pill--mc      { background: #f0f0f0; padding: 2px 6px; }
  .pay-pill--stc     { background: #6A0DAD; color: #fff; }
  .pay-pill--apple   { background: #1d1d1f; color: #fff; border: 1px solid #444; }
  .pay-pill--tabby   { background: #3DBFA3; color: #fff; }
  .pay-pill--tamara  { background: #2DC5A2; color: #fff; }
  .pay-pill--madfoo  { background: #00875A; color: #fff; }
  .pay-pill--madfu   { background: #00875A; color: #fff; }
  .pay-pill--sab     { background: #C8102E; color: #fff; }
  .pay-pill--neoleap { background: #00B5AD; color: #fff; }
  .pay-pill--samsung { background: #1428A0; color: #fff; }
  .pay-pill--gpay    { background: #f8f9fa; color: #202124; border: 1px solid #dadce0; }
  .pay-pill--allup   { background: #0A1045; color: #fff; }
  .pay-pill--wala    { background: #1a8a4a; color: #fff; }

  /* Riyal icon — official SAMA Saudi Riyal Symbol via inline SVG data-URI mask */
  span.riyal-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 0.85em !important;
    height: 0.95em !important;
    min-width: 0.85em !important;
    flex-shrink: 0 !important;
    vertical-align: -0.15em;
    background-color: currentColor !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201124.14%201256.39%22%3E%3Cpath%20d%3D%22M699.62%2C1113.02h0c-20.06%2C44.48-33.32%2C92.75-38.4%2C143.37l424.51-90.24c20.06-44.47%2C33.31-92.75%2C38.4-143.37l-424.51%2C90.24Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M1085.73%2C895.8c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.33v-135.2l292.27-62.11c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.27V66.13c-50.67%2C28.45-95.67%2C66.32-132.25%2C110.99v403.35l-132.25%2C28.11V0c-50.67%2C28.44-95.67%2C66.32-132.25%2C110.99v525.69l-295.91%2C62.88c-20.06%2C44.47-33.33%2C92.75-38.42%2C143.37l334.33-71.05v170.26l-358.3%2C76.14c-20.06%2C44.47-33.32%2C92.75-38.4%2C143.37l375.04-79.7c30.53-6.35%2C56.77-24.4%2C73.83-49.24l68.78-101.97v-.02c7.14-10.55%2C11.3-23.27%2C11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201124.14%201256.39%22%3E%3Cpath%20d%3D%22M699.62%2C1113.02h0c-20.06%2C44.48-33.32%2C92.75-38.4%2C143.37l424.51-90.24c20.06-44.47%2C33.31-92.75%2C38.4-143.37l-424.51%2C90.24Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M1085.73%2C895.8c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.33v-135.2l292.27-62.11c20.06-44.47%2C33.32-92.75%2C38.4-143.37l-330.68%2C70.27V66.13c-50.67%2C28.45-95.67%2C66.32-132.25%2C110.99v403.35l-132.25%2C28.11V0c-50.67%2C28.44-95.67%2C66.32-132.25%2C110.99v525.69l-295.91%2C62.88c-20.06%2C44.47-33.33%2C92.75-38.42%2C143.37l334.33-71.05v170.26l-358.3%2C76.14c-20.06%2C44.47-33.32%2C92.75-38.4%2C143.37l375.04-79.7c30.53-6.35%2C56.77-24.4%2C73.83-49.24l68.78-101.97v-.02c7.14-10.55%2C11.3-23.27%2C11.3-36.97v-149.98l132.25-28.11v270.4l424.53-90.28Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E") !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
  }
  span.riyal-icon::before {
    content: none !important;
  }

  /* ===== RTL SUPPORT ===== */
  [dir="rtl"] {
    font-family: var(--font-body), var(--font-arabic), 'Noto Sans Arabic', system-ui, sans-serif;
  }
  [dir="rtl"] .site-header .container {
    flex-direction: row;
  }
  [dir="rtl"] .site-nav {
    flex-direction: row;
  }
  [dir="rtl"] .site-nav__links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
  }
  [dir="rtl"] .site-nav__links a {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 6px 12px;
    border-radius: 6px;
    color: var(--muted);
    transition: color var(--transition), background var(--transition);
  }
  [dir="rtl"] .site-nav__links a:hover {
    color: var(--white);
    background: var(--surface2);
  }
  [dir="rtl"] .header-actions {
    flex-direction: row;
  }
  [dir="rtl"] .offer-banner__inner {
    padding-left: 0;
    padding-right: 100%;
    animation-direction: reverse;
  }
  [dir="rtl"] .offer-banner__close {
    margin-right: 0;
    margin-left: 8px;
  }
  [dir="rtl"] .hero__content {
    text-align: right;
  }
  [dir="rtl"] .hero__cta {
    justify-content: flex-start;
  }
  [dir="rtl"] .hero__payments {
    justify-content: flex-start;
  }
  [dir="rtl"] .program-card__badge {
    right: auto;
    left: 24px;
  }
  [dir="rtl"] .program-card__features li {
    flex-direction: row;
    text-align: right;
  }
  /* The `[dir="rtl"] .result-card__arrow svg { transform: scaleX(-1) }` rule
     that lived here is DELETED (again — it returned when main.css was rebuilt
     from an older commit to undo an over-broad CSS move; see the commit that
     restored this). Home.astro draws a LEFT-facing arrow on Arabic pages, so
     mirroring it pointed it from "after" back toward "before". It also
     outranked the correction in rtl.css on specificity (0,2,1 vs 0,1,1), so
     that correction was dead on arrival and no source order could save it. */
  [dir="rtl"] .visit-lab__detail {
    flex-direction: row;
    text-align: right;
  }
  [dir="rtl"] .visit-lab__row {
    text-align: right;
  }
  [dir="rtl"] .footer__contact-item {
    flex-direction: row;
    text-align: right;
  }
  [dir="rtl"] .footer__bottom {
    flex-direction: row;
  }
  [dir="rtl"] .whatsapp-fab {
    left: auto;
    right: 28px;
  }
  [dir="rtl"] .mobile-nav {
    left: auto;
    right: 0;
    text-align: right;
  }
  [dir="rtl"] .assessment-form {
    text-align: right;
  }
  [dir="rtl"] .form-field input,
  [dir="rtl"] .form-field select {
    text-align: right;
  }
  [dir="rtl"] .coaches__footer a {
    direction: rtl;
  }
  /* `flex-direction: row-reverse` lived here and reversed the row a SECOND
     time: the container already inherits RTL, so a plain row lays the tiles
     right-to-left on its own. Measured on the live Arabic homepage, the tiles
     ran 3,2,1,0 in reading order — an Arabic visitor met the owner's LAST stat
     first and their FIRST stat last — and the border rules, which assume
     natural order, then put an outer border on the left edge and dropped an
     internal divider. Deleting the rule fixes the order and the dividers at
     once. Identical defect, identical cause, as the result-card visuals. */
  [dir="rtl"] .method__grid {
    direction: rtl;
  }
  [dir="rtl"] .method__item {
    text-align: center;
  }
  [dir="rtl"] .programs__grid {
    direction: rtl;
  }
  [dir="rtl"] .program-card {
    text-align: right;
  }
  [dir="rtl"] .program-card__price {
    text-align: right;
  }
  [dir="rtl"] .coaches__grid {
    direction: rtl;
  }
  [dir="rtl"] .coach-card {
    text-align: center;
  }
  [dir="rtl"] .assessment-banner .container {
    direction: rtl;
  }
  [dir="rtl"] .assessment-banner__text {
    text-align: right;
  }
  [dir="rtl"] .visit-lab .container {
    direction: rtl;
  }
  [dir="rtl"] .visit-lab__row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-direction: row;
  }
  [dir="rtl"] .footer__grid,
  [dir="rtl"] .site-footer__grid {
    direction: rtl;
  }
  [dir="rtl"] .site-footer__col {
    text-align: right;
  }
  [dir="rtl"] .site-footer__col ul {
    padding: 0;
  }
  [dir="rtl"] .site-footer__contact-item {
    flex-direction: row;
    text-align: right;
  }
  [dir="rtl"] .hero__payments-label {
    margin-right: 0;
    margin-left: 4px;
  }
  [dir="rtl"] .stats-bar__item {
    border-right: none;
    border-left: 1px solid var(--border);
  }
  [dir="rtl"] .stats-bar__item:last-child {
    border-left: none;
  }
  /* The `[dir=rtl] .stats-bar__item:nth-child(odd):last-child` rule that sat
     here is deleted: it was a strict SUBSET of the `:last-child` rule directly
     above, so it could never change anything. A no-op rule that looks like a
     mirror is worse than no rule, because it reads as coverage. */
  [dir="rtl"] .cta-banner {
    text-align: center;
  }
  [dir="rtl"] .results__track {
    direction: rtl;
  }
  [dir="rtl"] .nav__toggle {
    margin-left: 0;
    margin-right: auto;
  }
  @media (max-width: 768px) {
    [dir="rtl"] .whatsapp-fab {
      right: 20px;
      left: auto;
    }
  }

  /* ===== OFFER BANNER ===== */
  .offer-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--offer-banner-h);
    z-index: 100000;
    background: var(--orange);
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .offer-banner.hidden {
    display: none;
  }
  .offer-banner__marquee {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .offer-banner__inner {
    display: flex;
    gap: 80px;
    white-space: nowrap;
    animation: bannerMarquee 28s linear infinite;
    padding-left: 100%;
  }
  .offer-banner__inner:hover { animation-play-state: paused; }
  @keyframes bannerMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  /* Each <span> inside inner = one offer item, duplicated for seamless loop */
  .offer-banner__item {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .offer-banner__item::after {
    content: '\00B7';
    margin-left: 40px;
    opacity: 0.5;
  }
  .offer-banner__close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-right: 8px;
    border-radius: 50%;
    background: rgba(0,0,0,0.2);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
    flex-shrink: 0;
  }
  .offer-banner__close:hover { background: rgba(0,0,0,0.4); }

  /* ===== FACILITY GALLERY ===== */
  .facility {
    background: var(--dark);
    padding: 60px 0;
  }
  .facility__header {
    text-align: center;
    margin-bottom: 48px;
  }
  .facility__header .section-title { color: var(--white); }

  /*
   * Layout: big portrait on the left spanning 2 rows,
   *         2x2 grid of square crops on the right.
   *
   *   [ img1 tall ] [ img2 ] [ img3 ]
   *   [ img1 cont ] [ img4 ] [ img5 ]
   */
  .facility__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-template-rows: 310px 310px;
    gap: 10px;
  }
  .facility__item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: var(--surface);
    cursor: zoom-in;
  }
  /* First photo spans both rows — tall portrait hero */
  .facility__item:first-child {
    grid-row: 1 / span 2;
  }
  .facility__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s ease;
  }
  /* Per-image focus points for best crop */
  .facility__item:nth-child(1) img { object-position: center 30%; }  /* corridor — show depth */
  .facility__item:nth-child(2) img { object-position: center bottom; } /* VALD case — show equipment */
  .facility__item:nth-child(3) img { object-position: center 40%; }   /* dumbbell rack */
  .facility__item:nth-child(4) img { object-position: center 25%; }   /* cable machine top */
  .facility__item:nth-child(5) img { object-position: center center; }

  .facility__item:hover img { transform: scale(1.05); }
  .facility__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .facility__item:hover::after { opacity: 0.6; }

  /* ===== VIDEO SHOWCASE ===== */
  .videos {
    background: var(--surface);
    padding: 60px 0;
    border-top: 1px solid var(--border);
  }
  .videos__header {
    text-align: center;
    margin-bottom: 48px;
  }
  .videos__header .section-title { color: var(--white); }

  /*
   * 3 portrait (9:16) videos centred, capped so they don't tower.
   * Natural phone-screen proportions at a comfortable size.
   */
  .videos__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 880px;
    margin: 0 auto;
  }
  .video-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: var(--dark);
    border: 1px solid var(--border);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    aspect-ratio: 9 / 16;
  }
  .video-item:hover {
    border-color: var(--orange);
    box-shadow: 0 20px 56px rgba(255,107,0,0.18);
    transform: translateY(-4px);
  }
  .video-item video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
  }
  .video-item__label {
    position: absolute;
    bottom: 14px;
    left: 14px;
    right: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--white);
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
    z-index: 1;
  }
  /* Subtle gradient so label is always legible */
  .video-item::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(transparent, rgba(0,0,0,0.65));
    z-index: 0;
    pointer-events: none;
  }

  @media (max-width: 960px) {
    .facility__grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 260px 260px 260px;
    }
    .facility__item:first-child { grid-row: 1 / span 2; }
    .videos__grid { max-width: 600px; grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 768px) {
    .offer-banner__item { font-size: 12px; }
    .facility__grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 220px 220px 220px;
    }
    .facility__item:first-child { grid-row: 1 / span 2; }
    .videos__grid { max-width: 100%; grid-template-columns: 1fr 1fr; }
    .video-item:last-child { display: none; } /* hide 3rd on tablet */
  }
  @media (max-width: 520px) {
    .facility__grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(5, 260px);
    }
    .facility__item:first-child { grid-row: auto; }
    .videos__grid { grid-template-columns: 1fr; max-width: 320px; }
    .video-item:last-child { display: block; }
  }

/* W4: runtime-filled price slots (checkoutTotal.total) reserve width so an empty slot never shifts layout. */
.price-slot { display: inline-block; min-width: 4ch; }
/* Homepage programme headline (pre-W4 look, b055a79): the AMOUNT is the big
 * 52px white headline and only its suffix is small and muted. The amount now
 * sits inside a span (.price-slot), which `.program-card__price span` shrank to
 * the 16px muted suffix style; the slot takes the headline type back, and the
 * riyal icon inside it keeps the suffix size exactly as the baked `${R}` did.
 * A filled slot drops the reserved width so a short figure ("39") is not
 * followed by a gap before its "/session". */
.programs__grid .program-card__price .price-slot {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.programs__grid .program-card__price .price-slot[data-price-state="filled"] { min-width: 0; }
/* "incl. VAT" is a suffix like "/30 days": small and muted (it inherits
 * `.program-card__price span`), separated from the amount. Logical margin, so
 * the gap stays between label and amount in RTL too (rtl.css places it). */
.programs__grid .program-card__price .price-vat {
  margin-inline-start: 0.4em;
}
/* Coach with no publishable photo: the MPL icon, contained and padded on the
 * card surface (same treatment as CoachProfile's hero placeholder). */
.coach-card__avatar--placeholder img {
  object-fit: contain;
  padding: 18%;
  background: var(--surface2, #1a1a1a);
}