:root{
    /* ---- Surface Tension palette (from the club crest) ---- */
    --navy:        #2B4B54;
    --navy-deep:   #1B333B;
    --sky:         #8FD0F0;
    --sky-soft:    #C7E9F7;
    --ice:         #EEF8FC;
    --white:       #FFFFFF;
    --ink:         #16262B;

    /* ---- Typography system: exactly two families ---- */
    --font-display: 'Anton', 'Arial Narrow', sans-serif;   /* headlines + large numbers ONLY */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* everything else */

    /* ---- Unified small-label spec (used everywhere a caps label appears) ---- */
    --label-tracking: .14em;
    --label-weight: 700;

    --header-h: 84px;
    --btn-h: 52px;

    --edge: cubic-bezier(.65,0,.35,1);

    /* ---- Typography: admin-controllable (Surrey Water Polo -> Design).
       Defaults below match the previously-hardcoded values exactly --
       installing this update changes nothing until an admin edits them. ---- */
    --swp-hero-font: var(--font-display);
    --swp-hero-size-desktop: 4.1rem;
    --swp-hero-size-tablet: 3.4rem;
    --swp-hero-size-mobile: 2.4rem;
    --swp-hero-line-height: .92;
    --swp-hero-letter-spacing: .01em;

    --swp-heading-font: var(--font-display);
    --swp-heading-size-desktop: 2.95rem;
    --swp-heading-size-mobile: 2.2rem;
    --swp-heading-line-height: .96;
    --swp-heading-letter-spacing: .01em;

    --swp-body-font: var(--font-body);
    --swp-body-size-desktop: 1.06rem;
    --swp-body-size-mobile: 1rem;
    --swp-body-line-height: 1.6;

    --swp-nav-font: var(--font-body);
    --swp-nav-size: .84rem;
    --swp-nav-letter-spacing: .03em;

    --swp-btn-font: var(--font-body);
    --swp-btn-size: .8rem;
    --swp-btn-letter-spacing: .05em;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  /* Set to a real px value by JS (window.visualViewport) once the page
     loads -- see main.js. 0 here is just the pre-JS/no-support default,
     matching "no extra space needed" until we know otherwise. */
  :root{ --swp-toolbar-offset: 0px; }

  /* Accent word (currently just "Everyone") -- wrapped in this span by
     swp_render_with_everyone_accent() in functions.php, used by the
     Hero headline and the About heading. Sits directly on the word
     itself, not on an ancestor, so it always wins over any inherited
     text color regardless of cascade order. */
  .swp-accent-word{ color: var(--sky); }
  html{ scroll-behavior:smooth; }
  body{
    font-family: var(--swp-body-font);
    background: var(--ice);
    color: var(--ink);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }
  img{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; }

  /* Single source of truth for every small uppercase label in the design */
  .label{
    font-family: var(--font-body);
    font-weight: var(--label-weight);
    letter-spacing: var(--label-tracking);
    line-height: 1;
    text-transform: uppercase;
  }
  .label--xs{ font-size: .66rem; }
  .label--sm{ font-size: .72rem; }

  /* =====================================================
     HEADER
  ===================================================== */
  .site-header{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    /* Fixed, modest padding rather than a vw-scaling clamp -- a clamp
       that grows back up toward 40px on wider desktop screens is why
       earlier attempts barely read as a visible change. This stays a
       small, constant distance from the edge at every width. */
    padding: 0 24px;
    background: transparent;
    transition: background .45s var(--edge), box-shadow .45s var(--edge), height .35s var(--edge);
  }
  .site-header.is-scrolled{
    height: 72px;
    background: rgba(27, 51, 59, 0.9);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 12px 30px -18px rgba(0,0,0,.5);
  }

  /* Nav is absolutely centered on the FULL header width, completely
     independent of how wide the logo or the actions group happen to
     be -- this replaces an earlier grid(1fr auto 1fr) attempt that
     had a subtle bug: 1fr tracks carry an implicit content-based
     minimum width, so when .header-actions (two buttons) naturally
     needs more room than .brand (just a logo), that column silently
     grows past its "equal" 1fr share and the nav drifts off-center
     toward the logo. Absolute positioning has no such edge case: the
     nav's center point is always exactly the header's center point,
     by construction, regardless of what either sibling needs. */
  .header-inner{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .header-inner .primary-nav{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* Logo: no container, no tile — sits directly on the hero photo */
  .brand{
    display: flex;
    align-items: center;
  }
  .brand img{
    height: 60px;
    width: auto;
    transition: height .35s var(--edge);
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
  }
  .site-header.is-scrolled .brand img{ height: 48px; }

  .primary-nav{
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.6vw, 40px);
  }
  .primary-nav a{
    position: relative;
    font-family: var(--swp-nav-font);
    font-size: var(--swp-nav-size);
    font-weight: 600;
    letter-spacing: var(--swp-nav-letter-spacing);
    color: var(--white);
    padding: 6px 1px;
    opacity: .88;
    transition: opacity .25s;
  }
  .primary-nav a::after{
    content:"";
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 2px;
    background: var(--sky);
    transition: right .3s var(--edge);
  }
  .primary-nav a:hover{ opacity: 1; }
  .primary-nav a:hover::after{ right: 0; }

  .header-actions{ display:flex; align-items:center; gap: 16px; }

  /* ---- Buttons: identical height everywhere, weight/size vary by scale only ---- */
  .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: var(--btn-h);
    font-family: var(--swp-btn-font);
    font-size: var(--swp-btn-size);
    font-weight: 700;
    letter-spacing: var(--swp-btn-letter-spacing);
    text-transform: uppercase;
    padding: 0 28px;
    border-radius: 3px;
    transition: transform .3s var(--edge), background .3s, color .3s, border-color .3s, box-shadow .3s;
    white-space: nowrap;
  }
  .btn--nav{ height: 42px; padding: 0 20px; font-size: .74rem; }

  .btn-arrow{ transition: transform .35s var(--edge); }
  .btn:hover .btn-arrow{ transform: translateX(5px); }

  .btn-primary{
    background: var(--sky);
    color: var(--navy-deep);
    box-shadow: 0 8px 22px -10px rgba(143,208,240,.7);
  }
  .btn-primary:hover{
    background: var(--white);
    transform: translateY(-2px);
  }

  .btn-ghost{
    border: 1.5px solid rgba(255,255,255,.55);
    color: var(--white);
    background: transparent;
  }
  .btn-ghost:hover{
    border-color: var(--white);
    background: rgba(255,255,255,.08);
    transform: translateY(-2px);
  }

  .nav-toggle{
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
  }
  .nav-toggle span{
    width: 24px; height: 2px;
    background: var(--white);
    transition: transform .3s, opacity .3s;
  }

  /* =====================================================
     HERO
  ===================================================== */
  .hero{
    position: relative;
    /* Original hero height PLUS the old separate diagonal band's height --
       the extra space is filled by the SAME .hero-photo/.hero-scrim
       layers (they're position:absolute; inset:0, sized to this box),
       then clipped below into a diagonal edge. .hero-shell's own height
       is unchanged (see below), so the headline/CTAs/stats keep their
       exact original position -- only the photo extends further down. */
    min-height: calc(clamp(850px, 92vh, 950px) + clamp(90px, 11vw, 150px));
    width: 100%;
    overflow: hidden;
    background: var(--navy-deep);
    /* The diagonal bottom edge -- cut directly into the hero box itself
       (photo, scrim, and content together) rather than a separate solid-
       color wedge, so the photograph visually continues all the way to
       the slanted edge with no seam. Cut points (93%/97%) are set with
       a safety margin below .hero-shell's own height (unchanged, still
       clamp(850px,92vh,950px)) so the credibility rail's stats can never
       be clipped even at the most extreme combination of the two
       independent clamp() ranges. */
    clip-path: polygon(0 0, 100% 0, 100% 93%, 0 97%);
  }

  /* ---- HERO PHOTOGRAPHY ----
     Composition is still the client-approved locked photo -- same
     crop, same athletes, same framing as before. This pass only
     applies a conservative global brightness lift (gentle gamma,
     0.88, anchored at black/white so contrast character survives --
     verified numerically: overall mean brightness +16%, highlight
     clipping stayed under 1%, and the dark left text-zone only moved
     from mean 16 to mean 23 out of 255, so headline contrast is
     effectively untouched) plus a lighter .hero-scrim below. Still
     embedded losslessly as PNG, not JPEG -- brightening is a tonal
     edit, not a re-compression, and doesn't reintroduce artifacts.
     MOBILE: background-image is swapped (media query below) for a
     separate composite built from the SAME locked photo -- the male
     and female regions cropped from their real positions and stacked
     into one tall image with a soft blended seam, so both athletes
     stay in frame on narrow screens instead of "cover" arbitrarily
     slicing out whichever one didn't fit. No new content was
     generated for this -- same pixels, just recomposed vertically. */
  .hero-photo{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Switched from background-image to a real <img> with object-fit --
       background-position/background-size alone cannot do genuine
       zoom-out (they can only ever fill or crop, never reveal more of
       the image than a "cover" fit while still filling the container).
       object-position handles panning (Surrey Water Polo -> Hero,
       Horizontal/Vertical Position); a transform:scale() on top of that
       handles zoom in either direction. The animation (drift) and its
       @keyframes are generated inline by template-parts/hero.php, since
       the keyframe scale values must incorporate the current zoom
       setting rather than being fixed. */
    object-fit: cover;
    display: block;
  }

  /* Scrim lightened from the previous pass (lower opacities throughout)
     to match the brighter photo, while keeping the same gradient shape
     so text contrast behind the headline and credibility rail doesn't
     regress. */
  .hero-scrim{
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, transparent 0%, transparent 84%, rgba(15,28,33,.36) 93%, rgba(12,23,27,.60) 100%),
      linear-gradient(90deg, rgba(10,19,23,.46) 0%, rgba(10,19,23,.22) 30%, transparent 52%);
  }


  .hero-shell{
    position: relative;
    z-index: 5;
    min-height: clamp(850px, 92vh, 950px);
    display: flex;
    flex-direction: column;
  }

  /* Content band fills the space above the credibility rail and
     centers the headline/sub/CTAs vertically within it -- no longer
     tied to a fixed diagonal-driven height now that there's one
     locked background image instead of a split composition. */
  .hero-content-band{
    flex: 1;
    padding-top: var(--header-h);
    display: flex;
    align-items: center;
  }

  .hero-content{
    max-width: 760px;
    padding: 0 clamp(20px, 6vw, 88px);
  }

  .hero-kicker{
    color: var(--sky-soft);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .hero-kicker::before{
    content:"";
    width: 34px; height: 2px;
    background: var(--sky);
  }

  .hero-headline{
    font-family: var(--swp-hero-font);
    text-transform: uppercase;
    line-height: var(--swp-hero-line-height);
    letter-spacing: var(--swp-hero-letter-spacing);
    color: var(--white);
  }
  .hero-headline .line1,
  .hero-headline .line2{
    display:block;
    font-size: var(--swp-hero-size-desktop);
    text-shadow: 0 4px 26px rgba(0,0,0,.35);
  }
  /* Desktop/tablet only -- a crisper, more layered shadow than the
     single soft blur above, for more visual depth/separation from the
     photo (matching the mobile headline's stronger look, which reads
     better mainly because of the mobile scrim's lighter mid-band, not
     a different shadow -- this closes that gap on desktop without
     touching the shared rule above, which mobile still uses as-is). */
  @media (min-width: 641px){
    .hero-headline .line1,
    .hero-headline .line2{
      text-shadow:
        0 1px 2px rgba(0,0,0,.55),
        0 4px 10px rgba(0,0,0,.4),
        0 12px 32px rgba(0,0,0,.3);
    }
  }
  .hero-headline .line2{ margin-top: .12em; }

  .hero-sub{
    margin-top: 22px;
    font-family: var(--font-body);
    font-size: clamp(.9rem, 1.1vw, 1.02rem);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    font-weight: 600;
    color: var(--sky-soft);
    /* The water behind this line is close in value to --sky-soft, so the
       text was blending in. A tight, fairly opaque shadow reads as an
       outline/lift rather than a blur, restoring contrast without a new
       background chip or changing the copy/position. */
    text-shadow: 0 1px 2px rgba(8,16,19,.9), 0 2px 10px rgba(8,16,19,.65);
  }

  .hero-ctas{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 34px;
    flex-wrap: wrap;
  }

  /* ---- Credibility rail: broadcast-graphic style, fixed to the
     underwater zone, one common baseline, no cards. ---- */
  .credibility-rail{
    position: absolute;
    left: 0; right: 0;
    /* Sits closer to the diagonal now -- offset down from hero-shell's
       own (unchanged) bottom edge by (hero-band-height minus a small
       35-50px gap), landing it just above the diagonal clip zone on
       .hero (which starts at 93%/97% of the full hero height) rather
       than floating with a full ~90-150px gap of empty photo below it.
       hero-shell's own height is untouched, so the headline/CTAs above
       don't shift. */
    bottom: calc(clamp(35px, 4vw, 50px) - clamp(90px, 11vw, 150px));
    z-index: 6;
    padding: 26px clamp(20px, 6vw, 88px) 32px;
    border-top: 1px solid rgba(143,208,240,.3);
    background: linear-gradient(180deg, transparent 0%, rgba(10,19,23,.35) 40%, rgba(10,19,23,.55) 100%);
  }
  .credibility-rail ul{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
  }
  .credibility-rail li{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 24px;
  }
  .credibility-rail li:first-child{ padding-left: 0; }
  .credibility-rail li + li{ border-left: 1px solid rgba(255,255,255,.2); }
  .credibility-rail .stat-lead{
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2.05rem);
    line-height: 1.05;
    color: var(--sky);
    letter-spacing: .01em;
    white-space: nowrap;
  }
  .credibility-rail .stat-label{
    color: var(--ice);
    opacity: .82;
  }

  /* =====================================================
     TRANSITION BELOW HERO
     The diagonal itself now lives on .hero (clip-path, above) so the
     SAME photograph forms the slanted edge -- this section is just a
     light ice-colored spacer plus the thin decorative seam line; it no
     longer has its own solid-color wedge (that was a separate flat
     navy-deep shape, unrelated to the photo, which is what made the
     photo look cut off).
  ===================================================== */
  .surface-transition{
    position: relative;
    height: clamp(90px, 11vw, 150px);
    background: var(--ice);
  }
  .surface-transition .seam{
    position: absolute;
    left: 0; right: 0;
    top: 0;
    height: 100%;
    pointer-events: none;
  }
  .surface-transition svg{ width: 100%; height: 100%; display:block; }

  /* =====================================================
     ABOUT US
     Light, editorial section directly continuing the Hero's
     design system (same palette variables, same --font-display /
     --font-body pairing, same .label component, same clamp()
     spacing scale) -- deliberately NOT a second Hero: no dark
     background, no photo-behind-text, no CTA row.
     The two original club photos are used untouched -- only
     object-fit/object-position crop them, and both are sized
     close to their real aspect ratio so nothing at the edges
     (the coaches/athletes at the far left+right of each group
     photo) gets cropped off.
  ===================================================== */
  .about{
    position: relative;
    background: var(--ice);
    padding: clamp(64px, 9vw, 128px) clamp(20px, 6vw, 88px) clamp(84px, 10vw, 150px);
  }
  .about-inner{
    max-width: 1360px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 400px) 1fr;
    gap: clamp(40px, 6vw, 90px) clamp(32px, 4.5vw, 72px);
    align-items: center;
  }
  /* Text is split into two grid items (intro, rest) purely so mobile
     can slot the photos between them via `order` -- see the media
     query below. On desktop they sit in the same column, stacked
     normally, and read as one continuous block of copy. */
  .about-intro{ grid-column: 1; grid-row: 1; }
  .about-rest{ grid-column: 1; grid-row: 2; }
  .about-photo-group{ grid-column: 2; grid-row: 1 / span 2; align-self: center; }

  .about-eyebrow{
    color: var(--navy);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .about-eyebrow::before{
    content:"";
    width: 34px; height: 2px;
    background: var(--sky);
  }

  .about-heading{
    font-family: var(--swp-heading-font);
    text-transform: uppercase;
    color: var(--navy-deep);
    line-height: var(--swp-heading-line-height);
    letter-spacing: var(--swp-heading-letter-spacing);
    font-size: var(--swp-heading-size-desktop);
    margin-bottom: clamp(20px, 2.6vw, 28px);
  }
  .about-heading span{ display: block; }

  .about-body{
    color: var(--ink);
    font-size: var(--swp-body-size-desktop);
    line-height: 1.68;
    max-width: 48ch;
  }
  .about-body p{ margin-bottom: 1.05em; }
  .about-rest .about-body p:last-child{ margin-bottom: 0; }

  /* The one line the client called out as the emotional turn in the
     copy ("But we believe sport is about more than results.") gets a
     quiet visual break -- a thin sky rule, not a card or icon. */
  .about-standout{
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--navy-deep);
    font-size: clamp(1.05rem, 1.15vw, 1.18rem);
    line-height: 1.5;
    padding-left: 18px;
    border-left: 3px solid var(--sky);
    margin: 1.3em 0;
  }

  /* ---- Photo composition: primary (team/competitive) large and
     right-weighted, secondary (young athletes) smaller and tucked
     over its bottom-left corner -- asymmetric, not a 50/50 split.
     Both containers use each photo's OWN real aspect ratio so
     object-fit:cover has effectively nothing to crop; the people
     span edge-to-edge in both source photos, so this is the only
     safe way to avoid cutting anyone off at the sides. ---- */
  .about-photo-stack{
    position: relative;
    margin-bottom: clamp(64px, 8vw, 108px);
  }
  .about-photo-primary{
    position: relative;
    width: min(94%, 680px);
    margin-left: auto;
    aspect-ratio: 1517 / 923;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 30px 60px -30px rgba(20,40,46,.28);
  }
  .about-photo-primary img{
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 38%;
    display: block;
  }
  .about-photo-secondary{
    position: absolute;
    left: 0;
    bottom: -12%;
    width: min(56%, 340px);
    max-width: none;
    aspect-ratio: 1780 / 735;
    overflow: hidden;
    border-radius: 3px;
    border: 7px solid var(--ice);
    box-shadow: 0 22px 46px -20px rgba(20,40,46,.32);
    z-index: 2;
  }
  .about-photo-secondary img{
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Small pathway caption under the photo pair -- this is the one
     place a "sequence" label is justified: it names the two real
     stages the two photos actually depict (learning to swim -> the
     national-level team), not a decorative 01/02 marker. */
  .about-photos-caption{
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--navy);
    padding-left: 4px;
  }
  .about-caption-line{
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--sky), rgba(143,208,240,.15));
  }


  /* =====================================================
     OUR PROGRAMS
     Same design system as Hero/About (palette vars, --font-display /
     --font-body, .label, clamp() spacing). Background steps to
     --white (Hero dark -> About --ice -> Programs --white) so the
     page has a little rhythm without introducing a new palette.
     Deliberately an editorial accordion, not five cards -- one open
     program at a time, expand/collapse via a CSS grid-rows trick
     (smooth height animation with no JS measuring).
  ===================================================== */
  .programs{
    position: relative;
    background: var(--white);
    padding: clamp(64px, 9vw, 128px) clamp(20px, 6vw, 88px) clamp(80px, 10vw, 140px);
  }
  .programs-inner{ max-width: 1360px; margin: 0 auto; }
  .programs-header{ max-width: 640px; margin-bottom: clamp(44px, 6vw, 72px); }
  .programs-eyebrow{
    color: var(--navy);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .programs-eyebrow::before{
    content:"";
    width: 34px; height: 2px;
    background: var(--sky);
  }
  .programs-heading{
    font-family: var(--swp-heading-font);
    text-transform: uppercase;
    color: var(--navy-deep);
    line-height: var(--swp-heading-line-height);
    letter-spacing: var(--swp-heading-letter-spacing);
    font-size: var(--swp-heading-size-desktop);
    margin-bottom: 18px;
  }
  .programs-intro{
    color: var(--ink);
    font-size: var(--swp-body-size-desktop);
    line-height: var(--swp-body-line-height);
  }

  .programs-list{ border-top: 1px solid rgba(22,38,43,.14); }
  .program{ border-bottom: 1px solid rgba(22,38,43,.14); }

  .program-toggle{
    width: 100%;
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4vw, 32px);
    padding: clamp(20px, 2.6vw, 28px) 0;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
  }
  .program-num{
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    color: var(--sky);
    letter-spacing: .02em;
    width: 2.2ch;
    flex-shrink: 0;
  }
  .program-name{
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--navy-deep);
    font-size: clamp(1.15rem, 1.9vw, 1.55rem);
    letter-spacing: .005em;
    flex: 1;
    min-width: 0;
  }
  .program-tags{
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.6vw, 22px);
    color: var(--navy);
    opacity: .75;
    flex-shrink: 0;
  }
  .program-tags .label{ white-space: nowrap; }

  .program-toggle-icon{
    position: relative;
    width: 20px; height: 20px;
    flex-shrink: 0;
  }
  .program-toggle-icon::before,
  .program-toggle-icon::after{
    content:"";
    position: absolute;
    top: 50%; left: 50%;
    background: var(--navy-deep);
    transition: transform .3s var(--edge), opacity .3s var(--edge);
  }
  .program-toggle-icon::before{ width: 14px; height: 2px; transform: translate(-50%,-50%); }
  .program-toggle-icon::after{ width: 2px; height: 14px; transform: translate(-50%,-50%); }
  .program.is-open .program-toggle-icon::after{ transform: translate(-50%,-50%) scaleY(0); }
  .program.is-open .program-num,
  .program.is-open .program-name{ color: var(--sky); transition: color .3s; }

  /* Smooth expand/collapse with no JS height math: the panel is a
     1-row grid that animates between 0fr and 1fr, and its child is
     the thing that actually gets clipped via overflow:hidden. */
  .program-panel{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s var(--edge);
  }
  .program.is-open .program-panel{ grid-template-rows: 1fr; }
  .program-panel-inner{ overflow: hidden; }
  .program-panel-content{
    padding: 0 0 clamp(24px, 3vw, 32px);
    max-width: 62ch;
  }
  .program-secondary-label{
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    font-size: .72rem;
    color: var(--sky);
    margin-bottom: 10px;
  }
  .program-positioning{
    font-weight: 700;
    color: var(--navy-deep);
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    margin-bottom: 10px;
  }
  .program-desc{
    color: var(--ink);
    font-size: clamp(.94rem, 1vw, 1rem);
    line-height: 1.62;
    margin-bottom: clamp(18px, 2.4vw, 24px);
  }

  /* ---- Water Polo entry requirement: small, secondary label --
     never a warning box. Sits between the description and Register. ---- */
  .program-requirement{
    color: var(--ink);
    font-size: .9rem;
    line-height: 1.55;
    padding: 10px 14px;
    background: var(--ice);
    border-left: 3px solid var(--sky);
    border-radius: 2px;
    margin-bottom: clamp(18px, 2.4vw, 24px);
  }
  .program-requirement-label{
    display: block;
    font-weight: 700;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    font-size: .64rem;
    color: var(--navy);
    margin-bottom: 4px;
  }

  /* ---- Learn to Swim: Bronze -> Silver -> Gold progression.
     Three independently editable level blocks read as ONE program,
     not three separate programs -- connected by the arrow between
     them on desktop, a stacked downward flow on mobile. ---- */
  .swp-ttsw-levels{
    display: flex;
    align-items: stretch;
    gap: clamp(10px, 1.6vw, 18px);
    margin: clamp(20px, 2.6vw, 28px) 0;
  }
  .swp-ttsw-level{
    flex: 1;
    background: var(--ice);
    border-top: 3px solid var(--sky);
    border-radius: 2px;
    padding: 16px 18px;
  }
  .swp-ttsw-level-name{
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--navy-deep);
    font-size: 1.05rem;
    letter-spacing: .01em;
    line-height: 1;
  }
  .swp-ttsw-level-tier{
    color: var(--sky);
    font-weight: 700;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    font-size: .62rem;
    margin: 4px 0 10px;
  }
  .swp-ttsw-level-subtitle{
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--navy);
    font-size: .7rem;
    margin-bottom: 8px;
  }
  .swp-ttsw-level-desc{
    color: var(--ink);
    font-size: .84rem;
    line-height: 1.55;
  }
  .swp-ttsw-arrow{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sky);
    font-size: 1.2rem;
    width: 20px;
  }

  /* =====================================================
     LEARN TO SWIM — LOCATION MODAL
     Applies ONLY to the Learn to Swim register control. Every
     other program's Register link is untouched and still just a
     normal <a href="..."> straight to RAMP.
  ===================================================== */
  .swp-location-modal-overlay{
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(15,28,33,.6);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--edge), visibility 0s linear .25s;
  }
  .swp-location-modal-overlay.is-open{
    opacity: 1;
    visibility: visible;
    transition: opacity .25s var(--edge), visibility 0s linear;
  }
  .swp-location-modal{
    position: relative;
    width: 100%;
    max-width: 460px;
    background: var(--white);
    border-radius: 4px;
    padding: clamp(28px, 4vw, 40px);
    box-shadow: 0 40px 80px -20px rgba(15,28,33,.45);
    transform: translateY(14px) scale(.98);
    transition: transform .3s var(--edge);
  }
  .swp-location-modal-overlay.is-open .swp-location-modal{
    transform: translateY(0) scale(1);
  }
  .swp-location-modal-close{
    position: absolute;
    top: 18px; right: 18px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 3px;
    transition: background .2s;
  }
  .swp-location-modal-close:hover{ background: var(--ice); }
  .swp-location-modal-close::before,
  .swp-location-modal-close::after{
    content:"";
    position: absolute;
    width: 16px; height: 2px;
    background: var(--navy-deep);
  }
  .swp-location-modal-close::before{ transform: rotate(45deg); }
  .swp-location-modal-close::after{ transform: rotate(-45deg); }

  .swp-location-modal-eyebrow{
    color: var(--navy);
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 10px;
  }
  .swp-location-modal-eyebrow::before{ content:""; width: 26px; height: 2px; background: var(--sky); }
  .swp-location-modal-heading{
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--navy-deep);
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    line-height: 1.05;
    margin-bottom: 10px;
  }
  .swp-location-modal-copy{
    color: var(--ink);
    font-size: .94rem;
    line-height: 1.55;
    margin-bottom: clamp(22px, 3vw, 28px);
  }
  .swp-location-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .swp-location-option{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border: 1.5px solid rgba(22,38,43,.16);
    border-radius: 3px;
    color: var(--navy-deep);
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 1.02rem;
    letter-spacing: .01em;
    transition: border-color .2s, background .2s, transform .2s var(--edge);
  }
  .swp-location-option::after{
    content: "→";
    font-family: var(--font-body);
    color: var(--sky);
    transition: transform .25s var(--edge);
  }
  .swp-location-option:hover{
    border-color: var(--sky);
    background: var(--ice);
    transform: translateX(2px);
  }
  .swp-location-option:hover::after{ transform: translateX(4px); }

  /* ---- Need Help Registering? trigger + modal ---- */
  .swp-reghelp-trigger{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--navy);
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .01em;
    border-bottom: 1.5px solid var(--sky);
    padding-bottom: 2px;
    transition: color .2s;
  }
  .swp-reghelp-trigger:hover{ color: var(--navy-deep); }
  .swp-reghelp-trigger svg{ width: 18px; height: 18px; flex-shrink: 0; }

  .swp-reghelp-modal-overlay{
    position: fixed;
    inset: 0;
    z-index: 310;
    background: rgba(15,28,33,.6);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--edge), visibility 0s linear .25s;
  }
  .swp-reghelp-modal-overlay.is-open{
    opacity: 1;
    visibility: visible;
    transition: opacity .25s var(--edge), visibility 0s linear;
  }
  .swp-reghelp-modal{
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--white);
    border-radius: 4px;
    padding: clamp(28px, 4vw, 44px);
    box-shadow: 0 40px 80px -20px rgba(15,28,33,.45);
    transform: translateY(14px) scale(.98);
    transition: transform .3s var(--edge);
  }
  .swp-reghelp-modal-overlay.is-open .swp-reghelp-modal{ transform: translateY(0) scale(1); }
  .swp-reghelp-modal-close{
    position: absolute;
    top: 18px; right: 18px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 3px;
    transition: background .2s;
  }
  .swp-reghelp-modal-close:hover{ background: var(--ice); }
  .swp-reghelp-modal-close::before,
  .swp-reghelp-modal-close::after{
    content:"";
    position: absolute;
    width: 16px; height: 2px;
    background: var(--navy-deep);
  }
  .swp-reghelp-modal-close::before{ transform: rotate(45deg); }
  .swp-reghelp-modal-close::after{ transform: rotate(-45deg); }

  .swp-reghelp-eyebrow{
    color: var(--navy);
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 10px;
  }
  .swp-reghelp-eyebrow::before{ content:""; width: 26px; height: 2px; background: var(--sky); }
  .swp-reghelp-heading{
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--navy-deep);
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    line-height: 1.05;
    margin-bottom: 10px;
  }
  .swp-reghelp-intro{
    color: var(--ink);
    font-size: .94rem;
    line-height: 1.55;
    margin-bottom: clamp(24px, 3vw, 30px);
  }
  .swp-reghelp-block-label{
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--navy-deep);
    font-size: 1.02rem;
    letter-spacing: .01em;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--sky);
  }
  .swp-reghelp-divisions{ margin-bottom: clamp(28px, 3.5vw, 34px); }
  .swp-reghelp-division-table{ display: flex; flex-direction: column; gap: 8px; }
  .swp-reghelp-division-row{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 14px;
    background: var(--ice);
    border-radius: 3px;
  }
  .swp-reghelp-division-program{ color: var(--ink); font-size: .92rem; font-weight: 600; }
  .swp-reghelp-division-arrow{ color: var(--sky); flex-shrink: 0; }
  .swp-reghelp-division-value{ color: var(--navy-deep); font-size: .92rem; font-weight: 700; }

  .swp-reghelp-steps-list{
    list-style: none;
    counter-reset: swp-reghelp-step;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .swp-reghelp-steps-list li{
    counter-increment: swp-reghelp-step;
    position: relative;
    padding-left: 34px;
    color: var(--ink);
    font-size: .92rem;
    line-height: 1.55;
  }
  .swp-reghelp-steps-list li::before{
    content: counter(swp-reghelp-step);
    position: absolute;
    left: 0; top: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--navy-deep);
    color: var(--white);
    font-family: var(--font-display);
    font-size: .78rem;
    display: flex; align-items: center; justify-content: center;
  }

/* =====================================================
     OUR COACHES
     Each coach is one self-contained unit: the compact trigger
     button and that coach's own profile modal live together inside
     one .swp-coach-card block. Duplicate/delete/reorder a whole
     card without touching anything else. The grid is flexbox with
     justify-content:center, so an incomplete last row centers
     itself automatically at any coach count.
  ===================================================== */
  .swp-coaches-section{
    position: relative;
    background: var(--ice);
    padding: clamp(64px, 9vw, 128px) clamp(20px, 6vw, 88px) clamp(80px, 10vw, 140px);
  }
  .swp-coaches-inner{ max-width: 1360px; margin: 0 auto; }
  .swp-coaches-header{ max-width: 640px; margin-bottom: clamp(36px, 5vw, 52px); }
  .swp-coaches-eyebrow{
    color: var(--navy);
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 12px;
  }
  .swp-coaches-eyebrow::before{ content:""; width: 34px; height: 2px; background: var(--sky); }
  .swp-coaches-heading{
    font-family: var(--swp-heading-font);
    text-transform: uppercase;
    color: var(--navy-deep);
    line-height: var(--swp-heading-line-height);
    letter-spacing: var(--swp-heading-letter-spacing);
    font-size: var(--swp-heading-size-desktop);
    margin-bottom: 16px;
  }
  .swp-coaches-intro{ color: var(--ink); font-size: var(--swp-body-size-desktop); line-height: var(--swp-body-line-height); }
  .swp-coaches-intro p{ margin-bottom: .6em; }
  .swp-coaches-intro p:last-child{ margin-bottom: 0; }
  .swp-coaches-intro .lede{ font-weight: 700; color: var(--navy-deep); }

  .swp-coaches-filter{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: clamp(28px, 4vw, 40px);
  }
  .swp-coaches-filter-btn{
    padding: 9px 18px;
    border-radius: 999px;
    border: 1.5px solid rgba(22,38,43,.16);
    color: var(--navy);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: border-color .2s, background .2s, color .2s;
  }
  .swp-coaches-filter-btn:hover{ border-color: var(--sky); }
  .swp-coaches-filter-btn.is-active{
    background: var(--navy-deep);
    border-color: var(--navy-deep);
    color: var(--white);
  }

  .swp-coaches-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
  }
  .swp-coach-card{ flex: 0 0 calc(25% - 21px); min-width: 220px; }
  .swp-coach-card[hidden]{ display: none; }

  /* ---- Meet All Coaches CTA ---- */
  .swp-coaches-cta-row{
    display: flex;
    justify-content: center;
    margin-top: clamp(32px, 4vw, 44px);
  }
  /* Solid navy / white text -- .btn-ghost (white outline) reads as
     nearly invisible on this section's light ice background; this is
     the section's primary action, styled for clear WCAG contrast. */
  .swp-coaches-cta{
    background: var(--navy-deep);
    border: 1.5px solid var(--navy-deep);
    color: var(--white);
  }
  .swp-coaches-cta:hover{
    background: var(--sky);
    border-color: var(--sky);
    color: var(--navy-deep);
  }

  /* ---- Full coaching staff directory (large overlay) ---- */
  .swp-coaches-directory-overlay{
    position: fixed;
    inset: 0;
    z-index: 320;
    background: var(--ice);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .3s var(--edge), transform .3s var(--edge), visibility 0s linear .3s;
    overflow-y: auto;
  }
  .swp-coaches-directory-overlay.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .3s var(--edge), transform .3s var(--edge), visibility 0s linear;
  }
  .swp-coaches-directory{
    max-width: 1360px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 56px) clamp(20px, 6vw, 88px) clamp(60px, 8vw, 100px);
  }
  .swp-coaches-directory-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: clamp(24px, 3vw, 32px);
    padding-top: 8px;
  }
  .swp-coaches-directory-eyebrow{
    color: var(--navy);
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 12px;
  }
  .swp-coaches-directory-eyebrow::before{ content:""; width: 34px; height: 2px; background: var(--sky); }
  .swp-coaches-directory-heading{
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--navy-deep);
    line-height: .98;
    letter-spacing: .01em;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
  }
  .swp-coaches-directory-close{
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 8px 20px -10px rgba(20,40,46,.4);
    position: relative;
  }
  .swp-coaches-directory-close::before,
  .swp-coaches-directory-close::after{
    content:"";
    position: absolute;
    width: 18px; height: 2px;
    background: var(--navy-deep);
  }
  .swp-coaches-directory-close::before{ transform: rotate(45deg); }
  .swp-coaches-directory-close::after{ transform: rotate(-45deg); }
  .swp-coaches-directory-grid{ padding-top: 4px; }
  .swp-coach-card-trigger{
    display: block;
    width: 100%;
    text-align: left;
    background: var(--white);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 18px 40px -22px rgba(20,40,46,.3);
    transition: transform .35s var(--edge), box-shadow .35s var(--edge);
  }
  .swp-coach-card-trigger:hover,
  .swp-coach-card-trigger:focus-visible{
    transform: translateY(-4px);
    box-shadow: 0 26px 50px -20px rgba(20,40,46,.4);
  }
  .swp-coach-photo{
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--navy-deep);
  }
  .swp-coach-photo img{
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .5s var(--edge);
  }
  .swp-coach-card-trigger:hover .swp-coach-photo img{ transform: scale(1.045); }
  .swp-coach-info{ padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 20px) clamp(20px, 2.4vw, 26px); }
  .swp-coach-name{
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--navy-deep);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.1;
    margin-bottom: 6px;
  }
  .swp-coach-role{
    color: var(--navy);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 14px;
  }
  .swp-coach-view{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--navy-deep);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .8;
  }
  .swp-coach-card-trigger:hover .swp-coach-view{ opacity: 1; }

  /* ---- Per-card profile modal ---- */
  .swp-coach-modal-overlay{
    position: fixed;
    inset: 0;
    z-index: 340;
    background: rgba(15,28,33,.65);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--edge), visibility 0s linear .25s;
  }
  .swp-coach-modal-overlay.is-open{
    opacity: 1;
    visibility: visible;
    transition: opacity .25s var(--edge), visibility 0s linear;
  }
  .swp-coach-modal{
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--white);
    border-radius: 4px;
    box-shadow: 0 40px 80px -20px rgba(15,28,33,.5);
    transform: translateY(14px) scale(.98);
    transition: transform .3s var(--edge);
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
  }
  .swp-coach-modal-overlay.is-open .swp-coach-modal{ transform: translateY(0) scale(1); }
  .swp-coach-modal-close{
    position: absolute;
    top: 18px; right: 18px;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 3px;
    background: rgba(255,255,255,.85);
    z-index: 2;
    transition: background .2s;
  }
  .swp-coach-modal-close:hover{ background: var(--white); }
  .swp-coach-modal-close::before,
  .swp-coach-modal-close::after{
    content:"";
    position: absolute;
    width: 16px; height: 2px;
    background: var(--navy-deep);
  }
  .swp-coach-modal-close::before{ transform: rotate(45deg); }
  .swp-coach-modal-close::after{ transform: rotate(-45deg); }

  .swp-coach-modal-photo{ position: relative; background: var(--navy-deep); min-height: 260px; }
  .swp-coach-modal-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
  .swp-coach-modal-body{ padding: clamp(28px, 4vw, 40px); }
  .swp-coach-modal-name{
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--navy-deep);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    line-height: 1.05;
    margin-bottom: 4px;
  }
  .swp-coach-modal-title{ color: var(--navy); font-weight: 600; margin-bottom: clamp(20px, 3vw, 26px); }
  .swp-coach-modal-block{ margin-bottom: clamp(18px, 2.6vw, 24px); }
  .swp-coach-modal-block:last-child{ margin-bottom: 0; }
  .swp-coach-modal-label{
    font-weight: 700;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    font-size: .66rem;
    color: var(--sky);
    margin-bottom: 8px;
  }
  .swp-coach-modal-text{ color: var(--ink); font-size: .96rem; line-height: 1.62; }

  body.swp-modal-open{ overflow: hidden; }
  /* Best-effort hide for common third-party chat-widget containers
     while the mobile menu (or any modal) is open. Confirmed via an
     actual screenshot that such a widget was sitting on top of the
     mobile Register button -- these run as separate plugins/scripts
     outside this theme with their own very high z-index, so this
     targets the known container selectors of the most common ones
     rather than trying to out-rank an unknown z-index value. Harmless
     if none of these are installed -- the selectors simply won't match
     anything. */
  body.swp-modal-open #tawkchat-container,
  body.swp-modal-open .crisp-client,
  body.swp-modal-open .intercom-lightweight-app,
  body.swp-modal-open .intercom-launcher-frame,
  body.swp-modal-open #drift-widget,
  body.swp-modal-open #drift-frame-controller,
  body.swp-modal-open #chat-widget-container,
  body.swp-modal-open #tidio-chat,
  body.swp-modal-open iframe#tidio-chat-iframe,
  body.swp-modal-open #hubspot-messages-iframe-container,
  body.swp-modal-open #fb-root .fb_dialog,
  body.swp-modal-open [id*="zsiq"],
  body.swp-modal-open [class*="zsiq"]{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* =====================================================
     CLUB LIFE
     Instagram placeholder feed. Background steps back to --white
     (About/Programs already used ice/white; Coaches used ice) so
     this section reads as its own energetic beat in the rhythm.
     The grid pattern (first tile larger) is deliberately generic --
     it has to keep working when a real feed swaps the photos in
     automatically, not just with hand-picked images.
  ===================================================== */
  .club-life{
    position: relative;
    background: var(--navy-deep);
    padding: clamp(64px, 9vw, 128px) clamp(20px, 6vw, 88px) clamp(80px, 10vw, 140px);
  }
  .club-life-inner{ max-width: 1360px; margin: 0 auto; }
  .club-life-header{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(36px, 5vw, 52px);
  }
  .club-life-heading-group{ max-width: 640px; }
  .club-life-eyebrow{
    color: var(--sky-soft);
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 12px;
  }
  .club-life-eyebrow::before{ content:""; width: 34px; height: 2px; background: var(--sky); }
  .club-life-heading{
    font-family: var(--swp-heading-font);
    text-transform: uppercase;
    color: var(--white);
    line-height: var(--swp-heading-line-height);
    letter-spacing: var(--swp-heading-letter-spacing);
    font-size: var(--swp-heading-size-desktop);
    margin-bottom: 14px;
  }
  .club-life-intro{ color: var(--sky-soft); font-size: clamp(.96rem, 1.05vw, 1.04rem); line-height: 1.6; max-width: 56ch; }

  /* Base feed container -- used for BOTH the real Smash Balloon shortcode
     output and the placeholder fallback. Deliberately NOT a grid here:
     Smash Balloon renders its own single wrapper div as the shortcode
     output, and applying display:grid + grid-template-columns to this
     container was turning that one wrapper into a single grid item
     occupying only the first of four columns -- which is exactly what
     was causing the feed to render narrow on the left with the other
     three columns sitting empty. The plugin controls its own internal
     4-column grid; this container just needs to give it full width. */
  .club-life-feed{ width: 100%; }
  /* Smash Balloon's own outer wrapper (whatever class/ID it renders,
     e.g. #sb_instagram) is the single direct child here -- make sure it
     can actually use the full width offered above rather than sitting
     at whatever narrower default the plugin ships with. This does not
     touch the plugin's own internal column grid, only its outer box. */
  .club-life-feed > div{ width: 100% !important; max-width: 100% !important; }

  /* Placeholder-only grid: applies exclusively when no shortcode is set
     yet and we're showing our own 8 sample tiles (.club-life-post),
     which genuinely are 8 direct grid-item children. */
  .club-life-feed--placeholder{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .club-life-post{
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    background: var(--navy);
  }
  .club-life-post img{
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--edge);
  }
  .club-life-post:hover img{ transform: scale(1.06); }

  /* =====================================================
     CLUB CALENDAR
     Static demo layout only -- the whole point is that
     #clubCalendarGrid and #clubCalendarEvents are the two spots a
     future Google Calendar embed/API integration replaces. Nothing
     about the surrounding design should need to change when that
     happens.
  ===================================================== */
  .club-calendar{
    position: relative;
    background: var(--ice);
    padding: clamp(64px, 9vw, 128px) clamp(20px, 6vw, 88px) clamp(80px, 10vw, 140px);
  }
  .club-calendar-inner{ max-width: 1360px; margin: 0 auto; }
  .club-calendar-header{ max-width: 640px; margin-bottom: clamp(36px, 5vw, 52px); }
  .club-calendar-eyebrow{
    color: var(--navy);
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 12px;
  }
  .club-calendar-eyebrow::before{ content:""; width: 34px; height: 2px; background: var(--sky); }
  .club-calendar-heading{
    font-family: var(--swp-heading-font);
    text-transform: uppercase;
    color: var(--navy-deep);
    line-height: var(--swp-heading-line-height);
    letter-spacing: var(--swp-heading-letter-spacing);
    font-size: var(--swp-heading-size-desktop);
    margin-bottom: 14px;
  }
  .club-calendar-intro{ color: var(--ink); font-size: var(--swp-body-size-desktop); line-height: var(--swp-body-line-height); }

  .club-calendar-layout{
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(28px, 4vw, 48px);
    align-items: start;
  }

  /* ---- Month grid ---- */
  .club-calendar-month{
    background: var(--white);
    border-radius: 4px;
    padding: clamp(20px, 3vw, 32px);
    box-shadow: 0 18px 40px -26px rgba(20,40,46,.3);
  }
  .club-calendar-month-nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(18px, 2.4vw, 24px);
  }
  .club-calendar-month-label{
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--navy-deep);
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    letter-spacing: .01em;
  }
  .club-calendar-nav-btns{ display: flex; gap: 8px; }
  .club-calendar-nav-btn{
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 3px;
    border: 1.5px solid rgba(22,38,43,.16);
    color: var(--navy-deep);
    transition: border-color .2s, background .2s;
  }
  .club-calendar-nav-btn:hover{ border-color: var(--sky); background: var(--ice); }
  .club-calendar-today-btn{
    border: 1.5px solid rgba(22,38,43,.16);
    border-radius: 3px;
    padding: 0 14px;
    height: 36px;
    color: var(--navy-deep);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-right: 8px;
    transition: border-color .2s, background .2s;
  }
  .club-calendar-today-btn:hover{ border-color: var(--sky); background: var(--ice); }

  .club-calendar-weekdays,
  .club-calendar-days{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }
  .club-calendar-weekdays{
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(22,38,43,.12);
    padding-bottom: 10px;
  }
  .club-calendar-weekdays span{
    text-align: center;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: .6;
  }
  .club-calendar-day{
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8px;
    font-size: .88rem;
    color: var(--ink);
    border-radius: 3px;
  }
  .club-calendar-day.is-muted{ color: rgba(22,38,43,.3); }
  .club-calendar-day.is-today{ background: var(--navy-deep); color: var(--white); font-weight: 700; border-radius: 50%; max-width: 34px; max-height: 34px; margin: 0 auto; }
  .club-calendar-day.has-event::after{
    content: "";
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--sky);
  }
  .club-calendar-day.is-today.has-event::after{ background: var(--sky-soft); }

  .club-calendar-legend{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: clamp(18px, 2.4vw, 24px);
    padding-top: clamp(18px, 2.4vw, 24px);
    border-top: 1px solid rgba(22,38,43,.12);
  }
  .club-calendar-legend-item{
    display: flex; align-items: center; gap: 7px;
    font-size: .72rem;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 600;
  }
  .club-calendar-legend-dot{ width: 8px; height: 8px; border-radius: 50%; }
  .club-calendar-legend-dot--practice{ background: var(--sky); }
  .club-calendar-legend-dot--competition{ background: var(--navy-deep); }
  .club-calendar-legend-dot--event{ background: var(--navy); }
  .club-calendar-legend-dot--no-practice{ background: rgba(22,38,43,.35); }

  /* ---- Upcoming events ---- */
  .club-calendar-upcoming-heading{
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--navy-deep);
    font-size: 1.05rem;
    letter-spacing: .02em;
    margin-bottom: 6px;
  }
  .club-calendar-upcoming-note{ color: var(--navy); opacity: .7; font-size: .82rem; margin-bottom: clamp(18px, 2.4vw, 24px); }

  .club-calendar-filter{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(18px, 2.4vw, 24px);
  }
  .club-calendar-filter-btn{
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid rgba(22,38,43,.16);
    color: var(--navy);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: border-color .2s, background .2s, color .2s;
  }
  .club-calendar-filter-btn:hover{ border-color: var(--sky); }
  .club-calendar-filter-btn.is-active{ background: var(--navy-deep); border-color: var(--navy-deep); color: var(--white); }

  .club-calendar-events{ display: flex; flex-direction: column; gap: 14px; }
  .club-calendar-event{
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--white);
    border-radius: 3px;
    box-shadow: 0 12px 26px -20px rgba(20,40,46,.3);
  }
  .club-calendar-event[hidden]{ display: none; }
  .club-calendar-event-date{
    flex-shrink: 0;
    width: 54px;
    text-align: center;
    padding-top: 2px;
  }
  .club-calendar-event-month{ display: block; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sky); }
  .club-calendar-event-day{ display: block; font-family: var(--font-display); font-size: 1.4rem; color: var(--navy-deep); line-height: 1; }
  .club-calendar-event-body{ flex: 1; min-width: 0; }
  .club-calendar-event-name{ font-weight: 700; color: var(--navy-deep); font-size: .94rem; margin-bottom: 3px; }
  .club-calendar-event-meta{ color: var(--ink); font-size: .82rem; line-height: 1.5; }
  .club-calendar-event--no-practice{ background: var(--ice); box-shadow: none; border: 1px dashed rgba(22,38,43,.25); }
  .club-calendar-event--no-practice .club-calendar-event-name{ color: var(--navy); }

  /* Clearly-marked integration seam -- this whole block is the
     part a future Google Calendar embed/API call replaces. */
  .club-calendar-integration-note{
    margin-top: clamp(24px, 3vw, 32px);
    padding-top: clamp(18px, 2.4vw, 24px);
    border-top: 1px solid rgba(22,38,43,.12);
    color: var(--navy);
    opacity: .55;
    font-size: .74rem;
    line-height: 1.5;
  }

  /* Mobile nav overlay */
  .mobile-nav{
    position: fixed;
    top: 0; left: 0; right: 0;
    /* height, not inset:0's implicit bottom:0 -- position:fixed with
       inset:0 (equivalent to height:100%) computes against the LARGE
       mobile viewport (as if the browser's collapsible toolbar were
       always hidden), so the panel's bottom edge can extend past the
       truly visible area when that toolbar is showing (iOS Safari).
       100svh ("small viewport height", toolbar always assumed visible)
       fixed that -- but on Android Chrome, when the toolbar auto-
       collapses (e.g. the user had already scrolled before opening the
       menu), svh is then SHORTER than the actual available space,
       leaving a gap at the bottom where the page behind shows through
       -- exactly the opposite failure mode, seen in a real screenshot.
       100dvh ("dynamic viewport height") continuously tracks whatever
       the toolbar is actually doing at that moment, on either
       platform, so the panel always matches the real visible area
       instead of assuming a fixed toolbar state. 100vh kept first as
       a fallback for older browsers without dvh support. */
    height: 100vh;
    height: 100dvh;
    z-index: 2147483647;
    background: linear-gradient(160deg, var(--navy-deep), var(--navy) 120%);
    display: flex;
    flex-direction: column;
    /* overflow-y:auto is a safety net, not the primary fix -- if the
       7 nav items still don't fit a very short/landscape screen, the
       panel scrolls internally instead of clipping Register off the
       bottom. padding-bottom adds breathing room above the home
       indicator / toolbar on notched devices. */
    overflow-y: auto;
    padding: clamp(16px,5vw,24px);
    padding-bottom: max(clamp(16px,5vw,24px), env(safe-area-inset-bottom, 0px) + 16px);
    transform: translateX(100%);
    transition: transform .4s var(--edge);
  }
  .mobile-nav.is-open{ transform: translateX(0); }
  .mobile-nav-top{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
  }
  .mobile-nav-close{ width:24px; height:24px; position:relative; }
  .mobile-nav-close::before, .mobile-nav-close::after{
    content:"";
    position:absolute;
    top:50%; left:50%;
    width:22px; height:2px;
    background: var(--white);
    transform-origin: center;
  }
  .mobile-nav-close::before{ transform: translate(-50%,-50%) rotate(45deg); }
  .mobile-nav-close::after{ transform: translate(-50%,-50%) rotate(-45deg); }
  .mobile-nav ul{
    list-style: none;
    margin-top: clamp(16px,4vw,28px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
  }
  /* Scoped to "ul a" (the actual menu links) only -- this used to be the
     bare selector ".mobile-nav a", which also matched the Register
     button below (also an <a>, also inside .mobile-nav). Since that
     selector's specificity beat .btn/.btn-primary, it was silently
     overriding the button's real display/padding/font/height with nav-
     link styling (huge uppercase Anton text, 10px 0 padding, a stray
     border-bottom) -- the button still existed and still had an href,
     but its actual rendered box no longer matched its intended button
     shape, which is what made it feel broken to tap reliably. */
  .mobile-nav ul a{
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--white);
    /* Slightly reduced from clamp(1.6rem,8vw,2.1rem) -- with an 8th
       item (Team Store) added, this + the tighter spacing below is
       what makes the full list plus the CTA row realistically fit a
       standard phone screen without scrolling, while staying clearly
       legible and comfortably tappable (still well above the 44px
       touch-target minimum with its own padding included). */
    font-size: clamp(1.3rem, 6.2vw, 1.7rem);
    line-height: 1.15;
    padding: 8px 0;
    display: block;
    border-bottom: 1px solid rgba(255,255,255,.12);
    position: relative;
    z-index: 1;
  }
  .mobile-nav-cta-row{
    display: flex;
    gap: 12px;
    /* Pushes the row to the bottom of the panel (flex-direction:column
       parent) once the compact nav list above no longer fills the
       available height, without forcing it to the absolute bottom on
       very tall screens where that would look disconnected from the
       nav list. */
    margin-top: auto;
    padding-top: 20px;
  }
  .mobile-nav-cta-row .btn{
    flex: 1;
    /* Defensive hardening: guarantees these sit in their own stacking
       context above anything else in the panel, are never accidentally
       excluded from hit-testing, and always clear the ~44px touch-
       target minimum regardless of --btn-h. */
    position: relative;
    z-index: 2;
    pointer-events: auto;
    min-height: 44px;
  }

  /* =====================================================
     OUR LOCATIONS
     Evergreen by design: only facility name, address, and a
     directions link -- no programs/ages/schedules, so this section
     never needs touching when groups move between facilities.
     Each location is one independent block (see .swp-location-card);
     add/remove/rename/re-address one without redesigning anything.
     #swpLocationsMap is the integration seam -- a plain illustrative
     placeholder now (openly labeled as such), swapped later for a
     real Google Maps embed with the same three marker positions.
  ===================================================== */
  .swp-locations-section{
    position: relative;
    background: linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 140%);
    padding: clamp(64px, 9vw, 128px) clamp(20px, 6vw, 88px) clamp(80px, 10vw, 140px);
  }
  .swp-locations-inner{ max-width: 1360px; margin: 0 auto; }
  .swp-locations-header{ max-width: 640px; margin-bottom: clamp(36px, 5vw, 52px); }
  .swp-locations-eyebrow{
    color: var(--sky-soft);
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 12px;
  }
  .swp-locations-eyebrow::before{ content:""; width: 34px; height: 2px; background: var(--sky); }
  .swp-locations-heading{
    font-family: var(--swp-heading-font);
    text-transform: uppercase;
    color: var(--white);
    line-height: var(--swp-heading-line-height);
    letter-spacing: var(--swp-heading-letter-spacing);
    font-size: var(--swp-heading-size-desktop);
    margin-bottom: 14px;
  }
  .swp-locations-intro{ color: var(--sky-soft); opacity: .9; font-size: var(--swp-body-size-desktop); line-height: var(--swp-body-line-height); }

  /* ---- Map placeholder ---- */
  .swp-locations-map{
    position: relative;
    aspect-ratio: 21 / 8;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: clamp(28px, 4vw, 40px);
    border: 1px solid rgba(143,208,240,.18);
    background:
      radial-gradient(circle at 20% 30%, rgba(143,208,240,.16), transparent 45%),
      radial-gradient(circle at 75% 70%, rgba(143,208,240,.12), transparent 50%),
      var(--navy-deep);
  }
  .swp-locations-map-grid{
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(143,208,240,.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(143,208,240,.08) 1px, transparent 1px);
    background-size: 40px 40px;
  }
  .swp-locations-map-note{
    position: absolute;
    top: 16px; left: 20px;
    color: var(--sky-soft);
    opacity: .8;
    display: flex; align-items: center; gap: 8px;
  }
  .swp-locations-map-note::before{ content:""; width: 18px; height: 2px; background: var(--sky); }
  .swp-locations-marker{
    position: absolute;
    transform: translate(-50%, -100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .swp-locations-marker-pin{
    width: 30px; height: 30px;
    border-radius: 50% 50% 50% 0;
    background: var(--sky);
    transform: rotate(-45deg);
    box-shadow: 0 8px 18px -6px rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
  }
  .swp-locations-marker-pin span{
    transform: rotate(45deg);
    color: var(--navy-deep);
    font-family: var(--font-display);
    font-size: .8rem;
  }
  .swp-locations-marker-label{
    color: var(--white);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    background: rgba(15,28,33,.6);
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
    margin-top: 2px;
  }

  /* ---- Location cards: flexbox so three (or two, or four) stay
     equal width and centered -- same pattern as the coaches grid. */
  .swp-locations-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }
  .swp-location-card{
    flex: 1 1 280px;
    max-width: 380px;
    background: var(--white);
    border-radius: 3px;
    padding: clamp(24px, 3vw, 32px);
    box-shadow: 0 24px 50px -22px rgba(10,19,23,.5);
    display: flex;
    flex-direction: column;
  }
  .swp-location-card-num{
    font-family: var(--font-display);
    color: var(--sky);
    font-size: .85rem;
    letter-spacing: .02em;
    margin-bottom: 12px;
  }
  .swp-location-card-area{
    color: var(--sky);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .swp-location-card-name{
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--navy-deep);
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.15;
    margin-bottom: 10px;
  }
  .swp-location-card-address{
    color: var(--ink);
    font-size: .92rem;
    line-height: 1.55;
    margin-bottom: clamp(20px, 2.6vw, 26px);
    flex: 1;
  }
  .swp-location-card-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--navy-deep);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding-top: 14px;
    border-top: 1px solid rgba(22,38,43,.12);
    transition: color .2s, gap .2s;
  }
  .swp-location-card-link:hover{ color: var(--navy); gap: 12px; }
  .swp-location-card-actions{ display: flex; flex-direction: column; }
  .swp-location-card-actions .swp-location-card-link + .swp-location-card-link{
    border-top: none;
    padding-top: 8px;
  }
  .swp-location-card-register{ color: var(--sky); }
  .swp-location-card-register:hover{ color: var(--navy-deep); }

  /* =====================================================
     CONTACT US
     Light section between the dark Locations block and the very
     dark Footer, per the page rhythm. Prototype form only -- fields
     and states are real markup, but submission is not wired to
     anything; the WordPress build swaps in a real form plugin
     (Forminator / Fluent Forms / WPForms) targeting an editable
     admin email, without needing to change this markup.
  ===================================================== */
  .contact-section{
    position: relative;
    background: var(--white);
    padding: clamp(64px, 9vw, 128px) clamp(20px, 6vw, 88px) clamp(80px, 10vw, 140px);
  }
  .contact-inner{
    max-width: 1360px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, 420px) 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: start;
  }
  .contact-eyebrow{
    color: var(--navy);
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 12px;
  }
  .contact-eyebrow::before{ content:""; width: 34px; height: 2px; background: var(--sky); }
  .contact-heading{
    font-family: var(--swp-heading-font);
    text-transform: uppercase;
    color: var(--navy-deep);
    line-height: 1.15;
    letter-spacing: .01em;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    margin-bottom: 18px;
  }
  /* Each line rendered by swp_render_heading_lines() is a <span>, which
     is inline by default -- without this, "Have A Question?" and
     "We're Here To Help." ran together on one line with no space. */
  .contact-heading span{ display: block; }
  .contact-heading span + span{ margin-top: .15em; }
  .contact-intro{ color: var(--ink); font-size: var(--swp-body-size-desktop); line-height: 1.65; max-width: 46ch; }

  .contact-form{
    background: var(--ice);
    border-radius: 4px;
    padding: clamp(28px, 4vw, 44px);
  }
  .contact-form-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .contact-field{ margin-bottom: 20px; }
  .contact-field label{
    display: block;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .68rem;
    color: var(--navy);
    margin-bottom: 8px;
  }
  .contact-field .optional{
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--navy);
    opacity: .55;
  }
  .contact-field input,
  .contact-field select,
  .contact-field textarea{
    width: 100%;
    font-family: var(--font-body);
    font-size: .94rem;
    color: var(--ink);
    background: var(--white);
    border: 1.5px solid rgba(22,38,43,.16);
    border-radius: 3px;
    padding: 12px 14px;
    transition: border-color .2s;
  }
  .contact-field input:focus,
  .contact-field select:focus,
  .contact-field textarea:focus{
    outline: none;
    border-color: var(--sky);
  }
  .contact-field textarea{ min-height: 120px; resize: vertical; }
  .contact-field select{ appearance: none; cursor: pointer; }

  .contact-submit{ margin-top: 6px; }

  /* Prototype-only state examples for the eventual real form plugin --
     hidden by default, shown via .is-visible for design reference. */
  .contact-form-status{
    display: none;
    padding: 12px 16px;
    border-radius: 3px;
    font-size: .88rem;
    margin-bottom: 20px;
  }
  .contact-form-status.is-visible{ display: block; }
  .contact-form-status--success{ background: rgba(143,208,240,.25); color: var(--navy-deep); }
  .contact-form-status--error{ background: rgba(200,60,60,.12); color: #7a1f1f; }

  /* =====================================================
     FOOTER
     Very dark navy, compact, completes the page. Every link below
     is real editable HTML -- hrefs and the admin email/phone
     placeholders are meant to be filled in directly.
  ===================================================== */
  .site-footer{
    position: relative;
    background: var(--navy-deep);
    color: var(--sky-soft);
    /* Reduced from clamp(48px,6vw,72px) top -- more compact overall,
       per the explicit "footer should feel significantly shorter"
       request. */
    padding: clamp(32px, 4vw, 48px) clamp(20px, 6vw, 88px) clamp(20px, 3vw, 28px);
  }
  .footer-inner{ max-width: 1360px; margin: 0 auto; }
  .footer-top{
    display: grid;
    /* 5 columns: Brand, Nav-left, Nav-right, Get Started, Contact.
       The two nav columns have no heading above them (Explore/Club
       labels removed) -- just 4 plain links each, split by nav order:
       left = About/Programs/Coaches/Club Life, right =
       Calendar/Locations/Contact/Team Store. */
    grid-template-columns: 1.2fr .8fr .8fr .9fr 1fr;
    gap: clamp(20px, 3vw, 40px);
    padding-bottom: clamp(24px, 3vw, 36px);
    border-bottom: 1px solid rgba(143,208,240,.16);
  }
  .footer-brand{
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .footer-brand img{ height: 44px; flex-shrink: 0; }
  .footer-tagline{
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--white);
    line-height: 1.15;
    font-size: .92rem;
    letter-spacing: .01em;
  }
  .footer-tagline em{ font-style: normal; color: var(--sky); }

  .footer-col-heading{
    font-weight: 700;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    font-size: .68rem;
    color: var(--sky);
    margin-bottom: 18px;
  }
  .footer-nav-list,
  .footer-contact-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .footer-nav-list a,
  .footer-contact-list a,
  .footer-contact-list span{
    color: var(--sky-soft);
    font-size: .88rem;
    opacity: .88;
    transition: opacity .2s;
  }
  .footer-nav-list a:hover{ opacity: 1; }

  .footer-actions{ display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
  .footer-actions .btn{ width: 100%; justify-content: center; }

  .footer-social{ display: flex; gap: 14px; margin-top: 22px; }
  .footer-social a{
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(143,208,240,.3);
    color: var(--sky-soft);
    transition: border-color .2s, color .2s;
  }
  .footer-social a:hover{ border-color: var(--sky); color: var(--sky); }
  .footer-social svg{ width: 16px; height: 16px; }

  .footer-bottom{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: clamp(20px, 3vw, 28px);
  }
  .footer-copyright{ font-size: .78rem; color: var(--sky-soft); opacity: .65; }
  .footer-utility{ display: flex; gap: 22px; flex-wrap: wrap; }
  .footer-utility a{ font-size: .78rem; color: var(--sky-soft); opacity: .65; transition: opacity .2s; }
  .footer-utility a:hover{ opacity: 1; }

/* =====================================================
     RESPONSIVE
  ===================================================== */
  @media (max-width: 980px){

    .hero-photo{ background-position: 62% center; }
    .hero-headline .line1, .hero-headline .line2{ font-size: var(--swp-hero-size-tablet); }
    .primary-nav{ display:none; }
    .nav-toggle{ display:flex; }
    .header-actions .btn-ghost-nav{ display:none; }

    /* About Us: previously had no tablet-range override at all, so
       641-980px fell back to the desktop 2-column grid, which is what
       was squeezing the photos small at "laptop" widths. Stack it the
       same way mobile already does; the 640px query below layers
       further phone-specific refinements (object-position, exact
       secondary-photo sizing) on top of this. */
    .about-inner{ grid-template-columns: 1fr; gap: clamp(28px, 4vw, 40px); }
    .about-intro, .about-rest, .about-photo-group{ grid-column: auto; grid-row: auto; }
    .about-intro{ order: 1; }
    .about-photo-group{ order: 2; }
    .about-rest{ order: 3; }
    .about-photo-primary{ width: 100%; }
    .about-photo-secondary{ width: 46%; max-width: 300px; }

    /* Tablet: 3 columns (2 gaps of 28px shared across 3 items) */
    .swp-coach-card{ flex-basis: calc(33.333% - 18.66px); }
    .swp-coach-modal{ grid-template-columns: 1fr; }
    .swp-coach-modal-photo{ min-height: 220px; }

    .club-life-feed--placeholder{ grid-template-columns: repeat(3, 1fr); }

    .club-calendar-layout{ grid-template-columns: 1fr; }
  }

  @media (max-width: 640px){
    :root{
      --btn-h: 48px;
    }
    .site-header{ padding: 0 20px; }
    .brand img{ height: 46px; }
    /* Root cause of the large empty gap: .hero-content-band (base rule,
       ~line 296) uses align-items:center inside a flex column that
       spans nearly the full Hero height on mobile (Hero's own
       min-height is ~850-950px + the diagonal band). Centering content
       in that tall a box pushes it roughly halfway down, which is what
       reads as "several hundred pixels of empty dark space" above the
       kicker. This override anchors content near the top instead. */
    .hero-content-band{
      align-items: flex-start;
      padding-top: calc(var(--header-h) + 40px);
    }
    .hero-kicker{ margin-bottom: 12px; }
    .hero-headline{ line-height: .95; }
    .hero-sub{ margin-top: 12px; }
    .hero-ctas{ margin-top: 20px; }
    /* .hero-photo's actual mobile image + background-position are set
       later, inline in template-parts/hero.php -- it swaps in a
       dedicated Mobile Hero Background Image (not just a repositioned
       crop of the desktop photo), which is what actually keeps both
       athletes in frame on a narrow screen. */
    .hero-scrim{
      background:
        linear-gradient(180deg,
          rgba(8,16,20,.82) 0%,
          rgba(8,16,20,.6) 20%,
          rgba(8,16,20,.18) 36%,
          rgba(8,16,20,.1) 60%,
          rgba(8,16,20,.32) 78%,
          rgba(8,16,20,.72) 100%);
    }
    .hero-headline .line1, .hero-headline .line2{
      display: inline;
      font-size: var(--swp-hero-size-mobile);
    }
    /* Body-text mobile size -- one control governs all six of these
       (About, Programs, Coaches, Calendar, Locations, Contact intro
       paragraphs), matching Surrey Water Polo -> Design -> Body Text. */
    .about-body,
    .programs-intro,
    .swp-coaches-intro,
    .club-calendar-intro,
    .swp-locations-intro,
    .contact-intro{ font-size: var(--swp-body-size-mobile); }
    .hero{ min-height: calc(clamp(850px, 92vh, 950px) + clamp(90px, 11vw, 150px)); }
    .hero-content{ padding: 0 clamp(20px,6vw,88px); }
    .hero-sub{ font-size: clamp(.86rem, 3.6vw, .96rem); }
    .hero-ctas{ gap: 12px; }
    .credibility-rail ul{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      row-gap: 20px;
    }
    .credibility-rail li{ padding: 0 16px; }
    .credibility-rail li:nth-child(2n+1){ padding-left: 0; border-left: none !important; }
    .credibility-rail .stat-lead{ font-size: 1.5rem; }

    /* ---- About Us: photos lead intro's first paragraph -> photos
       -> rest, compact spacing, story-correct photo positions. ---- */
    .about{ padding: 36px clamp(20px,7vw,32px) 44px; }
    .about-inner{
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .about-intro, .about-rest, .about-photo-group{
      grid-column: auto;
      grid-row: auto;
    }
    .about-intro{ order: 1; }
    .about-photo-group{ order: 2; }
    .about-rest{ order: 3; }

    .about-eyebrow{ margin-bottom: 10px; }
    .about-heading{
      font-size: var(--swp-heading-size-mobile);
      margin-bottom: 12px;
    }
    .about-body{ max-width: none; }
    .about-body p{ margin-bottom: .75em; }
    .about-standout{ margin: .95em 0; }

    .about-photo-stack{
      position: relative;
      margin-bottom: 24px;
    }
    .about-photo-primary{
      width: 100%;
      aspect-ratio: 1517 / 923;
    }
    .about-photo-primary img{ object-position: center 38%; }
    .about-photo-secondary{
      left: 0;
      bottom: -9%;
      width: 44%;
      max-width: 220px;
      border-width: 4px;
      box-shadow: 0 12px 26px -12px rgba(20,40,46,.35);
    }
    .about-photos-caption{ margin-top: 4px; }

    /* ---- Our Programs ---- */
    .programs{ padding: 48px clamp(20px,7vw,32px) 56px; }
    .programs-header{ margin-bottom: 32px; }
    .programs-heading{ font-size: var(--swp-heading-size-mobile); }
    .programs-intro{ font-size: .95rem; }
    .program-toggle{
      flex-wrap: wrap;
      gap: 6px 14px;
      padding: 18px 0;
      position: relative;
      padding-right: 32px;
    }
    .program-num{ font-size: .95rem; }
    .program-name{
      flex: 1 1 auto;
      font-size: 1.15rem;
      line-height: 1.15;
    }
    .program-tags{
      flex-basis: 100%;
      padding-left: calc(2.2ch + 0px);
      gap: 12px;
      opacity: .7;
    }
    .program-toggle-icon{
      position: absolute;
      top: 20px; right: 0;
    }
    .program-panel-content{ max-width: none; }

    /* ---- Learn to Swim levels: stack Bronze -> Silver -> Gold
       vertically with a downward arrow between, compact padding so
       the expanded panel doesn't scroll excessively. ---- */
    .swp-ttsw-levels{
      flex-direction: column;
      gap: 10px;
    }
    .swp-ttsw-arrow{
      width: auto;
      transform: rotate(90deg);
      margin: -2px 0;
    }
    .swp-ttsw-level{ padding: 14px 16px; }

    /* ---- Our Coaches: 2 per row, near-full-screen modal ---- */
    .swp-coaches-section{ padding: 48px clamp(20px,7vw,32px) 56px; }
    .swp-coaches-header{ margin-bottom: 28px; }
    .swp-coaches-heading{ font-size: var(--swp-heading-size-mobile); }
    .swp-coaches-filter{ margin-bottom: 24px; }
    .swp-coaches-grid{ gap: 16px; }
    .swp-coach-card{ flex-basis: calc(50% - 8px); min-width: 0; }
    .swp-coach-info{ padding: 14px 12px 16px; }
    .swp-coach-name{ font-size: 1rem; }
    .swp-coach-role{ font-size: .74rem; }

    /* Homepage shows only 4 of the 6 featured coaches on mobile --
       cards 5 and 6 stay in the markup (so no JS/reflow needed) but are
       hidden here; all six are still one tap away via Meet All Coaches. */
    .swp-coaches-grid--featured .swp-coach-card:nth-child(n+5){ display: none; }
    .swp-coaches-cta-row{ margin-top: 24px; }

    .swp-coaches-directory{ padding: 20px 20px 48px; }
    .swp-coaches-directory-heading{ font-size: clamp(1.5rem, 7vw, 1.9rem); }
    .swp-coaches-directory-grid{ gap: 16px; }
    .swp-coaches-directory-grid .swp-coach-card{ flex-basis: calc(50% - 8px); }

    .swp-coach-modal-overlay{ padding: 0; align-items: flex-end; }
    .swp-coach-modal{
      max-width: none;
      width: 100%;
      max-height: 92vh;
      border-radius: 12px 12px 0 0;
      grid-template-columns: 1fr;
    }
    .swp-coach-modal-photo{ min-height: 200px; }

    .swp-location-modal{ max-width: none; width: 100%; }
    .swp-location-option{ padding: 18px 20px; font-size: 1rem; }

    .swp-reghelp-modal{ max-width: none; width: 100%; max-height: 90vh; }
    .swp-reghelp-division-row{ flex-direction: column; align-items: flex-start; gap: 4px; }
    .swp-reghelp-division-arrow{ display: none; }

    /* ---- Club Life: compact 2-col grid on mobile ---- */
    .club-life{ padding: 48px clamp(20px,7vw,32px) 56px; }
    .club-life-header{ margin-bottom: 24px; }
    .club-life-heading{ font-size: var(--swp-heading-size-mobile); }
    .club-life-feed--placeholder{
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    /* ---- Club Calendar: compact nav + list, no cramped 7-col
       month grid at this width; the day grid becomes a simple
       horizontal scroll strip instead of shrinking illegibly. ---- */
    .club-calendar{ padding: 48px clamp(20px,7vw,32px) 56px; }
    .club-calendar-header{ margin-bottom: 28px; }
    .club-calendar-heading{ font-size: var(--swp-heading-size-mobile); }
    .club-calendar-month{ padding: 18px; overflow-x: auto; }
    .club-calendar-weekdays, .club-calendar-days{ min-width: 420px; }
    .club-calendar-legend{ font-size: .68rem; gap: 10px 14px; }
    .club-calendar-event{ padding: 14px; gap: 12px; }

    /* ---- Our Locations: full-width stacked cards, larger tap
       target on Get Directions, shorter map placeholder. ---- */
    .swp-locations-section{
      padding: 48px clamp(20px,7vw,32px) 72px;
      /* --swp-toolbar-offset is set by JS (window.visualViewport), and
         is the actual measured height Safari's bottom toolbar is
         currently occupying -- 0px when it's hidden/not applicable,
         growing when it's showing. Adding it on top of the existing
         72px means the section reserves genuinely enough space
         whenever the toolbar is actually present, rather than a fixed
         guess. Falls back to plain 72px if the variable isn't set yet
         (e.g. browsers without visualViewport support). */
      padding-bottom: calc(72px + var(--swp-toolbar-offset, 0px));
    }
    .swp-locations-header{ margin-bottom: 28px; }
    .swp-locations-heading{ font-size: var(--swp-heading-size-mobile); }
    .swp-locations-map{
      aspect-ratio: 4 / 3.8;
      /* More breathing room before the first card -- mobile Safari's
         bottom toolbar collapses while scrolling and re-expands once
         scrolling stops, which can eat back into the viewport right
         where the user just landed. This isn't something CSS can
         directly detect (env(safe-area-inset-bottom) is a fixed
         notch/home-indicator value, not the toolbar's dynamic height),
         so the practical fix is simply more clearance around the
         Guildford card so its heading isn't sitting exactly at that
         boundary. */
      margin-bottom: 48px;
    }
    .swp-locations-grid{ gap: 16px; }
    /* Defensive scroll offset in case anything ever scrolls/links
       directly to this card (deep link, browser "find on page", etc.)
       -- clears the fixed header (84px) plus extra buffer. */
    .swp-location-card:first-child{ scroll-margin-top: 140px; }
    .swp-location-card{ flex-basis: 100%; max-width: none; }
    .swp-location-card-link{ padding: 14px 0 0; font-size: .88rem; }

    /* ---- Contact Us ---- */
    .contact-section{ padding: 48px clamp(20px,7vw,32px) 56px; }
    .contact-inner{ grid-template-columns: 1fr; gap: 28px; }
    .contact-heading{ font-size: clamp(1.6rem, 7.5vw, 2rem); }
    .contact-form{ padding: 22px; }
    .contact-form-row{ grid-template-columns: 1fr; gap: 0; }
    .contact-submit{ width: 100%; }
    .contact-submit .btn{ width: 100%; }

    /* ---- Footer: compact mobile layout. Explore and Club sit side by
       side as a genuine 2-column nav block (not one long stacked list)
       -- everything else (brand, Get Started, Contact) stays full
       width. Uses nth-child on .footer-top's fixed, known child order
       (brand, explore, club, get-started, contact) rather than needing
       new wrapper markup. Email and phone use the exact same
       unconditional markup as desktop -- nothing here hides either
       one, they were just visually easy to miss in the old single
       long stacked column. ---- */
    .site-footer{ padding: 24px clamp(20px,7vw,32px) 16px; }
    .footer-top{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px 16px;
      padding-bottom: 20px;
    }
    .footer-brand{
      grid-column: 1 / -1;
      /* Side by side (logo left, tagline right), not stacked -- row is
         already the desktop layout's direction too, this override used
         to switch it to column specifically on mobile. */
      flex-direction: row;
      align-items: center;
      gap: 14px;
    }
    .footer-brand img{ height: 36px; }
    .footer-tagline{ font-size: 1rem; line-height: 1.2; }
    .footer-col:nth-of-type(4){ grid-column: 1 / -1; } /* Get Started -- own full-width row */
    .footer-col:nth-of-type(5){ grid-column: 1 / -1; } /* Contact -- own full-width row */
    .footer-col-heading{ margin-bottom: 10px; }
    .footer-nav-list,
    .footer-contact-list{ gap: 8px; }
    .footer-actions{ align-items: stretch; gap: 9px; }
    .footer-social{ margin-top: 12px; }
    .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 12px; }
  }

  @media (prefers-reduced-motion: reduce){
    .hero-photo{ animation: none; }
    .program-panel, .program-toggle-icon::before, .program-toggle-icon::after{ transition: none; }
  }

/* =====================================================
   WORDPRESS INTEGRATION ADD-ONS
   Added when porting the static prototype into WordPress -- styles the
   Google Calendar embed slot, the Locations map embed slot, and the
   Smash Balloon Instagram feed wrapper so they sit correctly inside
   the existing designed areas without altering any of the approved
   section CSS above.
===================================================== */
.club-calendar-embed-wrap{
  background: var(--white);
  border-radius: 4px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 18px 40px -26px rgba(20,40,46,.3);
}
/* Desktop: full content width, ~800-900px tall (increased from 650-750
   -- three stacked location calendars, including Guildford at the top,
   need more vertical room than a single-calendar embed to avoid being
   cropped). Google's own iframe embed code ships fixed width/height
   attributes -- these rules override that so it fills the designed
   container responsively instead of sitting at Google's fixed size. */
.club-calendar-embed-wrap iframe{
  display: block;
  width: 100%;
  height: 850px;
  min-height: 800px;
  max-height: 900px;
  border: 0;
  border-radius: 3px;
}
@media (max-width: 640px){
  .club-calendar-embed-wrap{
    padding: 14px;
    /* Explicit width cap + centering as a defensive guarantee against
       overflow on mobile, regardless of what width/style attributes
       Google's own iframe embed code ships with. */
    width: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    overflow: hidden;
  }
  .club-calendar-embed-wrap iframe{
    height: 700px; min-height: 650px; max-height: 750px;
    width: 100%;
    max-width: 100%;
  }
}
.club-calendar-placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  color: var(--navy);
  opacity: .6;
  font-size: .92rem;
  text-align: center;
  padding: 24px;
}

/* Locations map -- fills the designed container edge-to-edge, no
   empty space around it, responsive at every width. Works whether the
   admin pastes a plain Google Maps embed or a Google My Maps embed
   (My Maps supports multiple markers with click-for-info, which a
   single-location Maps embed does not). */
.swp-locations-map iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Club Life -- Smash Balloon's own feed markup renders inside
   #clubLifeFeed. The actual width/grid fix now lives on .club-life-feed
   and .club-life-feed--placeholder above (see that section's comments
   for why .club-life-feed is deliberately not a grid container). */

/* Light spacing polish for Smash Balloon's own Load More / Follow on
   Instagram buttons -- generic selectors only (any link/button that is
   a direct child of the feed container), since Smash Balloon's exact
   internal class names can vary by version and this intentionally does
   not touch its internal photo grid. Gives the buttons breathing room
   and centers them so they read as an intentional part of the section
   rather than leaving Smash Balloon's own default spacing untouched. */
#clubLifeFeed{ text-align: center; }
#clubLifeFeed > div > a,
#clubLifeFeed > div > button{
  margin-top: 20px;
  display: inline-block;
}

/* Smash Balloon "gray boxes instead of photos" mitigation -- this is a
   known class of bug where the plugin's own lazy-load never flips its
   loaded/visible class (JS execution order conflicts with an
   optimization plugin, LiteSpeed, etc.). This does not touch Smash
   Balloon's files; it only overrides the *symptom* CSS-side so real
   media isn't stuck hidden behind a stuck lazy-load state. If the
   underlying JS conflict still blocks the image src from loading at
   all, this alone won't fix it -- see the JS nudge in main.js and the
   troubleshooting steps in the delivery notes. */
#clubLifeFeed img,
#clubLifeFeed .sbi_photo,
#clubLifeFeed .sb_wp_photo,
#clubLifeFeed [class*="sbi_"] img{
  opacity: 1 !important;
  visibility: visible !important;
}