/* AquaKids Swim School — site-wide styles
   Brand colors sampled from the official logo files (site/assets/):
   blue #093797 · red #DA0637 */

:root {
  --blue: #093797;
  --navy: #0A2B66;
  --red: #DA0637;
  --red-dark: #b8052e;
  --blue-pale: #EEF2FB;
  --sand: #fdf6ec;
  --amber: #92400e;
  --amber-pale: #fef3c7;
  --ink: #1e2430;
  --muted: #5a6572;
  --line: #d8deed;
  --white: #ffffff;
  --radius: 10px;
  --max: 1080px;
  --measure: 660px; /* one reading width for every centered single-column block */
}

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

html { scroll-padding-top: 80px; }

/* Visible only to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard skip link — invisible until focused */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 16px;
  top: 8px;
  z-index: 20;
  background: var(--white);
  color: var(--navy);
  padding: 10px 16px;
  border-radius: 6px;
  outline: 3px solid var(--navy);
}

/* Visible keyboard focus everywhere */
a:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
.hero a:focus-visible,
.page-head a:focus-visible,
.site-footer a:focus-visible,
.cta-band a:focus-visible {
  outline-color: var(--white);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
}

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

a { color: var(--blue); }

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

/* ---------- Header ---------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-mark { height: 44px; width: auto; }
.brand-type { height: 22px; width: auto; }
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.site-nav a {
  text-decoration: none;
  color: var(--ink);
  font-size: 0.95rem;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--blue); }
.site-nav a.current {
  color: var(--blue);
  border-bottom-color: var(--red);
  font-weight: 600;
}

/* ---------- Mobile menu button ----------
   Hidden by default and only revealed when JavaScript is available, so a
   no-JS visitor keeps the full nav rather than a button that does nothing. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--blue); }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform 0.18s ease, top 0.18s ease, background 0.18s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
/* bars morph into an X when the menu is open */
.site-header.is-open .nav-toggle-bars { background: transparent; }
.site-header.is-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.site-header.is-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

/* Member log-in — a utility action, deliberately not part of the nav */
.member-login {
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  white-space: nowrap;
}
.member-login:hover {
  border-color: var(--blue);
  background: var(--blue-pale);
}

/* Nav dropdown (Swim Team) */
.nav-group { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-caret {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1;
  padding: 8px 6px;
  border-radius: 4px;
}
.nav-caret:hover { color: var(--blue); }
.nav-caret[aria-expanded="true"] { color: var(--blue); background: var(--blue-pale); }
.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  margin-top: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(10, 43, 102, 0.16);
  min-width: 250px;
  padding: 8px;
  display: flex;
  flex-direction: column;
}
.nav-menu[hidden] { display: none; }
.nav-menu a {
  display: block;
  padding: 12px;
  border-radius: 6px;
  border-bottom: 0;
  font-size: 0.95rem;
  color: var(--ink);
}
.nav-menu a:hover { background: var(--blue-pale); color: var(--blue); }
.nav-menu .menu-sep {
  border-top: 1px solid var(--line);
  margin: 6px 4px;
}

/* ---------- Hero (homepage) ---------- */
.hero {
  background:
    linear-gradient(165deg, rgba(10,43,102,0.72) 0%, rgba(9,55,151,0.62) 100%),
    url("assets/hero-pool-palms.jpg") center / cover no-repeat;
  color: var(--white);
  text-align: center;
  padding: 64px 20px 76px;
}
.hero-mascot {
  width: 130px;
  margin: 0 auto 24px;
}
.hero h1 {
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  max-width: 780px;
  margin: 0 auto 18px;
}
.hero p {
  font-size: clamp(1rem, 2vw, 1.2rem);
  max-width: var(--measure);
  margin: 0 auto 30px;
  opacity: 0.92;
}
.hero .photo-note {
  font-size: 0.8rem;
  margin-top: 34px;
}

/* Buttons */
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 999px;
  margin: 6px 8px;
}
.btn-primary { background: var(--red); color: var(--white); }
.btn-primary:hover { background: var(--red-dark); }
.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.75);
}
.btn-secondary:hover { border-color: var(--white); }
.btn-solid { background: var(--red); color: var(--white); }
.btn-solid:hover { background: var(--red-dark); }

/* ---------- Sections ---------- */
section { padding: 56px 0; }
section h2, .pathway h2, .cta-band h2 {
  color: var(--navy);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 34px;
}
.section-alt { background: var(--blue-pale); }
.section-tight { padding-top: 0; }

/* Card grids */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
/* Explicit counts avoid orphaned last cards at tablet widths */
.cards--quad { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cards--trio { grid-template-columns: repeat(3, 1fr); }
.cards--duo  { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.card h3 { color: var(--navy); margin-bottom: 6px; font-size: 1.15rem; }
.card .card-tag {
  display: inline-block;
  background: var(--blue-pale);
  color: var(--navy);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.card p { color: var(--ink); font-size: 0.98rem; margin-bottom: 14px; }
.card > :last-child { margin-bottom: 0; }
.card .card-link {
  font-weight: 600;
  text-decoration: none;
  color: var(--red);
  font-size: 0.95rem;
}
.card .card-link::after { content: " \2192"; }
.card .card-link:hover { text-decoration: underline; }
.card .award-years {
  color: var(--blue);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.9;
}
.card .step-label {
  display: block;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Trust row */
.trust-row {
  text-align: center;
  color: var(--navy);
  font-size: 0.98rem;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-row .sep { color: var(--red); padding: 0 10px; }

/* Pathway strip */
.pathway {
  text-align: center;
  padding: 52px 0;
}
.pathway h2 { margin-bottom: 14px; }
.pathway > .wrap > p { font-size: 1.05rem; max-width: var(--measure); margin: 0 auto 26px; }
.ladder-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: 820px;
  margin: 0 auto 26px;
}
.ladder-pills .step {
  background: var(--blue-pale);
  color: var(--navy);
  border-radius: 999px;
  padding: 5px 14px;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
}
.ladder-pills .step.is-here {
  background: var(--blue);
  color: var(--white);
}
.ladder-pills .step.is-dim { opacity: 0.55; }
.ladder-pills .arrow { color: var(--red); font-size: 0.85rem; }

/* Proof strip */
.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
blockquote {
  font-style: italic;
  color: var(--muted);
  border-left: 3px solid var(--red);
  padding-left: 16px;
}

/* ---------- Page headers (subpages) ---------- */
.page-head {
  background: linear-gradient(165deg, var(--navy), var(--blue));
  color: var(--white);
  text-align: center;
  padding: 52px 20px;
}
.head-mascot { width: 76px; margin: 0 auto 16px; }
.page-head h1 {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.page-head p { max-width: 620px; margin: 0 auto 22px; opacity: 0.92; }

/* ---------- The dated box (only seasonal edits happen here) ---------- */
.season-box {
  background: var(--sand);
  border: 2px solid var(--amber);
  border-radius: var(--radius);
  padding: 26px 28px;
  max-width: var(--measure);
  margin: 0 auto;
}
.season-box h2 {
  color: var(--amber);
  font-size: 1.25rem;
  text-align: left;
  margin-bottom: 10px;
}
.season-box p + p { margin-top: 10px; }

/* ---------- Placeholder chips — facts still needed from Issy ---------- */
.tbd {
  background: var(--amber-pale);
  color: var(--amber);
  border: 1px dashed var(--amber);
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 0.9em;
  font-weight: 600;
}

/* Stub-page notice */
.stub-note {
  background: var(--amber-pale);
  border: 1px dashed var(--amber);
  border-radius: var(--radius);
  color: var(--amber);
  font-weight: 600;
  text-align: center;
  padding: 14px 18px;
  margin: 0 auto 36px;
  max-width: var(--measure);
  font-size: 0.95rem;
}

/* ---------- Pricing table ---------- */
table.pricing {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  border-collapse: collapse;
}
table.pricing caption {
  caption-side: top;
  text-align: left;
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 700;
  padding-bottom: 12px;
}
.price-block { max-width: var(--measure); margin: 0 auto 38px; }
.price-block:last-child { margin-bottom: 0; }
.price-note { color: var(--muted); font-size: 0.95rem; margin-top: 12px; }
table.pricing th, table.pricing td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.pricing thead th {
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
table.pricing tbody th { color: var(--navy); }
table.pricing .price { text-align: right; }

/* ---------- Centered helpers (replaces inline styles) ---------- */
.centered-note {
  max-width: var(--measure);
  margin: 30px auto 0;
  text-align: center;
}
.centered-note--flush { margin-top: 0; }
.center-cta { text-align: center; margin-top: 24px; }
.note-inset {
  background: var(--white);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 18px 22px;
  text-align: left;
  max-width: var(--measure);
  margin: 30px auto 0;
}

/* ---------- Numbered steps ---------- */
ol.steps {
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: 0;
  list-style: none;
  counter-reset: step;
}
ol.steps li {
  counter-increment: step;
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}
ol.steps li::before {
  content: counter(step);
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  display: grid;
  place-items: center;
}
/* connector line so the three circles read as one sequence */
ol.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 40px;
  bottom: -14px;
  width: 2px;
  background: var(--line);
}

/* ---------- History timeline ---------- */
ol.timeline {
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: 0;
  list-style: none;
}
ol.timeline li {
  position: relative;
  padding-left: 34px;
  padding-bottom: 26px;
}
ol.timeline li:last-child { padding-bottom: 0; }
/* the dot */
ol.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--blue);
}
/* the connecting line */
ol.timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
ol.timeline .era {
  display: block;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
ol.timeline h3 {
  color: var(--navy);
  font-size: 1.08rem;
  margin-bottom: 6px;
}
ol.timeline p { color: var(--ink); margin-bottom: 10px; }
ol.timeline li > :last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  ol.timeline li { padding-left: 28px; }
}

/* ---------- Accordions ---------- */
details {
  max-width: var(--measure);
  margin: 0 auto 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--blue-pale);
  overflow: hidden;
}
details[open] {
  background: var(--white);
  border-color: var(--line);
}
/* on pale-blue sections the bars need the opposite fill to stay visible */
.section-alt details { background: var(--white); border-color: var(--line); }
.section-alt details[open] { border-color: var(--blue); }
details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;   /* full-width, 44px+ tap target */
  list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+";
  color: var(--red);
  font-size: 1.35rem;
  line-height: 1;
  flex: 0 0 auto;
}
details[open] summary::after { content: "\2212"; }
details p { margin-top: 0; padding: 0 18px 16px; }

/* ---------- Contact form ---------- */
form.inquiry {
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}
form.inquiry label {
  font-weight: 600;
  color: var(--navy);
  font-size: 0.95rem;
  display: grid;
  gap: 6px;
}
form.inquiry input,
form.inquiry select,
form.inquiry textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 100%;
}
form.inquiry input:focus,
form.inquiry select:focus,
form.inquiry textarea:focus {
  outline: 2px solid var(--blue);
  border-color: var(--blue);
}
form.inquiry button {
  font: inherit;
  font-weight: 600;
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
}
form.inquiry button:hover { background: var(--red-dark); }
.reply-promise {
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 14px;
}
form.inquiry button[disabled] { opacity: 0.65; cursor: default; }
.req { color: var(--red); }
.form-hint {
  max-width: 560px;
  margin: 0 auto 18px;
  color: var(--muted);
  font-size: 0.95rem;
  text-align: center;
}

/* Honeypot — stays in the DOM for bots, never shown to people.
   Needs to outrank `form.inquiry label`, which sets display:grid. */
form.inquiry .hp-field,
.hp-field { display: none; }

/* Inline result message after submitting */
.form-result {
  max-width: 560px;
  margin: 18px auto 0;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-weight: 600;
  text-align: center;
}
.form-result:empty { display: none; }
.form-result[data-state="success"] {
  background: #e6f4ea;
  color: #14532d;
  border: 1px solid #14532d;
}
.form-result[data-state="error"] {
  background: #fdeaee;
  color: #8a0a24;
  border: 1px solid #8a0a24;
}

/* ---------- Evaluation booking step ---------- */
.eval-age {
  max-width: 420px;
  margin: 0 auto 8px;
  display: grid;
  gap: 6px;
  font-weight: 600;
  color: var(--navy);
}
.eval-age select {
  font: inherit;
  font-weight: 400;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 100%;
  background: var(--white);
}
.eval-age select:focus {
  outline: 2px solid var(--blue);
  border-color: var(--blue);
}
.eval-window {
  max-width: var(--measure);
  margin: 18px auto 0;
  text-align: center;
  font-weight: 600;
  color: var(--navy);
  background: var(--blue-pale);
  border-radius: var(--radius);
  padding: 12px 18px;
}
.eval-window[hidden] { display: none; }
.eval-calendar {
  max-width: 900px;
  margin: 18px auto 0;
  min-height: 260px;
}
.eval-calendar[hidden] { display: none; }
.eval-pending {
  border: 1px dashed var(--amber);
  background: var(--amber-pale);
  color: var(--amber);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
  font-weight: 600;
}

/* ---------- Newsletter issue cards ---------- */
.card.issue-card {
  display: block;
  text-decoration: none;
  color: inherit;
  text-align: center;
}
a.card.issue-card:hover { border-color: var(--blue); }
.issue-preview {
  display: block;
  aspect-ratio: 8.5 / 11;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 14px;
  overflow: hidden;
}
.issue-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;   /* keep the masthead visible */
}
.issue-card h3 { font-size: 1.02rem; line-height: 1.35; }
.issue-card .issue-date {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.issue-card .open-note {
  display: block;
  color: var(--red);
  font-weight: 600;
  font-size: 0.95rem;
}
.issue-card .open-note::after { content: " \2192"; }

/* ---------- Closing CTA band ---------- */
.cta-band {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 56px 20px;
}
.cta-band h2 { color: var(--white); margin-bottom: 10px; }
.cta-band p { max-width: 560px; margin: 0 auto 24px; opacity: 0.92; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 36px 20px;
  font-size: 0.92rem;
  line-height: 1.9;
}
.site-footer a { color: var(--white); }
.site-footer .sep { color: var(--red); padding: 0 8px; }

/* ---------- Collapsed menu (phones and small tablets) ----------
   Only applies when the page has told us JavaScript is running. */
@media (max-width: 900px) {
  .js .nav-toggle { display: inline-flex; }

  /* collapsed by default */
  .js .site-header .site-nav,
  .js .site-header .member-login { display: none; }

  /* opened by the button */
  .js .site-header.is-open .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    margin-top: 8px;
    border-top: 1px solid var(--line);
    padding-top: 8px;
  }
  .js .site-header.is-open .site-nav > a,
  .js .site-header.is-open .nav-group > a {
    padding: 14px 4px;
    font-size: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .js .site-header.is-open .site-nav a.current {
    border-bottom-color: var(--line);
    color: var(--blue);
  }

  /* Swim Team keeps its link and caret on one row, with the sub-menu below */
  .js .site-header.is-open .nav-group {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    position: static;
  }
  .js .site-header.is-open .nav-group > a { grid-column: 1; }
  .js .site-header.is-open .nav-caret {
    grid-column: 2;
    position: static;
    margin: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    height: 100%;
  }
  .js .site-header.is-open .nav-menu { grid-column: 1 / -1; }
  .js .site-header.is-open .nav-menu {
    position: static;
    width: auto;
    max-width: none;
    min-width: 0;
    transform: none;
    margin: 0 0 8px 18px;
    padding: 0;
    border: 0;
    border-left: 2px solid var(--blue-pale);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .js .site-header.is-open .nav-menu a { padding: 12px 14px; }
  .js .site-header.is-open .menu-sep { margin: 2px 14px; }

  .js .site-header.is-open .member-login {
    display: block;
    width: 100%;
    text-align: center;
    margin: 12px 0 4px;
    padding: 13px 16px;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .cards--quad { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .cards--trio { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cards--duo { grid-template-columns: 1fr; }

  /* Pricing: stack each row into a readable block instead of cramped columns */
  table.pricing, table.pricing caption, table.pricing tbody,
  table.pricing tr, table.pricing th, table.pricing td {
    display: block;
    width: 100%;
  }
  table.pricing thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  table.pricing tr {
    border: 1px solid var(--line);
    border-top: 3px solid var(--blue);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 12px;
  }
  table.pricing th, table.pricing td { border-bottom: none; padding: 0; }
  table.pricing tbody th { font-size: 1.05rem; margin-bottom: 4px; }
  table.pricing .detail { color: var(--muted); font-size: 0.95rem; margin-bottom: 8px; }
  table.pricing .price {
    text-align: left;
    font-weight: 700;
    color: var(--navy);
    font-size: 1.05rem;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  section { padding: 40px 0; }
  .cards--quad { grid-template-columns: 1fr; }

  /* Header: don't stick on small screens */
  .site-header { position: static; }
  .site-header .wrap { position: relative; }
  .brand-mark { height: 36px; }
  .brand-type { height: 18px; }
  /* caret needs a real finger-sized target */
  .nav-caret {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* No-JS fallback only: the nav stays visible and wraps, as it did before
     the menu button existed. With JS the .js rules above take over. */
  .site-nav { width: 100%; justify-content: center; gap: 6px 14px; }
  .site-nav a { font-size: 0.9rem; padding: 10px 4px; }
  .member-login { margin-top: 4px; }
  .nav-group { position: static; }
  .nav-menu {
    left: 20px;
    right: 20px;
    transform: none;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  /* Hero + page heads: get the headline and primary button onto the first screen */
  .hero { padding: 36px 20px 52px; }
  .hero-mascot { width: 80px; margin-bottom: 16px; }
  .page-head { padding: 36px 20px 40px; }
  .head-mascot { width: 58px; margin-bottom: 12px; }
  .hero .btn, .page-head .btn, .cta-band .btn, .center-cta .btn {
    display: block;
    max-width: 300px;
    margin: 10px auto;
    text-align: center;
  }

  /* Trust row & footer: stack lines with small ❖ dividers between them */
  .trust-row .sep, .site-footer .sep {
    display: block;
    padding: 3px 0;
    font-size: 0.7rem;
  }

  .tbd { white-space: normal; }
  .season-box { padding: 20px 18px; }
}

@media (max-height: 500px) {
  .site-header { position: static; }
}

/* Photographs placed inside a content section. Sits on the reading width,
   never wider than the text column's container. */
.content-photo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 820px;
  margin: 26px auto 0;
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(10, 43, 102, 0.16);
}
.content-photo + .photo-caption {
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  margin: 10px auto 0;
}

/* A portrait photo, or one whose source file is small. Constrained so the
   browser never has to stretch it past its real pixel width. */
.content-photo--portrait {
  max-width: 380px;
}

/* ==========================================================================
   THE "v2" LOOK — now sitewide (Oct 2026)

   Built first on swim-lessons.html, then rolled out to all ten pages.
   Everything below deliberately re-declares rules from the top half of this
   file. It wins because it comes later, so the ORDER MATTERS: keep this
   block last. The older rules are left in place on purpose — they are what
   a page falls back to if this block is ever removed.

   Every page needs three things to pick this up:
     1. the Outfit/Inter <link> in its <head>
     2. class="with-dock" on <body> IF it carries the floating dock
        (that class only reserves footer space so the dock covers nothing)
     3. the .lv-progress bar, and optionally .lv-dock / .lv-fab

   The scroll effects use CSS scroll-driven animations (animation-timeline).
   Every one sits behind @supports, so a browser without them shows the page
   fully rendered and simply still. Motion is also dropped for anyone who has
   asked their system to reduce it.
   ========================================================================== */

body {
  --lv-deep: #072351;        /* mid water  */
  --lv-abyss: #041534;       /* deep water */
  --lv-sky: #9CC4FF;         /* light accent that passes on navy */
  --lv-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lv-dsp: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lv-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: var(--lv-sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
.lv-stat b,
table.pricing caption {
  font-family: var(--lv-dsp);
  letter-spacing: -0.028em;
  line-height: 1.1;
}

/* Light text sits on dark grounds in the hero and the pathway strip, so the
   focus ring has to flip to white there too. */
.lv-hero a:focus-visible,
.lv-path a:focus-visible,
.lv-dock a:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
}

/* ---------- Reading-progress bar ---------- */
.lv-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  background: rgba(9, 55, 151, 0.14);
}
.lv-progress span {
  display: block;
  height: 100%;
  background: var(--red);
  transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
  .lv-progress span {
    animation: lv-grow linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes lv-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Header: frosted, and tightens as you scroll ---------- */
.site-header {
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  border-bottom-color: rgba(216, 222, 237, 0.85);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 601px) {
    .site-header .wrap {
      animation: lv-shrink linear both;
      animation-timeline: scroll(root);
      animation-range: 0 180px;
    }
  }
}
@keyframes lv-shrink {
  from { padding-top: 12px; padding-bottom: 12px; }
  to   { padding-top: 7px;  padding-bottom: 7px;  }
}
.site-nav a {
  border-bottom: 0;
  border-radius: 999px;
  padding: 9px 13px;
  font-weight: 500;
  transition: background 0.25s, color 0.25s;
}
.site-nav a:hover { background: var(--blue-pale); }
.site-nav a.current { background: var(--blue-pale); }
.member-login {
  border-color: var(--blue);
  transition: background 0.25s, color 0.25s;
}
.member-login:hover { background: var(--blue); color: var(--white); }
/* Inside the collapsed menu the links are full-width rows with a hairline
   under each, so the desktop pill shape has to come back off — otherwise the
   rounding bends every row's underline. */
@media (max-width: 900px) {
  .site-header.is-open .site-nav a,
  .site-header.is-open .nav-group > a {
    border-radius: 0;
    padding: 14px 10px;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  line-height: 1;
  transition: transform 0.3s var(--lv-ease), box-shadow 0.3s, background 0.25s, color 0.25s;
}
.btn-primary,
.btn-solid { box-shadow: 0 12px 28px -10px rgba(218, 6, 55, 0.6); }
.btn-primary:hover,
.btn-solid:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px -12px rgba(218, 6, 55, 0.7);
}
.lv-btn-glass {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lv-btn-glass:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-3px);
}
.lv-btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.lv-btn-ghost:hover { background: rgba(255, 255, 255, 0.24); }
.lv-btn-sm { min-height: 44px; padding: 0 20px; font-size: 0.95rem; }

/* ---------- Rising bubbles ---------- */
.lv-bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.lv-bub {
  position: absolute;
  bottom: -16%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%,
    rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.14) 44%, rgba(255, 255, 255, 0.03) 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
  animation: lv-rise linear infinite;
}
@keyframes lv-rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.68); opacity: 0; }
  12%  { opacity: 0.92; }
  52%  { transform: translate3d(20px, -48vh, 0) scale(1); }
  100% { transform: translate3d(-16px, -104vh, 0) scale(1.12); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-bub { animation: none; opacity: 0.3; }
}

/* ---------- Scroll reveals ----------
   The common blocks reveal themselves on every page, with no per-element
   classes in the markup — this is what gives the other nine pages the same
   rhythm as Swim Lessons without rewriting them.

   This rule is deliberately FIRST: it ties with the .lv-rv-* classes below
   on specificity, so whichever comes last wins. Keeping it above means a
   page that asks for a particular direction still gets it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    section > .wrap > h2,
    .card,
    .price-block,
    ol.steps > li,
    ol.timeline > li,
    .note-inset,
    .season-box,
    .content-photo,
    .proof > * {
      animation: lv-up linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 27%;
    }
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lv-rv,
    .lv-rv-l,
    .lv-rv-r,
    .lv-rv-z { animation: lv-up linear both; animation-timeline: view(); animation-range: entry 4% cover 27%; }
    .lv-rv-l { animation-name: lv-left; }
    .lv-rv-r { animation-name: lv-right; }
    .lv-rv-z { animation-name: lv-zoom; animation-range: entry 2% cover 32%; }
    .lv-rv-s { animation: lv-up linear both; animation-timeline: view(); animation-range: entry 14% cover 38%; }
  }
}
@keyframes lv-up    { from { opacity: 0; transform: translateY(46px); }  to { opacity: 1; transform: none; } }
@keyframes lv-left  { from { opacity: 0; transform: translateX(-52px); } to { opacity: 1; transform: none; } }
@keyframes lv-right { from { opacity: 0; transform: translateX(52px); }  to { opacity: 1; transform: none; } }
@keyframes lv-zoom  { from { opacity: 0; transform: scale(0.93); }       to { opacity: 1; transform: none; } }

/* ---------- Hero ---------- */
.lv-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: min(90vh, 790px);
  background: var(--lv-abyss);
  color: var(--white);
}
.lv-hero-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lv-hero-img {
      animation: lv-hero-par linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes lv-hero-par {
  from { transform: scale(1.18) translateY(-3.5%); }
  to   { transform: scale(1.18) translateY(5.5%); }
}
.lv-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(177deg,
    rgba(4, 21, 52, 0.78) 0%, rgba(7, 35, 81, 0.5) 40%, rgba(4, 21, 52, 0.93) 100%);
}
.lv-hero-mark {
  position: absolute;
  right: 4%;
  top: 70px;
  z-index: 2;
  width: clamp(120px, 15vw, 205px);
  height: auto;
  opacity: 0.4;
  pointer-events: none;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lv-hero-mark {
      animation: lv-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes lv-drift {
  from { transform: translateY(-26px) rotate(-5deg); }
  to   { transform: translateY(46px) rotate(5deg); }
}
.lv-hero-inner {
  position: relative;
  z-index: 3;
  padding-top: 112px;
  padding-bottom: 68px;
  width: 100%;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lv-hero-inner {
      animation: lv-hero-out linear both;
      animation-timeline: view();
      animation-range: exit -5% exit 72%;
    }
  }
}
@keyframes lv-hero-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-54px); }
}
.lv-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
  padding: 9px 17px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lv-eyebrow .sep { color: var(--lv-sky); padding: 0 6px; }
.lv-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.9rem);
  font-weight: 800;
  max-width: 19ch;
  margin: 26px 0 0;
}
.lv-hero h1 em { font-style: normal; color: var(--lv-sky); }
.lv-sub {
  margin-top: 22px;
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: rgba(255, 255, 255, 0.9);
}
.lv-acts { margin-top: 32px; margin-left: -8px; }
.lv-stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: 46px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.lv-stat {
  flex: 1 1 165px;
  padding: 20px 24px;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.16);
}
.lv-stat b { display: block; font-size: 1.7rem; font-weight: 700; }
.lv-stat span {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 3px;
  line-height: 1.45;
}

/* ---------- The page header every page but Home carries ----------
   The smaller sibling of the Swim Lessons hero: same deep water, same type,
   no photograph. Markup is unchanged from before — only the look moved. */
.page-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(168deg, var(--lv-deep) 0%, var(--lv-abyss) 100%);
  padding: 84px 20px 80px;
}
.page-head .head-mascot,
.page-head h1,
.page-head p,
.page-head .btn { position: relative; z-index: 3; }
.page-head .lv-bubbles { z-index: 1; }
.page-head h1 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 800;
  max-width: 20ch;
  margin: 0 auto 16px;
}
.page-head p {
  max-width: 58ch;
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  color: rgba(255, 255, 255, 0.88);
  opacity: 1;
  margin: 0 auto 30px;
}
.head-mascot { width: 68px; margin-bottom: 20px; }

/* ---------- Home's photographic hero, in the same language ---------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(177deg, rgba(4, 21, 52, 0.74) 0%, rgba(7, 35, 81, 0.5) 42%, rgba(4, 21, 52, 0.92) 100%),
    url("assets/hero-pool-palms.jpg") center / cover no-repeat;
  padding: 100px 20px 108px;
}
.hero .hero-mascot,
.hero h1,
.hero p,
.hero .btn { position: relative; z-index: 3; }
.hero .lv-bubbles { z-index: 1; }
.hero h1 {
  font-size: clamp(2.1rem, 4.9vw, 3.9rem);
  font-weight: 800;
  max-width: 20ch;
  margin: 0 auto 20px;
}
.hero p {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  color: rgba(255, 255, 255, 0.9);
  opacity: 1;
  max-width: 56ch;
  margin: 0 auto 32px;
}
.hero-mascot { width: 116px; margin-bottom: 26px; }

/* ---------- Trust row: now the waterline under the hero ---------- */
.trust-row {
  background: var(--lv-deep);
  color: rgba(255, 255, 255, 0.92);
  border: 0;
  padding: 20px 0;
  font-size: 0.9rem;
}
.trust-row .sep { color: var(--lv-sky); }

/* ---------- Sections and their headings ---------- */
section { padding: 96px 0; }
.section-tight { padding-top: 0; }
section h2,
.pathway h2 {
  text-align: left;
  font-size: clamp(1.75rem, 3.2vw, 2.8rem);
  margin-bottom: 0;
}
.lv-head { margin-bottom: 44px; }
.lv-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--lv-dsp);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.lv-kicker::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(9, 55, 151, 0.3), rgba(9, 55, 151, 0));
}
.lv-kicker--light { color: var(--lv-sky); }
.lv-kicker--light::after {
  background: linear-gradient(90deg, rgba(156, 196, 255, 0.45), rgba(156, 196, 255, 0));
}
.lv-kicker--amber { color: var(--amber); }
.lv-kicker--amber::after {
  background: linear-gradient(90deg, rgba(146, 64, 14, 0.35), rgba(146, 64, 14, 0));
}
.lv-lede {
  margin-top: 18px;
  max-width: 62ch;
  font-size: 1.1rem;
  color: var(--muted);
}
.lv-path .lv-lede { color: rgba(255, 255, 255, 0.84); }

/* ---------- Cards ---------- */
.cards { gap: 26px; }
.card {
  position: relative;
  border-top: 1px solid var(--line);
  border-radius: 24px;
  padding: 34px;
  overflow: hidden;
  transition: transform 0.4s var(--lv-ease), box-shadow 0.4s, border-color 0.4s;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: radial-gradient(520px 200px at 50% -8%, rgba(9, 55, 151, 0.07), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-9px);
  box-shadow: 0 34px 68px -30px rgba(9, 55, 151, 0.4);
  border-color: #C0CFEB;
}
.card:hover::after { opacity: 1; }
.card h3 { font-size: 1.45rem; margin-bottom: 10px; }
.card .step-label { letter-spacing: 0.1em; margin-bottom: 14px; }
.card .card-tag {
  background: transparent;
  color: var(--blue);
  padding: 0;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}
/* Level initial: A / L / S */
.lv-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--blue), var(--navy));
  color: var(--white);
  font-family: var(--lv-dsp);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 20px;
  box-shadow: 0 12px 26px -12px rgba(9, 55, 151, 0.7);
}

/* ---------- Photos ---------- */
.lv-photo {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(9, 55, 151, 0.5);
}
.lv-photo img { width: 100%; height: 100%; object-fit: cover; }
.lv-photo--portrait { max-width: 380px; }
/* 16:9, not 21:9. The only photo that uses this band is a child standing
   full length, and a 21:9 slice of a 4:3 photo throws away 43% of its height
   — which took the top of her head off. */
.lv-photo--band { aspect-ratio: 16 / 9; }
/* Anchor the crop to the TOP so a standing figure keeps their head. */
.lv-photo--band img { object-position: center top; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lv-photo--band img {
      animation: lv-ph-par linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes lv-ph-par {
  from { transform: scale(1.06) translateY(-2%); }
  to   { transform: scale(1.06) translateY(2%); }
}
.lv-caption {
  margin-top: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}
.lv-split {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 38px;
  align-items: center;
  margin-top: 44px;
}
.lv-split-copy h3 { font-size: 1.6rem; margin-bottom: 14px; }
.lv-split-copy p { color: var(--muted); }

/* ---------- The one dated box ---------- */
.season-box {
  background: var(--sand);
  border: 1px solid #EBCB96;
  border-radius: 26px;
  padding: 40px;
  max-width: 860px;
  box-shadow: 0 30px 60px -38px rgba(124, 54, 8, 0.45);
}
.season-box h2 {
  color: var(--amber);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  margin-bottom: 0;
}
.season-box p { margin-top: 16px; color: #5C2A09; }
.season-box strong { color: var(--amber); }

/* ---------- Inset note ---------- */
.note-inset {
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 32px;
  max-width: 860px;
  margin-top: 38px;
  box-shadow: 0 22px 48px -34px rgba(9, 55, 151, 0.4);
}
.note-inset p { color: var(--muted); }
.note-inset strong { color: var(--ink); }

/* ---------- Shark Pathway: the deep end ---------- */
.lv-path {
  position: relative;
  overflow: hidden;
  background: var(--lv-deep);
  color: var(--white);
  text-align: left;
  padding: 96px 0;
}
.lv-path > .wrap { position: relative; z-index: 3; }
.lv-path h2 { color: var(--white); }
.lv-path-track {
  position: relative;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.17);
  margin-bottom: 26px;
}
.lv-path-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;   /* four of the eight rungs are the lessons on this page */
  border-radius: 99px;
  background: linear-gradient(90deg, #4C85E8, #BFD8FF);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lv-path-fill {
      animation: lv-path linear both;
      animation-timeline: view();
      animation-range: entry 28% cover 56%;
    }
  }
}
@keyframes lv-path { from { width: 0; } to { width: 50%; } }
.lv-path .ladder-pills {
  justify-content: flex-start;
  max-width: none;
  gap: 10px;
  margin: 0;
}
.lv-path .ladder-pills .step {
  height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 19px;
  font-size: 0.9rem;
  transition: transform 0.3s var(--lv-ease);
}
.lv-path .ladder-pills .step:hover { transform: translateY(-3px); }
.lv-path .ladder-pills .step.is-here {
  background: var(--white);
  color: var(--lv-deep);
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.6);
}
.lv-path .ladder-pills .step.is-dim {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
  opacity: 1;
}
.lv-path .ladder-pills .arrow { color: rgba(255, 255, 255, 0.45); }
.lv-path-more { margin-top: 34px; }
.lv-path-more a {
  color: #BFD8FF;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(191, 216, 255, 0.4);
  padding-bottom: 3px;
  transition: color 0.25s, border-color 0.25s;
}
.lv-path-more a:hover { color: var(--white); border-bottom-color: var(--white); }

/* ---------- Pricing ---------- */
.lv-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
}
/* Every price table is a card now, on Swim Team and Camps too — not only
   inside the two-up grid on Swim Lessons. The max-width is a little wider
   than the old reading measure to pay for the card's own padding. */
.price-block {
  max-width: 740px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 10px 34px 30px;
  box-shadow: 0 30px 64px -40px rgba(9, 55, 151, 0.4);
  transition: transform 0.4s var(--lv-ease), box-shadow 0.4s;
}
.price-block:hover {
  transform: translateY(-7px);
  box-shadow: 0 40px 80px -36px rgba(9, 55, 151, 0.45);
}
.lv-price-grid .price-block { max-width: none; margin: 0; }
table.pricing { max-width: none; }
table.pricing caption { font-size: 1.3rem; padding: 26px 0 18px; }
table.pricing th,
table.pricing td { padding: 17px 16px 17px 0; }
table.pricing .price {
  font-family: var(--lv-dsp);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blue);
  white-space: nowrap;
  padding-right: 0;
}

/* ---------- Numbered steps become cards ---------- */
ol.steps { max-width: 860px; }
ol.steps li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 26px 30px;
  gap: 20px;
  margin-bottom: 16px;
  transition: transform 0.35s var(--lv-ease), box-shadow 0.35s;
}
ol.steps li:hover {
  transform: translateX(7px);
  box-shadow: 0 26px 54px -34px rgba(9, 55, 151, 0.42);
}
ol.steps li::before {
  content: counter(step, decimal-leading-zero);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--blue), var(--navy));
  font-family: var(--lv-dsp);
  font-size: 1rem;
  box-shadow: 0 10px 22px -10px rgba(9, 55, 151, 0.7);
}
ol.steps li:not(:last-child)::after { display: none; }
ol.steps strong { display: block; font-family: var(--lv-dsp); font-size: 1.15rem; }

/* ---------- FAQ ---------- */
details {
  max-width: 860px;
  margin-bottom: 12px;
  border-radius: 18px;
  transition: box-shadow 0.35s, border-color 0.35s;
}
.section-alt details[open] {
  border-color: #C0CFEB;
  box-shadow: 0 26px 54px -34px rgba(9, 55, 151, 0.4);
}
details summary { padding: 21px 26px; font-size: 1.05rem; transition: color 0.25s; }
details summary:hover { color: var(--blue); }
details summary::after {
  content: "";
  width: 10px;
  height: 10px;
  margin: 0 8px 4px 0;
  border-right: 2.5px solid var(--red);
  border-bottom: 2.5px solid var(--red);
  transform: rotate(45deg);
  transition: transform 0.35s var(--lv-ease), margin-bottom 0.35s;
}
details[open] summary::after {
  content: "";
  transform: rotate(-135deg);
  margin-bottom: 0;
}
details p { padding: 0 26px 24px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  details[open] p { animation: lv-answer 0.42s var(--lv-ease) both; }
}
@keyframes lv-answer {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Closing band ---------- */
.cta-band {
  background: linear-gradient(170deg, var(--lv-deep), var(--lv-abyss));
  padding: 112px 20px;
}
.cta-band h2 {
  text-align: center;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  max-width: 22ch;
  margin: 0 auto 16px;
}
.cta-band p { font-size: 1.08rem; margin-bottom: 32px; }

/* ---------- Floating dock and back-to-top ---------- */
.lv-dock {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 40;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(7, 35, 81, 0.9);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 26px 64px -20px rgba(4, 21, 52, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.lv-dock .btn { margin: 0; }
.lv-dock-label {
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0 8px 0 14px;
  white-space: nowrap;
}
.lv-fab {
  position: fixed;
  right: 26px;
  bottom: 24px;
  z-index: 40;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--blue);
  text-decoration: none;
  box-shadow: 0 20px 44px -16px rgba(9, 55, 151, 0.65), inset 0 0 0 1px var(--line);
  transition: transform 0.3s var(--lv-ease), box-shadow 0.3s;
}
.lv-fab:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 56px -16px rgba(9, 55, 151, 0.7);
}
/* Both slide in once you have started reading. Without scroll-driven
   animation support — or for anyone who has asked for less motion — they are
   simply always there. The `visibility` step matters: an element sitting at
   opacity 0 is still clickable, so it has to be properly hidden until it
   arrives, or it covers the page with invisible buttons. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .lv-dock {
      animation: lv-dock-in linear both;
      animation-timeline: scroll(root);
      animation-range: 3% 9%;
    }
    .lv-fab {
      animation: lv-fab-in linear both;
      animation-timeline: scroll(root);
      animation-range: 6% 13%;
    }
  }
}
@keyframes lv-dock-in {
  0%   { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(90px); }
  2%   { visibility: visible; }
  100% { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
}
@keyframes lv-fab-in {
  0%   { opacity: 0; visibility: hidden; transform: scale(0.5); }
  2%   { visibility: visible; }
  100% { opacity: 1; visibility: visible; transform: scale(1); }
}

/* Only pages that actually carry the dock need room for it under the footer. */
.with-dock .site-footer { padding-bottom: 104px; }

/* ---------- v2 tablet ---------- */
@media (max-width: 980px) {
  .lv-split { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .lv-photo--portrait { max-width: 320px; }
  .lv-price-grid { grid-template-columns: minmax(0, 1fr); }
  section,
  .lv-path { padding: 72px 0; }
  .section-tight { padding-top: 0; }
  .lv-hero-mark { display: none; }
  .lv-hero-inner { padding-top: 76px; padding-bottom: 52px; }
}

/* ---------- v2 phone ----------
   These restore the base stylesheet's own mobile behaviour wherever a
   rule above now outranks it. */
@media (max-width: 760px) {
  /* Stacked pricing rows: undo the desk-width table padding and price size */
  table.pricing th,
  table.pricing td { border-bottom: none; padding: 0; }
  table.pricing .price {
    text-align: left;
    font-size: 1.15rem;
    padding: 0;
  }
  table.pricing caption { padding: 16px 0 14px; }
  .price-block { padding: 8px 20px 22px; }
}
@media (max-width: 600px) {
  section,
  .lv-path { padding: 56px 0; }
  .section-tight { padding-top: 0; }

  .lv-hero { min-height: 0; }
  .lv-hero-inner { padding-top: 44px; padding-bottom: 40px; }
  .lv-hero h1 { max-width: none; }
  .lv-stats { grid-template-columns: 1fr 1fr; display: grid; margin-top: 32px; }
  .lv-stat { box-shadow: inset -1px -1px 0 rgba(255, 255, 255, 0.16); padding: 15px 16px; }
  .lv-stat b { font-size: 1.4rem; }

  /* Page headers and Home's hero shrink, as the base stylesheet does */
  .page-head { padding: 48px 20px 46px; }
  .head-mascot { width: 54px; margin-bottom: 14px; }
  .hero { padding: 52px 20px 60px; }
  .hero-mascot { width: 84px; margin-bottom: 18px; }

  /* Full-width stacked buttons, as the base stylesheet does. .page-head and
     .hero are named here because the older rule up the file sets them to
     display:block, which would stop the label centring in the taller pill. */
  .lv-hero .btn,
  .page-head .btn,
  .hero .btn,
  .cta-band .btn,
  .center-cta .btn {
    display: flex;
    max-width: 300px;
    margin: 10px auto;
  }
  .lv-acts { margin-left: 0; }

  /* ❖ dividers stack, as the base stylesheet does */
  .trust-row .sep,
  .site-footer .sep { display: block; padding: 3px 0; font-size: 0.7rem; }
  .lv-eyebrow .sep { display: inline; padding: 0 6px; font-size: inherit; }

  .card,
  .season-box,
  .note-inset { padding: 24px 22px; }
  .card:hover,
  ol.steps li:hover,
  .price-block:hover { transform: none; }
  .lv-photo--band { aspect-ratio: 4 / 3; }
  .lv-photo--portrait { max-width: 100%; }

  ol.steps li { padding: 22px 20px; gap: 14px; flex-direction: column; }

  /* Dock becomes a bar; the back-to-top button sits above it */
  .lv-dock { left: 12px; right: 12px; bottom: 12px; transform: none; justify-content: center; }
  .lv-dock-label { display: none; }
  .lv-fab { bottom: 86px; right: 14px; width: 48px; height: 48px; }
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .lv-dock { animation-name: lv-dock-in-phone; }
    }
  }
  .with-dock .site-footer { padding-bottom: 112px; }
}
@keyframes lv-dock-in-phone {
  0%   { opacity: 0; visibility: hidden; transform: translateY(90px); }
  2%   { visibility: visible; }
  100% { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* ---------- Dock timing fix ----------
   The dock faded in over 3%-9% of total page scroll. On a long page that point
   arrives while the hero is still filling the screen, so on a 1366x768 laptop the
   dock landed on top of the hero's own two buttons - measured by bounding box, not
   by eye. Tying the range to viewport height instead means it waits until the hero
   has genuinely scrolled away, on every page length. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .lv-dock { animation-range: 100vh 122vh; }
    .lv-fab  { animation-range: 92vh 112vh; }
  }
}
/* Belt and braces: the scroll-driven entrance does not run at all under reduced
   motion or without animation-timeline support, and there the dock is permanently
   visible. This class is applied by nav.js whenever the hero is on screen, so the
   dock can never sit on the hero buttons on any code path. */
.lv-dock.is-over-hero { display: none; }

/* ---------- Equipment lists inside cards ----------
   Added after the v2 block like the dock fix above, but note the difference:
   `.kit-list` is a NEW selector that the v2 design never defines, so it adds
   rather than overrides and the "keep v2 last" rule is not in play here. */
.kit-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.kit-list li {
  position: relative;
  padding: 0 0 0 22px;
  margin: 0 0 7px;
  color: var(--ink);
}
.kit-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}
.kit-list li:last-child { margin-bottom: 0; }

/* The dock carries two CTAs now (inquiry + evaluation). On a phone it is a
   full-width bar with the label hidden, and two buttons will not sit side by
   side in ~350px - let them stack rather than overflow. */
@media (max-width: 600px) {
  .lv-dock { flex-wrap: wrap; gap: 8px; }
  .lv-dock .btn { flex: 1 1 auto; text-align: center; }
}
/* Two stacked buttons make the dock ~116px tall instead of ~64px, so the
   back-to-top button at bottom:86px now lands on it. Lift it clear. */
@media (max-width: 600px) {
  .lv-fab { bottom: 142px; }
}

/* ---------- College wall ----------
   New selectors; nothing here overrides the v2 block. */
.wall-stat {
  text-align: center;
  font-family: inherit;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  color: var(--blue);
  margin: 0 0 6px;
}
.wall-stat strong { font-size: 1.5em; color: var(--red); }
.wall {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 14px;
  perspective: 1000px;
}
.wall-tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-style: preserve-3d;
}
.wall-tile img { height: 74px; width: auto; max-width: 100%; object-fit: contain; }
/* The name keeps its space whether shown or not, so tiles never jump. */
.wall-name {
  margin-top: 12px;
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: center;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.28s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .wall-tile { transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.38s ease; }
  .wall-tile:hover {
    transform: translateY(-9px) rotateX(11deg) scale(1.05);
    box-shadow: 0 24px 44px -20px rgba(10, 43, 102, 0.5);
  }
  .wall-tile:hover .wall-name { opacity: 1; }
  .wall-tile:focus-within .wall-name { opacity: 1; }
}
/* No hover on a phone, and no motion for anyone who asked for less - in both
   cases the name is simply always visible rather than unreachable. */
@media (hover: none) { .wall-name { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wall-name { opacity: 1; } }

/* ---------- Olympic Trials qualifiers ----------
   New selectors; nothing here overrides the v2 block. The year blocks reuse
   `.card`, so they inherit the shared surface and the generic scroll reveal
   rather than defining their own. */
.trials {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.trials-year { text-align: center; }
.trials-year b {
  display: block;
  font-family: var(--lv-dsp, inherit);
  font-size: clamp(2.1rem, 5vw, 2.7rem);
  font-weight: 800;
  line-height: 1;
  color: var(--blue);
  letter-spacing: -0.01em;
}
.trials-year b::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: var(--red);
}
.trials-names {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.trials-names li {
  font-size: 0.98rem;
  line-height: 1.5;
  padding: 5px 0;
  color: var(--ink);
}

/* ---------- Page header with a photograph behind it ----------
   A NEW selector, so it adds to the v2 block above rather than overriding it —
   the "keep v2 last" rule is not in play here.
   The gradient and the photo are layers of ONE background shorthand, and the
   gradient is listed first because the first layer paints on top. That is why
   these overlay colours are rgba() while the photo-less .page-head uses solid
   vars: the text has to stay readable over whatever the photograph is doing. */
.page-head--photo {
  background:
    linear-gradient(168deg, rgba(7, 35, 81, 0.82) 0%, rgba(4, 21, 52, 0.90) 100%),
    var(--head-photo) center / cover no-repeat;
}

/* ---------- Coach cards ----------
   .lv-caption is centred by default, which is right under a photograph but
   wrong inside a coach card, where the name and the bio are both left-aligned.
   At 240px the mismatch is invisible; in the full-width Program Director card
   it reads as a mistake. NEW selector, so it adds to the v2 block rather than
   overriding it. */
#staff .card .lv-caption { text-align: left; }

/* Coach cards size to their own content. Grid items stretch to the tallest in
   the row by default, so one long bio left three cards ~700px of empty space.
   Bios will never be the same length, so let each card end where its text ends. */
#staff .cards, #support .cards { align-items: start; }

/* ---------- Staff grid and bio popup (coaches page) ----------
   NEW selectors, so this adds to the v2 block above rather than overriding it.

   PROGRESSIVE ENHANCEMENT, the same way the nav does it: the bios are plain
   visible text by default, and are only hidden — and the button only shown —
   once the inline head script has put `js` on <html>. With JavaScript off, a
   visitor gets every bio in full on the page. Never hide .staff-bio in an
   unscoped rule. */
.staff-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
@media (max-width:900px){ .staff-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .staff-grid{ grid-template-columns:1fr; } }

.staff-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 16px;text-align:center;min-width:0;
}
/* The headshot slot. height:auto is not optional — see the stretch bug. */
.staff-photo{
  display:block;width:116px;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:50%;margin:0 auto 12px;background:var(--sand);
}
.staff-name{ font-family:var(--display);font-weight:700;font-size:1.02rem;margin:0;color:var(--navy); }
.staff-role{ font-size:0.82rem;color:var(--muted);margin:4px 0 0;line-height:1.4; }

.staff-open{
  appearance:none;display:none;margin-top:14px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:0.82rem;
  color:var(--blue);background:var(--sand);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;
}
.js .staff-open{ display:inline-block; }
.staff-open:hover{ border-color:var(--blue); }
.staff-open:focus-visible{ outline:2px solid var(--blue);outline-offset:2px; }

.staff-bio{ margin-top:12px;text-align:left;font-size:0.92rem;color:var(--muted); }
.staff-bio p{ margin:0 0 10px; }
.staff-bio p:last-child{ margin-bottom:0; }
.js .staff-bio{ display:none; }

/* ---- the popup itself ---- */
.staff-dialog{
  position:fixed;inset:0;margin:auto;
  width:min(640px, calc(100vw - 32px));
  max-height:min(86vh, 760px);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px 26px;background:var(--white);color:var(--navy);
  box-shadow:0 24px 60px rgba(4,21,52,0.28);
}
.staff-dialog::backdrop{ background:rgba(4,21,52,0.62); }
.staff-dialog-name{ font-family:var(--display);font-weight:800;font-size:1.5rem;margin:0;color:var(--navy);padding-right:36px; }
.staff-dialog-role{ font-size:0.88rem;color:var(--muted);margin:6px 0 16px; }
.staff-dialog-bio{ font-size:0.97rem;color:var(--ink);line-height:1.65;max-height:min(58vh, 460px);overflow-y:auto; }
.staff-dialog-bio p{ margin:0 0 12px; }
.staff-dialog-bio p:last-child{ margin-bottom:0; }
.staff-dialog-close{
  position:absolute;top:14px;right:16px;
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-size:1.9rem;line-height:1;color:var(--muted);padding:4px 8px;border-radius:8px;
}
.staff-dialog-close:hover{ color:var(--red); }
.staff-dialog-close:focus-visible{ outline:2px solid var(--blue);outline-offset:2px; }

/* Stand-in for a coach who has no headshot yet. Same box as .staff-photo, so a
   grid that is half photographs and half initials still lines up. Swapping one
   in is a single-element change on that card — see CLAUDE.md. */
.staff-initials{
  display:flex;align-items:center;justify-content:center;
  width:116px;height:116px;border-radius:50%;margin:0 auto 12px;
  background:linear-gradient(160deg, var(--lv-deep, #072351), var(--lv-abyss, #041534));
  color:#fff;font-family:var(--display);font-weight:700;font-size:2rem;letter-spacing:0.02em;
  user-select:none;
}

/* ---------- Founder profile on the About page ----------
   NEW selectors, so this adds to the v2 block rather than overriding it.
   .founder-mark is the same stand-in the coach cards use: swapping in a real
   photograph means replacing that one span with
   <img class="founder-photo" src="assets/coaches/lou.jpg" alt="Coach Lou Manganiello"
        width="320" height="320" loading="lazy" decoding="async">
   and nothing else changes. */
.founder{
  display:flex;gap:26px;align-items:flex-start;
  margin-top:34px;padding-top:30px;border-top:1px solid var(--line);
}
@media (max-width:700px){ .founder{ flex-direction:column;align-items:center;text-align:center;gap:18px; } }

.founder-mark,
.founder-photo{
  flex:none;width:140px;height:140px;border-radius:50%;
}
.founder-mark{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg, var(--lv-deep, #072351), var(--lv-abyss, #041534));
  color:#fff;font-family:var(--display);font-weight:700;font-size:2.4rem;letter-spacing:.02em;
  user-select:none;
}
/* height:auto is not optional on the real photograph — see the stretch bug. */
.founder-photo{ display:block;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--sand); }

.founder-text{ min-width:0; }
.founder-text h3{ font-family:var(--display);font-weight:700;font-size:1.3rem;margin:0;color:var(--navy); }
.founder-role{ font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:5px 0 14px; }
.founder-text p{ margin:0 0 12px;color:var(--ink); }
.founder-text p:last-child{ margin-bottom:0; }

/* ---------- The "who coaches which group" table ----------
   ⚠ `.tbl-wrap` was in the markup from the day the Coaches page was built but
   was NEVER defined here, so the table rendered with browser defaults: no
   padding, no borders, `th` centred and `td` left, and the whole thing pinned
   to the left of a centred column at about a third of its width. These are NEW
   selectors, so they add to the v2 block above rather than overriding it.

   width:fit-content + margin auto centres a narrow table under a centred
   heading; max-width + overflow-x keeps a wide one scrollable on a phone
   instead of pushing the page sideways. */
.tbl-wrap{
  width:fit-content;max-width:100%;margin:0 auto;
  overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);
}
.tbl-wrap table{ border-collapse:collapse;min-width:min(340px, 100%); }
.tbl-wrap th,
.tbl-wrap td{
  text-align:left;padding:11px 22px;border-bottom:1px solid var(--line);
  font-size:0.95rem;
}
.tbl-wrap thead th{
  font-family:var(--display);font-weight:600;font-size:0.72rem;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--muted);background:var(--sand);
}
.tbl-wrap tbody th{ font-weight:600;color:var(--navy); }
.tbl-wrap tbody td{ color:var(--ink); }
.tbl-wrap tbody tr:last-child th,
.tbl-wrap tbody tr:last-child td{ border-bottom:0; }
/* On a phone, let the names wrap and tighten the padding. `white-space:nowrap`
   was tried and made it worse — it pushed the coach column off the edge so the
   table needed sideways scrolling to read a name. */
@media (max-width: 560px){
  .tbl-wrap th,
  .tbl-wrap td{ padding:10px 14px;font-size:0.9rem; }
}