/* ==========================================================================
   Splash Fit Swim Club — Redesign (from Figma: Splashfit - Redesign / Sample 1)

   Fluid/responsive rules of thumb used throughout:
   - No fixed widths: width: 100% + max-width in px.
   - Type & spacing scale with clamp(min, fluid, max) — max = Figma desktop value.
   - Breakpoints: 1200px (header nav collapses), 1024px (2-up / stacked rows),
     640px (single column).
   ========================================================================== */

:root {
  /* Brand — greyscale + a single blue accent (Figma node 152-10) */
  --ink: #000000; /* headings, header + footer background   */ 
  --accent: #1976d2; /* buttons, links, active states          */
  --accent-dark: #145ea8; /* accent hover                           */
  --white: #fff;
  --text: #424847; /* body copy                              */
  --text-muted: #727877;

  /* Surfaces */
  --surface: #f6f6f6; /* hero band, soft fills                  */
  --surface-grad-top: #e9e9e9; /* banded sections: gradient start        */
  --surface-grad-bottom: #f3f3f3; /* banded sections: gradient end          */
  --surface-band: linear-gradient(
    180deg,
    var(--surface-grad-top) 0%,
    var(--surface-grad-bottom) 100%
  );
  --band: #eaeaea; /* CA Stingrays band                      */
  --dark-card: #1a1a1a; /* cards on the black footer              */
  --card-border: #ededed;
  --pill-bg: #f0f0f0; /* tinted fill on white surfaces (pills, chips) */
  --pill-bg-tinted: #fff; /* eyebrow on the tinted grey bands       */

  /* On dark backgrounds */
  --on-dark: #eaeaea; /* nav links + icons on black             */
  --on-dark-muted: #e6e6e6; /* footer links                           */

  --font-display: "puffin-display-soft", "Trebuchet MS", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --card-shadow: 0 8px 8px -4px rgba(16, 24, 40, 0.03);

  /* Fluid type scale (max = Figma desktop size) */
  --fs-display: clamp(34px, 2.6vw + 16px, 52px); /* hero h1, CTA title  */
  --fs-title: clamp(26px, 1.2vw + 17px, 36px); /* section titles      */
  --fs-card-title: clamp(20px, 0.5vw + 17px, 24px); /* card/footer h3      */
  --fs-body-lg: clamp(16px, 0.25vw + 14.5px, 18px); /* 18px body copy      */
  --fs-hero-sub: clamp(17px, 0.5vw + 13px, 20px);

  /* Fluid spacing */
  --gutter: clamp(16px, 4vw, 24px);
  --edge: clamp(16px, 6.9vw, 119px); /* header + hero left edge */
  --space-section: clamp(48px, 4.6vw, 80px); /* between sections    */
  --space-head: clamp(32px, 3.2vw, 55px); /* heading -> content  */
  --pool-gutter: clamp(16px, 1.9vw, 24px); /* gap between pool cards */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: #fff;
  font-family: var(--font-body) !important;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: calc(1240px + 2 * 24px); /* content 1240 at full width */
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.text-blue {
  color: var(--accent);
}
.mt-0 {
  margin-top: 0 !important;
}
.faq-answer {
  overflow: hidden;
}

.faq-answer[hidden] {
  display: none;
}
/* ---------- Shared components ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: 50px;
  font-family: var(--font-display);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.btn:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

/* On blue/navy backgrounds keep the white border so the button stays visible */
.btn--outline-white:hover {
  border-color: #fff;
}

.btn--lg {
  padding: clamp(12px, 0.9vw, 14px) clamp(20px, 1.5vw, 24px);
  font-size: clamp(16px, 0.3vw + 14px, 18px);
  letter-spacing: 0.18px;
}

.btn--sm {
  padding: 10px 20px;
  font-size: 16px;
  letter-spacing: 0.16px;
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn--outline {
  border-color: var(--ink);
  color: var(--ink);
}

.btn--outline-white {
  border-color: #fff;
  color: #fff;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Margin */
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-1 {
  margin-bottom: 8px !important;
}
.mb-2{
  margin-bottom: 16px !important;
}
.mb-3{
  margin-bottom: 24px !important;
}
.mb-4{
  margin-bottom: 32px !important;
}

/* ---------- Global section heading pattern ----------
   <div class="section-heading [--center] [--light]">
     <span class="eyebrow">…</span>
     <h2 class="section-title">…</h2>
     <p class="section-subtitle">…</p>   (optional)
   </div>
----------------------------------------------------- */

.section-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.section-heading--center {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 50px;
  background: var(--pill-bg);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* White pills would vanish on the white sections, so #f0f0f0 is the default
   (it also reads correctly on the dark Stingrays band). Only the tinted grey
   bands lift the pill back to white. */
.programs .eyebrow,
.stingrays .eyebrow,
.program-block--alt:not(.bg-white) .eyebrow {
  background: var(--pill-bg-tinted);
}
.page-hero .eyebrow {
  background: var(--pill-bg);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.section-heading--light .section-title {
  color: #fff;
}

.section-subtitle {
  width: 100%;
  max-width: 720px;
  margin-top: -8px; /* heading gap is 16px, title-to-subtitle is 8px */
  font-size: var(--fs-body-lg);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  letter-spacing: 0.18px;
  color: var(--accent);
}

.link-more img {
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}

.link-more:hover img {
  transform: translateX(4px);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: clamp(76px, 6vw, 100px);
  padding: 0 var(--edge);
  background: var(--ink);
  transition:
    height 0.3s ease,
    box-shadow 0.3s ease;
}

/* script.js adds .is-fixed once the page is scrolled */
.site-header.is-fixed {
  height: clamp(62px, 4.7vw, 80px);
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.08);
}

.site-header.is-fixed .brand__logo {
  width: clamp(130px, 20vw, 200px);
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 20px);
  flex-shrink: 0;
}

.brand__logo {
  width: clamp(150px, 20vw, 250px);
  height: auto;
  transition: width 0.3s ease;
}

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brand__text img:first-child {
  width: clamp(140px, 10vw, 173.86px);
  height: auto;
}

.brand__text img:last-child {
  width: clamp(140px, 10vw, 174px);
  height: auto;
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 30px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-nav a {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--on-dark);
  transition: color 0.2s ease;
}

.site-nav a:hover {
  color: var(--white);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border: 2px solid var(--on-dark);
  border-radius: 50px;
  background: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.16px;
  color: var(--on-dark);
  cursor: pointer;
}

/* The header sits on black, so outline controls invert to the on-dark tone
   (design: Member Login = 2px #eaeaea border + #eaeaea label). */
.site-header .btn--outline {
  border-color: var(--on-dark);
  color: var(--on-dark);
}

.site-header .btn--outline:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

.lang-btn img {
  width: 22px;
  height: 22px;
}

/* Hamburger (CSS-only, shown under 1280px) */
.nav-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.nav-toggle-btn span {
  position: relative;
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--on-dark);
  transition: background-color 0.2s ease;
}

.nav-toggle-btn span::before,
.nav-toggle-btn span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--on-dark);
  transition:
    top 0.25s ease,
    transform 0.25s ease;
}

.nav-toggle-btn span::before {
  top: -7px;
}
.nav-toggle-btn span::after {
  top: 7px;
}

/* Hamburger morphs into an X while the menu is open */
.nav-toggle:checked + .nav-toggle-btn span {
  background: transparent;
}

.nav-toggle:checked + .nav-toggle-btn span::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle:checked + .nav-toggle-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}

.hero__text span.text-blue {
  text-shadow: 0px 5px 15px #00000057;
  color: #439ff9;
}

@media (max-width: 1279.98px) {
  .nav-toggle-btn {
    display: flex;
  }

  /* Kept rendered (not display:none) so it can fade/slide in */
  .site-header__right {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 24px var(--gutter) 32px;
    background: var(--ink);
    box-shadow: 0 16px 24px rgba(16, 24, 40, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    pointer-events: none;
    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0.25s;
  }

  .nav-toggle:checked ~ .site-header__right {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .site-header__actions {
    flex-wrap: wrap;
  }
}

/* ---------- Hero ----------
   Full-bleed photo with a dark scrim that deepens toward the left, white
   copy sitting on top (Figma node 268:2). */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 52vw, 720px);
  padding-block: clamp(48px, 5vw, 72px);
  overflow: hidden;
}

/* On very wide screens the 720px cap leaves the banner looking short, so it
   switches to a share of the viewport height instead. min-height (not height)
   so the copy can still push it taller on short, wide windows. */
@media (min-width: 2000px) {
  .hero {
    min-height: 75vh;
  }
}

.hero__bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Figma frames the photo at 127% of the hero width, flush left and vertically
   centred, which crops the right edge and brings the swimmers closer. Below
   the desktop breakpoint that would push the subject off-screen, so the plain
   cover above is kept. */
@media (min-width: 1025px) {
  .hero__bg {
    width: 127.08%;
  }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    -90deg,
    rgba(0, 0, 0, 0.2) 14.091%,
    rgba(0, 0, 0, 0.9) 100%
  );
}
/* The Figma scrim is horizontal because the desktop copy sits in the left
   half. Once the hero stacks full-width the right-hand text falls on bare
   photo, so below the desktop breakpoint it becomes an even vertical wash. */
@media (max-width: 1024px) {
  .hero::after {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.72) 100%
    );
  }
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  padding-inline: var(--edge);
}

/* Rating row — no pill on the photo, just the mark and the copy */
.hero__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  filter: drop-shadow(0 12px 8px rgba(16, 24, 40, 0.08))
    drop-shadow(0 4px 3px rgba(16, 24, 40, 0.03));
}

.hero__rating img {
  width: 22px;
  height: 22px;
}

.hero__rating-score {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.16px;
  color: var(--white);
}

.hero__rating-divider {
  width: 1px;
  height: 21px;
  background: #ecf2f0;
}

.hero__rating-text {
  font-family: var(--font-display);
  font-size: clamp(12px, 0.9vw, 16px);
  font-weight: 600;
  letter-spacing: 0.16px;
  color: var(--on-dark);
}

.hero__main {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 608px;
}

.hero__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 1.8vw, 30px);
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero__text h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--white);
}

.hero__subtitle {
  font-family: var(--font-display);
  font-size: var(--fs-hero-sub);
  font-weight: 600;
  line-height: 1.5;
  color: var(--on-dark);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px clamp(16px, 1.6vw, 26px);
}

.hero__trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.16px;
  color: var(--on-dark);
  white-space: nowrap;
}

.hero__trust img {
  width: 24px;
  height: 24px;
}

/* ---------- About ---------- */

.about {
  padding: clamp(32px, 7.5vw, 80px) 0;
}

.about__row {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6.2vw, 107px);
}

.about__collage {
  width: 100%;
  max-width: 502px;
  height: auto;
  min-width: 0;
}

.about__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 631px;
  min-width: 0;
}

.about__quote {
  width: 100%;
  font-size: var(--fs-body-lg);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

.about__body {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--text);
}

.about__body strong {
  font-weight: 700;
}

@media (max-width: 1024px) {
  .about__row {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 48px;
  }

  .about__collage {
    align-self: center;
  }
}

/* ---------- Our Programs ---------- */

.programs {
  padding: clamp(48px, 4vw, 70px) 0 var(--space-section);
  background: var(--surface-band);
}

.programs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 35px);
  margin-top: var(--space-head);
}

.program-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 24px 28px;
  border: 1px solid var(--card-border);
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--card-shadow);
  text-align: center;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.program-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 24px -8px rgba(16, 24, 40, 0.08);
}

.program-card > img {
  width: 182px;
  height: auto;
}

.program-card h3 {
  margin-top: 25px;
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 700;
  letter-spacing: 0.24px;
  color: var(--ink);
}

.program-card p {
  width: 100%;
  max-width: 341px;
  margin-top: 12px;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--text);
}

.program-card .link-more {
  margin-top: auto;
  padding-top: 24px;
}

.programs__cta {
  margin-top: clamp(36px, 3.5vw, 60px);
  text-align: center;
}

@media (max-width: 1024px) {
  .programs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .programs__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Our Pools ---------- */

.pools {
  padding-top: var(--space-section);
}

/* Slick carousel — 4 up on desktop, peeking next card on tablet/mobile.
   Gutters come from .pools__slide padding so Slick can own the widths. */
.pools__slider {
  position: relative;
  margin-top: var(--space-head);
  margin-inline: calc(var(--pool-gutter) / -2);
}

.pools__slide {
  padding-inline: calc(var(--pool-gutter) / 2);
}

/* Layout before Slick boots, and if JS never runs at all */
.pools__slider:not(.slick-initialized) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Equal-height cards regardless of address length */
.pools__slider .slick-track {
  display: flex;
}

.pools__slider.slick-initialized .slick-slide {
  display: flex;
  height: auto;
}

.pools__slider .pool-card {
  width: 100%;
}

/* Arrows are only rendered when there are more pools than fit (desktop only) */
.pools__arrow {
  position: absolute;
  top: 89px; /* vertical centre of the 178px media strip */
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff url("../images/arrow-prev.svg") center / 26px 26px no-repeat;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.16);
  font-size: 0;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.pools__arrow:hover {
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.24);
}

.pools__arrow--prev {
  left: calc(var(--pool-gutter) / 2 + 8px);
  transform: translateY(-50%);
}

.pools__arrow--next {
  right: calc(var(--pool-gutter) / 2 + 8px);
  transform: translateY(-50%) scaleX(-1);
}

.pools__arrow.slick-disabled {
  opacity: 0.35;
  cursor: default;
}

.pool-card {
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.015) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  overflow: hidden;
  text-align: center;
  padding-bottom: 28px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.pool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 24px -8px rgba(16, 24, 40, 0.08);
}

.pool-card__media {
  position: relative;
  height: 178px;
  margin: -2px -2px 0;
}

.pool-card__media > img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  -webkit-mask-image: url("../images/pool-mask.svg");
  mask-image: url("../images/pool-mask.svg");
  -webkit-mask-size: 100% 171px;
  mask-size: 100% 171px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.pool-card__badge {
  position: absolute;
  left: 18px;
  top: 128px;
  padding: 6px 16px;
  border-radius: 50px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.48px;
  text-transform: uppercase;
}

.pool-card h3 {
  margin-top: 11px;
  padding-inline: 16px;
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 700;
  letter-spacing: 0.24px;
  color: var(--ink);
}

.pool-card__address {
  margin-top: 12px;
  padding-inline: 16px;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--text);
}

.pool-card .link-more {
  margin-top: 18px;
}

@media (max-width: 1024px) {
  .pools__slider:not(.slick-initialized) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .pools__slider:not(.slick-initialized) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- CA Stingrays ---------- */

.stingrays {
  margin-top: var(--space-section);
}

.stingrays__wave {
  display: block;
  width: 100%;
  height: clamp(36px, 5.2vw, 90px);
  object-fit: cover;
  transform: translateY(1px);
}

.stingrays__wave--bottom {
  transform: rotate(180deg) translateY(1px);
}

.stingrays__body {
  background: var(--band);
}

.stingrays__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 60px);
  min-height: 558px;
  padding-block: clamp(40px, 4vw, 60px);
}

.stingrays__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 1.9vw, 32px);
  width: 100%;
  max-width: 608px;
  min-width: 0;
}

.stingrays .section-title {
  max-width: 475px;
}

.stingrays__content > p {
  margin-top: calc(
    -1 * clamp(24px, 1.9vw, 32px) + 16px
  ); /* content gap minus 16px head-to-copy */
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--text);
}

.stingrays__collage {
  width: 100%;
  max-width: 503px;
  height: auto;
  min-width: 0;
}

@media (max-width: 1024px) {
  .stingrays__inner {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding-block: clamp(48px, 8vw, 64px);
  }

  .stingrays__collage {
    align-self: center;
  }
}

/* ---------- Testimonials ---------- */

.testimonials {
  padding-top: var(--space-section);
}

.testimonials__carousel {
  position: relative;
  margin-top: var(--space-head);
}

.testimonials__row {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.testimonial-card {
  flex: 0 1 390px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--card-border);
  border-radius: 30px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.015) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  box-shadow: var(--card-shadow);
}

.testimonial-card__top {
  display: flex;
  align-items: flex-start;
}

.testimonial-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-card__who {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 3px 0 0 20px;
}

.testimonial-card__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  color: var(--ink);
}

.testimonial-card__date {
  font-size: 14px;
  color: var(--text);
  opacity: 0.9;
}

.testimonial-card__google {
  width: 30px;
  height: 30px;
  margin-left: auto;
}

.testimonial-card__stars {
  width: 128px;
  height: 24px;
  margin-top: 16px;
}

.testimonial-card__text {
  width: 100%;
  margin-top: 12px;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--text);
}

.testimonials__arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.testimonials__arrow img {
  width: 40px;
  height: 40px;
}

.testimonials__arrow--prev {
  left: -40px;
}

.testimonials__arrow--next {
  right: -36px;
}

.testimonials__arrow--next img {
  transform: scaleX(-1);
}
.testimonials__widget .rpi-slide .grw-review-inner.grw-backgnd {
  border: 1px solid var(--card-border);
  background: var(
    --grad,
    linear-gradient(180deg, rgba(0, 0, 0, 0.015) 0%, rgba(0, 0, 0, 0) 100%)
  ) !important;
  box-shadow: 0 8px 8px -4px rgba(16, 24, 40, 0.03);
}

.testimonials__widget
  .rpi-slide
  .grw-review-inner.grw-backgnd
  a.wp-google-name {
  color: var(--ink) !important;
}

@media (min-width: 1330px) {
  .testimonials__arrow {
    display: block;
  }
}

/* Under 1280px the row becomes a swipeable, snap-scrolling strip */
@media (max-width: 1279.98px) {
  .testimonials__row {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 16px;
  }

  .testimonial-card {
    flex: 0 0 min(390px, 86vw);
    scroll-snap-align: center;
  }
}

/* ---------- CTA ---------- */

.cta {
  margin-top: var(--space-section);
}

.cta__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-height: 334px;
  padding: clamp(40px, 4vw, 70px) clamp(20px, 3vw, 40px);
  border-radius: clamp(28px, 3vw, 50px);
  background: radial-gradient(
    90% 140% at 60% 85%,
    #454545 0%,
    #1c1c1c 55%,
    #060606 100%
  );
}

.cta__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: #fff;
}

.cta__text h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.cta__text p {
  font-family: var(--font-display);
  font-size: clamp(16px, 0.5vw + 13px, 20px);
  font-weight: 500;
  line-height: 1.5;
}

.cta .btn-row {
  justify-content: center;
}
@media screen and (max-width: 640px) {
  .cta__box a.btn {
    min-width: 240px;
  }
}
/* ---------- Footer ---------- */

.site-footer {
  margin-top: clamp(56px, 5.8vw, 100px);
  padding: clamp(56px, 5.8vw, 100px) 0 32px;
  background: var(--ink);
  color: #fff;
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.97fr) minmax(
      0,
      0.98fr
    ) minmax(0, 1.08fr);
  align-items: start;
}

.footer__logo {
  width: 100%;
  max-width: 254px;
  height: auto;
}

.footer__col--brand > p {
  width: 100%;
  max-width: 357px;
  margin-top: 30px;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  opacity: 0.9;
}

.footer__social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
}

.footer__social img {
  width: 35px;
  height: 35px;
}

.footer__col h3 {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 600;
  line-height: 1.3;
  text-transform: capitalize;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 30px;
}

.footer__col ul a {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: 500;
  opacity: 0.9;
  white-space: nowrap;
  transition:
    opacity 0.2s ease,
    color 0.2s ease;
}

.footer__col ul a:hover {
  opacity: 1;
  color: var(--accent);
}

.footer__card {
  width: 100%;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 30px;
  background: var(--dark-card);
  box-shadow: var(--card-shadow);
}

.footer__card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 600;
  line-height: 1.3;
  text-transform: capitalize;
}

.footer__card p {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.9;
}

.footer__card .btn {
  margin-top: 24px;
}

.footer__maps {
  margin-top: clamp(40px, 3.5vw, 60px);
}

.footer__maps-title {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 600;
  line-height: 1.3;
  text-transform: capitalize;
}

.footer__maps-sub {
  margin-top: 12px;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  opacity: 0.9;
}

.footer__maps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.9vw, 24px);
  margin-top: clamp(28px, 2.3vw, 40px);
}

.map-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 30px;
  background: var(--dark-card);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.map-card__map {
  width: calc(100% + 2px);
  max-width: none;
  height: 150px;
  margin: -1px -1px 0;
  object-fit: cover;
  object-position: top;
}

.map-card__body {
  padding: 20px 20px 24px;
}

.map-card__body h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.18px;
}

.map-card__body p {
  margin-top: 5px;
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.9;
}

.map-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.16px;
  color: var(--accent);
}

.map-card__link img {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.map-card__link:hover img {
  transform: translateX(4px);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(32px, 2.9vw, 50px);
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: "Noto Sans", var(--font-body);
  font-size: 16px;
  line-height: 24px;
}

.footer__bottom-links {
  display: flex;
  gap: 16px;
}

@media (max-width: 1024px) {
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 32px;
  }

  .footer__maps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__maps-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- WordPress integration ---------- */

/* wp_nav_menu outputs <ul><li>. The top-level list is the flex row and each of
   its items is the positioning context for a dropdown. .site-nav itself stays a
   flex row because splashfit_nav_fallback() prints bare <a>s with no list. */
.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav > ul {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-nav > ul > li {
  position: relative;
}

/* Chevron makes the dropdown discoverable */
.site-nav .menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.site-nav .menu-item-has-children > a::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url("../images/icon-chevron-down.svg") center / contain no-repeat;
  transition: transform 0.2s ease;
}

.site-nav .menu-item-has-children:hover > a::after,
.site-nav .menu-item-has-children:focus-within > a::after,
.site-nav .menu-item-has-children.is-open > a::after {
  transform: rotate(180deg);
}

/* Panel deliberately matches .lang-switch__menu, the header's other dropdown */
.site-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: -12px;
  z-index: 200;
  min-width: 240px;
  margin-top: 14px;
  padding: 8px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(16, 24, 40, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
}

/* Bridges the gap between the link and the panel so hover survives the move */
.site-nav .sub-menu::before {
  content: "";
  position: absolute;
  top: -16px;
  right: 0;
  left: 0;
  height: 16px;
}

.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu,
.site-nav .menu-item-has-children.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav .sub-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.site-nav .sub-menu a:hover {
  background: var(--pill-bg);
  color: var(--ink);
}

/* Inside the slide-down panel there is no hover to rely on, and focus would
   arrive only after the link had already been followed — so the dropdown is
   simply expanded in place. Must sit after the base rules above to win. */
@media (max-width: 1279.98px) {
  .site-nav > ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .site-nav .menu-item-has-children > a::after {
    display: none;
  }

  .site-nav .sub-menu {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    margin: 12px 0 0;
    padding: 0 0 0 14px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .site-nav .sub-menu::before {
    content: none;
  }

  .site-nav .sub-menu a {
    padding: 0;
    /* Lighter than the parent item so the nesting reads at a glance */
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
  }

  .site-nav .sub-menu a:hover {
    background: none;
    color: var(--white);
  }
}

/* Keep the sticky header below the WP admin bar when logged in */
body.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* ---------- Preloader ---------- */

html.is-loading {
  overflow: hidden;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 999999; /* above the WP admin bar */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition:
    opacity 0.5s ease,
    visibility 0.5s;
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.preloader__img {
  width: 100px;
  height: auto;
  animation: preloader-bob 1.4s ease-in-out infinite;
}

.preloader__count {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.3vw, 24px);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

@keyframes preloader-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Footer maps are live Google Maps embeds (iframes), not images */
iframe.map-card__map {
  display: block;
  border: 0;
}

/* ---------- Language switcher dropdown ---------- */

.lang-btn__chevron {
  transition: transform 0.25s ease;
}

.lang-switch {
  position: relative;
}

.lang-switch.is-open .lang-btn__chevron {
  transform: rotate(180deg);
}

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  min-width: 160px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(16, 24, 40, 0.12);
}

.lang-switch__menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.lang-switch__menu button:hover {
  background: var(--surface);
  color: var(--accent);
}

.lang-switch__menu button.is-active {
  color: var(--accent);
}

/* Hide the GTranslate plugin's floating widget — our .lang-switch pill
   drives its (still present) <select> instead. Do not remove the widget
   in the plugin settings; it must stay in the DOM. */
.gtranslate_wrapper,
.gt_switcher_wrapper {
  display: none !important;
}

/* Google Reviews widget (GRW plugin, [grw id=24454]) replaces the manual slider */
.testimonials__widget {
  margin-top: calc(
    var(--space-head) - 20px
  ); /* adjust for GRW's built-in top margin */
}

/* Rating pill links to #testimonials */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.testimonials {
  scroll-margin-top: 100px; /* clear the sticky header on #testimonials jumps */
}

/* ==========================================================================
   INTERNAL PAGES — page header + content blocks (programs.html)

   Built from the same tokens as the homepage: 50px pill radii, 30px card
   radii, --card-shadow, the fluid type scale and the 1024/640 breakpoints.
   ========================================================================== */

/* ---------- Page header (page title band) ---------- */

.page-hero {
  position: relative;
  /* Same artwork as the homepage hero, stretched to the band height — the
     SVG is preserveAspectRatio="none", so the wave still lands on the edge. */
  /* background: url("../images/hero-bg.svg") center bottom /  100% no-repeat;
  padding: clamp(36px, 4.4vw, 70px) 0 clamp(56px, 6.2vw, 100px); */
}

.page-hero {
  position: relative;
  background: url(../images/hero-bg.svg) center bottom / 100% no-repeat;
  padding: clamp(40px, 6.2vw, 70px) 0 clamp(40px, 6.2vw, 70px);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.015) 100.86%
  );
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1024px;
  margin-inline: auto;
  text-align: center;
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.page-hero__sub {
  width: 100%;
  max-width: 820px;
  margin-top: -6px;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--text);
}

.page-hero .btn-row {
  justify-content: center;
  margin-top: 8px;
}

.page-hero__bubble {
  position: absolute;
  right: clamp(8px, 1.5vw, 30px);
  bottom: clamp(20px, 3vw, 48px);
  width: clamp(52px, 4.4vw, 76px);
}

/* ---------- Page hero: photo variant ----------
   Location pages keep the centred Programs-page layout but drop the venue
   photo in behind it, so the copy flips to white over a flat dark scrim. */

.page-hero--photo {
  display: flex;
  align-items: center;
  min-height: clamp(340px, 32vw, 480px);
  padding-block: clamp(48px, 6.2vw, 80px);
  background: var(--ink); /* holds the colour until the photo paints */
  overflow: hidden;
}

.page-hero__bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.page-hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
}

.page-hero--photo > .container {
  position: relative;
  z-index: 2;
}

.page-hero--photo h1 {
  color: var(--white);
}

.page-hero--photo .page-hero__sub {
  color: var(--on-dark);
}

.page-hero--photo .breadcrumb {
  color: var(--on-dark);
}

.page-hero--photo .breadcrumb a:hover,
.page-hero--photo .breadcrumb [aria-current] {
  color: var(--white);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14px;
  color: var(--text-muted);
}

.breadcrumb a {
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb [aria-current] {
  color: var(--accent);
}

.breadcrumb__sep {
  opacity: 0.5;
}

/* Any section after a jump nav has to clear the header AND the sticky nav,
   not just the header. One rule instead of a per-section value, because the
   per-section ones had drifted apart (.steps 90px, .testimonials 100px,
   .gallery none) and anything under ~146px lands behind the nav. It also
   beats those rules on specificity, so their values stay correct on pages
   with no jump nav — the homepage testimonials jump, for one. The JS that
   lights the active pill reads this same value back off the element. */
.jump-nav ~ section {
  scroll-margin-top: 150px;
}

/* ---------- Jump nav (anchor strip under the page header) ---------- */

.jump-nav {
  position: sticky;
  /* Matches .site-header.is-fixed height — by the time this sticks, the
     header has already shrunk. */
  top: clamp(62px, 4.7vw, 80px);
  z-index: 90;
  background: #fff;
  border-bottom: 1px solid var(--card-border);
}

.jump-nav__row {
  display: flex;
  justify-content: center;
  gap: 10px;
  overflow-x: auto;
  padding-block: 14px;
  scrollbar-width: none;
}

.jump-nav__row::-webkit-scrollbar {
  display: none;
}

.jump-nav a {
  flex: 0 0 auto;
  padding: 8px 18px;
  border-radius: 50px;
  background: var(--pill-bg);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.15px;
  color: var(--text);
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.jump-nav a:hover,
.jump-nav a.is-active {
  background: var(--ink);
  color: #fff;
}

/* ---------- Program block (one per program family) ---------- */

.program-block {
  padding-top: var(--space-section);
  /* Clears the sticky header + jump nav on anchor jumps. */
  scroll-margin-top: 150px;
}

.program-block.mb-5 , .mb-5 {
  margin-bottom: var(--space-section);
}

.program-block.pb-5 {
  padding-bottom: var(--space-section);
}

.program-block.pt-0 {
  padding-top: 0 !important;
}


.mw-100 {
  max-width: 100%;
}

.program-block--alt {
  padding-bottom: var(--space-section);
  background: var(--surface-band);
}

.program-block--alt.bg-white {
  background: var(--white);
}
.white-transparent-grad {
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0%,
    var(--surface-grad-bottom) 100%
  );
}

.program-block__head {
  display: flex;
  align-items: center;
  gap: clamp(32px, 4.4vw, 76px);
}

.program-block--reverse .program-block__head {
  flex-direction: row-reverse;
}

.program-block__art {
  width: 100%;
  max-width: clamp(190px, 20vw, 280px);
  height: auto;
  flex-shrink: 0;
}

.program-block__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.program-block__copy > p {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--text);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.age-chip {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 50px;
  background: var(--text);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  white-space: nowrap;
}

.ml-auto{
  margin-left: auto;
}

/* ---------- Level / course cards ---------- */

.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: var(--space-head);
}

.level-card {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--card-shadow);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.level-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 24px -8px rgba(16, 24, 40, 0.08);
}

.level-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.level-card__code {
  padding: 6px 16px;
  border-radius: 50px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  white-space: nowrap;
}

.level-card__stage {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14px;
  color: var(--text-muted);
}

.level-card h3 {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 700;
  letter-spacing: 0.24px;
  color: var(--ink);
}

.level-card__desc {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}

.level-card__prereq {
  margin-top: 16px;
  padding: 12px 15px;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--pill-bg);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

.level-card__prereq strong {
  font-weight: 700;
}

.level-card__objectives {
  margin-top: 22px;
}

.level-card__objectives h4 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--accent);
}

.level-card__objectives ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-block: 14px;
}

.level-card__objectives li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
}

.level-card__objectives li > img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Distance / qualifier badge, pushed to the right of an objective row. */
.yds {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 50px;
  background: var(--pill-bg);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.level-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  /* margin-top:auto keeps the ratio row on the bottom edge, so footers line
     up across cards of different heights in the same grid row */
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--card-border);
}

.ratio-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 50px;
  background: var(--pill-bg);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14px;
  color: var(--text-muted);
}

.ratio-pill strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

/* Single full-width card (Team Prep) — objectives flow into columns. */
.level-card--wide .level-card__objectives ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px 28px;
}

.level-card--wide .level-card__desc,
.level-card--wide .level-card__prereq {
  max-width: 900px;
}

/* ---------- Callout (What's next? / Lap swimming / fees) ---------- */

.callout {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(28px, 2.6vw, 40px);
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--card-border);
  border-radius: 30px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.6) 100%
  );
  box-shadow: var(--card-shadow);
}

.callout__label {
  flex-shrink: 0;
  padding: 10px 16px;
  border-radius: 50px;
  background: var(--pill-bg);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  white-space: nowrap;
}

.callout p {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--text);
}

.callout p strong {
  font-weight: 700;
  color: var(--ink);
}

/* ---------- Stingrays band when the section above it is tinted ----------
   The wave graphics are transparent SVGs, so the top wave needs the previous
   section's background behind it or a white seam shows. */

.stingrays--from-alt .stingrays__wave:not(.stingrays__wave--bottom) {
  background: var(--surface-grad-bottom);
}

/* ---------- "Not sure where to start?" steps ---------- */

.steps {
  padding-top: var(--space-section);
  scroll-margin-top: 90px; /* clears the sticky header on anchor jumps */
}

.steps__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: var(--space-head);
}

.step-card {
  padding: 34px 28px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--card-shadow);
  text-align: center;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 24px -8px rgba(16, 24, 40, 0.08);
}

.step-card__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--pill-bg);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
}

.step-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 700;
  letter-spacing: 0.24px;
  color: var(--ink);
}

.step-card p {
  margin-top: 12px;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--text);
}

/* .step-card is centre-aligned, so the inline-flex link needs an auto
   margin to sit centred rather than hugging the left edge. */
.step-card .link-more {
  margin-top: 18px;
  margin-inline: auto;
}

.steps__cta {
  margin-top: clamp(32px, 3vw, 50px);
  text-align: center;
}

/* Current-page marker in the main nav. */
.site-nav a.is-current {
  color: var(--white);
}

/* ---------- Internal page responsive ---------- */

@media (max-width: 1024px) {
  .program-block__head,
  .program-block--reverse .program-block__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .program-block__art {
    align-self: center;
  }

  .callout {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .steps__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .level-card {
    padding: 26px 22px;
  }
  .jump-nav a {
    font-size: 12px;
  }
  .jump-nav__row {
    justify-content: flex-start;
  }
}

/* ---------- Location pages ----------
   Built on the Programs-page components; only the facility stats, the pricing
   cards and the two-column rules list are new here. */

/* At-a-glance facility stats */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.9vw, 24px);
  margin-top: var(--space-head);
}

.fact {
  padding: clamp(22px, 2vw, 28px) clamp(16px, 1.6vw, 22px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  background: var(--white);
  box-shadow: var(--card-shadow);
  text-align: center;
}

.fact__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 700;
  letter-spacing: 0.24px;
  color: var(--ink);
}

.fact__label {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
}

/* Pricing */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: var(--space-head);
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.4vw, 34px) clamp(24px, 2.2vw, 32px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  background: var(--white);
  box-shadow: var(--card-shadow);
}

.price-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 700;
  letter-spacing: 0.24px;
  color: var(--ink);
}

.price-card__note {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}

.price-card__list {
  margin-top: 18px;
}

.price-card__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--card-border);
  font-size: var(--fs-body-lg);
  color: var(--text);
}

.price-card__amount {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

/* Worked billing examples inside the callout */
.price-examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.price-examples li {
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--pill-bg);
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
}

.price-examples strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
}

/* The facility rules list is long, so it runs in two columns */
.level-card__objectives.rule-columns ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px clamp(20px, 2.4vw, 32px);
}

.rule-columns li {
  align-items: flex-start;
}

.rule-columns li img {
  margin-top: 2px;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .level-card__objectives.rule-columns ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .price-examples {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A --wide card flows objectives into auto-fit columns; the swim test is a
   sequence, so it stays in one column. */
.level-card__objectives.rule-steps ul {
  grid-template-columns: minmax(0, 1fr);
}

/* Seasonal-session badge above the price grid (Manhattan Park) */
.price-season {
  display: flex;
  justify-content: center;
  margin-top: clamp(20px, 2vw, 28px);
}

/* ---------- FAQ page ----------
   Simple accordion for the dedicated FAQ template, built from the existing
   card language and token set used on inner pages. */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 980px;
  margin: var(--space-head) auto 0 ;
}

.faq-item {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  background: var(--white);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2.3vw, 32px);
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(18px, 0.5vw + 16px, 24px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  cursor: pointer;
}

.faq-question__icon {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pill-bg);
}

.faq-question__icon::before,
.faq-question__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.faq-question__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.is-open .faq-question__icon::after {
  opacity: 0;
}

.faq-answer {
  padding: clamp(20px, 2.3vw, 32px) clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--card-border);
}

.faq-answer p,
.faq-answer li {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--text);
}

.faq-answer p + p,
.faq-answer ul,
.faq-answer ul + p {
  margin-top: 14px;
}

.faq-answer ul {
  padding-left: 20px;
  list-style: disc;
}

.faq-answer li + li {
  margin-top: 8px;
}

@media (max-width: 640px) {
  .faq-question {
    padding: 20px 20px 18px;
    font-size: 18px;
  }

  .faq-answer {
    padding: 0 20px 20px;
  }
}

/* ---------- Coaches page ----------
   Dedicated people cards for the Meet Our Coaches page, following the same
   rounded-card language as the program, pool, and pricing sections. */

.coach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: var(--space-head);
}

.coach-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  background: var(--white);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.coach-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 24px -8px rgba(16, 24, 40, 0.08);
}

.coach-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.02) 0%,
    rgba(0, 0, 0, 0.08) 100%
  );
  overflow: hidden;
}

.coach-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.coach-card--placeholder .coach-card__photo {
  object-fit: contain;
  padding: 24px;
}

.coach-card__status {
  position: absolute;
  left: 20px;
  top: 20px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 50px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.72px;
  text-transform: uppercase;
}

.coach-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2vw, 30px);
}

.coach-card__body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 700;
  letter-spacing: 0.24px;
  color: var(--ink);
}

.coach-card__body p {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--text);
}

.coach-card__meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.coach-card__meta p strong {
  color: var(--ink);
}

/* ---------- Split row (text 60% / media 40%) ----------
   <div class="split-row [--reverse] [--top]">
     <div class="split-row__content"> …section-heading + copy… </div>
     <div class="split-row__media"><img …></div>
   </div>
------------------------------------------------------- */

.split-row {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  align-items: center;
  gap: clamp(32px, 4.4vw, 72px);
}

/* Media first, but the copy keeps the 60% track — otherwise reversing hands
   the wide column to the image and squeezes the text into 40%. */
.split-row--reverse {
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
}

.split-row--reverse .split-row__media {
  order: -1;
}

.split-row--top {
  align-items: start;
}

.split-row__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}

/* The 60% column is already the measure, so let the subtitle fill it. */
.split-row__content .section-subtitle {
  max-width: 100%;
}

.split-row__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.split-row__copy p {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--text);
}

.split-row__media {
  min-width: 0;
}

.split-row__media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1024px) {
  .split-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .split-row--reverse .split-row__media {
    order: 0;
  }

  .split-row__media {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }
}

/* Certification cards reuse .facts; the icon sits above the value. */
.fact__icon {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 14px;
}

.facts--certs .fact__value {
  font-size: var(--fs-card-title);
  line-height: 1.25;
}

/* ---------- Location gallery (Slick, centre mode) ----------
   Full-bleed carousel: the active photo sits at ~48vw with the neighbours
   scaled to 0.83 and clipped by the viewport edges. The slider deliberately
   lives OUTSIDE .container so .slick-list can span the full width; only the
   heading is constrained.
------------------------------------------------------------- */

.gallery {
  padding-block: var(--space-section);
  /* Side slides bleed past the viewport on purpose. */
  overflow: hidden;
}

.gallery__slider {
  position: relative;
  margin-top: var(--space-head);
}

/* Layout before Slick boots, and if JS never runs at all. */
.gallery__slider:not(.slick-initialized) .gallery__slide {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}

.gallery__slider:not(.slick-initialized) .gallery__slide + .gallery__slide {
  display: none;
}

.gallery__figure {
  aspect-ratio: 820 / 512;
  overflow: hidden;
  border-radius: 24px;
  /* Neighbours are recessed; .slick-center scales back to full size. */
  transform: scale(0.83);
  transition: transform 0.5s ease;
}

.gallery__slider .slick-center .gallery__figure {
  transform: scale(1);
}
.gallery__slider .gallery__slide:not(.slick-active.slick-center) {
    opacity: 0.6;
}
.gallery__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6)
    url("../images/left-arrow.svg") center / 50px 50px no-repeat;
  font-size: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.gallery__arrow:hover {
  background-color: rgba(0, 0, 0, 0.85);
}

.gallery__arrow--prev {
  left: clamp(16px, 3.5vw, 60px);
  transform: translateY(-50%);
}

.gallery__arrow--next {
  right: clamp(16px, 3.5vw, 60px);
  transform: translateY(-50%) scaleX(-1);
}

/* Touch devices get swipe only — no arrows, whatever the screen width.
   (hover:none)+(pointer:coarse) is the phone/tablet test; it deliberately
   spares touchscreen laptops, which still have a real mouse. */
@media (hover: none) and (pointer: coarse) {
  .gallery__arrow {
    display: none;
  }
}

@media (max-width: 640px) {
  .gallery__figure {
    border-radius: 18px;
    /* No recess on phones: the scale would eat the peek that centerPadding
       creates, leaving the neighbour entirely off-screen. */
    transform: none;
  }
}

/* ---------- Pricing: featured plan ---------- */

.price-card--featured {
  position: relative;
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 18px 32px -12px rgba(25, 118, 210, 0.28);
}

/* Only lift the card once the grid is genuinely three across; below that the
   offset just breaks the stack. */
@media (min-width: 1025px) {
  .price-card--featured {
    transform: translateY(-14px);
  }
}

.price-card__tag {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 16px;
  border-radius: 50px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Pricing: billing calendar ----------
   The calendar explains why the monthly total moves. Selecting one of the
   worked examples lights up that weekday so the lesson count is countable.
------------------------------------------------- */

.billing {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  margin-top: var(--space-head);
}

@media (max-width: 900px) {
  .billing {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cal {
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--card-border);
  border-radius: 30px;
  background: var(--white);
  box-shadow: var(--card-shadow);
}

.cal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.cal__head h3 {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 700;
  color: var(--ink);
}

.cal__head span {
  font-size: 13px;
  color: var(--text-muted);
}

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.cal__dow {
  padding: 6px 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cal__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  aspect-ratio: 1;
  border-radius: 10px;
  font-size: 14px;
  color: var(--text);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.cal__day b {
  font-weight: 600;
}

.cal__day small {
  font-size: 9px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cal__day--pad {
  visibility: hidden;
}

.cal__day--closed b {
  text-decoration: line-through;
}

.cal__day.is-lit {
  background: var(--accent);
  color: #fff;
}

.cal__day.is-skipped {
  background: var(--pill-bg);
}

.cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.cal__legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cal__key {
  width: 14px;
  height: 14px;
  border-radius: 5px;
  background: var(--pill-bg);
}

.cal__key--lesson {
  background: var(--accent);
}

.bill-formula {
  margin-bottom: 14px;
  font-size: var(--fs-body-lg);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

.bill-lead {
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}

.bill-examples {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bill-example {
  display: block;
  width: 100%;
  padding: clamp(16px, 1.6vw, 20px) clamp(18px, 1.8vw, 22px);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  background: var(--white);
  box-shadow: var(--card-shadow);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.bill-example:hover {
  border-color: rgba(25, 118, 210, 0.45);
}

.bill-example.is-active {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    var(--card-shadow);
}

.bill-example__day {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bill-example.is-active .bill-example__day {
  color: var(--accent);
}

.bill-example__sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 6px;
}

.bill-example__math {
  font-size: var(--fs-body-lg);
  color: var(--text);
}

.bill-example__total {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.bill-example.is-active .bill-example__total {
  color: var(--accent);
}

.bill-example__note {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ---------- Pricing: policy notes grid ---------- */

.note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(28px, 2.6vw, 40px);
}

@media (max-width: 700px) {
  .note-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.note-item {
  display: flex;
  gap: 16px;
  padding: clamp(20px, 2vw, 26px);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  background: var(--white);
  box-shadow: var(--card-shadow);
}

.note-item img {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 2px;
}

.note-item h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--ink);
}

.note-item p {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}

/* ---------- Embedded third-party form (JotForm) ----------
   The vendor script sets the iframe height inline and keeps growing it as the
   user moves through the form, so nothing here may constrain height.
----------------------------------------------------------- */

.form-embed {
  margin-top: var(--space-head);
  padding: clamp(10px, 1.2vw, 18px);
  border: 1px solid var(--card-border);
  border-radius: 30px;
  background: var(--white);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.form-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}

.form-embed__fallback {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  color: var(--text-muted);
}

.form-embed__fallback a {
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Tagline line under a split-row's copy ---------- */

.lead-line {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--accent);
}

/* A btn-row that centres itself inside a centred block. */
.btn-row--center {
  justify-content: center;
}

/* ---------- Full-bleed photo band ----------
   A statement strip: photo behind, dark scrim over it, centred white copy.
   Same construction as .page-hero--photo but sized for mid-page.
--------------------------------------------- */

.photo-band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(320px, 34vw, 460px);
  padding-block: clamp(48px, 5vw, 80px);
  overflow: hidden;
}

.photo-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.50) 0%,
    rgba(0, 0, 0, 0.60) 100%
  );
}

.photo-band__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.photo-band__inner h2 {
  width: 100%;
  max-width: 760px;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
}

.photo-band__inner p {
  width: 100%;
  max-width: 620px;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--on-dark);
}

.photo-band__inner .btn {
  margin-top: 10px;
}

/* ---------- Partner logo marquee ----------
   Logos arrive as mixed shapes and backgrounds, so each sits in a fixed-size
   white tile and is contained rather than cropped. The track is rendered
   twice and slides by exactly -50%, so the loop restarts on an identical
   frame and the seam is invisible.

   Spacing sits on the items as margin rather than the flex gap on purpose:
   with gap, 20 items carry 19 internal gaps, so -50% lands half a gap short
   of one full set and the loop visibly stutters every pass. As a margin each
   item owns its own trailing space and the halves are exactly equal.
-------------------------------------------- */
.level-grid .pool-card{
  background-color: var(--white);
}

.partners-marquee {
  margin-top: var(--space-head);
  overflow: hidden;
  /* Fade the logos in and out at the edges rather than cutting them dead. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.partners {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: partners-scroll 35s linear infinite;
}

/* Let people stop the strip to read a logo, by pointer or by keyboard. */
.partners-marquee:hover .partners,
.partners-marquee:focus-within .partners {
  animation-play-state: paused;
}

@keyframes partners-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.partners__item {
  display: flex;
  flex: 0 0 clamp(150px, 15vw, 190px);
  align-items: center;
  justify-content: center;
  height: clamp(96px, 9vw, 124px);
  margin-inline-end: clamp(14px, 1.6vw, 22px);
  padding: clamp(14px, 1.4vw, 20px);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  background: var(--white);
  box-shadow: var(--card-shadow);
}

.partners__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* No motion: fall back to a strip the reader scrolls themselves. */
@media (prefers-reduced-motion: reduce) {
  .partners {
    animation: none;
  }

  .partners-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- Pool rules page ---------- */

/* Three stats sit in three columns rather than leaving a hole in the four-up. */
.facts--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 700px) {
  .facts--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The live copy separates a rule from its clarification with a pipe. The pipe
   becomes a quieter second line here; no wording is changed. */
.rule-note {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted);
}

.rule-lead {
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}

/* ---------- Document layout (policies, terms, long-form reference) ----------
   A single readable column rather than banded sections: this is material
   people scan for one clause and print, not a marketing page.
------------------------------------------------------------------------------ */

.doc {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}

.doc__block {
  /* Matches .jump-nav ~ section so a jump lands clear of the sticky nav; these
     blocks are divs inside one section, so they need it in their own right. */
  scroll-margin-top: 150px;
}

.doc__block + .doc__block {
  margin-top: clamp(34px, 3.4vw, 52px);
  padding-top: clamp(34px, 3.4vw, 52px);
  border-top: 1px solid var(--card-border);
}

.doc__block h2 {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.doc__block p {
  margin-top: 14px;
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: var(--text);
}

.doc__lead {
  font-weight: 600;
  color: var(--ink);
}

.doc__block .link-more {
  margin-top: 18px;
}

.doc__list {
  margin-top: 22px;
  padding: clamp(20px, 2vw, 26px) clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  background: var(--surface);
}

.doc__list h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--ink);
}

.doc__list ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  list-style: none;
}

.doc__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}

.doc__list li img {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ---------- Contact page ---------- */

.note-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .note-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.note-item a {
  color: var(--accent);
  font-weight: 600;
}

.note-item a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.note-item .link-more {
  margin-top: 12px;
  font-size: 15px;
}

.note-item__aside {
  color: var(--text-muted);
  font-size: 14px;
}

/* Placeholder standing in for a form that has not been built yet. Delete this
   markup when the shortcode goes into the slot in template-contact.php. */
.form-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(220px, 24vw, 320px);
  padding: 24px;
  border: 2px dashed var(--card-border);
  border-radius: 22px;
  background: var(--surface);
}

.form-slot__hint {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Rich text (WordPress editor output) ----------
   Everything page.php renders from the_content(). The editor emits plain
   h2/p/ul/table/blockquote plus wp-block-* wrappers, none of which the rest of
   this stylesheet targets — without these rules that content falls back to
   browser defaults.
------------------------------------------------------------ */

.rte > *:first-child {
  margin-top: 0;
}

.rte h2,
.rte h3,
.rte h4,
.rte h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.rte h2 {
  margin-top: clamp(34px, 3.2vw, 48px);
  font-size: var(--fs-title);
}

.rte h3 {
  margin-top: clamp(26px, 2.6vw, 36px);
  font-size: var(--fs-card-title);
}

.rte h4,
.rte h5 {
  margin-top: 24px;
  font-size: 17px;
}

.rte p,
.rte li {
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: var(--text);
}

.rte p {
  margin-top: 14px;
}

.rte a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rte a:hover {
  color: var(--accent-dark);
}

.rte strong {
  font-weight: 700;
  color: var(--ink);
}

.rte ul,
.rte ol {
  margin-top: 14px;
  padding-left: 22px;
}

.rte ul {
  list-style: disc;
}

.rte ol {
  list-style: decimal;
}

.rte li + li {
  margin-top: 8px;
}

.rte blockquote {
  margin-top: 22px;
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 28px);
  border-left: 3px solid var(--accent);
  border-radius: 0 18px 18px 0;
  background: var(--surface);
}

.rte blockquote p {
  margin-top: 0;
  font-weight: 500;
  color: var(--ink);
}

.rte blockquote p + p {
  margin-top: 12px;
}

.rte img {
  height: auto;
  border-radius: 20px;
}

.rte figure {
  margin-top: 24px;
}

.rte figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--text-muted);
}

.rte hr {
  margin-block: clamp(30px, 3vw, 44px);
  border: 0;
  border-top: 1px solid var(--card-border);
}

/* Tables can carry more columns than the measure allows, so they scroll in
   their own right rather than pushing the page sideways. */
.rte .wp-block-table,
.rte figure.wp-block-table {
  overflow-x: auto;
}

.rte table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 22px;
  font-size: 16px;
}

.rte th,
.rte td {
  padding: 12px 14px;
  border: 1px solid var(--card-border);
  text-align: left;
  line-height: 1.5;
  color: var(--text);
}

.rte th {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
}

/* Editor alignment helpers */
.rte .aligncenter {
  margin-inline: auto;
  text-align: center;
}

.rte .alignright {
  float: right;
  margin: 6px 0 18px 24px;
}

.rte .alignleft {
  float: left;
  margin: 6px 24px 18px 0;
}

.rte .wp-block-image {
  margin-top: 24px;
}

.rte .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.rte .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  border-radius: 50px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.rte .wp-block-button__link:hover {
  background: var(--accent-dark);
  color: #fff;
}

@media (max-width: 640px) {
  .rte .alignleft,
  .rte .alignright {
    float: none;
    margin-inline: 0;
  }
}

/* ---------- Post listings (index, archive, search) ---------- */

.post-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 30px;
  background: var(--white);
  box-shadow: var(--card-shadow);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 24px -8px rgba(16, 24, 40, 0.08);
}

.post-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
}

.post-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(22px, 2.2vw, 30px);
}

.post-card__meta {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.post-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.24px;
  color: var(--ink);
}

.post-card h3 a {
  color: inherit;
}

.post-card h3 a:hover {
  color: var(--accent);
}

.post-card p:not(.post-card__meta) {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
}

/* Pushes the read-more to the bottom so cards of unequal length still line up */
.post-card .link-more {
  margin-top: auto;
  padding-top: 6px;
  font-size: 15px;
}

/* ---------- Pagination (the_posts_pagination) ---------- */

.pagination {
  margin-top: var(--space-head);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 50px;
  background: var(--pill-bg);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.pagination .page-numbers:hover {
  background: var(--ink);
  color: #fff;
}

.pagination .page-numbers.current {
  background: var(--accent);
  color: #fff;
}

.pagination .page-numbers.dots:hover {
  background: var(--pill-bg);
  color: var(--text);
}

.pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Empty state ---------- */

.empty-state {
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  padding: clamp(34px, 3.6vw, 56px) clamp(24px, 2.6vw, 40px);
  border: 1px solid var(--card-border);
  border-radius: 30px;
  background: var(--white);
  box-shadow: var(--card-shadow);
  text-align: center;
}

.empty-state h2 {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 700;
  color: var(--ink);
}

.empty-state p {
  margin-top: 12px;
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--text);
}

.empty-state .btn-row {
  margin-top: 24px;
}

/* ---------- Search field ---------- */

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  max-width: 560px;
}

.search-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Icon-only submit: a circle matching the input height. The visually hidden
   label keeps the button announced as "Search" for screen readers. */
.search-form__submit {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 0;
}

.search-form__submit img {
  width: 22px;
  height: 22px;
}

.search-form__input {
  flex: 1 1 240px;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--card-border);
  border-radius: 50px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
}

.search-form__input::placeholder {
  color: var(--text-muted);
}

.search-form__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* In a photo hero the field sits on the scrim, so it needs its own contrast. */
.search-form--hero {
  margin-top: 6px;
}

.page-hero--photo .search-form__input {
  border-color: rgba(255, 255, 255, 0.35);
}

/* ---------- The Events Calendar (plugin) ----------
   The plugin ships its own design system and its stylesheets load AFTER this
   file, so ordinary overrides would lose. Two things make that a non-issue:

   1. TEC resolves everything through ~225 custom properties defined on :root.
      Redefining them on .tribe-common wins by proximity — a nearer ancestor
      beats :root for custom-property inheritance no matter the source order.
   2. The handful of real property overrides below are specific enough to win
      on their own, so nothing here needs !important.

   Every token that resolved to the plugin's default accent (#334aff) is
   remapped; there are 24 of them, not one, because TEC gives several
   components their own accent token. Its near-black (#141827) is left alone —
   it reads correctly against our palette and remapping 56 tokens for an
   imperceptible shift is not worth the weight.
---------------------------------------------------- */

.tribe-common,
.tribe-events,
.tribe-events-widget {
  --tec-color-icon-focus: var(--accent);
  --tec-color-event-icon-hover: var(--accent);
  --tec-color-accent-primary: var(--accent);
  --tec-color-accent-primary-hover: var(--accent-dark);
  --tec-color-accent-primary-active: var(--accent-dark);
  --tec-color-accent-primary-background: rgba(25, 118, 210, 0.07);
  --tec-color-button-primary: var(--accent);
  --tec-color-button-primary-hover: var(--accent-dark);
  --tec-color-button-primary-active: var(--accent-dark);
  --tec-color-button-primary-background: rgba(25, 118, 210, 0.07);
  --tec-color-link-accent: var(--accent);
  --tec-color-link-accent-hover: var(--accent-dark);
  --tec-color-background-primary-multiday: rgba(25, 118, 210, 0.24);
  --tec-color-background-primary-multiday-hover: rgba(25, 118, 210, 0.34);
  --tec-color-accent-primary-week-event: rgba(25, 118, 210, 0.1);
  --tec-color-accent-primary-week-event-hover: rgba(25, 118, 210, 0.2);
  --tec-color-accent-primary-week-event-featured: rgba(25, 118, 210, 0.04);
  --tec-color-accent-primary-week-event-featured-hover: rgba(25, 118, 210, 0.14);
  --tec-color-accent-primary-background-datepicker: rgba(25, 118, 210, 0.07);
  --tec-form-color-accent-primary: var(--accent);
  --tec-color-background-events-bar-submit-button: var(--accent);
  --tec-color-background-events-bar-submit-button-hover: var(--accent-dark);
  --tec-color-background-events-bar-submit-button-active: var(--accent-dark);
  --tec-color-category-legend-default-1: var(--accent);

  --tec-font-family-sans-serif: var(--font-body);
  --tec-border-radius-default: 10px;
}

/* The plugin renders outside our <main>, so it carries its own section spacing. */
body .tribe-events,
body .tribe-events-single {
  padding-block: clamp(40px, 4.4vw, 72px);
}

.tribe-common [class*="tribe-common-h"] {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn,
.tribe-common button.tribe-common-c-btn,
.tribe-events button.tribe-events-c-search__button {
  border-radius: 50px;
  font-family: var(--font-display);
  font-weight: 700;
}

.tribe-events .tribe-events-c-search__input-control-input,
.tribe-common .tribe-common-form-control-text__input {
  border-radius: 50px;
}

/* ---------- CA Stingrays branding ----------
   That page swaps the club lockup for the team mark in both the header and
   the footer (see splashfit_is_stingrays). The mark is near-square where the
   Splash Fit lockup is wide, so it is sized by height instead of width --
   inheriting .brand__logo's 250px width would make it ~177px tall in a 76px
   header. The scroll-shrink rule is mirrored so both behave the same.
-------------------------------------------- */

.brand__logo--stingrays {
  width: auto;
  height: clamp(48px, 5vw, 60px);
  transition: height 0.3s ease;
}

.site-header.is-fixed .brand__logo--stingrays {
  width: auto;
  height: clamp(38px, 4vw, 50px);
}

.footer__logo--stingrays {
  width: auto;
  max-width: none;
  height: clamp(74px, 7vw, 104px);
}


/* ==========================================================================
   ABOUT US (template-about-us-new.php)

   Built around the client's rewritten copy. Everything reuses the page
   system -- .split-row, .section-heading, .program-block bands, the partner
   marquee, .cta -- and only adds what that copy needed: a statement opener
   (the story has no heading of its own), the program tiles, the dark impact
   band and the mission block.
   ========================================================================== */

/* The tagline carries the page, so it reads as a line of display type rather
   than a paragraph. */
.page-hero__sub--tagline {
  font-family: var(--font-display);
  font-size: var(--fs-hero-sub);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* An h2 wearing the pill: keeps the outline correct where the first
   paragraph is doing the heading's visual job. */
h2.eyebrow {
  line-height: normal;
}

.about-lead {
  font-family: var(--font-display);
  font-size: clamp(18px, 0.9vw + 15px, 22px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.about-callout {
  width: 100%;
  padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2vw, 28px);
  border-left: 4px solid var(--accent);
  border-radius: 0 20px 20px 0;
  background: var(--white);
  box-shadow: var(--card-shadow);
  font-family: var(--font-display);
  font-size: clamp(17px, 0.3vw + 14.5px, 19px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

.about-center-copy {
  width: 100%;
  max-width: 760px;
  margin: 20px auto 0;
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  text-align: center;
  color: var(--text);
}

/* ---------- Program tiles ---------- */

.offer-intro {
  margin-top: calc(var(--space-head) / 2);
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--ink);
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: 20px;
}

.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  height: 100%;
  padding: clamp(20px, 2vw, 28px);
  padding-right: clamp(44px, 3.6vw, 56px); /* room for the arrow */
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  background: var(--white);
  box-shadow: var(--card-shadow);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.offer-card:hover,
.offer-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 14px 24px -12px rgba(25, 118, 210, 0.25);
}

.offer-card__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(25, 118, 210, 0.08);
}

.offer-card__icon img {
  width: 26px;
  height: 26px;
}

.offer-card h3 {
  font-family: var(--font-display);
  font-size: clamp(17px, 0.3vw + 14.5px, 19px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.offer-card__arrow {
  position: absolute;
  top: clamp(20px, 2vw, 28px);
  right: clamp(18px, 1.8vw, 24px);
  width: 22px;
  height: 22px;
  opacity: 0.35;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.offer-card:hover .offer-card__arrow,
.offer-card:focus-visible .offer-card__arrow {
  opacity: 1;
  transform: translateX(3px);
}

.offer-outro {
  width: 100%;
  max-width: 760px;
  margin: var(--space-head) auto 0;
  font-size: var(--fs-body-lg);
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  color: var(--text);
}

@media (max-width: 1024px) {
  .offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* One column of rows on phones: icon, name, arrow on a single line. */
@media (max-width: 560px) {
  .offer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .offer-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px 48px 14px 14px;
    border-radius: 20px;
  }

  .offer-card__icon {
    width: 46px;
    height: 46px;
  }

  .offer-card__arrow {
    top: 50%;
    right: 16px;
    margin-top: -11px;
  }
}

/* ---------- Partners strip under the community copy ---------- */

.about-partners {
  margin-top: var(--space-section);
}

.about-partners__title {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--ink);
}

.about-partners .partners-marquee {
  margin-top: clamp(20px, 2vw, 28px);
}

/* ---------- Impact band ---------- */

.impact {
  padding-bottom: var(--space-section);
  background: var(--ink);
}

.impact .section-subtitle {
  color: var(--on-dark);
}

.impact__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: var(--space-head);
}

.impact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
  background: var(--dark-card);
}

.impact-card__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
}

/* The icon set is drawn in the accent blue; knock it out to white here. */
.impact-card__icon img {
  width: 26px;
  height: 26px;
  filter: brightness(0) invert(1);
}

.impact-card p {
  font-family: var(--font-display);
  font-size: clamp(17px, 0.3vw + 14.5px, 19px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
}

.impact-card strong {
  font-weight: 700;
  color: var(--white);
}

.impact__closing {
  width: 100%;
  max-width: 820px;
  margin: var(--space-head) auto 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 0.5vw + 14px, 22px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--white);
}

@media (max-width: 1024px) {
  .impact__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .impact__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .impact-card {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    border-radius: 24px;
  }
}

/* ---------- Mission ---------- */

.mission {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: var(--space-head) auto 0;
  padding: clamp(36px, 4.4vw, 64px) clamp(22px, 4.4vw, 72px);
  border-radius: clamp(28px, 3vw, 50px);
  background: radial-gradient(
    90% 140% at 60% 85%,
    #2a86e6 0%,
    var(--accent) 45%,
    var(--accent-dark) 100%
  );
  text-align: center;
  overflow: hidden;
}

/* Oversized opening quote mark, sitting behind the text. */
.mission::before {
  content: "\201C";
  position: absolute;
  top: clamp(-18px, -1vw, -6px);
  left: clamp(14px, 2.4vw, 36px);
  font-family: var(--font-display);
  font-size: clamp(120px, 12vw, 200px);
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.mission__lead {
  position: relative;
  font-size: var(--fs-body-lg);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.mission__quote {
  position: relative;
  margin-top: 14px;
}

.mission__quote p {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.3vw + 14px, 34px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--white);
}

/* The closing line is two sentences; break between them rather than
   mid-phrase. Phones wrap naturally. */
.cta__line {
  display: block;
}