/*!
 * ZZZ Fitness Club — Main Stylesheet
 *
 * "Fire & Iron" design system — all site-wide styles.
 * Enqueued via functions.php (handle: zzz-main-style).
 *
 * Sections (in order):
 *   1. CSS Custom Properties (Brand Color System)
 *   2. Global Contrast & CTA Hover Rules
 *   3. Base Reset & Typography
 *   4. Preloader
 *   5. Topbar
 *   6. Header & Navigation (sticky, mega-menu, mobile)
 *   7. Page Sections (hero, about, services, membership, etc.)
 *   8. Reveal Animations
 *
 * @package ZZZ_Fitness_Theme
 * @version 2.0.0
 */

  :root {
    /* ============================================================
       ZZZ FITNESS CLUB — "Fire & Iron" Premium Brand Color System
       Source of truth for all colors site-wide.
       ============================================================ */

    /* Logo accents */
    --color-brand-red:        #D32F2F;   /* primary brand red — primary CTAs, headlines */
    --color-brand-orange:     #F57C00;   /* secondary brand orange — active states, hover ramps */

    /* Backgrounds & surfaces */
    --color-bg-deep:          #1A1A1A;   /* primary site background */
    --color-bg-charcoal:      #333333;   /* nav, cards, footer surfaces */
    --color-surface-silver:   #E0E0E0;   /* inverse / light accent surface (selective) */

    /* Typography */
    --color-text-light:       #FFFFFF;   /* H1/H2/H3 headings */
    --color-text-muted:       #B0BEC5;   /* paragraph body, secondary info */

    /* ============================================================
       Application aliases — internal template variables map onto the
       brand tokens above. NEVER hardcode hex values below this line.
       ============================================================ */

    /* Accent system */
    --accent:        var(--color-brand-red);
    --accent-hover:  var(--color-brand-orange);   /* "fire ramp" — red ? orange on interaction */
    --accent-2:      var(--color-brand-orange);   /* secondary highlight / active state */
    --accent-3:      #00e0ff;                     /* legacy tertiary (isolated UI) */

    /* Layout layers */
    --bg:            var(--color-bg-deep);
    --bg-2:          #222222;                     /* derived: between deep and charcoal */
    --surface:       #2A2A2A;                     /* derived: card surface */
    --surface-2:     var(--color-bg-charcoal);    /* elevated card */
    --surface-silver:var(--color-surface-silver); /* selective light surface */
    --line:          #3A3A3A;                     /* subtle border */

    /* Text */
    --text:          var(--color-text-light);
    --text-body:     var(--color-text-muted);
    --muted:         var(--color-text-muted);     /* legacy alias preserved */
    --text-muted:    #78909C;                     /* derived darker mute for fine print */

    /* Geometry & motion */
    --radius:        16px;
    --ease:          cubic-bezier(.22, 1, .36, 1);
    --ease-back:     cubic-bezier(.34, 1.56, .64, 1);
  }

  /* === GLOBAL CONTRAST ADJUSTMENT FOR ACCENT BUTTONS ===
     The new red accent reads cleanly with WHITE text (not black). */
  .btn-primary,
  .nav-cta,
  .plan-cta,
  .btn-trial,
  .btn-go,
  .ev-cta,
  .opt2-card .cta,
  .opt2-card .panel .cta,
  .trainer-card .panel .cta {
    color: var(--text) !important;
  }
  .opt4-card .info .cta { color: var(--text); }
  ::selection { background: var(--accent); color: var(--text); }

  /* === FIRE-RAMP HOVER (red ? orange) FOR PRIMARY CTAs ===
     This implements the brand's "fire gradient feel" — buttons heat up
     from red to orange on hover via a smooth background transition. */
  .btn-primary,
  .plan-cta,
  .btn-trial,
  .btn-go,
  .ev-cta,
  .opt4-card .info .cta,
  .opt2-card .panel .cta,
  .trainer-card .panel .cta {
    transition: background-color .35s var(--ease),
                color .35s var(--ease),
                transform .3s var(--ease),
                box-shadow .35s var(--ease);
  }
  .btn-primary:hover,
  .plan-cta:hover,
  .btn-trial:hover,
  .btn-go:hover,
  .ev-cta:hover,
  .opt4-card .info .cta:hover,
  .opt2-card .panel .cta:hover,
  .trainer-card .panel .cta:hover {
    background-color: var(--color-brand-orange) !important;
    color: var(--text) !important;
    box-shadow: 0 10px 32px rgba(245, 124, 0, 0.4);
  }

  /* === ORANGE AS ACTIVE-STATE ACCENT (sparingly) ===
     Active nav links and the "current state" indicators pop in orange. */
  .nav-item.is-active > a,
  .nav-item > a.is-active,
  .opt3-row.active .name small,
  .opt3-row.active .num,
  .opt3-row.active .arrow,
  .opt4-tab.active {
    color: var(--color-brand-orange) !important;
  }
  .opt3-row.active::before,
  .opt4-tab.active {
    border-color: var(--color-brand-orange);
    background-color: var(--color-brand-orange);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    font-family: 'Archivo', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    cursor: default;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  .display { font-family: 'Anton', 'Bebas Neue', sans-serif; letter-spacing: 0.01em; line-height: 0.88; text-transform: uppercase; }
  .mono { font-family: 'Space Mono', monospace; }
  .container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; }

  /* Visually-hidden utility — keeps content in the DOM and accessible to
     screen readers + search engine crawlers, while hiding it from sighted
     users. Used for the SEO H1 at the top of the body. */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  ::selection { background: var(--accent); color: var(--text); }

  /* Custom scrollbar */
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: #000; }
  ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 10px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

  /* ================ PRELOADER ================
     Strategy:
     - Faster fade (.35s instead of .6s).
     - CSS-only failsafe animation (`pre-failsafe`) hides the preloader after
       2s NO MATTER WHAT — even if JavaScript is disabled, blocked, or errors.
     - `pointer-events: none` on `.done` so it can't intercept clicks during fade.
  */
  .preloader {
    position: fixed; inset: 0;
    background: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .35s ease, visibility .35s;
    animation: pre-failsafe 2s linear forwards;
  }
  .preloader.done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .preloader-logo {
    width: clamp(140px, 24vw, 240px);
    height: auto;
    display: block;
    animation: pre-pulse 1s ease-in-out infinite;
  }
  @keyframes pre-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.96); }
  }
  @keyframes pre-failsafe {
    0%, 90%  { opacity: 1; visibility: visible; }
    100%     { opacity: 0; visibility: hidden; pointer-events: none; }
  }

  /* ================ TOP BAR ================ */
  .topbar {
    background: #000;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
  }
  .topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    flex-wrap: wrap;
  }
  .topbar-left, .topbar-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
  .topbar .item { display: flex; align-items: center; gap: 6px; }
  .topbar .item b { color: var(--text); font-weight: 600; }
  .topbar .item svg {
    width: 13px; height: 13px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
  }

  @keyframes blink { 50% { opacity: 0.3; } }
  .topbar-social { display: flex; gap: 12px; }
  .topbar-social a {
    color: var(--muted);
    transition: color .3s var(--ease), transform .3s var(--ease);
    display: flex;
  }
  .topbar-social a:hover { color: var(--accent); transform: translateY(-2px); }
  .topbar-social svg { width: 14px; height: 14px; }
  @media (max-width: 720px) { .topbar .hide-sm { display: none; } }

  /* ================ HEADER ================ */
  .header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10,10,10,0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--line);
    transition: transform .4s var(--ease);
  }
  .header.hide { transform: translateY(-100%); }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
    gap: 20px;
  }
  .logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform .35s var(--ease), opacity .35s var(--ease);
  }
  .logo img {
    height: 58px;
    width: auto;
    display: block;
    object-fit: contain;
  }
  .logo:hover { transform: scale(1.06); opacity: 0.92; }
  .nav-links { display: none; align-items: center; gap: 2px; }
  @media (min-width: 1050px) { .nav-links { display: flex; } }
  .nav-item { position: relative; }
  .nav-item > a {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text);
    position: relative;
    transition: color .3s var(--ease);
  }
  .nav-item > a::before {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 18px;
    right: 18px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
  }
  .nav-item:hover > a::before { transform: scaleX(1); }
  .nav-item:hover > a { color: var(--accent); }
  .nav-item > a .chev { font-size: 9px; opacity: 0.7; transition: transform .3s var(--ease); }
  .nav-item:hover > a .chev { transform: rotate(180deg); }

  /* MEGA MENU */
  .megamenu {
    /* Anchor to the viewport, not the nav-item.
       Why: "Our Programs" sits left-of-center, so a centered 860px menu
       anchored to it would overflow past the left viewport edge on screens
       around 1050–1280px. Viewport anchoring guarantees it always fits. */
    position: fixed;
    top: 76px;                                    /* flush against the bottom of the header (no gap) */
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: min(860px, calc(100vw - 32px));        /* never exceed viewport */
    max-height: calc(100vh - 96px);               /* clip to viewport height */
    background: linear-gradient(180deg, var(--surface), var(--bg-2));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    opacity: 0;
    visibility: hidden;                           /* fully removed from interaction layer when hidden */
    pointer-events: none;
    /* NOTE: do NOT use `overflow: hidden` on the menu itself —
       it would clip the ::before hover bridge that extends above the menu.
       Children that need clipping (card images) use their own overflow rules. */
    /* SHOW transition: instant fade up. HIDE transition: small grace delay
       (200ms) on visibility so a brief mouse jitter doesn't slam it shut.
       transition-delay is overridden to 0 on the :hover state below. */
    transition:
      opacity .3s var(--ease),
      transform .35s var(--ease),
      visibility 0s .25s;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7);
    z-index: 99;                                  /* below header (100) so header stays on top */
  }

  /* ============================================================
     INVISIBLE HOVER BRIDGE
     Sits in the gap between the header bottom and the menu top.
     CRITICAL: pointer-events must explicitly be enabled here, because
     the parent `.megamenu` carries `pointer-events: none` while hidden,
     and children inherit it by default. We override with `auto`.
     ============================================================ */
  .megamenu::before {
    content: '';
    position: absolute;
    top: -28px;            /* extend ABOVE the menu into the dead zone */
    left: 0; right: 0;
    height: 32px;          /* generous bridge — survives mouse jitter */
    background: transparent;
    pointer-events: auto;  /* THE FIX — bridge stays catchable */
  }

  /* Open state — triggered when hovering the nav item OR the menu itself
     OR the bridge (which is part of the menu). */
  .nav-item:hover .megamenu,
  .megamenu:hover,
  .nav-item:focus-within .megamenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition:
      opacity .3s var(--ease),
      transform .35s var(--ease),
      visibility 0s 0s;    /* no delay when showing */
  }

  /* Mega menu grid — responsive 2-column that gracefully scales */
  .mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    min-width: 0;                                 /* allow children to shrink */
  }
  .mega-col {
    min-width: 0;                                 /* prevent overflow from long item titles */
  }
  .mega-col h6 {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent);
    margin-bottom: 14px;
    font-weight: 800;
  }
  .mega-col ul { list-style: none; margin: 0; padding: 0; }
  .mega-col li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--muted);
    transition: background .3s var(--ease), color .3s var(--ease), padding .3s var(--ease);
    min-width: 0;                                 /* allow inner text to truncate */
  }
  .mega-col li a:hover {
    background: var(--bg);
    color: var(--text);
    padding-left: 16px;
  }
  .mega-feature {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .mega-feature .card {
    position: relative;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 14px;
    cursor: pointer;
  }
  .mega-feature .card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.9));
    z-index: 1;
  }
  .mega-feature .card img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
  }
  .mega-feature .card:hover img { transform: scale(1.1); }
  .mega-feature .card b {
    position: relative; z-index: 2;
    font-family: 'Anton', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* ===== MEGA MENU VARIANTS ===== */
  /* Width variants — all stay safely within viewport */
  .megamenu.mega-wide { width: min(860px, calc(100vw - 32px)); }
  .megamenu.mega-xl   { width: min(960px, calc(100vw - 32px)); }
  .megamenu.mega-sm   { width: min(520px, calc(100vw - 32px)); }

  /* === TRAINERS MEGA MENU — photo-card grid + footer CTA === */
  .mega-trainers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .mt-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    transition: background-color .25s var(--ease),
                border-color .25s var(--ease),
                transform .25s var(--ease);
  }
  .mt-card:hover {
    background: rgba(211, 47, 47, 0.08);
    border-color: rgba(211, 47, 47, 0.4);
    transform: translateX(2px);
  }
  .mt-photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #2a2a2a;
    flex-shrink: 0;
    border: 2px solid rgba(211, 47, 47, 0.3);
    transition: border-color .25s var(--ease), transform .25s var(--ease);
  }
  .mt-card:hover .mt-photo {
    border-color: var(--color-brand-red);
    transform: scale(1.05);
  }
  .mt-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .mt-info strong {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    letter-spacing: -0.005em;
    line-height: 1.2;
  }
  .mt-info small {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .mt-card:hover .mt-info small { color: var(--color-brand-orange); }

  .mega-trainers-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .mt-foot-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-brand-red);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .mt-foot-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-brand-red);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .25s var(--ease), transform .25s var(--ease);
  }
  .mt-foot-cta:hover {
    background: var(--color-brand-orange);
    transform: translateY(-1px);
  }

  /* 3-column variant */
  .mega-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

  /* Narrow viewport guards — collapse columns gracefully */
  @media (max-width: 1150px) {
    .mega-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 720px) {
    .mega-grid,
    .mega-grid.cols-3 { grid-template-columns: 1fr; gap: 16px; }
    .mega-feature { grid-column: span 1; grid-template-columns: 1fr 1fr; }
    .megamenu { padding: 20px; }
  }

  /* Icon-rich list items (used in About, Trainers, Schedule) */
  .mega-col li a .mi {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 9px;
    flex-shrink: 0;
    color: var(--accent);
    transition: background .35s var(--ease),
                border-color .35s var(--ease),
                color .35s var(--ease),
                transform .4s var(--ease);
  }
  .mega-col li a .mi svg {
    width: 18px; height: 18px;
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .35s var(--ease), transform .4s var(--ease);
  }
  .mega-col li a:hover .mi {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
    transform: rotate(-4deg) scale(1.08);
  }
  .mega-col li a:hover .mi svg {
    transform: scale(1.05);
  }
  .mega-col li a .mt {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;                                 /* allow children to shrink below content */
    flex: 1 1 auto;
    overflow: hidden;
  }
  .mega-col li a .mt strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mega-col li a .mt small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mega-col li a:hover .mt strong { color: var(--accent); }

  /* Hide the arrow prefix when using icon layout */
  .mega-col li a.mi-row::before { display: none; }
  .mega-col li a.mi-row { padding: 8px 10px; gap: 12px; }
  .mega-col li a.mi-row:hover { padding-left: 10px; }

  /* Price tag chip for program items */
  .mega-col li a .price-tag {
    margin-left: auto;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    background: rgba(211,47,47,0.1);
    color: var(--accent);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(211,47,47,0.25);
  }

  /* "Latest post" featured block for Blog mega */
  .mega-post {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    margin-top: 18px;
    padding: 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: border-color .3s var(--ease), transform .3s var(--ease);
  }
  .mega-post:hover { border-color: var(--accent); transform: translateY(-2px); }
  .mega-post img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 8px;
    aspect-ratio: 1/1;
  }
  .mega-post .mp-body { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
  .mega-post .mp-tag {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }
  .mega-post h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
  }
  .mega-post p {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.55;
  }
  .mega-post .mp-read {
    font-size: 12px;
    color: var(--accent);
    font-weight: 700;
    margin-top: 4px;
    letter-spacing: 0.04em;
  }

  /* Schedule mega — today's class highlight */
  .mega-today {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(211,47,47,0.08), rgba(255,46,99,0.05));
    border: 1px solid rgba(211,47,47,0.2);
    border-radius: 12px;
    padding: 16px 18px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .mega-today .mt-label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }
  .mega-today .mt-title {
    font-family: 'Anton', sans-serif;
    font-size: 20px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  .mega-today .mt-meta {
    font-size: 12px;
    color: var(--muted);
    display: flex; gap: 14px; flex-wrap: wrap;
  }
  .mega-today .mt-meta span b { color: var(--text); font-weight: 600; }
  .mega-today .mt-cta {
    margin-left: auto;
    background: var(--accent);
    color: #000;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: transform .3s var(--ease);
  }
  .mega-today .mt-cta:hover { transform: scale(1.05); }

  /* Gallery mega — compact image chips */
  .mega-gallery-strip {
    grid-column: span 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .mega-gallery-strip .chip {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
  }
  .mega-gallery-strip .chip img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
  }
  .mega-gallery-strip .chip::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.8));
    opacity: 0;
    transition: opacity .3s var(--ease);
  }
  .mega-gallery-strip .chip:hover img { transform: scale(1.15); }
  .mega-gallery-strip .chip:hover::after { opacity: 1; }
  .mega-gallery-strip .chip span {
    position: absolute;
    bottom: 8px; left: 10px;
    z-index: 2;
    font-family: 'Anton', sans-serif;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    transition: all .35s var(--ease);
  }
  .mega-gallery-strip .chip:hover span { opacity: 1; transform: translateY(0); }

  /* Trainer avatar featured */
  .mega-trainer {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 14px;
    align-items: center;
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: border-color .3s var(--ease);
  }
  .mega-trainer:hover { border-color: var(--accent); }
  .mega-trainer img {
    width: 80px; height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent);
  }
  .mega-trainer .mtr-name {
    font-family: 'Anton', sans-serif;
    font-size: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .mega-trainer .mtr-role {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 3px;
  }
  .mega-trainer .mtr-badge {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--accent);
    background: rgba(211,47,47,0.08);
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(211,47,47,0.25);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  /* Mobile submenu (accordion style for nav items with sub-pages) */
  .mobile-menu .m-group { border-bottom: 1px solid var(--line); }
  .mobile-menu .m-group > .m-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    font-family: 'Anton', sans-serif;
    font-size: 19px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition: padding-left .3s var(--ease), color .3s var(--ease);
  }
  .mobile-menu .m-group > .m-head .plus {
    font-size: 16px;
    transition: transform .4s var(--ease);
    color: var(--accent);
  }
  .mobile-menu .m-group.open > .m-head .plus { transform: rotate(45deg); }
  .mobile-menu .m-group:hover > .m-head { padding-left: 10px; color: var(--accent); }
  .mobile-menu .m-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s var(--ease);
  }
  .mobile-menu .m-group.open .m-sub { max-height: 500px; }
  .mobile-menu .m-sub a {
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.01em;
    padding: 14px 0 14px 20px;
    color: var(--muted);
    border-bottom: 1px dashed var(--line);
  }
  .mobile-menu .m-sub a:last-child { border-bottom: none; }
  .mobile-menu .m-sub a::after { display: none; }
  .mobile-menu .m-sub a:hover { color: var(--accent); padding-left: 28px; }

  .nav-cta {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    /* Solid red at rest, transitions to orange on hover (fire ramp) */
    background-color: var(--color-brand-red);
    color: var(--text);
    border: 1.5px solid var(--color-brand-red);
    box-shadow: 0 6px 22px rgba(211, 47, 47, 0.28);
    transition:
      background-color .4s var(--ease),
      border-color .4s var(--ease),
      box-shadow .4s var(--ease),
      transform .3s var(--ease);
  }
  .nav-cta:hover {
    background-color: var(--color-brand-orange);
    border-color: var(--color-brand-orange);
    color: var(--text);
    box-shadow: 0 10px 32px rgba(245, 124, 0, 0.4);
    transform: translateY(-1px);
  }
  .nav-cta:active { transform: translateY(0); }
  @media (min-width: 1050px) { .nav-cta { display: inline-flex; } }

  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px; height: 46px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    padding: 0 13px;
    transition: border-color .3s var(--ease);
  }
  .hamburger:hover { border-color: var(--accent); }
  .hamburger span {
    display: block;
    width: 20px; height: 2px;
    background: var(--text);
    transition: transform .4s var(--ease), opacity .25s var(--ease);
    transform-origin: center;
  }
  /* Hamburger ? X transformation when the mobile menu is open.
     Top bar rotates 45° and drops to center, middle bar fades out,
     bottom bar rotates -45° and rises to center. Pure CSS, GPU-accelerated. */
  .hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hamburger.is-open { border-color: var(--accent); }
  @media (min-width: 1050px) { .hamburger { display: none; } }

  /* MOBILE MENU */
  .mobile-menu {
    position: fixed; top: 0; right: 0;
    width: min(360px, 90vw);
    height: 100vh;
    background: var(--bg-2);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform .5s var(--ease);
    z-index: 200;
    overflow-y: auto;
    padding: 32px 28px 60px;
  }
  .mobile-menu.open { transform: translateX(0); }
  .mobile-menu .close {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    cursor: pointer;
    transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
  }
  /* Apply the same SVG stroke pattern used everywhere else on the site
     (matches .topbar .item svg at line 701 — fill: none, currentColor stroke,
     rounded caps + joins). Without this rule the <path> defaults to fill: black,
     which on the dark menu background paints invisible black-on-black. */
  .mobile-menu .close svg {
    width: 18px; height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
  }
  .mobile-menu .close:hover { border-color: var(--accent); color: var(--accent); transform: rotate(90deg); }
  .mobile-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    font-family: 'Anton', sans-serif;
    font-size: 19px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
    transition: padding-left .3s var(--ease), color .3s var(--ease);
  }
  .mobile-menu a::after {
    content: '?';
    opacity: 0;
    transform: translateX(-10px);
    transition: .3s var(--ease);
  }
  .mobile-menu a:hover { padding-left: 10px; color: var(--accent); }
  .mobile-menu a:hover::after { opacity: 1; transform: translateX(0); color: var(--accent); }
  .menu-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s var(--ease);
  }
  .menu-overlay.open { opacity: 1; pointer-events: auto; }

  /* ================ SPLIT INTERACTIVE ================ */
  .split-section {
    position: relative;
    padding: 120px 0 100px;
    background: var(--bg);
    overflow: hidden;
  }
  .split-section::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(211,47,47,0.06), transparent 65%);
    pointer-events: none;
    filter: blur(40px);
  }
  .split-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: flex-start;
  }
  @media (min-width: 900px) {
    .split-layout { grid-template-columns: 1.1fr 1fr; gap: 80px; }
  }
  .split-layout .left-nav { position: relative; }
  .split-section .menu-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .split-section .menu-item {
    position: relative;
    display: inline-block;
    width: fit-content;
    cursor: pointer;
    padding-bottom: 6px;
    transform-origin: left center;
    transition: transform .3s var(--ease);
    will-change: transform;
  }
  .split-section .menu-item h2 {
    font-family: 'Anton', 'Bebas Neue', sans-serif;
    font-size: clamp(40px, 7.8vw, 104px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #2a2a2a;
    -webkit-text-stroke: 1px #333;
    transition: color .35s var(--ease), -webkit-text-stroke-color .35s var(--ease);
    margin: 0;
  }
  .split-section .menu-item::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0;
    height: 5px;
    background: var(--accent);
    border-radius: 4px;
    box-shadow: 0 0 18px rgba(211,47,47,0.5);
    transition: width .45s cubic-bezier(.2, .9, .4, 1.1);
    will-change: width;
  }
  .split-section .menu-item:hover h2 {
    color: #555;
    -webkit-text-stroke-color: #555;
  }
  .split-section .menu-item.active h2 {
    color: var(--text);
    -webkit-text-stroke-color: var(--text);
  }
  .split-section .menu-item.active::after {
    width: 100%;
  }
  .split-section .menu-item:hover { transform: scale(1.01); }

  /* Right content */
  .split-section .right-content {
    min-height: 340px;
    display: flex;
    align-items: center;
    padding-top: 20px;
  }
  .split-section .content-card {
    width: 100%;
    max-width: 480px;
  }
  .split-section .dynamic-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 18px;
  }
  .split-section .dynamic-label::before {
    content: '';
    width: 28px; height: 2px; background: var(--accent);
  }
  .split-section .dynamic-title {
    font-family: 'Anton', sans-serif;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 22px;
  }
  .split-section .dynamic-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
  }
  .split-section .dynamic-text p { margin-bottom: 14px; }
  .split-section .dynamic-text p:last-child { margin-bottom: 0; }
  .split-section .dynamic-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
  }
  .split-section .dynamic-meta .chip {
    padding: 7px 14px;
    background: rgba(211,47,47,0.06);
    border: 1px solid rgba(211,47,47,0.2);
    border-radius: 999px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Blur-to-clear reveal animation (matches supplied spec) */
  .split-section .content-animate {
    animation: premiumReveal .55s cubic-bezier(.2, .9, .4, 1.1) forwards;
  }
  @keyframes premiumReveal {
    0%   { opacity: 0; transform: translateY(18px); filter: blur(6px); }
    40%  { opacity: 0.3; }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
  }

  @media (max-width: 899px) {
    .split-section { padding: 80px 0; }
    .split-section .menu-item h2 { font-size: clamp(36px, 9vw, 56px); }
    .split-section .right-content { min-height: 220px; padding-top: 0; }
    .split-section .content-card { max-width: 100%; }

    /* === Center everything on mobile ===
       The desktop layout is left-aligned (menu list on the left, content on
       the right). On mobile both stack into one column — center-align all
       text and inline elements so it reads cleanly without an awkward
       hanging left edge. */
    .split-section .menu-list { align-items: center; }
    .split-section .menu-item {
      width: fit-content;
      margin: 0 auto;
      transform-origin: center center;
    }
    /* Active-state underline expands from center on mobile (not from left) */
    .split-section .menu-item::after {
      left: 50%;
      transform: translateX(-50%);
    }

    /* Right content: center the card and its inner elements */
    .split-section .right-content { justify-content: center; text-align: center; }
    .split-section .content-card { text-align: center; }
    .split-section .dynamic-label { justify-content: center; }
    .split-section .dynamic-meta { justify-content: center; }
  }

  /* ================ HERO CAROUSEL ================ */
  .hero {
    position: relative;
    height: 100vh;
    min-height: 780px;          /* taller — true cinematic banner */
    max-height: 1000px;         /* don't stretch absurdly on 4K monitors */
    padding-bottom: 60px;       /* generous breathing space above thumbnail strip */
    overflow: hidden;
    background: #000;
    isolation: isolate;
  }

  /* === HERO TRUST BADGE (top-center, above headline) ===
     Pill-shaped, glassmorphism, gently bobs up and down.
     Lives inline at the top of each slide's content stack — replaces
     the old eyebrow text and sits 30px above the headline. */
  .hero-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    margin: 0 auto 30px;                          /* 30px breathing room before headline */
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid #FF0000;
    border-radius: 50px;
    box-shadow:
      0 0 0 3px rgba(255, 0, 0, 0.08),
      0 8px 24px rgba(0, 0, 0, 0.45),
      0 0 18px rgba(255, 0, 0, 0.2);
    font-family: 'Inter', sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
    animation: float-badge 3.2s ease-in-out infinite;
    will-change: transform;
  }
  .hero-trust-badge .htb-stars {
    color: #FFD24A;                              /* warm gold for the stars */
    font-size: 12px;
    letter-spacing: 0.06em;
    line-height: 1;
    text-shadow: 0 0 6px rgba(255, 210, 74, 0.5);
  }
  .hero-trust-badge .htb-text {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
  }
  .hero-trust-badge .htb-text b {
    font-weight: 800;
    color: #FFFFFF;
  }
  .hero-trust-badge .htb-divider {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
  }

  /* Float keyframe — gentle 6px bob over 3.2s, ease-in-out so the
     motion is most visible at the apex (= readable, not jittery). */
  @keyframes float-badge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }

  /* Respect motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .hero-trust-badge { animation: none; }
  }

  /* Mobile: tighter padding + smaller copy */
  @media (max-width: 600px) {
    .hero-trust-badge {
      padding: 7px 14px;
      gap: 8px;
      margin-bottom: 24px;
    }
    .hero-trust-badge .htb-stars,
    .hero-trust-badge .htb-text { font-size: 11px; }
  }
  .h3-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
  }
  .h3-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.1s var(--ease);
  }
  .h3-slide.active { opacity: 1; }
  .h3-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    transition: transform 7s linear;
  }
  .h3-slide.active .h3-bg { transform: scale(1.14); }
  .h3-slide::after {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 15% 10%, rgba(211,47,47,0.12), transparent 55%),
      linear-gradient(180deg, rgba(10,10,10,0.5) 0%, transparent 25%, transparent 50%, rgba(10,10,10,0.9) 100%),
      linear-gradient(90deg, rgba(10,10,10,0.55), transparent 55%);
  }

  /* Floating particles (kept — nice ambient touch) */
  .particle {
    position: absolute;
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--accent);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
  }
  .particle:nth-child(1) { top: 20%; left: 10%; animation: float 8s ease-in-out infinite; }
  .particle:nth-child(2) { top: 60%; left: 85%; width: 4px; height: 4px; animation: float 10s ease-in-out infinite .5s; }
  .particle:nth-child(3) { top: 40%; left: 70%; width: 5px; height: 5px; animation: float 12s ease-in-out infinite 1s; }
  .particle:nth-child(4) { top: 80%; left: 20%; width: 3px; height: 3px; animation: float 9s ease-in-out infinite 1.5s; }
  .particle:nth-child(5) { top: 15%; left: 60%; width: 4px; height: 4px; animation: float 11s ease-in-out infinite 2s; }
  @keyframes float {
    0%, 100% { opacity: 0; transform: translateY(0) translateX(0); }
    50% { opacity: 0.8; transform: translateY(-40px) translateX(20px); }
  }

  /* Content (centered, absolute-positioned slide-texts for fade/slide transitions) */
  .h3-content {
    position: absolute;
    top: 35%; left: 0; right: 0;
    transform: translateY(-35%);
    z-index: 3;
    text-align: center;
    padding: 0 24px;
  }
  .h3-slide-text {
    max-width: 920px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: all .9s var(--ease);
    transition-delay: .2s;
    position: absolute;
    left: 0; right: 0;
    pointer-events: none;
  }
  .h3-slide-text.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    position: relative;
    pointer-events: auto;
  }

  /* Eyebrow (shared with other sections) */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid var(--line);
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    margin-bottom: 28px;
    animation: slide-down 1s var(--ease) .2s backwards;
  }
  .eyebrow .dot {
    width: 8px; height: 8px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--accent);
    animation: pulse 1.8s infinite;
  }
  @keyframes pulse { 50% { opacity: 0.4; transform: scale(0.8); } }
  @keyframes slide-down {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Hero headline */
  .hero h1,
  .hero h2 {
    font-size: clamp(48px, 8.5vw, 110px);          /* dialed back — cinematic but not overwhelming */
    margin-bottom: 28px;                            /* slightly more breathing room before subhead */
    text-shadow: 0 4px 40px rgba(0,0,0,0.6);
    line-height: 0.92;                              /* slightly looser — reads cleaner at all sizes */
  }
  .hero h1 .accent,
  .hero h2 .accent { color: var(--accent); }

  .h3-sub {
    color: #d5d5d5;
    font-size: clamp(15px, 1.3vw, 18px);
    max-width: 560px;
    margin: 0 auto 36px;
    line-height: 1.6;
  }
  .h3-ctas {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }

  /* === HERO CAROUSEL ARROWS — side-edge floating Prev/Next === */
  .h3-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--color-text-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition:
      background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .h3-arrow.h3-prev { left: 24px; }
  .h3-arrow.h3-next { right: 24px; }
  @media (min-width: 1100px) {
    .h3-arrow.h3-prev { left: 36px; }
    .h3-arrow.h3-next { right: 36px; }
  }
  .h3-arrow:hover {
    background: rgba(211, 47, 47, 0.85);
    border-color: var(--color-brand-red);
    transform: translateY(-50%) scale(1.08);
    box-shadow:
      0 12px 32px rgba(211, 47, 47, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  .h3-arrow:focus-visible {
    outline: 2px solid var(--color-brand-orange);
    outline-offset: 3px;
  }
  .h3-arrow svg {
    width: 20px; height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* Mobile arrows — slimmer, lighter. Replaces the old `display: none`.
     These sit at the vertical center of the hero, small enough not to
     obscure the CTA but always reachable with a thumb. */
  @media (max-width: 600px) {
    .h3-arrow {
      width: 38px; height: 38px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: none;
      /* backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px); */
    }
    .h3-arrow.h3-prev { left: 12px; }
    .h3-arrow.h3-next { right: 12px; }
    .h3-arrow svg { width: 16px; height: 16px; stroke-width: 2; }
    .h3-arrow:hover {
      background: rgb(211 47 47 / 37%);
      border-color: var(--color-brand-red);
      box-shadow: none;
      transform: translateY(-50%) scale(1.05);
    }
  }

  /* === HERO DOT INDICATORS (mobile only) ===
     Minimal dots anchored to the bottom of the hero.
     Hidden on tablet/desktop where the thumbnail strip serves
     the same purpose with richer context. */
  .h3-dots {
    display: none;
    position: absolute;
    bottom: 24px;
    left: 0; right: 0;
    z-index: 10;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  .h3-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: background .3s var(--ease), transform .3s var(--ease), width .3s var(--ease);
  }
  .h3-dot:hover { background: rgba(255, 255, 255, 0.5); }
  .h3-dot.active {
    background: var(--accent);
    width: 24px;
    border-radius: 4px;
  }
  @media (max-width: 600px) {
    .h3-dots { display: flex; }
  }

  /* Thumbnail progress strip */
  .h3-thumbs {
    position: absolute;
    bottom: 32px; left: 0; right: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }
  .h3-thumb {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 14px 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(10,10,10,0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 14px;
    transition: all .4s var(--ease);
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    width: 100%;
    font-family: inherit;
    color: inherit;
  }
  .h3-thumb:hover {
    border-color: rgba(211,47,47,0.35);
    background: rgba(15,15,15,0.7);
    transform: translateY(-2px);
  }
  .h3-thumb.active {
    border-color: rgba(211,47,47,0.5);
    background: rgba(20,20,20,0.82);
  }
  .h3-thumb .t-img {
    width: 52px; height: 52px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.1);
  }
  .h3-thumb .t-img img { width: 100%; height: 100%; object-fit: cover; }
  .h3-thumb .t-body { flex: 1; min-width: 0; }
  .h3-thumb .t-label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .h3-thumb .t-title {
    font-family: 'Anton', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 3px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .h3-thumb.active .t-title { color: var(--accent); }
  .h3-thumb .t-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,0.05);
    overflow: hidden;
  }
  .h3-thumb .t-bar::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    width: 0;
    background: var(--accent);
  }
  .h3-thumb.active .t-bar::after {
    animation: thumbFill 6s linear forwards;
  }
  .hero.paused .h3-thumb.active .t-bar::after { animation-play-state: paused; }
  @keyframes thumbFill { to { width: 100%; } }

  @media (max-width: 860px) {
    .h3-thumbs { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 520px) {
    .h3-thumbs { grid-template-columns: 1fr; gap: 8px; bottom: 16px; }
    .h3-thumb { padding: 10px 12px 14px; }
    .h3-thumb .t-img { width: 42px; height: 42px; }
    .h3-thumb .t-title { font-size: 13px; }
  }
  /* Hide thumbnail cards on phones — replaced by dots + arrows.
     MUST appear after the base `.h3-thumbs { display: grid }` rule above
     so it wins the cascade at equal specificity. */
  @media (max-width: 600px) {
    .h3-thumbs { display: none !important; }
  }

  /* === MOBILE HERO REFINEMENTS ===
     With thumbs hidden, the hero needs to re-center and shrink to a
     real-phone-sized viewport. Three concrete fixes:
       1. Drop the 780px desktop floor — let the hero hug the viewport.
       2. Use 100svh (small viewport height) so the bottom isn't clipped
          by the mobile browser's collapsing toolbar. Fallback to 100vh
          for any browser too old to know `svh`.
       3. Remove `padding-bottom: 60px` — it was breathing room above the
          (now hidden) thumbnail strip. Becomes dead space on mobile.
       4. Re-center the content vertically (was top: 35% to leave room
          for thumbs below).
       5. Stack CTAs vertically on very narrow screens (=420px) so the
          two buttons don't wrap into a half-line of "Meet Coaches" alone. */
  @media (max-width: 600px) {
    .hero {
      min-height: 0;
      height: 100vh;
      height: 100svh;
      padding-bottom: 0;
    }
    .h3-content {
      top: 50%;
      transform: translateY(-50%);
      padding: 0 20px;
    }
    .hero h1,
    .hero h2 {
      margin-bottom: 20px;
    }
    .h3-sub {
      margin-bottom: 28px;
    }
  }
  @media (max-width: 420px) {
    .h3-ctas {
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .h3-ctas .btn {
      width: 100%;
      max-width: 280px;
    }
  }

  /* ================ BUTTONS (shared) ================ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 17px 30px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: none;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .btn-primary {
    background: var(--accent);
    color: #000;
    box-shadow: 0 10px 40px rgba(211,47,47,0.25);
  }
  .btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left .7s var(--ease);
  }
  .btn-primary:hover::before { left: 100%; }
  .btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 18px 50px rgba(211,47,47,0.5);
  }
  .btn-primary .arr { transition: transform .3s var(--ease); }
  .btn-primary:hover .arr { transform: translateX(6px); }

  .btn-ghost {
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(10px);
    color: var(--text);
    border: 1.5px solid var(--line);
    transition: .35s var(--ease);
  }
  .btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-3px);
  }

  /* ================ MARQUEE ================ */
  .marquee {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
    overflow: hidden;
    padding: 26px 0;
    position: relative;
  }
  .marquee::before,
  .marquee::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
  }
  .marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-2), transparent); }
  .marquee::after { right: 0; background: linear-gradient(-90deg, var(--bg-2), transparent); }
  .marquee-track {
    display: flex;
    gap: 52px;
    animation: scroll 32s linear infinite;
    white-space: nowrap;
    width: max-content;
    align-items: center;
  }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .marquee span {
    font-family: 'Anton', sans-serif;
    font-size: clamp(32px, 5.8vw, 58px);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  .marquee span.stroke {
    -webkit-text-stroke: 1.5px var(--accent);
    color: transparent;
  }
  .marquee .star { color: var(--accent); font-size: 28px; animation: spin 6s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Dual-strip BEAST MODE band — two rows, opposing directions, tilted */
  .marquee-band {
    position: relative;
    background: #000;
    padding: 16px 0;
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    isolation: isolate;
  }
  .marquee-band::before {
    content: '';
    position: absolute;
    inset: -40% -10%;
    background: radial-gradient(circle at 30% 50%, rgba(211,47,47,0.08), transparent 60%);
    z-index: 0;
    pointer-events: none;
  }
  .marquee-band .band-strip {
    position: relative;
    overflow: hidden;
    padding: 14px 0;
    z-index: 1;
  }
  .marquee-band .band-strip.tilt-up {
    transform: rotate(-2deg);
    margin: 4px -20px;
  }
  .marquee-band .band-strip.tilt-down {
    transform: rotate(1.5deg);
    margin: 4px -20px;
  }
  .marquee-band .band-strip::before,
  .marquee-band .band-strip::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
  }
  .marquee-band .band-strip::before { left: 0; background: linear-gradient(90deg, #000 40%, transparent); }
  .marquee-band .band-strip::after { right: 0; background: linear-gradient(-90deg, #000 40%, transparent); }

  .marquee-band .band-track {
    display: flex;
    gap: 48px;
    align-items: center;
    white-space: nowrap;
    width: max-content;
    animation: scroll 34s linear infinite;
  }
  .marquee-band .band-track.reverse { animation: scrollReverse 40s linear infinite; }
  .marquee-band:hover .band-track { animation-play-state: paused; }
  @keyframes scrollReverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }

  .marquee-band .band-track span {
    font-family: 'Anton', 'Bebas Neue', sans-serif;
    font-size: clamp(34px, 5.5vw, 62px);
    line-height: 1;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--text);
    transition: color .3s var(--ease), -webkit-text-stroke-color .3s var(--ease);
    cursor: default;
  }
  .marquee-band .band-track span.stroke {
    -webkit-text-stroke: 1.5px var(--text);
    color: transparent;
  }
  .marquee-band .band-track span.accent {
    color: var(--accent);
  }
  .marquee-band .band-track span:hover {
    color: var(--accent);
    -webkit-text-stroke-color: var(--accent);
  }
  .marquee-band .band-track .mark {
    font-size: 26px;
    color: var(--accent);
    animation: spin 5s linear infinite;
    display: inline-block;
  }
  .marquee-band .band-track .mark.plus {
    animation: none;
    font-weight: 900;
    font-size: 30px;
  }

  /* ================ SECTION CORE ================ */
  section { padding: 110px 0; position: relative; }
  .section-head { margin-bottom: 64px; max-width: 760px; }
  .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
  .section-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    font-weight: 800;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .section-label::before {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--accent);
  }
  /* ================ GLOBAL SECTION TITLES (Unified Premium Standard) ================
     Single source of truth for every major section headline across the site.
     Three-tone color system: pure white (base) + .soft (muted silver) + .accent (brand).
     Used by: .section-title (default), .services-head h2, .ev-head h2,
     .rl-head h2, .class-slider-section h2, .gallery-head h2, .contact-left h2, etc.
  */
  .section-title,
  .services-head h2,
  .ev-head h2,
  .rl-head h2,
  .gallery .gallery-head h2,
  .class-slider-section h2.cs-title-h2,
  .contact-left h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 6.5vw, 80px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-transform: none;
    color: var(--text);
    margin-bottom: 22px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Three-tone span utilities — work globally inside any title */
  .soft   { color: rgba(255, 255, 255, 0.35); font-weight: 800; }
  .accent { color: var(--accent);             font-weight: 800; }

  /* When .accent or .soft sits inside .hero h1 / .hero h2 (the cinematic
     carousel headers), bump font-weight to keep visual punch. */
  .hero h1 .accent,
  .hero h1 .soft,
  .hero h2 .accent,
  .hero h2 .soft { font-weight: 900; }

  .section-sub { color: var(--muted); font-size: 17px; max-width: 580px; line-height: 1.6; }
  .center .section-sub { margin: 0 auto; }

  /* ================ ABOUT ================ */
  /* ================ ABOUT (Founder Story) ================ */
  .about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
  }
  @media (min-width: 900px) {
    .about-grid { grid-template-columns: 0.9fr 1.1fr; gap: 80px; }
  }

  /* Portrait side */
  .about-portrait { position: relative; }
  .about-portrait .frame {
    position: relative;
    aspect-ratio: 4/5;
    max-width: 460px;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid var(--line);
  }
  .about-portrait .frame img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(20%) contrast(1.05);
    transition: filter .6s var(--ease), transform .8s var(--ease);
  }
  .about-portrait:hover .frame img {
    filter: grayscale(0) contrast(1.1);
    transform: scale(1.04);
  }
  .about-portrait .since {
    position: absolute;
    top: -16px; right: -16px;
    background: var(--accent);
    color: #000;
    padding: 14px 22px;
    border-radius: 16px;
    font-family: 'Anton', sans-serif;
    font-size: 18px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 12px 40px rgba(211,47,47,0.3);
    transform: rotate(4deg);
    animation: bounce-in 1s var(--ease-back) .5s backwards;
  }
  .about-portrait .since small {
    display: block;
    font-size: 10px;
    font-weight: 600;
    font-family: 'Space Mono', monospace;
    margin-top: 2px;
  }
  @keyframes bounce-in {
    0% { transform: scale(0) rotate(-10deg); opacity: 0; }
    100% { transform: scale(1) rotate(4deg); opacity: 1; }
  }

  /* Copy side */
  .about-copy .section-label { margin-bottom: 24px; }
  /* Founder quote — aligned with the page's premium headline standard
     (Inter 800, no italic, tight tracking) instead of Playfair italic. */
  .about-quote {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 32px;
    position: relative;
    padding-left: 28px;
    border-left: 3px solid var(--accent);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  .about-quote::before {
    content: '"';
    position: absolute;
    top: -30px; left: 12px;
    font-size: 100px;
    color: var(--accent);
    opacity: 0.2;
    line-height: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
  }
  .about-copy p {
    color: var(--muted);
    font-size: 16px;
    margin-bottom: 18px;
    line-height: 1.7;
  }

  /* Stats row */
  .about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
  }
  @media (max-width: 560px) { .about-stats { grid-template-columns: repeat(2, 1fr); } }
  .about-stats .s {
    text-align: center;
    padding: 8px 4px;
    transition: transform .3s var(--ease);
  }
  .about-stats .s:hover { transform: translateY(-4px); }
  .about-stats .s b {
    display: block;
    font-family: 'Anton', sans-serif;
    font-size: clamp(30px, 4vw, 42px);
    color: var(--accent);
    line-height: 1;
    letter-spacing: 0.02em;
  }
  .about-stats .s span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 8px;
  }

  /* ================ STRONGER (Brand Philosophy · Image Collage) ================
     Magazine-style split-layout section that bridges About (the story) with
     the Virtual Tour. Voice block on the left + 3-piece image collage on the
     right (main portrait + secondary frame + red stat badge). */
  #stronger {
    background: var(--bg);
    border-top: 1px solid var(--line);
  }
  .stronger-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
  }
  @media (min-width: 980px) {
    .stronger-grid { grid-template-columns: 1fr 1.05fr; gap: 80px; }
  }

  /* === LEFT — copy block === */
  .stronger-copy { max-width: 540px; }
  .stronger-copy .section-label { margin-bottom: 20px; }
  .stronger-copy .section-title { margin-bottom: 10px; font-size: clamp(36px, 5vw, 60px); }

  /* Decorative red squiggle under heading (echoes the reference design) */
  .stronger-squiggle {
    width: 110px; height: 14px;
    color: var(--color-brand-red);
    display: block;
    margin: 4px 0 26px;
  }

  .stronger-body {
    font-family: 'Archivo', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 24px;
    max-width: 480px;
  }
  .stronger-quote {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    letter-spacing: -0.005em;
    padding: 0 0 0 18px;
    margin: 0 0 36px;
    border-left: 3px solid var(--color-brand-red);
    max-width: 480px;
  }

  /* Bottom row: phone block + CTA */
  .stronger-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
  }
  .stronger-call {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--text);
  }
  .stronger-call-ic {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2px solid var(--color-brand-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(211, 47, 47, 0.08);
    color: var(--color-brand-red);
    flex-shrink: 0;
  }
  .stronger-call-ic svg { width: 16px; height: 16px; }
  .stronger-call-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
  }
  .stronger-call-text .lbl {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--color-brand-red);
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
  }
  .stronger-call-text b {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
  }

  .stronger-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 30px;
    background: var(--color-brand-red);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .35s var(--ease),
                color .35s var(--ease),
                transform .3s var(--ease),
                box-shadow .35s var(--ease);
  }
  .stronger-cta:hover {
    background: var(--color-brand-orange);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(245, 124, 0, 0.4);
  }
  .stronger-cta .arr {
    font-size: 16px;
    transition: transform .3s var(--ease);
    display: inline-block;
  }
  .stronger-cta:hover .arr { transform: translateX(4px); }

  /* === RIGHT — 2×2 image collage (main spans both rows; right column holds
        the smaller frame on top + red stat badge below) === */
  .stronger-collage {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    width: 100%;
    height: 560px;
    max-width: 620px;
    margin-left: auto;
  }
  @media (max-width: 980px) {
    .stronger-collage { margin: 0 auto; height: 480px; }
  }
  @media (max-width: 600px) {
    .stronger-collage { height: 420px; gap: 12px; }
  }

  .stronger-main {
    grid-row: 1 / 3;
    grid-column: 1;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  }
  .stronger-main img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--ease);
  }
  #stronger:hover .stronger-main img { transform: scale(1.04); }

  .stronger-overlay {
    grid-row: 1;
    grid-column: 2;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    border: 4px solid var(--bg);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  }
  .stronger-overlay img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Floating stat badge — red surface, matches the reference's "15+ YEARS" block */
  .stronger-badge {
    grid-row: 2;
    grid-column: 2;
    background: var(--color-brand-red);
    color: var(--text);
    padding: 18px 22px;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(211, 47, 47, 0.35);
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
  }
  .stronger-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
    pointer-events: none;
  }
  .stronger-badge-ic {
    width: 46px; height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.85);
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    position: relative;
    z-index: 1;
  }
  .stronger-badge-ic svg { width: 22px; height: 22px; }
  .stronger-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
  }
  .stronger-badge-text b {
    font-family: 'Anton', sans-serif;
    font-size: clamp(28px, 3vw, 34px);
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--text);
    font-weight: 400;
  }
  .stronger-badge-text b .star {
    font-size: 0.7em;
    color: rgba(255,255,255,0.9);
    vertical-align: 2px;
    margin-left: 2px;
  }
  .stronger-badge-text span {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    margin-top: 4px;
  }

  /* Mobile: stack the actions row */
  @media (max-width: 560px) {
    .stronger-actions { flex-direction: column; align-items: flex-start; gap: 18px; }
    .stronger-cta { width: 100%; justify-content: center; }
    .stronger-badge { padding: 14px 16px; gap: 10px; }
    .stronger-badge-ic { width: 38px; height: 38px; }
    .stronger-badge-ic svg { width: 18px; height: 18px; }
  }

  /* ================ SERVICES (Bento Grid) ================ */
  #services {
    background: var(--bg);
    overflow: hidden;
  }
  .services-head {
    text-align: center;
    padding: 110px 0 70px;
    max-width: 900px;
    margin: 0 auto;
  }
  .services-head .section-label {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 16px;
    justify-content: center;
  }
  .services-head .section-label::before {
    content: ''; width: 28px; height: 2px; background: var(--accent);
  }
  .services-head h2 em {
    font-style: normal;
    color: var(--accent);
    font-weight: inherit;
  }
  .services-head p {
    color: var(--muted);
    font-size: 17px;
    max-width: 560px;
    margin: 22px auto 0;
    line-height: 1.6;
  }

  /* Full-bleed wrapper for the accordion — replaces an inline padding:0 style. */
  .ka-wrap { padding: 0; }

  /* ================ KINETIC ACCORDION (Programs) ================
     6 horizontal panels. Collapsed = narrow + vertical text + grayscale.
     Hovered panel expands and goes full color with horizontal title + CTA.
     Mobile (<768px): stacks vertically with tap-to-expand.
  */
  .kinetic-accordion {
    display: flex;
    width: 100%;
    height: clamp(480px, 70vh, 640px);
    gap: 4px;
    background: var(--color-bg-deep);
    overflow: hidden;
  }
  .ka-panel {
    position: relative;
    flex: 1;
    min-width: 80px;
    overflow: hidden;
    cursor: pointer;
    background: var(--color-bg-deep);
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    text-decoration: none;
    color: inherit;
  }

  .ka-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(1) brightness(0.55) contrast(1.05);
    transform: scale(1.05);
    transition:
      filter 0.7s cubic-bezier(0.25, 1, 0.5, 1),
      transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
  }

  .ka-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.85) 100%);
    z-index: 2;
    transition: background 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .ka-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(211,47,47,0) 0%, rgba(211,47,47,0.18) 60%, rgba(245,124,0,0.28) 100%);
    mix-blend-mode: screen;
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .ka-accent {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 2px;
    background: var(--color-brand-red);
    z-index: 5;
    transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .ka-num {
    position: absolute;
    top: 24px; left: 28px;
    z-index: 5;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--color-brand-orange);
    opacity: 0;
    transform: translateY(-8px);
    transition:
      opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.15s,
      transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.15s;
  }

  .ka-vertical {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    writing-mode: vertical-rl;
    transform: translate(-50%, -50%) rotate(180deg);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(20px, 2.2vw, 26px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    white-space: nowrap;
    text-shadow: 0 2px 16px rgba(0,0,0,0.6);
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
  }

  .ka-content {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 5;
    padding: 40px 36px 36px;
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.15s,
      transform 0.55s cubic-bezier(0.25, 1, 0.5, 1) 0.15s;
    pointer-events: none;
  }
  .ka-content h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--color-text-light);
    margin: 0 0 14px;
    text-transform: uppercase;
    text-shadow: 0 2px 24px rgba(0,0,0,0.5);
  }
  .ka-content h3 em {
    font-style: normal;
    color: var(--color-brand-orange);
  }
  .ka-content .ka-sub {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 24px;
  }
  .ka-content .ka-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    background: var(--color-brand-red);
    color: var(--color-text-light);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border-radius: 999px;
    border: 1.5px solid var(--color-brand-red);
    box-shadow: 0 8px 24px rgba(211,47,47,0.3);
    transition:
      background 0.35s var(--ease),
      border-color 0.35s var(--ease),
      box-shadow 0.35s var(--ease),
      transform 0.3s var(--ease);
  }
  .ka-content .ka-cta:hover {
    background: var(--color-brand-orange);
    border-color: var(--color-brand-orange);
    box-shadow: 0 10px 32px rgba(245,124,0,0.45);
    transform: translateY(-1px);
  }
  .ka-content .ka-cta svg {
    width: 14px; height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s var(--ease);
  }
  .ka-content .ka-cta:hover svg { transform: translateX(3px); }

  /* === ACTIVE / EXPANDED STATE === */
  @media (hover: hover) {
    .ka-panel:hover { flex: 5; }
    .ka-panel:hover .ka-bg {
      filter: grayscale(0) brightness(0.85) contrast(1.05);
      transform: scale(1);
    }
    .ka-panel:hover::before {
      background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.85) 100%);
    }
    .ka-panel:hover::after { opacity: 1; }
    .ka-panel:hover .ka-accent { width: 6px; }
    .ka-panel:hover .ka-num    { opacity: 1; transform: translateY(0); }
    .ka-panel:hover .ka-vertical { opacity: 0; }
    .ka-panel:hover .ka-content  { opacity: 1; transform: translateY(0); pointer-events: auto; }
  }
  /* Keyboard / touch focus also expands */
  .ka-panel:focus-within { flex: 5; }
  .ka-panel:focus-within .ka-bg {
    filter: grayscale(0) brightness(0.85) contrast(1.05);
    transform: scale(1);
  }
  .ka-panel:focus-within::before {
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.85) 100%);
  }
  .ka-panel:focus-within::after { opacity: 1; }
  .ka-panel:focus-within .ka-accent { width: 6px; }
  .ka-panel:focus-within .ka-num { opacity: 1; transform: translateY(0); }
  .ka-panel:focus-within .ka-vertical { opacity: 0; }
  .ka-panel:focus-within .ka-content { opacity: 1; transform: translateY(0); pointer-events: auto; }

  /* === MOBILE STACK ===
     Three breakpoints handle the spectrum: tablet/small-laptop (=899px),
     phone (=600px), and small phone (=380px). Each tightens spacing,
     scales typography, and adjusts panel heights for the screen size. */

  /* TABLET & SMALL DESKTOP: switch from horizontal accordion to vertical stack */
  @media (max-width: 899px) {
    .services-head { padding: 80px 16px 50px; }
    .services-head h2 { font-size: clamp(36px, 7vw, 56px); }
    .services-head p { font-size: 15px; line-height: 1.65; }

    .kinetic-accordion {
      flex-direction: column;
      height: auto;
      gap: 2px;
    }
    .ka-panel {
      flex: 0 0 auto;
      height: 260px;
      min-width: 0;
    }
    .ka-panel .ka-bg {
      filter: grayscale(0) brightness(0.6) contrast(1.05);
      transform: scale(1);
    }
    .ka-panel::before {
      background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.92) 100%);
    }
    .ka-vertical { display: none; }
    .ka-content {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
      padding: 28px 24px 24px;
    }
    .ka-content h3 { font-size: clamp(26px, 5.5vw, 36px); }
    .ka-content .ka-sub { font-size: 12px; letter-spacing: 0.12em; margin-bottom: 20px; }
    .ka-num {
      opacity: 1;
      transform: translateY(0);
      top: 20px; left: 24px;
      font-size: 10px;
    }
    .ka-accent { width: 4px; }
  }

  /* PHONE: tighten further, shrink card height, reduce CTA size.
     Panel height dropped from 230px ? 195px (a ~15% reduction, saves
     ~210px of cumulative scroll across the 6 panels). To compensate
     for the smaller canvas, content margins are tightened together so
     the image still gets enough breathing room above the title. */
  @media (max-width: 600px) {
    .services-head { padding: 48px 16px 30px; }
    .services-head h2 { font-size: clamp(32px, 9vw, 44px); line-height: 1.05; }
    .services-head p { font-size: 14px; margin-top: 14px; }
    .services-head .section-label { font-size: 10px; letter-spacing: 0.16em; }

    .ka-panel { height: 195px; }
    .ka-content { padding: 18px 18px 18px; }
    .ka-content h3 { font-size: clamp(22px, 7vw, 30px); margin-bottom: 6px; }
    .ka-content .ka-sub { font-size: 11px; margin-bottom: 12px; }
    .ka-content .ka-cta { padding: 10px 18px; font-size: 11px; letter-spacing: 0.1em; }
    .ka-content .ka-cta svg { width: 12px; height: 12px; }
    .ka-num { top: 14px; left: 18px; font-size: 9px; letter-spacing: 0.16em; }
  }

  /* SMALL PHONE: edge case for sub-380px (iPhone SE, older Android) */
  @media (max-width: 380px) {
    .services-head { padding: 36px 14px 24px; }
    .services-head h2 { font-size: 28px; }
    .ka-panel { height: 175px; }
    .ka-content { padding: 14px 16px 14px; }
    .ka-content h3 { font-size: 21px; line-height: 1; }
    .ka-content .ka-sub { font-size: 10px; margin-bottom: 10px; letter-spacing: 0.08em; }
    .ka-content .ka-cta { padding: 9px 16px; font-size: 10px; }
    .ka-num { top: 12px; left: 14px; }
  }

  /* ================ PROGRAMS ================ */
  /* ================ CLASS SLIDER (Programs) ================ */
  .class-slider-section {
    position: relative;
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    isolation: isolate;
  }
  .class-slider-section::before,
  .class-slider-section::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
  }
  .class-slider-section::before {
    inset: 0;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(211,47,47,0.06) 0%, transparent 65%),
      radial-gradient(ellipse at 20% 20%, rgba(255,46,99,0.035) 0%, transparent 50%);
  }
  .class-slider-section::after {
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  }
  .class-slider-section .container { position: relative; z-index: 1; }
  /* Section padding — was previously an inline style on the container.
     Moved here so it can be responsively tightened on mobile below. */
  .class-slider-section .cs-container {
    padding-top: 110px;
    padding-bottom: 110px;
  }

  /* Section-specific typography override — Inter, mixed case, tight tracking */
  .class-slider-section .cs-intro { max-width: 760px; }
  .class-slider-section .section-label {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .class-slider-section .section-label::before {
    background: var(--accent);
  }
  .class-slider-section h2.cs-title-h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 6.5vw, 80px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--text);
    text-transform: none;
    margin-top: 14px;
    margin-bottom: 0;
  }
  .cs-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 56px;
  }

  /* Navigation arrows */
  .cs-nav {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
  }
  .cs-nav .cs-arrow {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .35s var(--ease);
    font-family: inherit;
  }
  .cs-nav .cs-arrow svg {
    width: 20px; height: 20px;
    transition: transform .35s var(--ease), color .35s var(--ease);
  }
  .cs-nav .cs-arrow:hover {
    border-color: rgba(211,47,47,0.5);
    background: rgba(211,47,47,0.08);
    transform: scale(1.08);
  }
  .cs-nav .cs-arrow:hover svg {
    color: var(--accent);
    filter: drop-shadow(0 0 8px rgba(211,47,47,0.6));
  }
  .cs-nav .cs-arrow.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Slider viewport & track */
  .cs-viewport {
    /* Fallback: older browsers clip both axes — vertical padding still keeps most of the hover visible */
    overflow: hidden;
    /* Modern: clip only X so cards can lift freely on Y without being cut */
    overflow-x: clip;
    overflow-y: visible;
    overflow-clip-margin: 2rem;
    cursor: grab;
    padding: 40px 8px 90px;
    margin: -32px -16px -74px;
  }
  .cs-viewport.dragging { cursor: grabbing; }
  .cs-track {
    display: flex;
    gap: 16px;
    transition: transform .65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .cs-viewport.dragging .cs-track { transition: none; }

  /* Card — sharp editorial corners, premium shadow, Inter typography */
  .cs-card {
    flex: 0 0 auto;
    width: calc((100% - 16px) / 2);
    position: relative;
    height: 480px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--surface);
    border-radius: 0; /* sharp editorial corners */
    box-shadow: 0 20px 50px rgba(0,0,0,0.45);
    transition:
      transform .55s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow .55s var(--ease),
      border-color .4s var(--ease);
    will-change: transform;
    opacity: 0;
    transform: translateY(40px);
    text-decoration: none;
  }
  .cs-card.in {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity .7s var(--ease),
      transform .7s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow .55s var(--ease),
      border-color .4s var(--ease);
  }
  @media (min-width: 640px) { .cs-card { width: calc((100% - 16px * 1.5) / 2.5); } }
  @media (min-width: 768px) { .cs-card { width: calc((100% - 24px * 2) / 3); height: 500px; } .cs-track { gap: 24px; } }
  @media (min-width: 1024px) { .cs-card { width: calc((100% - 28px * 3) / 4); height: 520px; } .cs-track { gap: 28px; } }
  @media (min-width: 1280px) { .cs-card { width: calc((100% - 32px * 3) / 4); } .cs-track { gap: 32px; } }

  .cs-card .cs-img {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
  }
  .cs-card .cs-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.15) 0%,
      rgba(0,0,0,0.35) 40%,
      rgba(0,0,0,0.88) 100%
    );
    transition: background .55s var(--ease);
  }
  .cs-card .cs-glow {
    position: absolute; inset: 0;
    box-shadow: inset 0 0 60px rgba(211,47,47,0.22);
    opacity: 0;
    transition: opacity .55s var(--ease);
    pointer-events: none;
  }

  /* Premium edge indicator — thin lime line at top on hover */
  .cs-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 4;
  }

  /* Number chip — now a category tag */
  .cs-card .cs-num {
    position: absolute;
    top: 20px; left: 22px;
    z-index: 3;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 7px 14px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    transition: all .4s var(--ease);
  }

  /* Content block */
  .cs-card .cs-content {
    position: absolute;
    left: 0; right: 0; bottom: 64px;
    z-index: 2;
    padding: 0 28px;
    text-align: left;
    transform: translateY(8px);
    transition: transform .55s var(--ease);
  }

  /* Titles — Inter extra-bold, mixed case, negative tracking (matches reference) */
  .cs-card .cs-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 2.5vw, 36px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: var(--text);
  }
  .cs-card .cs-title .em {
    color: var(--accent);
    font-weight: 800;
  }
  .cs-card .cs-title .lite {
    font-weight: 500;
    opacity: 0.9;
  }
  .cs-card .cs-subtitle {
    margin-top: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
  }

  /* "Learn More" chip */
  .cs-card .cs-learn {
    position: absolute;
    left: 28px; bottom: 22px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity .4s var(--ease),
      transform .4s var(--ease),
      background .3s var(--ease),
      border-color .3s var(--ease),
      color .3s var(--ease);
    text-decoration: none;
  }
  .cs-card .cs-learn .arr {
    font-size: 14px;
    transition: transform .3s var(--ease);
  }

  /* Card hover state — premium: lift, glow, lime border, accent top-line, content nudges up */
  @media (hover: hover) {
    .cs-card:hover {
      transform: translateY(-8px) scale(1.03);
      box-shadow:
        0 36px 70px -14px rgba(211,47,47,0.28),
        0 16px 36px rgba(0,0,0,0.5);
      border-color: rgba(211,47,47,0.5);
      z-index: 5;
    }
    .cs-card:hover::before { transform: scaleX(1); }
    .cs-card:hover .cs-glow { opacity: 1; }
    .cs-card:hover .cs-overlay {
      background: linear-gradient(
        180deg,
        rgba(0,0,0,0.1) 0%,
        rgba(0,0,0,0.55) 45%,
        rgba(0,0,0,0.95) 100%
      );
    }
    .cs-card:hover .cs-content { transform: translateY(-2px); }
    .cs-card:hover .cs-learn {
      opacity: 1;
      transform: translateY(0);
    }
    .cs-card .cs-learn:hover {
      background: var(--accent);
      border-color: var(--accent);
      color: #000;
    }
    .cs-card .cs-learn:hover .arr { transform: translateX(4px); }
    .cs-card:hover .cs-num {
      background: rgba(211,47,47,0.15);
      border-color: rgba(211,47,47,0.45);
      color: var(--accent);
    }
  }

  /* Progress track */
  .cs-progress {
    position: relative;
    height: 2px;
    background: rgba(255,255,255,0.08);
    margin-top: 40px;
    max-width: 320px;
  }
  .cs-progress .cs-progress-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 25%;
    background: var(--accent);
    transition: width .5s var(--ease), left .5s var(--ease);
    box-shadow: 0 0 10px rgba(211,47,47,0.6);
  }

  @media (max-width: 680px) {
    .cs-nav { display: none; }
  }

  /* === MOBILE REFINEMENTS for "At the Club" ===
     Placed at the END of all .cs-* rules so it wins the cascade at
     equal specificity (same trap as the .h3-thumbs fix earlier).
     Three concrete improvements at =600px:
       1. Section padding 110px ? 64px each side. 220px of vertical
          dead space is fine on a 27" monitor but eats half a phone
          viewport.
       2. Card sizing: width 82% (one prominent card + a peek of the
          next), height 480px ? 420px. Replaces the "two narrow
          slivers" layout that gave each card a 1:2.8 ribbon shape.
          The peek pattern reads as a deliberate carousel and matches
          how Apple/Nike/Equinox handle mobile card decks.
       3. Heading-to-cards gap 56px ? 32px so the H2 and the first
          card read as one connected block. */
  @media (max-width: 600px) {
    .class-slider-section .cs-container {
      padding-top: 64px;
      padding-bottom: 64px;
    }
    .cs-head { margin-bottom: 32px; }
    .cs-card {
      width: 82%;
      height: 420px;
    }
    .cs-card .cs-content { bottom: 56px; padding: 0 22px; }
    .cs-card .cs-num { top: 16px; left: 18px; }
    .cs-card .cs-learn { left: 22px; bottom: 18px; }
    .cs-progress { margin-top: 28px; }
  }

  /* ================ SCHEDULE (Bordered Grid · Reference Style) ================
     Clean timetable matching the reference image:
     - Solid hairline borders on every cell
     - Class name (bold uppercase) + trainer name beneath each slot
     - TODAY column highlighted with red wash
     - HOVER: individual cell snaps to near-black bg, red border + class turns red
  */
  #schedule {
    background: var(--bg-2);
  }

  /* HEAD: title (left) + PDF button (right) */
  .schedule-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 48px;
    flex-wrap: wrap;
  }
  .schedule-head-text {
    flex: 1;
    min-width: 280px;
    max-width: 720px;
  }
  .schedule-head .section-title { margin-bottom: 16px; }
  .schedule-head .section-sub  { max-width: 580px; }

  .schedule-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: #FFFFFF;
    color: #1A1A1A;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .35s var(--ease),
                color .35s var(--ease),
                transform .3s var(--ease),
                box-shadow .35s var(--ease);
  }
  .schedule-pdf-btn:hover {
    background: var(--color-brand-orange);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(245, 124, 0, 0.4);
  }
  .schedule-pdf-btn svg {
    width: 14px; height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Scrollable wrapper */
  .schedule-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
  }

  .schedule-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 780px;
    background: transparent;
  }

  /* ALL cells — consistent hairline borders */
  .schedule-table th,
  .schedule-table td {
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-right: 1px solid rgba(255,255,255,0.08);
    font-family: 'Inter', sans-serif;
    vertical-align: middle;
  }
  .schedule-table th:last-child,
  .schedule-table td:last-child { border-right: none; }
  .schedule-table tbody tr:last-child td,
  .schedule-table tbody tr:last-child th { border-bottom: none; }

  /* Header row — day names */
  .schedule-table thead th {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    padding: 20px 14px;
    background: rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }

  /* Time column — sticky, monospace */
  .schedule-table thead th.sch-time-th,
  .schedule-table tbody th {
    font-family: 'Space Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.03em;
    color: rgba(255,255,255,0.4);
    font-weight: 400;
    background: rgba(0,0,0,0.2);
    white-space: nowrap;
    padding: 0 20px;
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 108px;
  }

  /* Data cells */
  .schedule-table tbody td {
    padding: 20px 14px;
    position: relative;
    cursor: default;
    min-width: 115px;
    transition: background-color .18s ease, outline-color .18s ease;
    background: transparent;
  }

  /* Class name (bold, uppercase) */
  .sch-class {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    line-height: 1.25;
    transition: color .18s ease;
  }

  /* ? THE HOVER — individual cell darkens, red border, class name turns red */
  .schedule-table tbody td:not(.sch-closed):hover {
    background: #0a0a0a;
    outline: 1.5px solid var(--color-brand-red);
    outline-offset: -1px;
    z-index: 3;
  }
  .schedule-table tbody td:not(.sch-closed):hover .sch-class {
    color: var(--color-brand-red);
  }

  /* Closed / rest slots */
  .schedule-table td.sch-closed {
    color: rgba(255,255,255,0.12);
    font-size: 20px;
    font-weight: 300;
  }

  /* TODAY column */
  .schedule-table .is-today { background: rgba(211,47,47,0.06); }
  .schedule-table thead th.is-today {
    color: var(--color-brand-orange);
    background: rgba(211,47,47,0.12);
    position: relative;
  }
  .schedule-table thead th.is-today::after {
    content: 'TODAY';
    display: block;
    font-size: 8px;
    color: var(--color-brand-red);
    letter-spacing: 0.2em;
    margin-top: 4px;
    font-weight: 800;
  }

  /* Mobile */
  @media (max-width: 720px) {
    .schedule-head { align-items: flex-start; flex-direction: column; gap: 20px; }
    .schedule-pdf-btn { align-self: flex-start; }
    .schedule-table tbody td { padding: 14px 8px; min-width: 90px; }
    .sch-class { font-size: 10px; letter-spacing: 0.07em; }
    .schedule-table thead th { font-size: 9px; letter-spacing: 0.14em; padding: 14px 8px; }
    .schedule-table tbody th { font-size: 10px; padding: 0 10px; min-width: 80px; }
  }

  /* ============== PRINT (PDF EXPORT) STYLES ==============
     When the user clicks "Download PDF" we call window.print().
     These rules transform the dark dashboard into a clean,
     poster-quality light-on-white printable. */
  @media print {
    /* Hide every section EXCEPT #schedule */
    body > *:not(#schedule) { display: none !important; }

    @page { margin: 1.5cm; size: A4 landscape; }

    body { background: #fff !important; color: #1A1A1A !important; }
    #schedule { background: #fff !important; padding: 0 !important; }

    /* The PDF button shouldn't appear in the PDF itself */
    .schedule-pdf-btn { display: none !important; }

    /* Centered head for the print poster */
    .schedule-head {
      display: block !important;
      text-align: center;
      margin-bottom: 28px !important;
    }
    .schedule-head .section-label {
      color: #D32F2F !important;
      justify-content: center;
    }
    .schedule-head .section-label::before { background: #D32F2F !important; }
    .schedule-head .section-title {
      color: #1A1A1A !important;
      font-size: 36px !important;
    }
    .schedule-head .section-title .accent { color: #D32F2F !important; }
    .schedule-head .section-sub { color: #555 !important; margin: 0 auto; }

    /* High-contrast table on white */
    .schedule-table-wrap {
      border: 1px solid #1A1A1A !important;
      background: #fff !important;
      overflow: visible !important;
      border-radius: 0 !important;
    }
    .schedule-table {
      min-width: 0 !important;
      width: 100% !important;
      page-break-inside: avoid;
    }
    .schedule-table th,
    .schedule-table td {
      border-color: #d0d0d0 !important;
      color: #1A1A1A !important;
      background: #fff !important;
    }
    .schedule-table thead th {
      background: #1A1A1A !important;
      color: #fff !important;
      border-color: #1A1A1A !important;
    }
    .schedule-table tbody th {
      background: #f5f5f5 !important;
      color: #1A1A1A !important;
    }
    /* Don't highlight "today" in print — a printout is a static reference */
    .schedule-table .is-today { background: #fff !important; color: #1A1A1A !important; }
    .schedule-table thead th.is-today { background: #1A1A1A !important; color: #fff !important; }
    .schedule-table thead th.is-today::after { display: none; }

    /* Print footer with club contact info */
    #schedule::after {
      content: 'ZZZ Fitness Club  ·  57 Delhi Road, Saharanpur, UP  ·  +91 9837271586  ·  Mon–Sun 6 AM – 10 PM';
      display: block;
      margin-top: 24px;
      padding-top: 16px;
      border-top: 1px solid #ccc;
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      color: #666 !important;
      text-align: center;
      letter-spacing: 0.08em;
    }
  }

  /* ================ TRAINERS (Hover-Reveal Panel) ================ */
  .trainers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  @media (min-width: 720px) { .trainers-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
  @media (min-width: 1100px) { .trainers-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

  .trainer-card {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--surface);
    border-radius: 0;
    cursor: pointer;
    transition: border-color .4s var(--ease), box-shadow .5s var(--ease);
  }
  .trainer-card:hover {
    border-color: rgba(211,47,47,0.35);
    box-shadow: 0 30px 60px -16px rgba(211,47,47,0.18), 0 14px 30px rgba(0,0,0,0.5);
  }
  .trainer-card .photo {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center top;
    transition: transform .8s var(--ease), filter .55s var(--ease);
    filter: grayscale(40%);
  }
  .trainer-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
  }

  /* Compact name visible by default (bottom of card) */
  .trainer-card .name-base {
    position: absolute; bottom: 0; left: 0; right: 0;
    z-index: 3;
    padding: 22px 22px 24px;
    transition: opacity .35s var(--ease);
  }
  .trainer-card .name-base h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(20px, 2vw, 26px);
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--text);
  }
  .trainer-card .name-base .role {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-top: 10px;
  }

  /* Reveal panel slides up from the bottom on hover —
     "little bit transparent and dark" per spec */
  .trainer-card .panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 4;
    padding: 26px 24px 24px;
    background: rgba(6, 6, 6, 0.62);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border-top: 1px solid rgba(211,47,47,0.28);
    transform: translateY(calc(100% + 1px));
    transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.4);
  }
  .trainer-card .panel h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(20px, 2vw, 26px);
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--text);
  }
  .trainer-card .panel .role {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-top: 8px;
  }
  .trainer-card .panel .bio {
    color: rgba(245,245,245,0.78);
    font-size: 13px;
    line-height: 1.55;
    margin-top: 14px;
  }
  .trainer-card .panel .creds {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
  }
  .trainer-card .panel .creds span {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 5px 11px;
    background: rgba(211,47,47,0.08);
    border: 1px solid rgba(211,47,47,0.3);
    border-radius: 999px;
    color: var(--accent);
  }
  .trainer-card .panel .socials {
    display: flex;
    gap: 10px;
    margin-top: 18px;
  }
  .trainer-card .panel .socials a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--text);
    transition:
      background .3s var(--ease),
      border-color .3s var(--ease),
      color .3s var(--ease),
      transform .35s var(--ease);
    text-decoration: none;
  }
  .trainer-card .panel .socials a svg {
    width: 15px;
    height: 15px;
    display: block;
  }
  .trainer-card .panel .socials a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
    transform: translateY(-3px);
  }

  @media (hover: hover) {
    .trainer-card:hover .photo { transform: scale(1.06); filter: grayscale(0); }
    .trainer-card:hover .name-base { opacity: 0; }
    .trainer-card:hover .panel { transform: translateY(0); }
  }

  /* === MOBILE RESPONSIVE — TRAINERS ===
     Three tiers ensure good experience across all phone sizes. Touch devices
     don't support :hover, so we expose the panel via a tap-toggled .is-open
     class (wired up in JS at section-bottom). Photos get less grayscale and
     a lighter bottom overlay so faces stay visible on small screens. */

  /* TABLET & DOWN: tighten section spacing */
  @media (max-width: 899px) {
    #trainers { padding: 80px 0; }
    #trainers .section-head { margin-bottom: 40px !important; }
    #trainers .section-title { font-size: clamp(36px, 7vw, 56px); }
    #trainers .section-sub { font-size: 14px; line-height: 1.65; }
    .trainers-grid { gap: 12px; }
  }

  /* PHONE (=600px): switch to 2-column grid, taller aspect for better face display,
     reveal panel on tap (.is-open) instead of hover */
  @media (max-width: 600px) {
    #trainers { padding: 60px 0; }
    #trainers .section-head { margin-bottom: 32px !important; }
    #trainers .section-title { font-size: clamp(30px, 8.5vw, 42px); line-height: 1.05; }
    #trainers .section-sub { font-size: 13px; margin-top: 12px; }
    #trainers .section-label { font-size: 10px !important; letter-spacing: 0.16em !important; }

    .trainers-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .trainer-card { aspect-ratio: 4/5; }
    /* Photos: lighter grayscale + softer bottom overlay so faces stay visible */
    .trainer-card .photo { filter: grayscale(15%); }
    .trainer-card::after {
      background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.75) 100%);
    }
    .trainer-card .name-base { padding: 14px 14px 16px; }
    .trainer-card .name-base h3 { font-size: 17px; letter-spacing: -0.02em; }
    .trainer-card .name-base .role { font-size: 9px; letter-spacing: 0.14em; margin-top: 6px; }

    /* Tap-revealed panel — when .is-open is added by JS, slide it up to
       cover the ENTIRE card (not just slide partway). This avoids content
       overflow on small screens since the panel now has the full card
       height available + scrolls internally if absolutely needed.
       Photo stays subtly visible through the panel for visual context. */
    .trainer-card.is-open .name-base { opacity: 0; }
    .trainer-card.is-open .panel {
      transform: translateY(0);
      top: 0;
      bottom: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      /* Layered background: dark gradient + heavy blur over the photo —
         the trainer's face stays softly visible in the top portion for context */
      background: linear-gradient(180deg,
        rgba(0,0,0,0.55) 0%,
        rgba(10,10,10,0.85) 30%,
        rgba(6,6,6,0.95) 100%);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;         /* top-aligned — predictable hierarchy */
      gap: 0;                              /* explicit per-element margins below */
      padding-top: 46px;                   /* clear space below the + icon */
      border-top: none;                    /* remove the red line — looks cleaner full-cover */
    }
    .trainer-card.is-open .photo {
      filter: grayscale(60%) brightness(0.5);  /* fade photo behind the panel */
    }
    .trainer-card .panel {
      padding: 16px 14px 14px;
    }
    .trainer-card .panel h3 {
      font-size: 16px;
      margin: 0;
      letter-spacing: -0.02em;
      line-height: 1.15;
    }
    .trainer-card .panel .role {
      font-size: 9px;
      letter-spacing: 0.14em;
      margin-top: 6px;
      color: var(--accent);
    }
    .trainer-card .panel .bio {
      font-size: 11.5px;
      line-height: 1.5;
      margin-top: 12px;
      color: rgba(245, 245, 245, 0.82);
      display: -webkit-box;
      -webkit-line-clamp: 4;               /* tighter clamp — leaves room for creds + socials */
      line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .trainer-card .panel .creds {
      gap: 5px;
      margin-top: 12px;
      flex-wrap: wrap;
    }
    .trainer-card .panel .creds span {
      font-size: 8.5px;
      padding: 4px 8px;
      letter-spacing: 0.1em;
      background: rgba(211, 47, 47, 0.14);
      border-color: rgba(211, 47, 47, 0.4);
    }
    .trainer-card .panel .socials {
      gap: 8px;
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);  /* subtle divider above socials */
    }
    .trainer-card .panel .socials a {
      width: 30px;
      height: 30px;
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.12);
    }
    .trainer-card .panel .socials a svg { width: 12px; height: 12px; }

    /* Hide the scrollbar visually but keep functionality */
    .trainer-card .panel::-webkit-scrollbar { width: 0; }
    .trainer-card .panel { scrollbar-width: none; }

    /* Visual hint that the card is tappable — small + icon top-right */
    .trainer-card::before {
      content: '+';
      position: absolute;
      top: 10px; right: 10px;
      z-index: 6;                          /* above the panel (5) so it stays visible */
      width: 26px; height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(211, 47, 47, 0.9);
      color: #fff;
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: 17px;
      line-height: 1;
      border-radius: 50%;
      transition: transform .3s var(--ease), background .3s var(--ease);
      box-shadow: 0 4px 10px rgba(0,0,0,0.35);
      pointer-events: none;                /* card click handler picks up the tap */
    }
    .trainer-card.is-open::before {
      transform: rotate(45deg);
      background: rgba(245, 124, 0, 0.95);
      box-shadow: 0 4px 14px rgba(245, 124, 0, 0.45);
    }
  }

  /* SMALL PHONE (=380px): edge-case tightening for iPhone SE / older Android */
  @media (max-width: 380px) {
    #trainers { padding: 48px 0; }
    #trainers .section-title { font-size: 28px; }
    #trainers .section-sub { font-size: 12.5px; }
    .trainers-grid { gap: 8px; }
    .trainer-card .name-base { padding: 12px 12px 14px; }
    .trainer-card .name-base h3 { font-size: 15px; }
    .trainer-card .name-base .role { font-size: 8.5px; }

    .trainer-card.is-open .panel { padding-top: 42px; }
    .trainer-card .panel { padding: 14px 12px 12px; }
    .trainer-card .panel h3 { font-size: 14px; line-height: 1.1; }
    .trainer-card .panel .role { font-size: 8.5px; letter-spacing: 0.1em; margin-top: 5px; }
    .trainer-card .panel .bio {
      font-size: 10.5px;
      line-height: 1.45;
      margin-top: 10px;
      -webkit-line-clamp: 3;               /* even tighter clamp on tiny screens */
      line-clamp: 3;
    }
    .trainer-card .panel .creds { gap: 4px; margin-top: 10px; }
    .trainer-card .panel .creds span { font-size: 7.5px; padding: 3px 6px; }
    .trainer-card .panel .socials { gap: 6px; margin-top: 10px; padding-top: 10px; }
    .trainer-card .panel .socials a { width: 26px; height: 26px; }
    .trainer-card .panel .socials a svg { width: 10px; height: 10px; }
    .trainer-card::before { width: 22px; height: 22px; font-size: 15px; top: 8px; right: 8px; }
  }

  /* ================ GALLERY (Marquee Strips) ================ */
  .gallery {
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 0;
  }
  .gallery .gallery-head {
    text-align: center;
    padding: 110px 24px 70px;
    max-width: 920px;
    margin: 0 auto;
  }
  .gallery .gallery-head .section-label {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 16px;
    justify-content: center;
  }
  .gallery .gallery-head .section-label::before {
    content: ''; width: 32px; height: 2px; background: var(--accent);
  }
  .gallery .gallery-head h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-transform: none;
    color: var(--text);
  }
  .gallery .gallery-head p {
    color: var(--muted);
    font-size: 17px;
    max-width: 580px;
    margin: 16px auto 0;
    line-height: 1.6;
  }

  /* Marquee strip container */
  .g-strip {
    overflow: hidden;
    position: relative;
    padding: 8px 0;
  }
  .g-strip:last-of-type { padding-bottom: 80px; }
  .g-strip::before, .g-strip::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: 3;
    pointer-events: none;
  }
  .g-strip::before { left: 0; background: linear-gradient(90deg, var(--bg) 30%, transparent); }
  .g-strip::after { right: 0; background: linear-gradient(-90deg, var(--bg) 30%, transparent); }

  .g-track {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: gScroll 60s linear infinite;
  }
  .g-track.reverse { animation-direction: reverse; animation-duration: 75s; }
  .g-track.slow { animation-duration: 80s; }
  .g-strip:hover .g-track { animation-play-state: paused; }
  @keyframes gScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  .g-tile {
    flex: 0 0 auto;
    width: 320px;
    height: 240px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    display: block;
  }
  .g-tile .g-img {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .8s var(--ease), filter .5s var(--ease);
  }
  .g-tile::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.85));
    z-index: 1;
  }
  .g-tile .g-cap {
    position: absolute;
    bottom: 14px; left: 16px;
    z-index: 2;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.01em;
    color: #fff;
    transform: translateY(8px);
    opacity: 0;
    transition: opacity .35s var(--ease), transform .35s var(--ease);
  }
  /* Lime ring on hover */
  .g-tile::before {
    content: '';
    position: absolute; inset: 0;
    border: 0px solid var(--accent);
    z-index: 3;
    pointer-events: none;
    transition: border-width .3s var(--ease);
  }
  @media (hover: hover) {
    .g-tile:hover .g-img { transform: scale(1.08); filter: brightness(0.9); }
    .g-tile:hover .g-cap { opacity: 1; transform: translateY(0); }
    .g-tile:hover::before { border-width: 3px; }
  }

  @media (max-width: 720px) {
    .g-tile { width: 240px; height: 180px; }
  }

  /* ================ MEMBERSHIP (3-column · Fire & Iron) ================ */

  /* === REVIEW BADGE (social proof pill) ===
     Pulses subtly to catch the eye. Semi-transparent dark background
     with a glowing red border. Drop in next to any CTA or above the
     membership grid for instant social proof. */
  .review-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 8px 10px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #FF0000;
    border-radius: 999px;
    box-shadow:
      0 0 0 4px rgba(255, 0, 0, 0.08),       /* soft outer glow ring */
      0 8px 24px rgba(255, 0, 0, 0.25),
      inset 0 0 20px rgba(255, 0, 0, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: 'Inter', sans-serif;
    color: var(--color-text-light);
    text-decoration: none;
    animation: pulse-badge 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform-origin: center;
  }

  /* Rating chip — star + score */
  .review-badge .rb-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .review-badge .rb-rating svg {
    width: 14px;
    height: 14px;
    fill: var(--color-text-light);
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
  }

  /* Label text */
  .review-badge .rb-label {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
  }
  .review-badge .rb-label b {
    color: var(--color-text-light);
    font-weight: 800;
  }

  /* Pulse keyframe — subtle "breathing" effect (1.0 ? 1.05 ? 1.0) */
  @keyframes pulse-badge {
    0%, 100% {
      transform: scale(1);
      box-shadow:
        0 0 0 4px rgba(255, 0, 0, 0.08),
        0 8px 24px rgba(255, 0, 0, 0.25),
        inset 0 0 20px rgba(255, 0, 0, 0.05);
    }
    50% {
      transform: scale(1.05);
      box-shadow:
        0 0 0 8px rgba(255, 0, 0, 0.12),
        0 12px 32px rgba(255, 0, 0, 0.4),
        inset 0 0 24px rgba(255, 0, 0, 0.08);
    }
  }

  /* Respect users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .review-badge { animation: none; }
  }

  /* Mobile tweak — slightly tighter */
  @media (max-width: 480px) {
    .review-badge { padding: 6px 14px 6px 8px; gap: 10px; }
    .review-badge .rb-rating { font-size: 12px; padding: 5px 10px; }
    .review-badge .rb-label { font-size: 11px; }
  }
  .membership {
    background:
      radial-gradient(ellipse at top, rgba(211, 47, 47, 0.08), transparent 55%),
      var(--bg);
    border-top: 1px solid var(--line);
  }

  /* 3-column grid: Standard | Prime | CTA Hero */
  .membership-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
  }
  @media (min-width: 760px) {
    .membership-wrap { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1100px) {
    .membership-wrap { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  }

  /* ===== SHARED PLAN CARD ===== */
  .plan {
    position: relative;
    background: #FAFAFA;                        /* light off-white card body */
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 32px 24px 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    transition:
      transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
      box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1),
      border-color 0.35s ease;
  }
  .plan:hover {
    transform: translateY(-4px);
    box-shadow:
      0 22px 50px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(211, 47, 47, 0.25);
    border-color: rgba(211, 47, 47, 0.35);
  }

  /* Top icon */
  .plan-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(211, 47, 47, 0.10);
    border: 1px solid rgba(211, 47, 47, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--color-brand-red);
    flex-shrink: 0;
  }
  .plan-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Title + description — now dark text on light card */
  .plan-name {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.025em;
    color: #0A0A0A;                              /* near-black title */
    margin-bottom: 8px;
  }
  .plan-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.55;
    color: #6B7280;                              /* neutral gray for muted helper text */
    margin-bottom: 24px;
  }
  .plan-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);             /* now subtle on light bg */
    margin-bottom: 22px;
  }

  /* Feature list — dark text on white */
  .plan ul {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .plan ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.45;
    color: #1A1A1A;                              /* high-contrast dark text */
  }
  /* Red checkmark SVG bullet (kept — reads great on white) */
  .plan ul li::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    background-color: rgba(211, 47, 47, 0.15);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23D32F2F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 10px 8px;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* Dark inset footer block — rounded on all sides, sits inside the card.
     Two stacked rows: (top) price + Join Now, (bottom) trial offer ribbon.
     Matches reference: substantial conversion zone, not a thin strip. */
  .plan-footer {
    margin: 8px 0 24px;                       /* sits inside the card with padding */
    padding: 0;
    background: #0F0F0F;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .plan-footer-main {
    padding: 18px 22px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .plan-footer-divider {
    height: 1px;
    margin: 0 22px;
    background: rgba(255, 255, 255, 0.10);
  }
  .plan-footer-trial {
    padding: 12px 22px 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.01em;
    line-height: 1.3;
  }
  /* Price stack: amount/period on top, small meta line below */
  .plan-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1;
  }
  .plan-price .price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }
  .plan-price .amount {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.025em;
    color: var(--color-text-light);
  }
  .plan-price .period {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
  }
  .plan-price .price-meta {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
  }
  .plan .plan-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #FF0000;
    color: var(--color-text-light);
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 999px;
    text-decoration: none;
    border: 1.5px solid #FF0000;
    box-shadow: 0 6px 18px rgba(255, 0, 0, 0.3);
    transition: 0.3s ease;
  }
  .plan .plan-cta:hover {
    background: var(--color-brand-orange);
    border-color: var(--color-brand-orange);
    box-shadow: 0 10px 28px rgba(245, 124, 0, 0.5);
    transform: translateY(-1px);
  }
  .plan .plan-cta .arr {
    font-size: 14px;
    transition: transform 0.3s ease;
  }
  .plan .plan-cta:hover .arr { transform: translateX(4px); }

  /* === Featured (Prime) card — Price Anchoring effect === */
  /* Thicker red border + slight lift to draw the eye */
  .plan.featured {
    border: 2px solid var(--color-brand-red);
    background: linear-gradient(180deg, rgba(211, 47, 47, 0.05), transparent 40%, transparent 100%), #FAFAFA;
    transform: translateY(-8px);
    box-shadow:
      0 18px 44px rgba(211, 47, 47, 0.2),
      0 18px 44px rgba(0, 0, 0, 0.45);
  }
  .plan.featured:hover {
    transform: translateY(-12px);
    box-shadow:
      0 26px 60px rgba(211, 47, 47, 0.28),
      0 26px 60px rgba(0, 0, 0, 0.55);
  }
  /* "Most Popular" ribbon */
  .plan.featured .plan-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--color-brand-red);
    color: var(--color-text-light);
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(211, 47, 47, 0.4);
  }

  /* ===== TRUST STRIP (3 mini features below cards) ===== */
  .plan-trust-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 56px;
    padding: 0 24px;
  }
  .plan-trust-strip .pts-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
    color: var(--color-text-light);
  }
  .plan-trust-strip .pts-item svg {
    width: 20px;
    height: 20px;
    color: var(--color-brand-red);
    flex-shrink: 0;
  }
  @media (max-width: 600px) {
    .plan-trust-strip { gap: 20px; }
    .plan-trust-strip .pts-item { font-size: 12px; }
  }

  /* ===== COLUMN 3 — CTA HERO CARD ===== */
  .plan-hero {
    position: relative;
    background: #0A0A0A;                   /* deeper than other cards per spec */
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 540px;                     /* keeps card substantial when image is full-cover background */
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .plan-hero:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
  }
  .plan-hero .hero-body {
    padding: 36px 32px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;                    /* above the absolute-positioned image */
    z-index: 2;
  }
  .plan-hero .hero-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-brand-orange);
    margin-bottom: 18px;
  }
  .plan-hero .hero-label::before {
    content: '';
    width: 24px; height: 2px;
    background: var(--color-brand-orange);
  }
  .plan-hero h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--color-text-light);
    margin: 0 0 14px;
  }
  .plan-hero p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 28px;
    max-width: 280px;
  }
  .plan-hero .hero-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: #FF0000;
    color: var(--color-text-light);
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: 999px;
    text-decoration: none;
    border: 1.5px solid #FF0000;
    box-shadow: 0 8px 24px rgba(255, 0, 0, 0.35);
    transition: 0.3s ease;
  }
  .plan-hero .hero-cta:hover {
    background: var(--color-brand-orange);
    border-color: var(--color-brand-orange);
    box-shadow: 0 12px 32px rgba(245, 124, 0, 0.5);
    transform: translateY(-1px);
  }
  .plan-hero .hero-cta svg {
    width: 14px; height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* Full-card background image (cover · center center · no-repeat) */
  .plan-hero .hero-img {
    position: absolute;
    inset: 0;                              /* fills the entire .plan-hero */
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
  }
  .plan-hero .hero-img img {
    width: 100%; height: 100%;
    object-fit: cover;                     /* = background-size: cover */
    object-position: center center;        /* = background-position: center center */
    /* <img loading="lazy"> tags never tile — equivalent of background-repeat: no-repeat */
    transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .plan-hero:hover .hero-img img { transform: scale(1.04); }
  .plan-hero .hero-img::after {
    content: '';
    position: absolute; inset: 0;
    /* Stronger top-down vignette so heading + paragraph stay readable
       across the whole card, with image showing through toward bottom. */
    background: linear-gradient(180deg,
                  rgba(10,10,10,0.88) 0%,
                  rgba(10,10,10,0.65) 35%,
                  rgba(10,10,10,0.4)  65%,
                  rgba(10,10,10,0.55) 100%);
    pointer-events: none;
  }

  /* ===== RESPONSIVE STACKING ORDER =====
     On narrow screens: Prime first (most popular) ? Standard ? CTA hero.
     This puts the "most popular" plan in front of the user immediately. */
  @media (max-width: 759px) {
    .plan.featured { order: -1; transform: none; }
    .plan.featured:hover { transform: translateY(-4px); }
    .plan { padding: 28px 24px 0; }
    .plan-footer { margin: 0 -24px; padding: 20px 24px; }
    .plan-hero .hero-body { padding: 28px 24px 24px; }
  }

  /* ================ GOAL SETTER (Diagonal CTA + Assessment Form) ================
     Sits after Membership as a lower-commitment "yes" — the user gives us
     their stats, we give them a free personalized plan in 24h. Layout uses
     a diagonal wedge on the left (bg-2) cut at ~15deg, echoing the
     Contact section's geometry. Right side hosts the form card. */
  #goal-setter {
    background: var(--bg);
    position: relative;
    overflow: hidden;
    padding: 110px 0;
  }
  /* The diagonal left panel — slightly lighter charcoal with a brand-red edge */
  #goal-setter::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 52%;
    background: var(--bg-2);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
    z-index: 0;
  }
  /* Thin red diagonal accent stripe along the cut edge */
  #goal-setter::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 52%;
    width: 3px;
    background: var(--color-brand-red);
    transform-origin: top right;
    /* Match the polygon's diagonal: top sits at 52%, bottom sits at 52% * 80% = 41.6% — angle ~6deg */
    transform: skewX(-6deg) translateX(-2px);
    z-index: 1;
    box-shadow: 0 0 24px rgba(211, 47, 47, 0.4);
  }
  .goal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  @media (min-width: 900px) {
    .goal-grid { grid-template-columns: 1fr 1.15fr; gap: 64px; }
  }

  /* === LEFT — pitch panel === */
  .goal-pitch { max-width: 460px; }
  .goal-pitch .section-label { margin-bottom: 20px; }
  .goal-pitch .section-title {
    margin-bottom: 18px;
    font-size: clamp(40px, 5.5vw, 72px);
    line-height: 0.95;
  }
  .goal-sub {
    font-family: 'Archivo', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 32px;
    max-width: 380px;
  }
  .goal-perks {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .goal-perk {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
  }
  .goal-perk svg {
    width: 22px; height: 22px;
    fill: none;
    stroke: var(--color-brand-red);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  /* === RIGHT — assessment form === */
  .goal-form {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 36px 32px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  }
  .goal-form-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 4px;
  }
  .goal-form-sub {
    font-size: 12px;
    color: var(--muted);
    margin: 0 0 22px;
    letter-spacing: 0.04em;
  }
  .goal-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
  }
  .goal-field { display: flex; flex-direction: column; }
  .goal-field.full { grid-column: span 2; }
  .goal-field.half { grid-column: span 1; }

  .goal-field label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 7px;
  }
  .goal-field input,
  .goal-field select {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 13px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    outline: none;
    transition: border-color .25s var(--ease), background-color .25s var(--ease);
    width: 100%;
  }
  .goal-field input::placeholder { color: var(--text-muted); }
  .goal-field input:focus,
  .goal-field select:focus {
    border-color: var(--color-brand-red);
    background: rgba(211, 47, 47, 0.03);
  }
  .goal-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0BEC5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px;
    cursor: pointer;
  }
  /* Hide number-input spin buttons (cleaner look) */
  .goal-field input[type="number"]::-webkit-outer-spin-button,
  .goal-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .goal-field input[type="number"] { -moz-appearance: textfield; }

  /* === Weight Loss / Weight Gain pill toggle === */
  .goal-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .goal-toggle-opt {
    position: relative;
    cursor: pointer;
    display: block;
  }
  .goal-toggle-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .goal-toggle-opt span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 13px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
    transition: all .25s var(--ease);
    text-align: center;
  }
  .goal-toggle-opt span svg {
    width: 16px; height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .goal-toggle-opt:hover span {
    border-color: rgba(211, 47, 47, 0.5);
    background: rgba(211, 47, 47, 0.04);
  }
  .goal-toggle-opt input:checked + span {
    background: var(--color-brand-red);
    border-color: var(--color-brand-red);
    color: var(--text);
    box-shadow: 0 6px 18px rgba(211, 47, 47, 0.35);
  }
  .goal-toggle-opt input:focus-visible + span {
    outline: 2px solid var(--color-brand-orange);
    outline-offset: 2px;
  }

  /* === Submit button === */
  .goal-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    margin-top: 26px;
    background: var(--color-brand-red);
    color: var(--text);
    border: none;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .35s var(--ease),
                transform .3s var(--ease),
                box-shadow .35s var(--ease);
  }
  .goal-submit:hover {
    background: var(--color-brand-orange);
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(245, 124, 0, 0.4);
  }
  .goal-submit .arr {
    font-size: 16px;
    transition: transform .3s var(--ease);
    display: inline-block;
  }
  .goal-submit:hover .arr { transform: translateX(4px); }
  .goal-submit.is-success {
    background: #2E7D32;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(46, 125, 50, 0.35);
  }

  /* Mobile: hide the diagonal wedge, stack columns, tighten form padding */
  @media (max-width: 899px) {
    #goal-setter::before,
    #goal-setter::after { display: none; }
    #goal-setter { padding: 80px 0; }
    .goal-form { padding: 28px 22px; }
    .goal-fields { gap: 12px 14px; }
  }
  @media (max-width: 480px) {
    .goal-field.half { grid-column: span 2; }
    .goal-toggle { grid-template-columns: 1fr; }
  }

  /* ================ BLOG ================ */
  /* ================ BLOG ================ */
  .blog {
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;                                       /* spec: 30px between cards */
  }
  @media (min-width: 760px)  { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1100px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

  /* === CARD === */
  .blog-card {
    display: flex;
    flex-direction: column;                          /* spec: flex column so CTA pins to bottom */
    background: #1A1A1A;
    border: 1px solid transparent;                   /* reserved 1px for hover border (no layout shift) */
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  .blog-card:hover {
    border-color: #FF0000;
    transform: translateY(-5px);                     /* spec: subtle lift */
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
  }

  /* === COVER IMAGE === */
  .blog-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
  }
  .blog-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .blog-card:hover .blog-img img { transform: scale(1.06); }

  /* === BODY (flex column — pushes CTA to bottom) === */
  .blog-body {
    padding: 24px 26px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;                                         /* fill remaining card height */
  }

  /* === META (category + read time) === */
  .blog-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #FF0000;                                  /* spec: bold red */
  }
  .blog-meta .dot {
    display: inline-block;
    width: 3px; height: 3px;
    background: #FF0000;
    border-radius: 50%;
    opacity: 0.6;
  }

  /* === HEADLINE === */
  .blog-card h3,
  .blog-card h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 20px;                                 /* spec: 20px */
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-transform: uppercase;                       /* spec: uppercase */
    color: #FFFFFF;                                  /* spec: high-contrast white */
    margin: 0 0 12px;
    transition: color 0.3s ease;
  }
  /* When the headline contains an anchor (real blog post link), inherit
     all typography so the visible text matches the static heading style. */
  .blog-card h3 a,
  .blog-card h4 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  .blog-card:hover h3,
  .blog-card:hover h4,
  .blog-card:hover h3 a,
  .blog-card:hover h4 a { color: #FF0000; }

  /* === BODY TEXT === */
  .blog-card p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.6;
    color: #A0A0A0;                                  /* spec: soft grey */
    margin: 0 0 22px;
    flex: 1;                                         /* takes available space ? pins .read to bottom */
  }

  /* === READ MORE CTA (pinned to bottom via flex layout) === */
  .blog-card .read {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #FF0000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;                                /* sticks to bottom of flex column */
    transition: gap 0.3s ease, color 0.3s ease;
    text-decoration: none;
    align-self: flex-start;                          /* keeps it left-anchored even as gap grows */
  }
  .blog-card:hover .read {
    gap: 14px;
    color: var(--color-brand-orange);                /* fire ramp on hover */
  }

  /* ================ FAQ (Two-Column · Glassmorphism Card · Card-style Accordion) ================ */
  .faq-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items: stretch;
  }
  @media (min-width: 900px) {
    .faq-wrap {
      grid-template-columns: 1fr 1.3fr;
      gap: 60px;
    }
  }

  /* ===== LEFT COLUMN: tall image with floating glass card ===== */
  .faq-img-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    min-height: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  }
  .faq-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .faq-img-wrap:hover img { transform: scale(1.04); }
  /* Subtle bottom vignette so the floating card reads cleanly on any image */
  .faq-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
  }

  /* Floating glassmorphism card — bottom-left */
  .faq-float-card {
    position: absolute;
    bottom: 22px;
    left: 22px;
    right: 22px;
    max-width: 320px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(20, 20, 20, 0.55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  }

  /* Avatar group — overlapping circles */
  .faq-float-card .avatars {
    display: flex;
    flex-shrink: 0;
  }
  .faq-float-card .avatars .av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(20, 20, 20, 0.85);
    background-size: cover;
    background-position: center;
    margin-left: -10px;
  }
  .faq-float-card .avatars .av:first-child { margin-left: 0; }
  .faq-float-card .avatars .av-count {
    margin-left: -10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(20, 20, 20, 0.85);
    background: var(--color-brand-red);
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.02em;
  }

  /* Card text block */
  .faq-float-card .meta { min-width: 0; }
  .faq-float-card .meta b {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text-light);
    letter-spacing: 0.01em;
  }
  .faq-float-card .meta small {
    display: block;
    margin-top: 2px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.04em;
  }

  /* ===== RIGHT COLUMN: card-style accordion ===== */
  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .faq-item {
    background: var(--surface-2);                 /* #333 — brand charcoal */
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    overflow: hidden;
    transition:
      background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .faq-item:hover {
    background: #3A3A3A;
    border-color: rgba(211, 47, 47, 0.25);
  }
  .faq-item.open {
    background: var(--surface-2);
    border-color: rgba(211, 47, 47, 0.45);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  }

  .faq-q {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--color-text-light);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    padding: 22px 22px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    letter-spacing: -0.005em;
    transition: color 0.3s ease;
  }

  /* Red circular +/- icon (Fire & Iron theme) */
  .faq-q .icn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-brand-red);
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0;                                /* hide any inline text fallback */
    position: relative;
    box-shadow: 0 4px 14px rgba(211, 47, 47, 0.35);
    transition:
      background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Two CSS lines form the +/× icon — rotates 45° when open to become × */
  .faq-q .icn::before,
  .faq-q .icn::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .faq-q .icn::before {
    width: 14px;
    height: 2px;
  }
  .faq-q .icn::after {
    width: 2px;
    height: 14px;
  }
  .faq-item.open .faq-q .icn {
    background: var(--color-brand-orange);
    transform: rotate(135deg);
    box-shadow: 0 6px 18px rgba(245, 124, 0, 0.45);
  }

  .faq-q:hover .icn {
    background: var(--color-brand-orange);
    box-shadow: 0 6px 18px rgba(245, 124, 0, 0.4);
  }

  /* Answer panel — smooth max-height collapse */
  .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--color-text-muted);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.65;
  }
  .faq-item.open .faq-a { max-height: 260px; }
  .faq-a p { padding: 0 22px 22px; margin: 0; }

  /* Stack vertically on mobile (already does via grid 1fr default) */
  @media (max-width: 899px) {
    .faq-img-wrap { min-height: 380px; aspect-ratio: 5 / 6; }
    .faq-float-card { left: 16px; right: 16px; bottom: 16px; }
    .faq-q { font-size: 15px; padding: 18px 18px; }
    .faq-q .icn { width: 34px; height: 34px; }
  }

  /* ================ CONTACT (Diagonal Split) ================ */
  <?php echo esc_url( home_url( '/contact/' ) ); ?> {
    position: relative;
    overflow: hidden;
    background: var(--bg);
    display: grid;
    grid-template-columns: 1fr;
    padding-top: 0;
    padding-bottom: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  @media (min-width: 960px) {
    <?php echo esc_url( home_url( '/contact/' ) ); ?> { grid-template-columns: 1fr 1fr; }
  }

  /* Left — image background with overlay */
  .contact-left {
    position: relative;
    overflow: hidden;
    min-height: 480px;
    background:
      linear-gradient(135deg, rgba(211, 47, 47, 0.18) 0%, transparent 45%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.85) 100%),
      url('https://zzzfitnessclub.com/wp-content/uploads/2025/04/IMG_20221011_062133-scaled.jpg') center/cover no-repeat;
  }
  .contact-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.92));
    z-index: 1;
  }
  .contact-left-inner {
    position: relative;
    z-index: 2;
    padding: 100px 48px 80px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 50px;
  }
  @media (max-width: 700px) {
    .contact-left-inner { padding: 80px 28px 60px; }
  }
  .contact-left .section-label {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 18px;
  }
  .contact-left .section-label::before {
    content: ''; width: 28px; height: 2px; background: var(--accent);
  }
  .contact-left h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(44px, 6.5vw, 84px);
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: var(--text);
    text-transform: none;
    margin-bottom: 0;
  }
  .contact-left h2 .accent {
    display: block;
    color: var(--accent);
    font-weight: inherit;
  }
  .contact-left .lead {
    color: rgba(255,255,255,0.88);
    font-size: 17px;
    line-height: 1.6;
    max-width: 460px;
    margin-top: 22px;
  }

  /* Stats row */
  .contact-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
  }
  .contact-stat .n {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(28px, 3vw, 48px);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--accent);
  }
  .contact-stat .l {
    margin-top: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.75);
  }

  /* === Form right panel === */
  .contact-right {
    padding: 80px 48px;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  @media (max-width: 700px) {
    .contact-right { padding: 60px 28px; }
  }
  .contact-right h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;                              /* spec: bold heavy sans */
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 8px;
    text-transform: none;
    color: var(--color-text-light);
  }
  .contact-right .sub {
    color: var(--color-text-muted);
    font-size: 15px;
    margin-bottom: 36px;
    line-height: 1.55;
  }

  /* === FIELD === */
  .contact-right .field {
    margin-bottom: 22px;
    position: relative;
  }
  .contact-right .field label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 500;                              /* spec: cleaner, lighter weight */
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: none;                          /* removed uppercase per "light/modern" */
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 8px;
  }

  /* === INPUTS / SELECT / TEXTAREA === */
  .contact-right .field input,
  .contact-right .field select,
  .contact-right .field textarea {
    width: 100%;
    padding: 14px 16px;
    background: transparent;                       /* spec: transparent bg */
    border: 1px solid #FFFFFF;                     /* spec: 1px solid white border */
    border-radius: 10px;
    color: var(--color-text-light);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
  }
  .contact-right .field input::placeholder,
  .contact-right .field textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
  }
  .contact-right .field input:focus,
  .contact-right .field select:focus,
  .contact-right .field textarea:focus {
    outline: none;
    border-color: #FF0000;                         /* spec: focus ? brand red */
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.12);   /* subtle red focus halo */
  }
  /* Autofill (Chrome shoves a yellow bg in — override) */
  .contact-right .field input:-webkit-autofill {
    -webkit-text-fill-color: var(--color-text-light);
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
  }

  /* === SELECT (dropdown) — match input styling + custom arrow === */
  .contact-right .field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 44px;
    cursor: pointer;
  }
  /* Swap arrow color to red on focus */
  .contact-right .field select:focus {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23FF0000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
  .contact-right .field select option {
    background: #1A1A1A;                           /* dropdown menu items dark */
    color: var(--color-text-light);
  }

  /* === BOOK MY FREE TRIAL BUTTON === */
  .contact-right .btn-trial {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 28px;
    background: #FF0000;                           /* spec: solid brand red */
    color: #FFFFFF;                                /* spec: white bold text */
    font-family: 'Inter', sans-serif;
    font-weight: 800;                              /* spec: bold */
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border-radius: 10px;                           /* matches input radius */
    border: 1px solid #FF0000;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(255, 0, 0, 0.25);
    margin-top: 14px;
    position: relative;
    overflow: hidden;
  }
  .contact-right .btn-trial:hover {
    background: var(--color-brand-orange);         /* fire ramp on hover */
    border-color: var(--color-brand-orange);
    transform: translateY(-2px);
    box-shadow:                                    /* spec: "glow" on hover */
      0 14px 36px rgba(255, 0, 0, 0.45),
      0 0 24px rgba(255, 0, 0, 0.3),
      0 0 0 4px rgba(255, 0, 0, 0.15);
  }
  .contact-right .btn-trial:active {
    transform: translateY(0);
  }
  .contact-right .btn-trial .arr {
    transition: transform 0.3s ease;
  }
  .contact-right .btn-trial:hover .arr {
    transform: translateX(5px);
  }

  /* === SUCCESS STATE — green pulse + checkmark === */
  .contact-right .btn-trial.is-success {
    background: #22C55E;                           /* green */
    border-color: #22C55E;
    color: #FFFFFF;
    box-shadow:
      0 14px 36px rgba(34, 197, 94, 0.4),
      0 0 24px rgba(34, 197, 94, 0.3);
    animation: trial-success 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;                          /* lock during success window */
  }
  .contact-right .btn-trial.is-success .arr {
    display: none;                                 /* arrow swaps for checkmark via ::before */
  }
  .contact-right .btn-trial.is-success::before {
    content: '? ';
    display: inline-block;
    margin-right: 4px;
    animation: trial-check 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes trial-success {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.04); }
    100% { transform: scale(1); }
  }
  @keyframes trial-check {
    0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .contact-right .btn-trial.is-success,
    .contact-right .btn-trial.is-success::before { animation: none; }
  }

  /* ===== CONTACT UTILITY BAR (integrated inside form column) =====
     Compact 3-column row sitting just below the Book Trial button.
     Dark #1A1A1A bg + rounded corners — reads as a natural extension
     of the form, not a separate full-bleed footer. */
  .contact-utility {
    margin-top: 60px;                         /* gap between button and bar */
    background: #1A1A1A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;                      /* spec: rounded — feels like form extension */
    padding: 18px 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: center;
  }

  .cu-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text-light);
    text-decoration: none;
    padding: 8px 6px;
    border-radius: 8px;
    transition: all 0.3s ease;
    min-width: 0;                             /* allows truncation in flex */
  }
  .cu-item:hover {
    background: rgba(255, 0, 0, 0.06);
  }

  /* Icon — 20px line-art per spec */
  .cu-ic {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: color 0.3s ease, transform 0.3s ease;
  }
  .cu-item:hover .cu-ic {
    color: #FF0000;
    transform: scale(1.08);
  }
  .cu-ic svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Text stack — label on top, value below */
  .cu-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.1;
  }
  .cu-text b {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 4px;
  }
  .cu-text span {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #FFFFFF;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;                  /* graceful truncation if column narrows */
  }

  /* Mobile: stack vertically, compact, tappable */
  @media (max-width: 600px) {
    .contact-utility {
      grid-template-columns: 1fr;
      gap: 4px;
      padding: 14px;
    }
    .cu-item {
      padding: 12px 10px;
      width: 100%;
    }
    .cu-text span { white-space: normal; }
  }

  /* ================ MAP ================ */
  .map-wrap {
    position: relative;
    height: 460px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
  }
  .map-wrap iframe {
    width: 100%; height: 100%;
    border: 0;
    filter: grayscale(1) invert(0.88) contrast(0.85);
  }

  /* ================ SEO CONTENT (Knowledge Section / Category-Page Style) ================
     Keyword-rich content block for organic search visibility — sits between
     the Map and the Consultation Strip. Visible content (no display:none)
     so search engines fully index it. Uses bg-2 to step down toward the
     near-black footer area below; intentionally DIM color scale so it reads
     as background/supplemental content and doesn't compete with the rest
     of the page for visual attention. */
  .seo-content {
    background: var(--bg);
    padding: 80px 0 64px;
    position: relative;
    /* Subtle overall dimming via reduced opacity on the section */
    color: rgba(255, 255, 255, 0.42);
  }

  /* Intro block — H2 + lead paragraph, centered, capped at readable width */
  .seo-intro {
    max-width: 820px;
    margin: 0 auto 56px;
    text-align: center;
  }
  .seo-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 3.4vw, 40px);
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.1;
    margin: 0 0 18px;
  }
  .seo-lead {
    font-family: 'Archivo', sans-serif;
    font-size: 14.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
  }
  .seo-lead strong { color: rgba(255, 255, 255, 0.62); font-weight: 700; }

  /* Content grid — 1 col mobile ? 2 col tablet ? 3 col desktop */
  .seo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px 44px;
    margin-bottom: 48px;
  }
  @media (min-width: 720px) {
    .seo-grid { grid-template-columns: 1fr 1fr; gap: 36px 40px; }
  }
  @media (min-width: 1100px) {
    .seo-grid { grid-template-columns: 1fr 1fr 1fr; gap: 40px 44px; }
  }

  /* Individual H3 + paragraph block — H3 gets a dimmed red underline accent */
  .seo-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .seo-block h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 4px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(211, 47, 47, 0.45);
    display: inline-block;
    align-self: flex-start;
    line-height: 1.3;
  }
  .seo-block p {
    font-family: 'Archivo', sans-serif;
    font-size: 13px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.38);
    margin: 0;
  }
  .seo-block p + p { margin-top: 4px; }
  .seo-block p strong {
    color: rgba(255, 255, 255, 0.58);
    font-weight: 700;
  }
  .seo-block p a {
    color: rgba(245, 124, 0, 0.62);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(245, 124, 0, 0.25);
    text-decoration-thickness: 1px;
    transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
  }
  .seo-block p a:hover {
    color: rgba(211, 47, 47, 0.85);
    text-decoration-color: rgba(211, 47, 47, 0.6);
  }

  /* Popular Searches — keyword chips (matches how category pages on Myntra/Flipkart surface long-tail queries) */
  .seo-keywords {
    padding-top: 36px;
    border-top: 1px solid var(--line);
    margin-bottom: 32px;
  }
  .seo-kw-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin: 0 0 18px;
  }
  .seo-kw-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .seo-kw-list a {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.42);
    text-decoration: none;
    transition: background-color .25s var(--ease),
                border-color .25s var(--ease),
                color .25s var(--ease),
                transform .25s var(--ease);
  }
  .seo-kw-list a:hover {
    background: rgba(211, 47, 47, 0.1);
    border-color: rgba(211, 47, 47, 0.5);
    color: rgba(255, 255, 255, 0.85);
    transform: translateY(-1px);
  }

  /* Meta line — address + phone + service area (E-E-A-T signal for local SEO) */
  .seo-meta {
    text-align: center;
    padding-top: 28px;
    border-top: 1px solid var(--line);
  }
  .seo-meta p {
    font-family: 'Archivo', sans-serif;
    font-size: 12px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.32);
    margin: 0;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
  .seo-meta a {
    color: rgba(245, 124, 0, 0.55);
    text-decoration: none;
    font-weight: 600;
    transition: color .25s var(--ease);
  }
  .seo-meta a:hover { color: rgba(211, 47, 47, 0.85); }

  /* The intro label inherits the page's .section-label rule; force it to match
     the dimmed palette of this section instead of the default brand red */
  .seo-content .section-label {
    color: rgba(211, 47, 47, 0.6) !important;
  }

  /* Mobile tightening */
  @media (max-width: 600px) {
    .seo-content { padding: 56px 0 44px; }
    .seo-intro { margin-bottom: 40px; }
    .seo-grid { gap: 28px; margin-bottom: 36px; }
  }

  /* ================ CONSULT STRIP (Pre-footer CTA) ================
     Flush banner that sits directly between the map and the footer.
     NO outer vertical margin or padding by user request — only the
     internal flex layout gives it body. Uses the same near-black tone
     as the footer below so the two read as one continuous foot block. */
  .consult-strip {
    background: #050505;
    border-top: 1px solid var(--line);
    margin: 0;
    padding: 0;
  }
  .consult-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: 96px;
    flex-wrap: wrap;
  }

  /* LEFT — CTA headline (replaces the logo slot, matches page's typographic standard) */
  .consult-headline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
  }
  .consult-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-brand-red);
  }
  .consult-headline h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 2.4vw, 28px);
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1;
    margin: 0;
  }

  /* CENTER — trainer avatars + phone */
  .consult-center {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    justify-content: center;
    min-width: 260px;
  }
  .consult-avatars {
    display: flex;
    flex-shrink: 0;
  }
  .cs-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #050505;
    background-color: #2A2A2A;
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    transition: transform .3s var(--ease);
  }
  .cs-avatar + .cs-avatar { margin-left: -14px; }
  .consult-avatars:hover .cs-avatar:hover { transform: translateY(-2px) scale(1.05); z-index: 2; }
  .consult-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--muted);
    font-weight: 500;
  }
  .consult-text .cs-phone {
    color: var(--text);
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: underline;
    text-decoration-color: var(--color-brand-red);
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    transition: color .25s var(--ease);
  }
  .consult-text .cs-phone:hover { color: var(--color-brand-orange); }

  /* Mobile: stack vertically inside the strip, keep CTA full-width */
  @media (max-width: 820px) {
    .consult-inner {
      flex-direction: column;
      align-items: stretch;
      gap: 18px;
      min-height: 0;
      padding-top: 22px;
      padding-bottom: 22px;
    }
    .consult-headline { text-align: center; align-items: center; }
    .consult-center { flex-direction: column; gap: 12px; text-align: center; }
    .consult-text { justify-content: center; text-align: center; }
    .consult-inner .btn { justify-content: center; }
  }

  /* ================ FOOTER ================ */
  footer {
    background: #050505;
    border-top: 1px solid var(--line);
    padding: 80px 0 130px;
    position: relative;
    overflow: hidden;
  }
  footer::before {
    content: 'ZZZ';
    position: absolute;
    bottom: -60px;
    right: -20px;
    font-family: 'Anton', sans-serif;
    font-size: clamp(200px, 30vw, 420px);
    -webkit-text-stroke: 2px rgba(211,47,47,0.08);
    color: transparent;
    line-height: 0.8;
    pointer-events: none;
  }
  .foot-grid {
    display: grid;
    gap: 44px;
    grid-template-columns: 1fr;
    position: relative;
  }
  @media (min-width: 760px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; } }
  .foot-logo { margin-bottom: 18px; display: inline-flex; align-items: center; }
  .foot-logo img { height: 72px; width: auto; object-fit: contain; display: block; }
  .foot-grid p { color: var(--muted); font-size: 14px; max-width: 400px; margin-bottom: 22px; line-height: 1.7; }
  .foot-grid h5 {
    font-family: 'Anton', sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: 0.06em;
  }
  .foot-grid ul { list-style: none; }
  .foot-grid ul li { padding: 7px 0; font-size: 14px; color: var(--muted); transition: .3s var(--ease); }
  .foot-grid ul li a { transition: .3s var(--ease); }
  .foot-grid ul li a:hover { color: var(--accent); padding-left: 6px; }
  .foot-social { display: flex; gap: 12px; margin-top: 18px; }
  .foot-social a {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    transition: .4s var(--ease);
  }
  .foot-social a:hover {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    transform: translateY(-4px) rotate(-8deg);
  }
  .foot-social svg { width: 16px; height: 16px; }
  .copyright {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    position: relative;
  }
  .copyright .credit-sep {
    margin: 0 6px;
    color: var(--line);
  }
  .copyright .credit a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    transition: color .25s var(--ease);
  }
  .copyright .credit a:hover { color: var(--accent); }

  /* ================ FOOTER — MOBILE CENTERING ================
     Below 760px the footer grid stacks into a single column. Center every
     column's content (logo, paragraph, social icons, headings, link lists,
     address) so the layout reads symmetrically end-to-end on mobile. */
  @media (max-width: 759px) {
    footer { padding: 64px 0 130px; text-align: center; }
    .foot-grid { gap: 36px; }

    /* Center every column's content */
    .foot-grid > div { display: flex; flex-direction: column; align-items: center; }

    /* Logo: center it horizontally */
    .foot-logo { margin: 0 auto 18px; justify-content: center; }
    .foot-logo img { margin: 0 auto; }

    /* Tagline paragraph */
    .foot-grid p {
      text-align: center;
      max-width: 360px;
      margin: 0 auto 22px;
    }

    /* Social icons row — keep them centered */
    .foot-social { justify-content: center; margin-top: 6px; }

    /* Column headings */
    .foot-grid h5 { text-align: center; }

    /* Link lists — center each link and remove the hover-shift padding that
       would push them off-center on touch */
    .foot-grid ul { padding: 0; }
    .foot-grid ul li { text-align: center; }
    .foot-grid ul li a:hover { padding-left: 0; }   /* kill desktop hover shift */
  }

  /* SMALL PHONE (=380px): tighten typography & spacing */
  @media (max-width: 380px) {
    footer { padding: 48px 0 130px; }
    .foot-grid { gap: 30px; }
    .foot-logo img { height: 60px; }
    .foot-grid p { font-size: 13px; }
    .foot-grid h5 { font-size: 16px; margin-bottom: 16px; }
    .foot-grid ul li { font-size: 13px; }
    .foot-social a { width: 38px; height: 38px; }
  }

  /* ================ STICKY CTA — Mobile-Only Bottom Action Bar ================
     Two equal-width buttons fixed to the bottom edge. Visible only below
     1050px (laptops + desktop have header CTAs instead). Both buttons share
     the same size and shape — solid red Join + outlined Call. Tap targets
     comfortably exceed 44px (iOS HIG minimum). */
  .sticky-cta {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 99;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--line);
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    display: flex;
    gap: 10px;
    animation: slide-up .6s var(--ease) .5s backwards;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
  }
  @keyframes slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* Both buttons override the global pill .btn — no animations, no shine sweep,
     no transform on hover (would compete with the sticky-bar position). */
  .sticky-cta .btn {
    flex: 1;
    min-width: 0;
    height: 50px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
    overflow: visible;
    animation: none;
    box-shadow: none;
  }
  .sticky-cta .btn::before { content: none; }     /* kill the shine-sweep pseudo */
  .sticky-cta .btn:hover,
  .sticky-cta .btn:active { transform: none; }

  /* === Call button (outlined) === */
  .sticky-cta .btn.call {
    background: transparent;
    color: var(--text);
    border: 1.5px solid var(--accent);
  }
  .sticky-cta .btn.call:active { background: rgba(211, 47, 47, 0.12); }

  /* The phone icon — explicitly sized so it doesn't expand to fill flex parent */
  .sticky-cta .btn.call svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: var(--accent);
  }

  /* Phone number text — tighter letter-spacing than the global .btn rule
     (0.1em) since "+91 98372 71586" needs more horizontal room than "CALL". */
  .sticky-cta .btn.call .cta-num {
    letter-spacing: 0.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* === Join Now button (solid red) === */
  .sticky-cta .btn.btn-primary {
    background: var(--accent);
    color: #fff;
    border: 1.5px solid var(--accent);
    box-shadow: 0 4px 14px rgba(211, 47, 47, 0.4);
  }
  .sticky-cta .btn.btn-primary:active { background: var(--accent-hover); }
  .sticky-cta .btn.btn-primary .arr {
    font-size: 16px;
    line-height: 1;
    transition: transform .25s var(--ease);
  }
  .sticky-cta .btn.btn-primary:active .arr { transform: translateX(2px); }

  /* === Phone tier (=600px): tighten padding, shrink letter-spacing === */
  @media (max-width: 600px) {
    .sticky-cta { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
    .sticky-cta .btn { height: 48px; font-size: 12px; letter-spacing: 0.08em; padding: 0 12px; }
    .sticky-cta .btn.call svg { width: 15px; height: 15px; }
    .sticky-cta .btn.call .cta-num { font-size: 12.5px; letter-spacing: 0; }
  }

  /* === Small phone tier (=380px): tightest possible without losing tap target === */
  @media (max-width: 380px) {
    .sticky-cta { padding: 9px 10px calc(9px + env(safe-area-inset-bottom)); gap: 7px; }
    .sticky-cta .btn { height: 46px; font-size: 11.5px; letter-spacing: 0.04em; padding: 0 8px; gap: 5px; }
    .sticky-cta .btn.call svg { width: 13px; height: 13px; }
    .sticky-cta .btn.call .cta-num { font-size: 11px; letter-spacing: -0.01em; }
    .sticky-cta .btn.btn-primary .arr { font-size: 14px; }
  }

  /* === Desktop: hide entirely (laptops/desktops have header CTAs) === */
  @media (min-width: 1050px) {
    .sticky-cta { display: none; }
    footer { padding-bottom: 80px; }
  }

  /* ================ WHATSAPP FLOAT ================ */
  .wa-float {
    position: fixed;
    right: 20px;
    bottom: 100px;
    width: 56px; height: 56px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 10px 30px rgba(37,211,102,0.4);
    z-index: 98;
    animation: wa-pulse 2s infinite;
    /* Hidden by default — JS adds .is-visible once user scrolls past hero */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    transition:
      opacity 0.4s var(--ease),
      visibility 0.4s var(--ease),
      transform 0.4s var(--ease);
  }
  .wa-float.is-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
  .wa-float:hover { transform: scale(1.1); }
  .wa-float svg { width: 28px; height: 28px; }
  @keyframes wa-pulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(37,211,102,0.4), 0 0 0 0 rgba(37,211,102,0.5); }
    50% { box-shadow: 0 10px 30px rgba(37,211,102,0.4), 0 0 0 16px rgba(37,211,102,0); }
  }
  @media (min-width: 1050px) { .wa-float { bottom: 30px; } }

  /* ================ VIRTUAL TOUR VIDEO ================
     YouTube embed auto-plays muted as ambient background.
     Custom red play button triggers full-experience (unmuted) replay.
     The iframe is only injected after the section scrolls into view
     (perf: avoids loading YouTube's ~500KB player on initial paint). */
  .video-section {
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .video-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16/9;
    cursor: pointer;
    border: 1px solid var(--line);
    background: #000;
    isolation: isolate;
  }

  /* Poster image (shown until iframe loads or while video is paused) */
  .video-wrap .vt-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: opacity 0.6s var(--ease);
  }
  .video-wrap.video-loaded .vt-poster { opacity: 0; }

  /* Iframe container — fills the wrap once injected */
  .video-iframe-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.8s var(--ease);
    pointer-events: none;                       /* default: clicks pass through to play button */
  }
  .video-wrap.video-loaded .video-iframe-wrap {
    opacity: 1;
  }
  .video-wrap.video-fullexp .video-iframe-wrap {
    pointer-events: auto;                       /* unmuted experience: native YouTube controls */
  }
  .video-iframe-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* Dark overlay gradient — so caption + play button pop */
  .video-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
      radial-gradient(circle at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.75) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 30%, rgba(0,0,0,0.65) 100%);
    pointer-events: none;
    transition: opacity 0.5s var(--ease);
  }
  /* When user triggers full experience, overlay fades to let YouTube native UI through */
  .video-wrap.video-fullexp::after { opacity: 0; }

  /* === ANIMATED PLAY BUTTON ===
     Red circular button with pulsing ring animations. Triggers full
     unmuted experience on click. Hides when user enters full experience. */
  .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(72px, 10vw, 110px);
    height: clamp(72px, 10vw, 110px);
    background: #FF0000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: pointer;
    border: 2px solid #FFFFFF;
    box-shadow:
      0 20px 60px rgba(255, 0, 0, 0.45),
      0 0 0 4px rgba(255, 0, 0, 0.15);
    transition:
      transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 0.4s var(--ease),
      opacity 0.4s var(--ease);
  }
  /* Two pulsing rings — staggered */
  .play-btn::before,
  .play-btn::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 2px solid #FF0000;
    border-radius: 50%;
    animation: vt-ring 2.4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  }
  .play-btn::after { animation-delay: 1.2s; }
  @keyframes vt-ring {
    0%   { transform: scale(1);   opacity: 0.9; }
    100% { transform: scale(1.7); opacity: 0;   }
  }
  .play-btn svg {
    width: 38%;
    height: 38%;
    fill: #FFFFFF;
    margin-left: 6%;                            /* optical centering for play triangle */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }
  .video-wrap:hover .play-btn {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow:
      0 24px 70px rgba(245, 124, 0, 0.55),
      0 0 0 6px rgba(255, 0, 0, 0.2);
    background: var(--color-brand-orange);     /* fire ramp on hover */
  }
  .video-wrap.video-fullexp .play-btn {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.6);
  }

  /* === VIDEO CAPTION (bottom-left + duration chip bottom-right) === */
  .video-caption {
    position: absolute;
    bottom: 32px;
    left: 32px;
    right: 32px;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    transition: opacity 0.4s var(--ease);
  }
  .video-wrap.video-fullexp .video-caption {
    opacity: 0;
    pointer-events: none;
  }
  .video-caption h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(20px, 2.6vw, 32px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--color-text-light);
    margin: 0;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  }
  .video-caption .dur {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 0, 0, 0.5);
  }
  .video-caption .dur::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-brand-red);
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.8);
    animation: vt-rec 1.4s ease-in-out infinite;
  }
  @keyframes vt-rec {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
  }

  @media (max-width: 600px) {
    .video-caption {
      bottom: 20px; left: 20px; right: 20px;
      gap: 12px;
    }
  }

  /* ================ WHY CHOOSE US / USP GRID ================ */
  /* ================ USP CAROUSEL (Program Overview) ================
     Auto-rotating carousel of 6 brand pillars. Touch/drag enabled,
     pauses on hover. Active card has signature red bottom border. */
  .usp-carousel-wrap {
    position: relative;
    margin-top: 30px;                              /* spec: 30px padding above */
  }

  /* Viewport clips overflow so cards slide cleanly */
  .usp-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }

  /* Track holds the row of cards and translates on idx change */
  .usp-track {
    display: flex;
    gap: 20px;                                     /* spec: consistent 20px gap */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    touch-action: pan-y;                           /* allow vertical scroll, capture horizontal drag */
    user-select: none;
    cursor: grab;
  }
  .usp-track.dragging {
    cursor: grabbing;
    transition: none;                              /* during drag, no animation lag */
  }

  /* ===== CARDS — fixed pixel widths for pixel-perfect alignment ===== */
  /* Equivalent to Swiper's slidesPerView: 'auto' — each card has a natural
     width and the row flows past the viewport. This eliminates the fractional
     pixel rounding that percentage-based widths sometimes cause. */
  .usp-card {
    flex: 0 0 240px;                               /* fixed natural width */
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 26px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  @media (max-width: 480px) {
    .usp-card { flex-basis: calc(100vw - 80px); }  /* one-up cards on phones */
  }

  /* === ACTIVE CARD — red bottom border, lift, glow === */
  .usp-card.is-active {
    border-color: rgba(211, 47, 47, 0.45);
    background: linear-gradient(180deg, rgba(211, 47, 47, 0.08), var(--surface));
    box-shadow:
      0 22px 48px rgba(0, 0, 0, 0.5),
      0 16px 36px rgba(211, 47, 47, 0.22);
    transform: translateY(-6px);                   /* stronger lift than before */
  }
  .usp-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-brand-red), var(--color-brand-orange));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .usp-card.is-active::after { transform: scaleX(1); }

  .usp-card .usp-icon {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(211, 47, 47, 0.08);
    border: 1px solid rgba(211, 47, 47, 0.25);
    border-radius: 14px;
    color: var(--accent);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .usp-card.is-active .usp-icon {
    background: var(--accent);
    color: var(--color-text-light);
    transform: rotate(-8deg) scale(1.1);
  }
  .usp-icon svg { width: 26px; height: 26px; }
  .usp-card h5 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
    color: var(--color-text-light);
  }
  .usp-card p {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
  }

  /* ===== NAVIGATION ARROWS — side-edge floating ===== */
  .usp-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .usp-arrow.usp-prev { left: -8px; }
  .usp-arrow.usp-next { right: -8px; }
  @media (min-width: 800px) {
    .usp-arrow.usp-prev { left: -22px; }
    .usp-arrow.usp-next { right: -22px; }
  }
  .usp-arrow:hover {
    background: var(--color-brand-red);
    border-color: var(--color-brand-red);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 10px 28px rgba(211, 47, 47, 0.45);
  }
  .usp-arrow:disabled,
  .usp-arrow.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }
  .usp-arrow svg {
    width: 16px; height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ===== DOTS — centered below carousel ===== */
  .usp-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
  }
  .usp-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .usp-dot.is-active {
    width: 28px;
    border-radius: 999px;
    background: var(--color-brand-red);
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.18);
  }

  /* ================ SPECIAL OFFERS ================ */
  .offers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  @media (min-width: 680px) { .offers-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .offers-grid { grid-template-columns: repeat(4, 1fr); } }
  .offer-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    cursor: pointer;
    border: 1px solid var(--line);
    isolation: isolate;
  }
  .offer-card img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .8s var(--ease);
  }
  .offer-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.95) 100%);
    z-index: -1;
    transition: opacity .5s var(--ease);
  }
  .offer-card:hover { border-color: var(--accent); }
  .offer-card:hover img { transform: scale(1.1); }
  .offer-badge {
    position: absolute;
    top: 20px; right: 20px;
    background: var(--accent);
    color: #000;
    font-size: 11px;
    font-weight: 800;
    padding: 7px 14px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    animation: wiggle 3s ease-in-out infinite;
  }
  @keyframes wiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
  }
  .offer-card h4 {
    font-family: 'Anton', sans-serif;
    font-size: 26px;
    text-transform: uppercase;
    margin-bottom: 8px;
    line-height: 1;
  }
  .offer-card .discount {
    font-family: 'Anton', sans-serif;
    font-size: 52px;
    color: var(--accent);
    line-height: 0.9;
    margin-bottom: 12px;
    -webkit-text-stroke: 1px var(--accent);
  }
  .offer-card p {
    font-size: 13px;
    color: #d0d0d0;
    margin-bottom: 20px;
  }
  .offer-card .offer-cta {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap .3s var(--ease);
  }
  .offer-card:hover .offer-cta { gap: 14px; }

  /* ================ GOOGLE REVIEWS WIDGET ================ */
  /* ================ GOOGLE REVIEWS (Masonry · Schema-friendly) ================ */
  .google-reviews {
    background:
      radial-gradient(ellipse at center, rgba(211, 47, 47, 0.06), transparent 70%),
      var(--bg);
    padding-top: 120px;          /* significant breathing room from previous section */
    padding-bottom: 120px;       /* significant breathing room before next section */
  }

  /* === HEADER === */
  .reviews-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-bottom: 60px;
    text-align: center;
  }
  .reviews-header h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 6.5vw, 80px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--color-text-light);
    margin: 0;
  }
  .reviews-header h2 .accent { color: var(--color-brand-red); font-weight: 800; }

  /* Google Trust Badge — white card widget with Google logo, star rating,
     score, review count and a "View on Google" link. Replaces the old
     custom verified-badge pill. */
  .g-trust-badge {
    display: inline-flex;
    justify-content: center;
    margin-bottom: 28px;
  }
  .gtb-inner {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 12px;
    padding: 12px 20px;
    box-shadow:
      0 2px 8px rgba(0,0,0,0.22),
      0 0 0 1px rgba(0,0,0,0.06);
  }
  .gtb-logo { display: flex; align-items: center; flex-shrink: 0; }
  .gtb-logo svg { width: 60px; height: auto; display: block; }
  .gtb-logo::after {
    content: '';
    display: block;
    width: 1px; height: 32px;
    background: #e0e0e0;
    margin-left: 14px;
  }
  .gtb-stars { display: flex; gap: 1px; }
  .gtb-stars span { font-size: 18px; color: #FBBC05; line-height: 1; }
  .gtb-rating { display: flex; flex-direction: column; gap: 1px; margin-left: -4px; }
  .gtb-score {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: #1a1a1a;
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .gtb-count {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #757575;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .gtb-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-left: 1px solid #e0e0e0;
    padding-left: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #4285F4;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.01em;
    transition: color .2s;
  }
  .gtb-link:hover { color: #1a73e8; }
  .gtb-link svg { width: 12px; height: 12px; flex-shrink: 0; }
  @media (max-width: 540px) {
    .gtb-inner { gap: 10px; padding: 10px 14px; }
    .gtb-logo svg { width: 46px; }
    .gtb-logo::after { margin-left: 10px; height: 24px; }
    .gtb-stars span { font-size: 14px; }
    .gtb-score { font-size: 17px; }
    .gtb-count { font-size: 9px; }
    .gtb-link { padding-left: 10px; font-size: 10px; }
  }
  @media (max-width: 380px) {
    .gtb-link { display: none; }
    .gtb-inner { gap: 8px; padding: 9px 12px; }
  }

  .reviews-sub {
    color: var(--color-text-muted);
    font-size: 15px;
    font-weight: 500;
    max-width: 520px;
    line-height: 1.6;
    margin-top: 6px;
  }

  /* === MASONRY GRID (CSS columns) === */
  .reviews-grid {
    column-count: 1;
    column-gap: 20px;
  }
  @media (min-width: 700px)  { .reviews-grid { column-count: 2; } }
  @media (min-width: 1100px) { .reviews-grid { column-count: 3; } }

  /* === REVIEW CARD === */
  .g-review {
    display: inline-block;                          /* required for column flow */
    width: 100%;
    background: rgba(20, 20, 20, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid #FF0000;
    border-radius: 16px;
    padding: 28px 26px;
    margin-bottom: 20px;
    position: relative;
    break-inside: avoid;                            /* keep card together across columns */
    transition:
      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .g-review:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 0, 0, 0.85);
    box-shadow:
      0 16px 36px rgba(0, 0, 0, 0.55),
      0 0 28px rgba(255, 0, 0, 0.18);
  }

  /* === POWER CARD (featured) — spans all columns, sits at top === */
  .g-review.is-power {
    column-span: all;                               /* breaks out of masonry, sits full-width */
    background: linear-gradient(135deg, rgba(40, 8, 8, 0.85), rgba(20, 20, 20, 0.85));
    border: 1.5px solid #FF0000;
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.55),
      0 0 36px rgba(255, 0, 0, 0.28);
    margin-bottom: 28px;
    padding: 36px 36px;
    animation: power-glow 4s ease-in-out infinite;
  }
  .g-review.is-power:hover {
    transform: translateY(-6px);
    box-shadow:
      0 24px 56px rgba(0, 0, 0, 0.6),
      0 0 44px rgba(255, 0, 0, 0.38);
  }
  /* Featured-card "FEATURED" pill */
  .g-review.is-power .g-power-label {
    position: absolute;
    top: -12px;
    left: 36px;
    background: var(--color-brand-red);
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(255, 0, 0, 0.4);
  }
  .g-review.is-power blockquote {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.45;
    color: var(--color-text-light);
    margin: 14px 0 18px;
    font-style: italic;
    quotes: "“" "”";
  }
  .g-review.is-power blockquote::before {
    content: open-quote;
    font-family: 'Anton', serif;
    font-size: 60px;
    line-height: 0;
    color: var(--color-brand-red);
    vertical-align: -22px;
    margin-right: 6px;
  }

  @keyframes power-glow {
    0%, 100% {
      box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.55),
        0 0 36px rgba(255, 0, 0, 0.28);
    }
    50% {
      box-shadow:
        0 22px 54px rgba(0, 0, 0, 0.6),
        0 0 48px rgba(255, 0, 0, 0.4);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .g-review.is-power { animation: none; }
  }

  /* === REVIEW HEADER (author + Google logo) === */
  .g-review-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
  }
  .g-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-brand-red), var(--color-brand-orange));
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 16px;
    flex-shrink: 0;
  }
  .g-review-head b {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text-light);
  }
  .g-review-head small {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
    margin-top: 2px;
  }
  .g-review .stars {
    color: #FFC107;                                /* warm gold for star ratings */
    font-size: 15px;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
  }
  .g-review p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
  }

  /* Google "G" logo in corner of each card — instant trust signal */
  .g-review .g-corner {
    position: absolute;
    top: 20px; right: 20px;
    width: 22px; height: 22px;
    opacity: 0.65;
    transition: opacity 0.3s ease;
  }
  .g-review:hover .g-corner { opacity: 1; }
  .g-review .g-corner svg { width: 100%; height: 100%; }

  .reviews-cta {
    text-align: center;
    margin-top: 60px;
  }

  /* ================ EVENTS (Premium Carousel) ================ */
  .events {
    background: var(--bg);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .events::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 80% 20%, rgba(211,47,47,0.07), transparent 55%),
      radial-gradient(ellipse at 10% 80%, rgba(255,46,99,0.04), transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
  .events > .container { position: relative; z-index: 1; }

  .ev-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 56px;
  }
  .ev-head .ev-intro { max-width: 720px; }
  .ev-head .section-label {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 16px;
  }
  .ev-head .section-label::before { content:''; width:28px; height:2px; background:var(--accent); }
  .ev-head h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(40px, 6.5vw, 80px);
    line-height: 1.02;
    letter-spacing: -0.04em;
    text-transform: none;
    color: var(--text);
    margin: 0;
  }
  .ev-head p { color: var(--muted); font-size: 17px; max-width: 540px; margin-top: 16px; line-height: 1.6; }

  .ev-nav { display: flex; gap: 12px; flex-shrink: 0; }
  .ev-arrow {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(10px);
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .35s var(--ease);
  }
  .ev-arrow svg { width: 20px; height: 20px; transition: transform .35s var(--ease), color .35s var(--ease); }
  .ev-arrow:hover {
    border-color: rgba(211,47,47,0.5);
    background: rgba(211,47,47,0.08);
    transform: scale(1.08);
  }
  .ev-arrow:hover svg { color: var(--accent); filter: drop-shadow(0 0 8px rgba(211,47,47,0.6)); }
  .ev-arrow.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

  .ev-viewport {
    overflow: hidden;
    overflow-x: clip;
    overflow-y: visible;
    cursor: grab;
    padding: 40px 8px 90px;
    margin: -32px -16px -74px;
  }
  .ev-viewport.dragging { cursor: grabbing; }
  .ev-track {
    display: flex;
    gap: 24px;
    transition: transform .65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .ev-viewport.dragging .ev-track { transition: none; }

  .ev-card {
    flex: 0 0 auto;
    width: calc(100% - 16px);
    position: relative;
    height: 540px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: var(--surface);
    border-radius: 0;
    box-shadow: 0 20px 50px rgba(0,0,0,0.45);
    transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow .55s var(--ease),
                border-color .4s var(--ease);
    text-decoration: none;
  }
  @media (min-width: 640px) { .ev-card { width: calc(60% - 12px); height: 560px; } }
  @media (min-width: 1024px) { .ev-card { width: calc((100% - 48px) / 3); height: 580px; } }

  .ev-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 5;
  }

  .ev-card .ev-img {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transition: filter .55s var(--ease), transform 1s var(--ease);
    filter: grayscale(15%) brightness(0.85);
  }
  .ev-card .ev-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,0.95) 100%);
    transition: background .55s var(--ease);
  }
  .ev-card .ev-glow {
    position: absolute; inset: 0;
    box-shadow: inset 0 0 60px rgba(211,47,47,0.22);
    opacity: 0;
    transition: opacity .55s var(--ease);
    pointer-events: none;
  }

  .ev-card .ev-date {
    position: absolute;
    top: 22px; left: 22px;
    z-index: 4;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 0;
    padding: 12px 16px;
    text-align: center;
    transition: all .4s var(--ease);
  }
  .ev-card .ev-date .day {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--accent);
  }
  .ev-card .ev-date .month {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text);
    margin-top: 4px;
  }

  .ev-card .ev-live {
    position: absolute;
    top: 24px; right: 22px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(211,47,47,0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(211,47,47,0.4);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent);
  }
  .ev-card .ev-live .dot {
    width: 7px; height: 7px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent);
    animation: pulse 1.8s infinite;
  }

  .ev-card .ev-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    z-index: 4;
    width: 78px; height: 78px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .45s var(--ease);
  }
  .ev-card .ev-play svg {
    width: 26px; height: 26px;
    fill: var(--text);
    margin-left: 4px;
    transition: fill .35s var(--ease);
  }

  .ev-card .ev-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    padding: 0 28px 28px;
    transform: translateY(8px);
    transition: transform .5s var(--ease);
  }
  .ev-card .ev-tag {
    display: inline-block;
    margin-bottom: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 5px 12px;
    background: rgba(211,47,47,0.1);
    border: 1px solid rgba(211,47,47,0.3);
    border-radius: 999px;
    color: var(--accent);
  }
  .ev-card h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin-bottom: 14px;
    transition: color .4s var(--ease);
    text-transform: none;
  }
  .ev-card .ev-desc {
    color: rgba(245,245,245,0.78);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ev-card .ev-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .ev-card .ev-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    padding: 5px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
  }
  .ev-card .ev-meta span svg {
    width: 12px; height: 12px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
  }
  .ev-card .ev-meta span svg.solid {
    fill: currentColor;
    stroke: none;
  }
  .ev-card .ev-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    background: var(--accent);
    color: #000;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border-radius: 999px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s var(--ease) .05s, transform .4s var(--ease) .05s, background .3s var(--ease);
    text-decoration: none;
  }
  .ev-card .ev-cta .arr { transition: transform .3s var(--ease); }

  @media (hover: hover) {
    .ev-card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 40px 70px -14px rgba(211,47,47,0.3), 0 18px 36px rgba(0,0,0,0.55);
      border-color: rgba(211,47,47,0.5);
      z-index: 5;
    }
    .ev-card:hover::before { transform: scaleX(1); }
    .ev-card:hover .ev-img { filter: grayscale(0) brightness(0.9); transform: scale(1.05); }
    .ev-card:hover .ev-glow { opacity: 1; }
    .ev-card:hover .ev-overlay {
      background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.98) 100%);
    }
    .ev-card:hover .ev-body { transform: translateY(-2px); }
    .ev-card:hover h3 { color: var(--accent); }
    .ev-card:hover .ev-cta { opacity: 1; transform: translateY(0); }
    .ev-card .ev-cta:hover { background: var(--text); }
    .ev-card .ev-cta:hover .arr { transform: translateX(4px); }
    .ev-card:hover .ev-date {
      background: rgba(211,47,47,0.15);
      border-color: rgba(211,47,47,0.45);
    }
    .ev-card:hover .ev-play {
      background: var(--accent);
      border-color: var(--accent);
      transform: translate(-50%, -50%) scale(1);
    }
    .ev-card:hover .ev-play svg { fill: #000; }
  }

  .ev-progress {
    position: relative;
    height: 2px;
    background: rgba(255,255,255,0.08);
    margin-top: 36px;
    max-width: 320px;
  }
  .ev-progress-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 25%;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(211,47,47,0.6);
    transition: width .5s var(--ease), left .5s var(--ease);
  }

  @media (max-width: 680px) { .ev-nav { display: none; } }

  /* ================ REELS (YouTube Shorts Carousel) ================ */
  .reels {
    background: var(--bg-2);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .reels::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 20% 30%, rgba(211,47,47,0.05), transparent 50%),
      radial-gradient(ellipse at 80% 70%, rgba(255,46,99,0.04), transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
  .reels > .container { position: relative; z-index: 1; }

  .rl-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 56px;
  }
  .rl-head .rl-intro { max-width: 720px; }
  .rl-head .section-label {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 16px;
  }
  .rl-head .section-label::before { content:''; width:28px; height:2px; background:var(--accent); }
  .rl-head h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(40px, 6.5vw, 80px);
    line-height: 1.02;
    letter-spacing: -0.04em;
    text-transform: none;
    color: var(--text);
    margin: 0;
  }
  .rl-head p { color: var(--muted); font-size: 17px; max-width: 540px; margin-top: 16px; line-height: 1.6; }

  .rl-nav { display: flex; gap: 12px; flex-shrink: 0; }
  .rl-arrow {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(10px);
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .35s var(--ease);
  }
  .rl-arrow svg { width: 20px; height: 20px; transition: transform .35s var(--ease), color .35s var(--ease); }
  .rl-arrow:hover {
    border-color: rgba(211,47,47,0.5);
    background: rgba(211,47,47,0.08);
    transform: scale(1.08);
  }
  .rl-arrow:hover svg { color: var(--accent); filter: drop-shadow(0 0 8px rgba(211,47,47,0.6)); }
  .rl-arrow.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

  .rl-viewport {
    overflow: hidden;
    overflow-x: clip;
    overflow-y: visible;
    cursor: grab;
    padding: 40px 8px 70px;
    margin: -32px -16px -54px;
  }
  .rl-viewport.dragging { cursor: grabbing; }
  .rl-track {
    display: flex;
    gap: 20px;
    transition: transform .65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .rl-viewport.dragging .rl-track { transition: none; }

  /* Vertical Shorts card — 9:16 */
  .rl-card {
    flex: 0 0 auto;
    width: 260px;
    aspect-ratio: 9 / 16;
    position: relative;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow .55s var(--ease),
                border-color .4s var(--ease);
  }
  @media (min-width: 640px)  { .rl-card { width: 300px; } }
  @media (min-width: 1024px) { .rl-card { width: 320px; } }

  /* Accent edge bar */
  .rl-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 6;
  }

  /* Poster image — shown until iframe loads */
  .rl-card .rl-poster {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transition: opacity .5s var(--ease);
    z-index: 1;
  }
  .rl-card.rl-loaded .rl-poster { opacity: 0; pointer-events: none; }
  .rl-card .rl-poster::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.4) 100%);
  }

  /* The iframe itself — scaled slightly to hide YT margins */
  .rl-card .rl-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 2;
    transform: scale(1.05);
    transform-origin: center;
  }

  /* Center play badge — glassmorphism, scales + heats up on hover */
  .rl-card .rl-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1);
    z-index: 3;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.45);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.25),
      0 8px 24px rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    transition:
      transform .45s cubic-bezier(.34, 1.56, .64, 1),
      background-color .4s var(--ease),
      border-color .4s var(--ease),
      box-shadow .4s var(--ease);
  }
  .rl-card .rl-play svg {
    width: 22px; height: 22px;
    fill: #fff;
    margin-left: 3px;
    transition: fill .35s var(--ease);
  }
  .rl-card.rl-loaded .rl-play { opacity: 0; pointer-events: none; }

  /* Top label (handle) */
  .rl-card .rl-top {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: -0.01em;
    color: #fff;
    pointer-events: none;
  }
  .rl-card .rl-top .rl-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 10px;
    color: #000;
    letter-spacing: -0.05em;
  }

  /* YouTube logo chip top-right */
  .rl-card .rl-yt {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 5;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    transition: all .35s var(--ease);
  }
  .rl-card .rl-yt svg { width: 14px; height: 14px; fill: #fff; transition: fill .35s var(--ease); }

  /* Bottom caption — sits over a strong dark gradient for readability */
  .rl-card .rl-bottom {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 5;
    padding: 80px 16px 18px;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.55) 50%,
      rgba(0, 0, 0, 0.95) 100%
    );
    pointer-events: none;
  }
  .rl-card .rl-cap {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rl-card .rl-tags {
    margin-top: 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: var(--accent);
    letter-spacing: -0.01em;
  }

  @media (hover: hover) {
    .rl-card:hover {
      transform: translateY(-8px) scale(1.025);
      box-shadow:
        0 20px 40px rgba(211, 47, 47, 0.3),
        0 28px 60px -16px rgba(245, 124, 0, 0.35),
        0 16px 30px rgba(0, 0, 0, 0.55);
      border-color: rgba(211, 47, 47, 0.55);
      z-index: 5;
    }
    /* Accent edge bar slides in from the left at the top of the card */
    .rl-card:hover::before { transform: scaleX(1); }

    /* Play button heats up: scales, swaps to brand red, then to orange on direct hover */
    .rl-card:hover .rl-play {
      transform: translate(-50%, -50%) scale(1.12);
      background-color: var(--color-brand-red);
      border-color: rgba(255, 255, 255, 0.85);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 12px 32px rgba(211, 47, 47, 0.55);
    }
    .rl-card .rl-play:hover {
      background-color: var(--color-brand-orange);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 14px 36px rgba(245, 124, 0, 0.65);
    }

    /* YouTube chip flips to red on hover */
    .rl-card:hover .rl-yt {
      background: var(--accent);
      border-color: var(--accent);
    }
    .rl-card:hover .rl-yt svg { fill: #fff; }
  }

  .rl-progress {
    position: relative;
    height: 2px;
    background: rgba(255,255,255,0.08);
    margin-top: 36px;
    max-width: 320px;
  }
  .rl-progress-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 25%;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(211,47,47,0.6);
    transition: width .5s var(--ease), left .5s var(--ease);
  }

  @media (max-width: 680px) { .rl-nav { display: none; } }

  /* ================ CREDENTIALS ================
     Single-tier composition: certifications grid
     (icons + labels, static). */
  .certs {
    padding: 100px 0;
    background:
      radial-gradient(ellipse at center top, rgba(211, 47, 47, 0.06), transparent 60%),
      #0A0A0A;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
    isolation: isolate;
  }

  /* === HEADER === */
  .certs-head {
    text-align: center;
    margin-bottom: 56px;
  }
  .certs-head .section-label { justify-content: center; }
  .certs-head h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--color-text-light);
    margin: 14px 0 12px;
  }
  .certs-head h3 .accent { color: var(--color-brand-red); font-weight: 800; }
  .certs-head .certs-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text-muted);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* ===== TIER 1 — CERTIFICATIONS GRID ===== */
  .cert-tier-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 auto 24px;
    max-width: 1200px;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-brand-orange);
  }
  .cert-tier-label::before,
  .cert-tier-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  }

  .cert-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto 64px;
    padding: 0 24px;
  }
  @media (min-width: 700px)  { .cert-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1100px) { .cert-grid { grid-template-columns: repeat(5, 1fr); } }

  .cert-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 28px 18px;
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .cert-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 0, 0, 0.4);
    background: rgba(30, 20, 20, 0.7);
    box-shadow:
      0 14px 30px rgba(0, 0, 0, 0.5),
      0 0 22px rgba(255, 0, 0, 0.15);
  }
  .cert-card .ci-mark {
    width: 48px; height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(211, 47, 47, 0.12), rgba(245, 124, 0, 0.08));
    border: 1px solid rgba(211, 47, 47, 0.25);
    color: var(--color-brand-red);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .cert-card:hover .ci-mark {
    background: linear-gradient(135deg, var(--color-brand-red), var(--color-brand-orange));
    border-color: var(--color-brand-red);
    color: var(--color-text-light);
    transform: rotate(-6deg) scale(1.08);
  }
  .cert-card .ci-mark svg {
    width: 24px; height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .cert-card .ci-name {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: var(--color-text-light);
    line-height: 1.2;
  }
  .cert-card .ci-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    line-height: 1.3;
  }

  /* ================ INSTAGRAM FEED ================ */
  .insta-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 48px;
  }
  /* === INSTAGRAM PILL BUTTON (ghost CTA) ===
     Secondary call-to-action. Transparent base + 1px brand-red border reads
     as "follow us" without competing with primary red-fill CTAs. */
  .insta-handle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid #FF0000;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #FFFFFF;
    text-decoration: none;
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease;
  }
  .insta-handle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
  }
  .insta-handle:hover {
    background-color: rgba(255, 0, 0, 0.1);
    border-color: #FF0000;
    color: #FFFFFF;
  }
  .insta-handle:focus-visible {
    outline: 2px solid #FF0000;
    outline-offset: 3px;
  }
  .insta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  @media (min-width: 680px)  { .insta-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1000px) { .insta-grid { grid-template-columns: repeat(6, 1fr); } }

  /* === INSTA TILE — Fire & Iron premium hover === */
  .insta-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    isolation: isolate;
    transition:
      transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
      box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1),
      border-color 0.4s var(--ease);
  }

  .insta-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9) brightness(0.95);
    transform: scale(1.01);
    transition:
      transform 0.9s cubic-bezier(0.25, 1, 0.5, 1),
      filter 0.5s var(--ease);
  }

  /* Layer 1: bottom dark vignette — always present (subtle, for natural depth) */
  .insta-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.45) 100%);
    pointer-events: none;
    transition: opacity 0.5s var(--ease);
  }

  /* Layer 2: fire-ramp gradient — red?orange diagonal wash on hover */
  .insta-item::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      linear-gradient(135deg,
        rgba(211, 47, 47, 0.75) 0%,
        rgba(245, 124, 0, 0.55) 60%,
        rgba(211, 47, 47, 0.4) 100%);
    opacity: 0;
    mix-blend-mode: multiply;
    transition: opacity 0.5s var(--ease);
    pointer-events: none;
  }

  /* Top-left corner accent sweep — signature brand detail */
  .insta-item .insta-corner {
    position: absolute;
    top: 0; left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-brand-red), var(--color-brand-orange));
    z-index: 4;
    transition: width 0.55s cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* Glassmorphism Instagram badge — centered, blurred-glass pill */
  .insta-item .ic-i {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.6) rotate(-8deg);
    z-index: 5;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.4);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 10px 28px rgba(0, 0, 0, 0.45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition:
      opacity 0.4s var(--ease) 0.05s,
      transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
  }
  .insta-item .ic-i svg { width: 22px; height: 22px; }

  /* "View on Instagram" label that fades in below the icon */
  .insta-item .insta-label {
    position: absolute;
    top: calc(50% + 42px);
    left: 50%;
    transform: translate(-50%, 8px);
    z-index: 5;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition:
      opacity 0.35s var(--ease) 0.12s,
      transform 0.4s var(--ease) 0.12s;
    pointer-events: none;
    white-space: nowrap;
  }

  /* === HOVER STATE === */
  @media (hover: hover) {
    .insta-item:hover {
      transform: translateY(-6px);
      box-shadow:
        0 20px 40px rgba(211, 47, 47, 0.28),
        0 28px 56px -16px rgba(245, 124, 0, 0.3),
        0 14px 28px rgba(0, 0, 0, 0.5);
      border-color: rgba(211, 47, 47, 0.4);
    }
    .insta-item:hover img {
      transform: scale(1.08);
      filter: saturate(1.1) brightness(1.05);
    }
    .insta-item:hover::before { opacity: 0.4; }
    .insta-item:hover::after  { opacity: 1; }
    .insta-item:hover .insta-corner { width: 100%; }
    .insta-item:hover .ic-i {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1) rotate(0);
    }
    .insta-item:hover .insta-label {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }

  /* Keyboard focus mirrors hover (a11y) */
  .insta-item:focus-visible {
    outline: 2px solid var(--color-brand-red);
    outline-offset: 3px;
    transform: translateY(-6px);
    box-shadow:
      0 20px 40px rgba(211, 47, 47, 0.28),
      0 14px 28px rgba(0, 0, 0, 0.5);
  }
  .insta-item:focus-visible img { transform: scale(1.08); filter: saturate(1.1) brightness(1.05); }
  .insta-item:focus-visible::after { opacity: 1; }
  .insta-item:focus-visible .insta-corner { width: 100%; }
  .insta-item:focus-visible .ic-i { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  .insta-item:focus-visible .insta-label { opacity: 1; transform: translate(-50%, 0); }

  /* ================ REVEAL ================ */
  .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
  }
  .reveal.visible { opacity: 1; transform: none; }
  .reveal.delay-1 { transition-delay: .1s; }
  .reveal.delay-2 { transition-delay: .2s; }
  .reveal.delay-3 { transition-delay: .3s; }
  .reveal.delay-4 { transition-delay: .4s; }

  .reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
  }
  .reveal-left.visible { opacity: 1; transform: none; }

  .reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
  }
  .reveal-right.visible { opacity: 1; transform: none; }

  .reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
  }
  .reveal-scale.visible { opacity: 1; transform: scale(1); }