/* ==========================================================================
   Eastern Gauteng Aquatics — site stylesheet
   Implemented from the EGA design system (Claude Design project "EGA Site").
   Layer order: webfonts -> design tokens -> brand overrides -> base -> parts.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Figtree:ital,wght@0,300..900;1,300..900&family=Caveat:wght@500;600;700&family=DM+Mono:wght@400;500&display=swap");

/* --- 1. Design-system tokens ---------------------------------------------- */

:root{
  /* type */
  --font-display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Figtree","Helvetica Neue",Arial,sans-serif;
  --font-script:"Caveat","Segoe Script",cursive;
  --font-mono:"DM Mono",ui-monospace,Menlo,monospace;

  --size-h1:56px;  --size-h2:44px;  --size-h3:30px;  --size-h4:22px;
  --size-lead:20px; --size-body:16px; --size-sm:14px; --size-eyebrow:13px;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600;
  --weight-bold:700;    --weight-black:800;

  --lh-heading:1.12; --lh-body:1.7;
  --ls-heading:-0.01em; --ls-eyebrow:0.18em; --ls-button:0.02em;

  --type-h1:var(--weight-bold) var(--size-h1)/var(--lh-heading) var(--font-display);
  --type-h2:var(--weight-bold) var(--size-h2)/var(--lh-heading) var(--font-display);
  --type-h3:var(--weight-bold) var(--size-h3)/1.2 var(--font-display);
  --type-h4:var(--weight-semibold) var(--size-h4)/1.3 var(--font-display);
  --type-lead:var(--weight-regular) var(--size-lead)/var(--lh-body) var(--font-body);
  --type-body:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-body);
  --type-sm:var(--weight-regular) var(--size-sm)/1.6 var(--font-body);
  --type-button:var(--weight-bold) var(--size-sm)/1 var(--font-body);
  --type-eyebrow:var(--weight-bold) var(--size-eyebrow)/1.2 var(--font-body);

  /* rhythm */
  --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px;
  --gutter:24px; --container:1200px;

  /* shape & depth */
  --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px;
  --radius-pill:999px;
  --border-1:1px; --border-2:2px;
  --shadow-card:0 12px 32px rgba(6,42,69,.10);
  --shadow-lift:0 20px 48px rgba(6,42,69,.18);
  --shadow-button:0 8px 18px rgba(11,79,132,.28);
  --shadow-button-accent:0 8px 18px rgba(217,147,10,.30);

  /* motion */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-splash:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:140ms; --dur:220ms;
}

/* --- 2. Brand palette ----------------------------------------------------- */
/* EGA red + pool blue. Semantic aliases below resolve through these, so the
   whole site re-skins from this block alone. */

:root{
  --rose-500:#C52927;
  --sun-100:#F8DEDD; --sun-200:#ECA3A2; --sun-300:#D9605E;
  --sun-400:#C52927; --sun-500:#B02523; --sun-600:#9C1F1D;

  --pool-950:#0A2F52; --pool-900:#0E3E6B; --pool-800:#124F86; --pool-700:#1564C0;
  --pool-600:#1D74D6; --pool-500:#3A8BE0; --pool-400:#6BA8E8; --pool-300:#9CC5F0;
  --pool-200:#C9E0F7; --pool-100:#EAF3FC;

  --aqua-600:#1B76C9; --aqua-500:#2E8AD9; --aqua-400:#57A3E4;
  --aqua-300:#8CC2EE; --aqua-200:#BEDDF6; --aqua-100:#E7F3FC;

  --coral-600:#D9482A; --coral-500:#FF6B4A; --coral-100:#FFE7E0;

  /* Pink Drive campaign ramp. Anchored on the cap in the home-page photograph
     (sampled #F80967), deepened from --pink-500 down so pink type clears AA on
     both the wash and white. Only the Pink Drive section draws on it. */
  --pink-700:#87003F; --pink-600:#AE0056; --pink-500:#D6006A; --pink-400:#F0227E;
  --pink-300:#FF6FA9; --pink-200:#FFADCE; --pink-100:#FFD6E8; --pink-50:#FFE8F2;
  --pink-cap:#F50A6D;

  --ink-900:#1A1A1A; --ink-700:#333333; --ink-500:#4D4D4D; --ink-400:#666666;
  --ink-300:#999999; --ink-200:#D6D6D6; --ink-100:#EDEDED;
  --white:#FFFFFF; --foam:#F4F4F4;

  /* semantic */
  --text-heading:var(--pool-900);
  --text-body:var(--ink-500);
  --text-muted:var(--ink-400);
  --text-link:var(--pool-600);
  --text-link-hover:var(--pool-800);
  --surface-page:var(--white);
  --surface-subtle:var(--foam);
  --surface-card:var(--white);
  --border-subtle:var(--ink-200);
  --state-danger:var(--coral-600);
  --ring-focus:0 0 0 3px var(--aqua-300);
}

/* --- 3. Base -------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font:var(--type-body);
  color:var(--text-body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  overflow-x:clip;
}

h1,h2,h3,h4{margin:0;color:var(--text-heading);font-family:var(--font-display)}
h1{font:var(--type-h1);letter-spacing:var(--ls-heading)}
h2{font:var(--type-h2);letter-spacing:var(--ls-heading)}
h3{font:var(--type-h3)}
h4{font:var(--type-h4)}
p{margin:0}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--aqua-200);color:var(--pool-900)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}

a{color:var(--pool-700);text-decoration:none;transition:color var(--dur) var(--ease-out)}
a:hover{color:var(--pool-900);text-decoration:underline;text-underline-offset:3px}

.skip-link{
  position:absolute;left:16px;top:-64px;z-index:200;
  background:var(--pool-900);color:var(--white);
  padding:12px 20px;border-radius:var(--radius-sm);
  font:var(--type-button);transition:top var(--dur) var(--ease-out);
}
.skip-link:focus{top:16px;color:var(--white);text-decoration:none}

/* --- 4. Layout ------------------------------------------------------------ */

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

.sec{padding:clamp(48px,6vw,90px) 0}
.sec--hero{padding:clamp(48px,6vw,80px) 0}
.sec--md{padding:clamp(56px,8vw,110px) 0}
.sec--lg{padding:clamp(56px,8vw,120px) 0}
.sec--xl{padding:clamp(48px,7vw,100px) 0}
.sec--subtle{background:var(--surface-subtle)}

/* two-up content splits */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(32px,5vw,56px)}
.split--center{align-items:center}
.split--top{align-items:start}
.split--tight{gap:clamp(28px,4vw,48px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* page hero with artwork alongside the headline */
.hero-split{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
  gap:clamp(32px,5vw,56px);align-items:center;
}
.hero-split__art{justify-self:end;width:100%;max-width:380px}
@media (max-width:860px){
  .hero-split{grid-template-columns:1fr}
  .hero-split__art{justify-self:start;max-width:240px}
}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(var(--col,260px),1fr))}
.grid--fill{grid-template-columns:repeat(auto-fill,minmax(var(--col,260px),1fr))}

.stack{display:flex;flex-direction:column;gap:var(--stack-gap,12px)}

/* five-up "what we do" row, from the design */
.five-up{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.five-up>*{min-width:0;overflow-wrap:anywhere}
@media (max-width:1180px){.five-up{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media (max-width:740px){.five-up{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.five-up{grid-template-columns:1fr}}

/* --- 5. Type helpers ------------------------------------------------------ */

/* Small caps label. Section eyebrows are gone — this now only tags an event's
   type in a calendar row. */
.eyebrow{
  font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--aqua-600);
}

.h-hero{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(44px,8.4vw,104px);line-height:.98;letter-spacing:-.03em;
  color:var(--white);text-shadow:0 8px 40px rgba(10,47,82,.55);
}
.h-page{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(32px,5vw,56px);line-height:1.06;letter-spacing:-.02em;
  color:var(--white);
}
.h2{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--h2-size,clamp(26px,3.4vw,40px));line-height:1.1;letter-spacing:-.01em;
}
.h3{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(22px,2.6vw,30px);line-height:1.2;
}

/* red word with the lane-line underscore */
.mark{position:relative;display:inline-block;color:var(--rose-500)}
.mark::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;
  height:var(--mark-h,.08em);background:var(--rose-500);border-radius:99px;
}
.mark--pink{color:var(--pink-500);white-space:nowrap}
.mark--pink::after{background:var(--pink-500)}

.lead{font:var(--type-lead);color:var(--ink-500)}
.lead--on-dark{color:var(--pool-100)}
.body{font:var(--type-body);color:var(--ink-500)}
.body--on-dark{color:var(--pool-100)}
.small{font:var(--type-sm);color:var(--ink-400)}
.mono{font-family:var(--font-mono);color:var(--pool-700)}
.measure{max-width:60ch}
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.measure-sm{max-width:54ch}
.on-dark,.on-dark h1,.on-dark h2,.on-dark h3{color:var(--white)}

/* --- 6. Icons ------------------------------------------------------------- */
/* <svg class="i"><use href="assets/img/icons.svg#i-check"/></svg> */

.i{
  width:1em;height:1em;fill:currentColor;flex:0 0 auto;
  display:inline-block;vertical-align:-.125em;
}
.i-badge{
  width:var(--badge,40px);height:var(--badge,40px);flex-shrink:0;
  border-radius:var(--badge-r,10px);background:var(--aqua-100);color:var(--aqua-600);
  display:flex;align-items:center;justify-content:center;font-size:var(--badge-i,20px);
}

/* --- 7. Buttons ---------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;
  font-family:var(--font-body);font-weight:var(--weight-bold);font-size:14px;
  letter-spacing:var(--ls-button);line-height:1;
  border:var(--border-2) solid transparent;border-radius:var(--radius-pill);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--dur) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur) var(--ease-out);
}
.btn:hover{text-decoration:none;box-shadow:none}
.btn:active{transform:scale(.97)}
.btn--lg{padding:18px 34px;font-size:16px}
.btn--full{display:flex;width:100%}

/* Accent buttons carry white label text, not the token's dark blue: dark blue
   on EGA red measures 1.9:1 and fails WCAG AA. White is 5.6:1. */
.btn--accent{background:var(--sun-400);color:var(--white);box-shadow:var(--shadow-button-accent)}
.btn--accent:hover{background:var(--sun-500);color:var(--white)}
.btn--primary{background:var(--pool-700);color:var(--white);box-shadow:var(--shadow-button)}
.btn--primary:hover{background:var(--pool-800);color:var(--white)}
.btn--secondary{background:var(--white);color:var(--pool-800);border-color:var(--pool-200)}
.btn--secondary:hover{background:var(--pool-100);color:var(--pool-800)}
.btn--on-dark{background:var(--white);color:var(--pool-900)}
.btn--on-dark:hover{background:var(--pool-100);color:var(--pool-900)}
.btn--outline{padding:13px 22px;border-color:rgba(255,255,255,.4);color:var(--white)}
.btn--outline:hover{background:rgba(255,255,255,.12);color:var(--white)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* long labels would otherwise push past a narrow viewport */
@media (max-width:560px){
  .btn{white-space:normal;text-align:center}
}

/* pill toggles (club tabs, event filters) */
.chip{
  padding:11px 20px;border-radius:var(--radius-pill);cursor:pointer;
  font:var(--type-button);
  border:2px solid var(--ink-200);background:var(--white);color:var(--ink-500);
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),
             color var(--dur) var(--ease-out);
}
.chip:hover{border-color:var(--pool-200)}
.chip[aria-pressed="true"]{background:var(--pool-700);border-color:var(--pool-700);color:var(--white)}
.chip--sm{padding:10px 18px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}

/* --- 8. Header & navigation ---------------------------------------------- */

.head{
  position:sticky;top:0;z-index:60;
  background:var(--white);border-bottom:1px solid var(--ink-200);
  transition:box-shadow 260ms var(--ease-out);
}
.head__inner{
  position:relative;max-width:var(--container);margin:0 auto;
  padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:padding 260ms var(--ease-out);
}
.head__logo{display:flex;align-items:center;flex-shrink:0}
.head__logo img{height:52px;width:auto;display:block;transition:height 260ms var(--ease-out)}
.head__logo:hover{text-decoration:none}

.head__nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
/* The 3px top padding balances the active-page bar below the link, so the link
   text lands on the header's centre line rather than 1.5px above it. */
.nav__item{position:relative;padding-top:3px}
.nav__link{
  display:flex;align-items:center;gap:5px;
  background:none;border:0;cursor:pointer;padding:10px 12px;
  border-radius:var(--radius-pill);
  font:var(--weight-bold) 15px/1 var(--font-body);color:var(--pool-900);
  white-space:nowrap;text-decoration:none;
}
.nav__link:hover{background:var(--pool-100);color:var(--pool-900);text-decoration:none}
.nav__link .i{font-size:16px;opacity:.55}
.nav__bar{display:block;height:3px;margin:0 12px;border-radius:2px;background:transparent}
.nav__item.is-active .nav__bar{background:var(--pool-700)}

.nav__menu{
  display:none;position:absolute;top:100%;left:0;min-width:236px;
  background:var(--white);border:1px solid var(--ink-200);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lift);
  padding:8px;flex-direction:column;gap:2px;z-index:70;
}
.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu{display:flex}
.nav__sub{
  text-align:left;background:none;border:0;cursor:pointer;
  padding:10px 12px;border-radius:10px;
  font:var(--type-body);color:var(--ink-500);white-space:nowrap;text-decoration:none;
}
.nav__sub:hover{background:var(--foam);color:var(--pool-800);text-decoration:none}

.head__burger{
  display:none;background:none;border:0;cursor:pointer;padding:8px;
  color:var(--pool-900);align-items:center;justify-content:center;line-height:0;
}
.head__burger:hover{color:var(--aqua-600)}
.head__burger .i{font-size:32px}

.head__drawer{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  width:min(var(--container),calc(100vw - var(--gutter) * 2));
  display:none;justify-content:flex-end;
  padding-right:var(--gutter);box-sizing:border-box;pointer-events:none;
}
.head.is-open .head__drawer{display:flex}
.head__drawer-panel{
  width:min(280px,100%);pointer-events:auto;
  background:var(--white);border:1px solid var(--ink-200);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lift);
  padding:8px;display:flex;flex-direction:column;gap:2px;z-index:70;
}
.head__drawer-panel a{
  text-align:left;border-radius:10px;padding:12px 14px;
  font:var(--weight-bold) 15px/1.2 var(--font-body);color:var(--pool-900);
  text-decoration:none;
}
.head__drawer-panel a:hover{background:var(--foam);text-decoration:none}

/* compact state: nav collapses to a centred logo + burger */
.head.is-compact{box-shadow:0 10px 30px rgba(3,25,42,.10)}
.head.is-compact .head__inner{justify-content:center;padding-top:9px;padding-bottom:9px}
.head.is-compact .head__nav{display:none}
.head.is-compact .head__logo img{height:40px}
.head.is-compact .head__burger{
  display:flex;position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);
}
@media (max-width:1000px){
  .head__nav{display:none}
  .head__burger{display:flex}
}

/* --- 9. Hero -------------------------------------------------------------- */

.hero{
  position:relative;min-height:min(94vh,940px);
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:var(--pool-700);color:var(--white);
}
.hero__media{position:absolute;top:-10%;left:0;right:0;bottom:-10%;will-change:transform}
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  animation:ken 26s ease-in-out infinite alternate;
}
.hero__scrim,.hero__scrim2{position:absolute;inset:0}
.hero__scrim{background:linear-gradient(180deg,rgba(21,100,192,.62) 0%,rgba(21,100,192,.12) 32%,rgba(14,62,107,.58) 74%,rgba(10,47,82,.92) 100%)}
.hero__scrim2{background:linear-gradient(88deg,rgba(21,100,192,.72) 0%,rgba(21,100,192,.24) 48%,rgba(21,100,192,0) 78%)}
.hero__body{
  position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:var(--container);margin:0 auto;width:100%;
  padding:clamp(72px,10vh,110px) var(--gutter) clamp(48px,7vh,88px);
}
.hero__body h1{margin:0 0 22px;max-width:17ch}
.hero__body p{margin:0 0 36px;max-width:52ch;font:var(--type-lead);color:rgba(255,255,255,.92)}

.hero__stats{
  position:relative;border-top:1px solid rgba(255,255,255,.22);
  background:rgba(10,47,82,.46);backdrop-filter:blur(14px);
}
.hero__stats-inner{
  max-width:var(--container);margin:0 auto;padding:32px var(--gutter);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:28px;align-items:center;
}
.stat{display:flex;align-items:center;gap:16px}
.stat__n{
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(46px,4.8vw,66px);line-height:.95;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px var(--white);paint-order:stroke;
  font-variant-numeric:tabular-nums;flex:0 0 auto;width:2.2ch;text-align:center;
}
.stat__label{font:var(--type-sm);color:rgba(255,255,255,.85);max-width:16ch}

/* --- 10. Photo bands ----------------------------------------------------- */

.band{position:relative;overflow:hidden;background:var(--pool-900);color:var(--white)}
.band__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 35%;
}
.band__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,42,69,.80) 0%,rgba(6,42,69,.93) 100%);
}
.band>.wrap{position:relative}
.band--values .band__bg,.band--deep .band__bg{object-position:center}
.band--values .band__scrim{background:linear-gradient(180deg,rgba(6,42,69,.88) 0%,rgba(6,42,69,.94) 100%)}
.band--deep .band__scrim{background:linear-gradient(180deg,rgba(6,42,69,.90) 0%,rgba(6,42,69,.95) 100%)}
.band a:not(.btn){color:var(--rose-500)}
.band a:not(.btn):hover{color:var(--sun-300)}

/* --- 11. Cards ----------------------------------------------------------- */

.card{
  background:var(--surface-card);border:var(--border-1) solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:28px;
}
.card--flat{box-shadow:none;background:var(--foam);border:0;border-radius:var(--radius-lg);padding:24px}

/* feature card (icon / title / body) */
.feature{
  display:flex;flex-direction:column;gap:var(--space-4);
  padding:var(--space-8);text-decoration:none;
  background:var(--surface-card);border:var(--border-1) solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  transition:transform var(--dur) var(--ease-splash),box-shadow var(--dur) var(--ease-out);
}
a.feature:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);text-decoration:none}
.feature__icon{
  width:58px;height:58px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--aqua-100);color:var(--aqua-600);font-size:30px;
}
.feature h4{font:var(--type-h4);color:var(--text-heading);margin:0}
.feature p{font:var(--type-body);color:var(--text-body);margin:0}

/* quick links (home) */
.quick{
  display:flex;align-items:center;gap:12px;text-align:left;
  background:var(--white);border:1px solid var(--ink-200);border-radius:14px;
  padding:16px;text-decoration:none;
  font:var(--weight-bold) 15px/1.3 var(--font-body);color:var(--pool-900);
  transition:transform 220ms var(--ease-splash),box-shadow 220ms var(--ease-out),
             border-color 220ms var(--ease-out);
}
.quick:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-card);
  border-color:var(--aqua-400);color:var(--pool-900);text-decoration:none;
}
.quick .i-badge{--badge:38px;font-size:20px}

/* event row */
.event{
  display:grid;grid-template-columns:1fr auto;gap:var(--space-6);align-items:center;
  padding:var(--space-6) var(--space-8);
  background:var(--surface-card);border:var(--border-1) solid var(--border-subtle);
  border-radius:var(--radius-lg);
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.event:hover{border-color:var(--pool-200);box-shadow:var(--shadow-card)}
.event__text{display:flex;flex-direction:column;gap:8px}
.event__text h4{font:var(--type-h4);margin:0;color:var(--text-heading)}
.event__text p{font:var(--type-body);color:var(--text-body);margin:0;max-width:56ch}
.event__date{
  flex:0 0 auto;width:104px;padding:var(--space-4) 0;text-align:center;
  border-radius:var(--radius-md);background:var(--pool-100);
  transition:background var(--dur) var(--ease-out);
}
.event:hover .event__date{background:var(--pool-700)}
.event__day{
  font:var(--weight-black) 40px/1 var(--font-display);color:var(--pool-800);
  transition:color var(--dur) var(--ease-out);
}
.event:hover .event__day{color:var(--white)}
.event__day--tbc{font-size:22px;letter-spacing:.04em;padding:9px 0}
.event__mon{
  font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--aqua-600);margin-top:6px;transition:color var(--dur) var(--ease-out);
}
.event:hover .event__mon{color:var(--sun-400)}
@media (max-width:560px){
  .event{grid-template-columns:1fr;padding:var(--space-6)}
  .event__date{width:100%;display:flex;align-items:baseline;justify-content:center;gap:10px}
  .event__mon{margin-top:0}
}

/* accordion (officials roles) */
.faq{
  background:var(--surface-card);border:var(--border-1) solid var(--border-subtle);
  border-radius:var(--radius-lg);overflow:hidden;
}
.faq[open]{background:var(--pool-100);border-color:var(--pool-200)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);padding:var(--space-5) var(--space-6);
  cursor:pointer;list-style:none;
  font:var(--type-h4);font-size:18px;color:var(--text-heading);
}
.faq__q::-webkit-details-marker{display:none}
.faq__sign{
  flex:0 0 auto;width:34px;height:34px;border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;
  background:var(--aqua-100);color:var(--pool-700);font-size:20px;
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}
.faq[open] .faq__sign{background:var(--pool-700);color:var(--white)}
.faq__a{
  padding:0 var(--space-6) var(--space-6);
  font:var(--type-body);color:var(--text-body);max-width:72ch;
}
.faq .faq__minus{display:none}
.faq[open] .faq__minus{display:inline-block}
.faq[open] .faq__plus{display:none}

/* club / squad / tour cards with the colour tab */
.tab-card{
  background:var(--surface-card);border:var(--border-1) solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:26px;
  display:flex;flex-direction:column;gap:12px;
  transition:transform 220ms var(--ease-splash),box-shadow 220ms var(--ease-out);
}
.tab-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.tab-card__tab{width:44px;height:6px;border-radius:3px;background:var(--tone,var(--aqua-400))}
.tab-card h3{
  font-family:var(--font-display);font-weight:800;font-size:21px;line-height:1.2;
  margin:0;color:var(--pool-900);
}
.tab-card--squad h3{font-size:26px;line-height:1.1}
.tab-card__kind{
  font:var(--weight-bold) 12px/1 var(--font-body);text-transform:uppercase;
  letter-spacing:.14em;color:var(--aqua-600);
}
.tab-card p{font:var(--type-sm);color:var(--ink-500);margin:0}
.tab-card__link{
  display:inline-flex;align-items:center;gap:7px;
  font:var(--weight-bold) 14px/1 var(--font-body);color:var(--aqua-400);
}
.tab-card__link:hover{color:var(--aqua-600)}

/* document / contact rows */
.doc{
  display:flex;align-items:flex-start;gap:16px;
  background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);padding:22px;text-decoration:none;
  transition:transform 220ms var(--ease-splash),border-color 220ms var(--ease-out);
}
.doc:hover{transform:translateY(-4px);border-color:var(--aqua-400);text-decoration:none}
.doc--row{align-items:center;transform:none}
.doc--row:hover{transform:none}
.doc__text{display:flex;flex-direction:column;gap:6px;min-width:0}
.doc__title{font:var(--weight-bold) 17px/1.3 var(--font-body);color:var(--pool-900)}
.doc__meta{font:var(--type-sm);color:var(--ink-500)}
.doc .i-badge{--badge:46px;--badge-r:12px;font-size:24px}
.doc--row .i-badge{--badge:48px;--badge-r:12px;font-size:26px}

.contact-row{
  display:flex;align-items:center;gap:14px;padding:14px 18px;
  border:1px solid var(--ink-200);border-radius:14px;text-decoration:none;
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.contact-row:hover{background:var(--foam);border-color:var(--aqua-400);text-decoration:none}
.contact-row__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.contact-row__label{font:var(--weight-bold) 15px/1.3 var(--font-body);color:var(--pool-900)}
.contact-row__value{font:var(--type-sm);color:var(--ink-500);word-break:break-all}

.link-pill{
  display:flex;align-items:center;gap:10px;
  background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-pill);
  padding:12px 18px;text-decoration:none;
  font:var(--weight-bold) 15px/1.3 var(--font-body);
  transition:border-color var(--dur) var(--ease-out);
}
.link-pill:hover{border-color:var(--aqua-400);text-decoration:none}
.link-pill .i{font-size:17px;color:var(--aqua-600)}

.pdf-link{
  display:flex;align-items:center;gap:12px;
  font:var(--weight-bold) 15px/1.3 var(--font-body);
}
.pdf-link .i{font-size:22px;color:var(--coral-500)}

/* checklist rows (Xcel) */
.check{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--white);border:1px solid var(--ink-200);border-radius:14px;
  padding:16px 18px;font:var(--type-body);color:var(--ink-500);
}
.check .i{font-size:20px;color:var(--aqua-600);margin-top:.35em}
.check--medal .i{color:var(--rose-500)}

/* stat tiles (Xcel clinics) */
.tile{background:var(--foam);border-radius:var(--radius-lg);padding:24px}
.tile__n{font:800 34px/1 var(--font-display);color:var(--pool-700)}
.tile__l{font:var(--type-sm);color:var(--ink-500);margin-top:8px}

/* --- 12. Tables ---------------------------------------------------------- */

.table{
  background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);overflow:hidden;
}
.table__head{
  display:flex;gap:16px;padding:18px 24px;
  background:var(--pool-900);color:var(--white);
  font:var(--weight-bold) 13px/1 var(--font-body);
  text-transform:uppercase;letter-spacing:.14em;
}
.table__row{
  display:flex;flex-wrap:wrap;gap:10px 16px;padding:20px 24px;
  border-top:1px solid var(--ink-200);align-items:center;
}
.table__row:hover{background:var(--foam)}
.c-meet{flex:2.2 1 180px;font:var(--weight-bold) 17px/1.3 var(--font-body);color:var(--pool-900)}
.c-date{flex:1 1 130px;font:var(--type-sm);color:var(--ink-500);font-family:var(--font-mono)}
.c-course{flex:1 1 120px;font:var(--type-sm);color:var(--ink-500)}
.c-files{flex:0 0 140px;font:var(--weight-bold) 14px/1 var(--font-body);color:var(--ink-400);
  display:inline-flex;align-items:center;gap:8px}
.c-pts{flex:0 0 90px;font-family:var(--font-mono);font-size:17px;color:var(--pool-700)}
.c-level{flex:1;font:var(--type-body);color:var(--ink-500)}
@media (max-width:900px){.table__head{display:none}}

/* --- 13. Forms ----------------------------------------------------------- */

.field{display:flex;flex-direction:column;gap:8px;width:100%}
.field__label{
  font:var(--type-eyebrow);letter-spacing:.08em;text-transform:uppercase;
  color:var(--pool-800);
}
.field__req{color:var(--coral-500)}
.field__hint{font:var(--type-sm);color:var(--text-muted)}
.field input,.field select,.field textarea{
  width:100%;padding:15px 18px;
  font:var(--type-body);color:var(--text-heading);background:var(--white);
  border:var(--border-1) solid var(--border-subtle);border-radius:var(--radius-md);
  outline:none;
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.field textarea{resize:vertical}
.field select{
  appearance:none;padding-right:44px;cursor:pointer;color:var(--ink-400);
}
.field select:valid{color:var(--text-heading)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--pool-500);box-shadow:var(--ring-focus);
}
.field__wrap{position:relative;display:flex;align-items:center}
.field__caret{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:var(--pool-600);font-size:20px;pointer-events:none;
}
.form{display:flex;flex-direction:column;gap:20px}
.form--tight{gap:14px}
.form__pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.form-card{
  background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);padding:clamp(24px,3vw,40px);
}
.form-card--sticky{position:sticky;top:110px}
.form-panel{
  background:var(--foam);border:1px solid var(--ink-200);border-radius:var(--radius-lg);
  padding:clamp(20px,2.4vw,28px);max-width:460px;
}
.sent{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.sent__badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--aqua-100);color:var(--pool-800);border-radius:var(--radius-pill);
  padding:8px 16px;font:var(--weight-bold) 13px/1 var(--font-body);
  text-transform:uppercase;letter-spacing:.14em;
}
[hidden]{display:none !important}

/* --- 14. Values marquee -------------------------------------------------- */

.marquee{
  position:relative;overflow:hidden;margin:0 calc(var(--gutter) * -1);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee__track{
  display:flex;align-items:center;gap:44px;width:max-content;will-change:transform;
  animation:marquee 34s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.value{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.value .i{font-size:clamp(30px,3.2vw,44px);color:var(--aqua-300)}
.value__w{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(32px,3.6vw,52px);line-height:1;color:var(--white);white-space:nowrap;
}
.value__dot{width:7px;height:7px;border-radius:50%;background:var(--rose-500);margin-left:20px}
.values-tail{opacity:0}
.is-in .values-tail{animation:rise 800ms 300ms var(--ease-splash) both}
.is-in .values-tail + .values-tail{animation-delay:520ms}
.script{font-family:var(--font-script);font-size:28px;color:var(--rose-500)}

/* --- 15. Gallery --------------------------------------------------------- */

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.gallery img{width:100%;aspect-ratio:3 / 4;object-fit:cover;border-radius:var(--radius-lg)}

.portrait{
  border-radius:var(--radius-xl);overflow:hidden;min-height:280px;box-shadow:var(--shadow-card);
}
.portrait img{width:100%;height:100%;min-height:280px;object-fit:cover}

.callout{
  background:var(--surface-subtle);border-radius:var(--radius-xl);
  padding:clamp(28px,4vw,48px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:28px;align-items:center;
}
.callout img{width:100%;height:100%;min-height:200px;max-height:260px;object-fit:cover;border-radius:var(--radius-lg)}

/* --- 16. Pink Drive (home) ----------------------------------------------- */
/* Champs with a Purpose. The one section that runs on the pink ramp rather
   than the pool palette, so everything here is scoped under .pink. EGA rose
   and Pink Drive magenta sit 1.09:1 apart in luminance -- near-identical in
   weight, 25 degrees apart in hue -- so they are never placed adjacent. */

.pink{position:relative;overflow:hidden;background:var(--pink-50)}

/* Lane lines pitched to the ropes in the photograph, and a glow rising under
   the goal card. Both decorative, both behind the content. */
.pink::before{
  content:"";position:absolute;inset:-12% -12%;pointer-events:none;
  background:repeating-linear-gradient(115deg,
    rgba(174,0,86,.05) 0 2px,transparent 2px 76px);
}
.pink::after{
  content:"";position:absolute;left:50%;bottom:-34%;transform:translateX(-50%);
  width:min(1080px,124%);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(240,34,126,.17),transparent 70%);
}
.pink>.wrap{position:relative}
.pink .lead{color:var(--ink-500)}
.pink__lead{max-width:52ch;text-wrap:balance}

.pink__photo{
  position:relative;border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:0 26px 62px rgba(135,0,63,.24);
}
.pink__photo img{width:100%;aspect-ratio:4 / 5;object-fit:cover}
.pink__photo::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}

/* goal card: gauge alongside the target */
.pink-goal{
  margin-top:clamp(40px,5vw,72px);
  display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:center;
  padding:clamp(28px,3.6vw,48px);
  background:var(--white);border:1px solid var(--pink-200);
  border-radius:var(--radius-xl);box-shadow:0 22px 54px rgba(135,0,63,.15);
}
.pink-goal__text{display:flex;flex-direction:column;gap:20px}
.pink-goal__text h3{color:var(--pink-700)}
.pink-goal__closer{
  font:var(--weight-bold) clamp(19px,1.9vw,24px)/1.35 var(--font-display);
  color:var(--pool-900);
}
.pink-goal__closer span{display:block;color:var(--pink-500)}
@media (max-width:860px){.pink-goal{grid-template-columns:1fr}}

/* --- 16b. Fundraising gauge ---------------------------------------------- */
/* A 180deg lane: the fill is how far the drive has swum, the cap marker is
   where it is now. Geometry is fixed -- r=130 about (160,166), so the arc is
   pi*130 = 408.407 long and the R30 000 of R100 000 fill ends at 285.885.
   Recalculate both if the total or the target changes. */

.gauge{
  width:100%;max-width:360px;margin:0 auto;
  padding:26px 22px 18px;
  background:linear-gradient(180deg,var(--pink-50),var(--white) 78%);
  border:1px solid var(--pink-100);border-radius:var(--radius-lg);
}
.gauge__dial{position:relative;container-type:inline-size}
.gauge__svg{display:block;width:100%;height:auto;overflow:visible}
.gauge__track{fill:none;stroke:var(--pink-100);stroke-width:20;stroke-linecap:round}
/* the arc's gradient stops live here so the ramp stays the single source */
.gauge__from{stop-color:var(--pink-300)}
.gauge__to{stop-color:var(--pink-500)}
.gauge__fill{
  fill:none;stroke:url(#pink-arc);stroke-width:20;stroke-linecap:round;
  stroke-dasharray:408.407;stroke-dashoffset:285.885;
}
.gauge__cap-glow{fill:rgba(245,10,109,.22)}
.gauge__cap-ring{fill:var(--white)}
.gauge__cap-dot{fill:var(--pink-cap)}

.gauge__centre{
  position:absolute;left:0;right:0;bottom:24%;
  display:flex;flex-direction:column;align-items:center;gap:5px;
}
.gauge__n{
  font-family:var(--font-mono);font-weight:500;
  line-height:1;letter-spacing:-.03em;word-spacing:-.3em;color:var(--pink-600);
  font-variant-numeric:tabular-nums;
  font-size:29px;                        /* where container units are unsupported */
  font-size:clamp(19px,11.7cqw,37px);
}
.gauge__l{
  font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--ink-400);
  font-size:clamp(9px,4.1cqw,13px);
}
.gauge__ends{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:2px;font:var(--type-sm);color:var(--ink-400);
}
.gauge__ends b{font-weight:var(--weight-bold);color:var(--pink-700)}

/* Filled and marked by default, so the gauge still reads its value with
   JavaScript off. site.js adds .reveal, which empties it; .is-in swims it up. */
.reveal .gauge__fill{stroke-dashoffset:408.407}
.is-in .gauge__fill{animation:gauge-swim 1500ms 280ms var(--ease-out) forwards}
.reveal .gauge__cap{opacity:0}
.is-in .gauge__cap{animation:gauge-surface 520ms 1580ms var(--ease-splash) forwards}
.gauge__cap{transform-box:fill-box;transform-origin:50% 50%}

/* --- 17. Committee ------------------------------------------------------- */

.people__group{
  font:var(--weight-bold) 13px/1 var(--font-body);text-transform:uppercase;
  letter-spacing:.18em;color:var(--aqua-600);margin-bottom:22px;
}
.person{
  display:flex;flex-direction:column;gap:3px;
  padding-bottom:14px;border-bottom:1px solid var(--ink-100);
}
.person__role{font:var(--type-sm);color:var(--ink-400)}
.person__name{font:var(--weight-bold) 17px/1.3 var(--font-body);color:var(--pool-900)}

/* Honour roll: year alongside name, ruled like a register. */
.roll{display:flex;flex-direction:column}
.roll__row{
  display:flex;gap:20px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--ink-200);
}
.roll__row:first-child{border-top:1px solid var(--ink-200)}
.roll__year{
  flex:0 0 86px;font-family:var(--font-mono);font-size:14px;
  color:var(--pool-700);font-variant-numeric:tabular-nums;
}
.roll__name{font:var(--weight-bold) 16px/1.4 var(--font-body);color:var(--pool-900)}

/* --- 18. Search bar ------------------------------------------------------ */

.search{
  display:flex;align-items:center;gap:10px;
  background:var(--white);border:1px solid var(--ink-200);border-radius:var(--radius-pill);
  padding:12px 20px;min-width:280px;flex:1 1 280px;max-width:420px;
}
.search .i{font-size:20px;color:var(--aqua-600)}
.search input{
  border:0;outline:none;background:none;font:var(--type-body);color:var(--pool-900);width:100%;
}
.toolbar{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  margin-bottom:36px;
}
.toolbar--end{align-items:flex-end;gap:20px}

/* --- 19. Footer ---------------------------------------------------------- */

.foot{background:var(--pool-950);color:var(--pool-100);padding:clamp(48px,7vw,80px) 0 32px}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px}
/* The crest's shield outline and AQUATICS ribbon are navy, so it needs a light
   ground to read against the footer. */
.foot__mark{display:inline-flex;background:var(--white);border-radius:18px;padding:14px}
.foot__mark img{height:104px;width:auto}
.foot__blurb{font:var(--type-sm);color:var(--pool-200);margin:18px 0 0;max-width:34ch}
.foot__title{
  font:var(--weight-bold) 13px/1 var(--font-body);text-transform:uppercase;
  letter-spacing:.18em;color:var(--rose-500);margin-bottom:18px;
}
.foot__links{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.foot__links a{font:var(--type-sm);color:var(--pool-100);text-align:left}
.foot__links a:hover{color:var(--rose-500);text-decoration:none}
.foot__base{
  border-top:1px solid rgba(255,255,255,.14);margin-top:48px;padding-top:24px;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font:var(--type-sm);color:var(--pool-200);
}
.foot__base a{color:var(--pool-200)}
.foot__base a:hover{color:var(--rose-500)}

/* --- 20. Motion ---------------------------------------------------------- */

@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes ken{from{transform:scale(1.04)}to{transform:scale(1.16)}}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes gauge-swim{from{stroke-dashoffset:408.407}to{stroke-dashoffset:285.885}}
@keyframes gauge-surface{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}

.rise-1{animation:rise 900ms 120ms var(--ease-splash) both}
.rise-2{animation:rise 900ms 240ms var(--ease-splash) both}
.rise-3{animation:rise 900ms 360ms var(--ease-splash) both}
.rise-4{animation:rise 900ms 480ms var(--ease-splash) both}

.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity 760ms var(--ease-out),transform 760ms var(--ease-splash);
}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .marquee__track{animation:none}
  .hero__media img{animation:none}
  .rise-1,.rise-2,.rise-3,.rise-4,.values-tail{animation:none;opacity:1}
  .is-in .values-tail{animation:none;opacity:1}
  .reveal .gauge__fill,.is-in .gauge__fill{stroke-dashoffset:285.885;animation:none}
  .reveal .gauge__cap,.is-in .gauge__cap{opacity:1;animation:none}
}