/* ==========================================================================
   Superhero Swim Academy
   Hand-written design system. No framework, no build step, no external JS.
   Tokens are derived in brand.md from the real logo, the live site CSS, and
   funnel/landing-original.html. Do not invent new colours here.
   Mobile first: every rule is the small-screen rule until a min-width query.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* UI palette, carried over from funnel/landing-original.html */
  --navy:#0a2540; --navy-2:#103258;
  --blue:#1769d6; --blue-2:#1257b3;
  --aqua:#28cdd9; --aqua-2:#15b6c2;
  --gold:#ffc83d; --gold-2:#ff9d2e;
  --red:#ff5468;
  --bg-soft:#f3f8fd; --bg-band:#e7f1fb; --line:#d6e4f2; --muted:#4a6585;

  /* literal brand marks, sampled from the logo and cadet art */
  --logo-blue:#003088; --logo-yellow:#f8f800;
  --cadet-blue:#283890; --cadet-gold:#f8d050; --cape-red:#a80808;

  --ink:#0a2540; --ink-soft:#4a6585; --white:#fff;

  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:3rem;   --sp-8:4rem; --sp-9:6rem;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  --shadow-sm:0 2px 8px rgba(10,37,64,.06);
  --shadow-md:0 8px 24px rgba(10,37,64,.10);
  --shadow-lg:0 18px 50px rgba(10,37,64,.16);

  --wrap:1180px; --wrap-narrow:760px;
  --header-h:64px;

  --fs-hero:clamp(2.15rem,6.2vw,4rem);
  --fs-h2:clamp(1.75rem,4.2vw,2.75rem);
  --fs-h3:clamp(1.25rem,2.4vw,1.6rem);
  --fs-lead:clamp(1.05rem,2.1vw,1.25rem);
  --fs-body:1rem; --fs-sm:.9375rem; --fs-xs:.8125rem;

  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:500;font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
/* The browser's own [hidden]{display:none} is the WEAKEST rule there is, so any
   class that sets display beats it. `.review-card{display:flex}` did exactly
   that: the filter tabs set `hidden` on the cards correctly and the cards stayed
   on screen anyway, so the tabs looked completely dead. One rule kills the whole
   class of bug rather than patching each component as it is found. */
[hidden]{display:none !important}
h1,h2,h3,h4{font-family:'Outfit',system-ui,sans-serif;font-weight:800;
  line-height:1.08;letter-spacing:-.02em;margin:0 0 var(--sp-4)}
h1{font-size:var(--fs-hero)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
h4{font-size:1.05rem;letter-spacing:-.01em}
p{margin:0 0 var(--sp-4)}
a{color:var(--blue);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{color:var(--blue-2)}
ul,ol{margin:0 0 var(--sp-4);padding-left:1.15rem}
li{margin-bottom:.4rem}
strong{font-weight:800}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* A grid or flex child will not shrink below its content's min-content width,
   and palmbeach@superheroswimacademy.com is one 35 character word with no break
   opportunity. On a 320px window that forced the contact column to 367px and
   scrolled the whole page sideways. */
.split > *{min-width:0}
a[href^="mailto:"],.footer-phone,.nils-credit-line{overflow-wrap:anywhere}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;
  padding:.75rem 1.1rem;border-radius:0 0 var(--r-sm) 0;font-weight:800}
.skip:focus{left:0}

/* ---------- layout ---------- */
.wrap{width:min(100% - 2rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2rem,var(--wrap-narrow));margin-inline:auto}
section{padding-block:clamp(3rem,8vw,6rem)}
.band-soft{background:var(--bg-soft)}
.band-band{background:var(--bg-band)}
.band-navy{background:var(--navy);color:#fff}
.band-navy h1,.band-navy h2,.band-navy h3{color:#fff}
.band-navy p{color:#cfe0f2}

.eyebrow{font-family:'Outfit',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;font-size:var(--fs-xs);color:var(--blue);margin:0 0 var(--sp-3)}
.band-navy .eyebrow,.hero .eyebrow,.page-head .eyebrow,
.final-cta .eyebrow,.photo-band .eyebrow{color:var(--gold)}
.lead{font-size:var(--fs-lead);color:var(--ink-soft);max-width:62ch}
.band-navy .lead{color:#cfe0f2}
.section-head{max-width:70ch;margin-bottom:var(--sp-6)}
.center{text-align:center}
/* These need to match BOTH forms: .center as an ancestor, and .center on the
   element itself (class="section-head center"). Without the self form the box
   keeps max-width and stays pinned left while its text centres inside it, which
   reads as a misaligned heading. */
.center .lead,.center .section-head,
.lead.center,.section-head.center,
.center .steps,.center .checklist{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:1rem;line-height:1;
  padding:.95rem 1.5rem;border-radius:var(--r-pill);border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),
  box-shadow .18s var(--ease),background-color .18s var(--ease);
  min-height:48px; /* touch target */
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--gold);color:var(--navy);box-shadow:var(--shadow-md)}
.btn-primary:hover{background:var(--gold-2);color:var(--navy);box-shadow:var(--shadow-lg)}
.btn-solid{background:var(--navy);color:#fff}
.btn-solid:hover{background:var(--navy-2);color:#fff}
/* Brand blue, for the buttons inside cards on a white ground. Navy read as flat
   there: it is the same colour as the heading above it, so the button stopped
   looking like a control. Gold stays reserved for the single primary action on
   the page, so this cannot compete with Book Free Assessment. */
.btn-blue{background:var(--blue);color:#fff;box-shadow:var(--shadow-md)}
.btn-blue:hover{background:var(--blue-2);color:#fff;box-shadow:var(--shadow-lg)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
/* Any dark surface, not just .band-navy. The hero and page-head are dark too,
   and a navy ghost button on a navy ground is invisible. */
.band-navy .btn-ghost,.hero .btn-ghost,.page-head .btn-ghost,
.final-cta .btn-ghost,.photo-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.band-navy .btn-ghost:hover,.hero .btn-ghost:hover,.page-head .btn-ghost:hover,
.final-cta .btn-ghost:hover,.photo-band .btn-ghost:hover{background:#fff;color:var(--navy)}
.btn-lg{padding:1.1rem 1.9rem;font-size:1.075rem}
.btn-block{width:100%}
.btn svg{width:1.05em;height:1.05em;flex:none}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);
}
/* The header bar is capped wider than the content wrap on purpose. It was
   min(100% - 1.5rem, 1180px) at EVERY viewport, so brand + 7 nav links + phone
   + the primary CTA already filled it at 1920px, and adding anything wrapped the
   nav onto a second row. A header may be wider than the column it sits above. */
.header-inner{display:flex;align-items:center;gap:var(--sp-4);
  min-height:var(--header-h);width:min(100% - 1.5rem,1320px);margin-inline:auto}
.brand{display:flex;align-items:center;flex:none;margin-right:auto;
  min-height:44px;padding-block:4px}
.brand img{height:34px;width:auto}
.nav-toggle{
  margin-left:auto;display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:11px;background:none;border:0;cursor:pointer;border-radius:var(--r-sm);
}
/* :not(.visually-hidden) matters. This selector also matched the button's
   screen-reader label, and `.nav-toggle span` (0,1,1) outranks
   `.visually-hidden` (0,1,0), so the label was given width:100% of its
   positioned ancestor. Clipped from view, but still 320px of layout box, which
   is where 271px of horizontal page scroll on a narrow window came from. */
.nav-toggle span:not(.visually-hidden){display:block;height:2.5px;width:100%;
  background:var(--navy);border-radius:2px;
  transition:transform .25s var(--ease),opacity .2s var(--ease)}
.nav-toggle[aria-expanded="true"] span:not(.visually-hidden):nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:not(.visually-hidden):nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:not(.visually-hidden):nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.site-nav{
  position:fixed;inset:var(--header-h) 0 auto 0;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
  padding:var(--sp-4) 1rem calc(var(--sp-5) + env(safe-area-inset-bottom));
  max-height:calc(100dvh - var(--header-h));overflow-y:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.site-nav[data-open="true"]{transform:translateY(0);opacity:1;visibility:visible}
.site-nav ul{list-style:none;margin:0;padding:0}
/* Scoped to the LIST on purpose. As `.site-nav a` this matched the drawer's
   buttons too, and the companion `.nav-cta a{padding:0}` then stripped their
   padding, so the primary button rendered navy text on a navy fill and the
   ghost button lost its border. */
.site-nav ul a{
  display:block;padding:.85rem .5rem;font-family:'Outfit',sans-serif;font-weight:700;
  color:var(--navy);text-decoration:none;border-bottom:1px solid var(--line);font-size:1.05rem;
}
.site-nav ul a:hover,.site-nav ul a[aria-current="page"]{color:var(--blue)}
.site-nav .nav-cta{margin-top:var(--sp-4);display:grid;gap:.6rem}
.header-actions{display:none}

@media (min-width:1000px){
  .nav-toggle{display:none}
  .site-nav{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;
    border:0;background:none;padding:0;max-height:none;overflow:visible;margin-left:auto}
  .site-nav ul{display:flex;align-items:center;gap:.15rem}
  /* nowrap matters: the flex row itself never wrapped, but "Locations & Pricing"
     and "At Home Lessons" were breaking onto two lines INSIDE their own item,
     which is what made the header look like a two row nav. */
  .site-nav ul a{border:0;padding:.5rem .7rem;font-size:.94rem;border-radius:var(--r-sm);
    white-space:nowrap}
  .site-nav a[aria-current="page"]{background:var(--bg-soft)}
  .site-nav .nav-cta{display:none}
  .header-actions{display:flex;align-items:center;gap:.6rem;flex:none;margin-left:.6rem}
  .header-actions .btn{padding:.7rem 1.1rem;font-size:.9rem;min-height:42px}
  .brand img{height:38px}
}

/* call link in the header, always reachable */
.header-call{display:inline-flex;align-items:center;gap:.4rem;font-family:'Outfit',sans-serif;
  font-weight:800;color:var(--navy);text-decoration:none;font-size:.9rem;white-space:nowrap}
.header-call:hover{color:var(--blue)}
.header-call svg{width:1.05em;height:1.05em}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;
  padding-block:clamp(2.5rem,7vw,4.5rem)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 80% 0%,rgba(40,205,217,.22),transparent 60%)}
.hero > *{position:relative;z-index:1}
.hero h1{color:#fff;text-wrap:balance}
.hero .lead{color:#cfe0f2}
.hero-grid{display:grid;gap:var(--sp-6);align-items:start}
@media (min-width:940px){
  .hero-grid{grid-template-columns:1fr minmax(380px,420px);gap:var(--sp-7)}
}
.hero-media{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);
  aspect-ratio:4/3;background:var(--navy-2)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--sp-5) 0 0;padding:0;list-style:none}
.hero-pill{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:var(--r-pill);
  padding:.5rem .85rem;font-size:var(--fs-sm);font-weight:700;margin:0}
.hero-pill svg{width:1.05em;height:1.05em;color:var(--aqua);flex:none}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:var(--sp-6)}

/* ---------- page header (non-home) ---------- */
.page-head{background:var(--navy);color:#fff;padding-block:clamp(2.25rem,6vw,3.75rem);
  position:relative;overflow:hidden}
.page-head::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 90% 0%,rgba(40,205,217,.2),transparent 62%)}
.page-head > *{position:relative;z-index:1}
.page-head h1{color:#fff;margin-bottom:var(--sp-3)}
.page-head .lead{color:#cfe0f2}

/* ---------- cards & grids ---------- */
.grid{display:grid;gap:var(--sp-4)}
@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:640px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.grid-3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:640px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.grid-4{grid-template-columns:repeat(4,1fr)}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5);box-shadow:var(--shadow-sm);
  transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card h3{margin-bottom:var(--sp-2)}
.card p:last-child{margin-bottom:0}
.card-icon{width:44px;height:44px;border-radius:var(--r-md);background:var(--bg-band);
  display:grid;place-items:center;margin-bottom:var(--sp-4);color:var(--blue)}
.card-icon svg{width:24px;height:24px}
.card-media{margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
  border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;aspect-ratio:16/10}
.card-media img{width:100%;height:100%;object-fit:cover}

/* ---------- pricing ---------- */
.price-grid{display:grid;gap:var(--sp-4)}
@media (min-width:720px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.price-grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.price{position:relative;background:#fff;border:1.5px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-5);display:flex;flex-direction:column}
.price.featured{border-color:var(--gold);border-width:2.5px;box-shadow:var(--shadow-md)}
.price-flag{position:absolute;top:-.75rem;left:var(--sp-5);background:var(--gold);
  color:var(--navy);font-family:'Outfit',sans-serif;font-weight:800;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.1em;padding:.3rem .7rem;border-radius:var(--r-pill)}
.price h3{margin-bottom:var(--sp-1);font-size:1.15rem}
.price-amount{font-family:'Outfit',sans-serif;font-weight:900;font-size:2.35rem;
  color:var(--navy);line-height:1;margin:var(--sp-3) 0 .2rem}
.price-amount span{font-size:1rem;font-weight:700;color:var(--ink-soft)}
.price-meta{color:var(--ink-soft);font-size:var(--fs-sm);margin-bottom:var(--sp-4)}
.price ul{list-style:none;padding:0;margin:0 0 var(--sp-5)}
.price li{position:relative;padding-left:1.6rem;margin-bottom:.5rem;font-size:var(--fs-sm)}
.price li::before{content:"";position:absolute;left:0;top:.45em;width:.85rem;height:.5rem;
  border-left:2.5px solid var(--aqua-2);border-bottom:2.5px solid var(--aqua-2);
  transform:rotate(-45deg)}
.price .btn{margin-top:auto}

/* ---------- location blocks ---------- */
.loc{display:grid;gap:var(--sp-5);align-items:start;
  border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-5);background:#fff;
  box-shadow:var(--shadow-sm)}
@media (min-width:880px){.loc{grid-template-columns:1fr 1fr;gap:var(--sp-6);padding:var(--sp-6)}}
/* The two short bases sit side by side with no photo. They were forced to
   display:block inline, so their button followed the text and sat 52px above its
   neighbour's. A flex column pins it to the bottom edge like every other card. */
.loc-compact{display:flex;flex-direction:column;align-items:stretch}
.loc-compact > .btn:last-child{margin-top:auto}
.loc-media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3}
.loc-media img{width:100%;height:100%;object-fit:cover}
.loc dl{margin:0 0 var(--sp-5);display:grid;gap:.6rem}
.loc dt{font-family:'Outfit',sans-serif;font-weight:800;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}
.loc dd{margin:0 0 .5rem;font-weight:600}
.loc dd a{font-weight:800}

/* ---------- form ---------- */
.form-card{background:#fff;border-radius:var(--r-xl);padding:var(--sp-5);
  box-shadow:var(--shadow-lg);color:var(--ink);border:1px solid var(--line)}
@media (min-width:560px){.form-card{padding:var(--sp-6)}}
.form-card h2{font-size:1.5rem;margin-bottom:var(--sp-2)}
.form-badge{display:inline-block;background:var(--bg-band);color:var(--blue-2);
  font-family:'Outfit',sans-serif;font-weight:800;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.1em;padding:.35rem .75rem;
  border-radius:var(--r-pill);margin-bottom:var(--sp-3)}
.form-sub{color:var(--ink-soft);font-size:var(--fs-sm);margin-bottom:var(--sp-5)}
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-family:'Outfit',sans-serif;font-weight:700;
  font-size:var(--fs-sm);margin-bottom:.35rem;color:var(--navy)}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem .95rem;font:inherit;font-size:16px; /* 16px stops iOS zoom */
  color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);min-height:48px;
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,105,214,.16)}
.field input:user-invalid{border-color:var(--red)}
.field-error{color:#c8203a;font-size:var(--fs-sm);font-weight:700;margin:.3rem 0 0;display:none}
.field[data-invalid="true"] .field-error{display:block}
.field[data-invalid="true"] input{border-color:var(--red)}
@media (min-width:520px){.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}}
.form-foot{display:flex;gap:.45rem;align-items:flex-start;color:var(--ink-soft);
  font-size:var(--fs-xs);margin:var(--sp-4) 0 0}
.form-foot svg{width:1.1em;height:1.1em;flex:none;margin-top:.15em;color:var(--aqua-2)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-success{text-align:center;padding:var(--sp-4) 0}
.form-success-check{width:56px;height:56px;margin:0 auto var(--sp-4);border-radius:50%;
  background:#e6f8f2;color:#0a8a5f;display:grid;place-items:center}
.form-success-check svg{width:28px;height:28px}
.form-error-box{background:#fdecef;border:1px solid #f5c2cb;color:#9c1b30;
  border-radius:var(--r-md);padding:.8rem 1rem;font-size:var(--fs-sm);font-weight:700;
  margin-bottom:var(--sp-4)}

/* ---------- press / logo strips ---------- */
.strip{padding-block:var(--sp-6)}
.strip-title{text-align:center;font-family:'Outfit',sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.14em;font-size:var(--fs-xs);
  color:var(--ink-soft);margin-bottom:var(--sp-5)}
.logo-row{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;
  gap:.65rem;list-style:none;margin:0;padding:0}
/* Press and partner marks arrive at wildly different aspect ratios and with
   different amounts of built-in padding, and two of them are full-bleed colour
   blocks. Identical tiles are what make them read as one row of equal-weight
   logos. The images are pre-trimmed to their content box by tools/optimize.py,
   so "fit the tile" means the same optical size for every mark. Shown in full
   colour: these are real credentials and greyscale buried them. */
.logo-row li{margin:0;display:flex;align-items:center;justify-content:center;
  width:126px;height:78px;padding:.6rem .75rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.logo-row li:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.logo-row img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:none;opacity:1}
.logo-row a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
@media (min-width:700px){.logo-row li{width:138px;height:86px;padding:.7rem .9rem}}
@media (max-width:420px){.logo-row li{width:100px;height:64px;padding:.45rem .55rem}}
/* the FAQ jump-nav reuses .logo-row for layout but holds buttons, not marks */
.logo-row li:has(> .btn){width:auto;height:auto;background:none;border:0;box-shadow:none;
  padding:0}
.logo-row li:has(> .btn):hover{transform:none;box-shadow:none}

/* ---------- gallery ---------- */
.gallery{display:grid;gap:.6rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-md)}

/* ---------- quote ---------- */
.quote{background:#fff;border:1px solid var(--line);border-left:5px solid var(--gold);
  border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow-sm)}
.quote blockquote{margin:0 0 var(--sp-4);font-size:var(--fs-lead);line-height:1.55;color:var(--ink)}
.quote figcaption{font-weight:800;font-family:'Outfit',sans-serif;color:var(--ink-soft);
  font-size:var(--fs-sm)}
.stars{color:var(--gold-2);letter-spacing:.1em}

/* ---------- FAQ ---------- */
.faq-group{margin-bottom:var(--sp-7)}
.faq-group > h2,.faq-group > h3{font-size:1.5rem;padding-bottom:var(--sp-3);
  border-bottom:2px solid var(--line);margin-bottom:var(--sp-4)}
/* ---------- parent portal entry points ----------
   Every route on the site pointed at booking or enrolling. A family that already
   has an account had nowhere to go, which is the "parents cannot find the login"
   complaint. Deliberately quiet: this is utility navigation, not a second
   primary CTA competing with Book Free Assessment. */
.header-portal{display:none}
@media (min-width:1000px){
  /* A returning parent has to be able to SEE this, so it is a bordered control
     rather than a muted text link. Still not btn-primary: Book Free Assessment
     is the one primary action in the header and nothing else may look like it. */
  .header-portal{display:inline-flex;align-items:center;gap:.45rem;
    font-family:'Outfit',sans-serif;font-weight:800;font-size:1rem;
    color:var(--navy);text-decoration:none;white-space:nowrap;
    padding:.62rem 1.05rem;min-height:44px;border:1.5px solid var(--line);
    border-radius:var(--r-pill);
    transition:border-color .18s var(--ease),color .18s var(--ease)}
  .header-portal:hover{border-color:var(--blue);color:var(--blue)}
  .header-portal svg{width:17px;height:17px;flex:none}
}
.nav-portal{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:1.05rem;min-height:48px;
  color:var(--navy);text-decoration:none;border:1.5px solid var(--line);
  border-radius:var(--r-pill)}
.nav-portal:hover{color:var(--blue)}
.nav-portal svg{width:16px;height:16px;flex:none}
@media (min-width:1180px){.nav-portal{display:none}}

/* ---------- YouTube proof, inside the Seen on row ----------
   Sized to sit as a peer of the press logos rather than as a section of its own.
   1.73M read off the channel on 2026-08-23. */
.logo-yt{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;text-align:center}
.logo-yt-mark{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;
  background:#ff0033;color:#fff;margin-bottom:.15rem}
.logo-yt-mark svg{width:19px;height:19px}
.logo-yt-n{font-family:'Outfit',sans-serif;font-weight:900;font-size:1.35rem;
  line-height:1;color:var(--navy)}
.logo-yt-lbl{font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.2}

/* ---------- FAQ: help centre layout ----------
   68 answers across 12 topics. A pill row needed three wrapped lines to show
   them and read as a wall, so the control is a vertical topic list beside the
   answers on a wide screen and a single native select on a phone. A list also
   carries two levels, which pills could not: the per-area topics sit under
   their own heading instead of competing with the general ones. */
.faq-layout{display:grid;gap:var(--sp-6)}
@media (min-width:960px){
  .faq-layout{grid-template-columns:264px minmax(0,1fr);gap:var(--sp-7);
    align-items:start}
}
.faq-nav{display:none}
@media (min-width:960px){
  .faq-nav{display:block;position:sticky;top:88px}
}
.faq-nav-inner{background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-4)}
.faq-nav-label{font-family:'Outfit',sans-serif;font-weight:800;
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-soft);margin:0 0 var(--sp-2);padding-inline:.55rem}
.faq-nav-label + ul{margin-bottom:var(--sp-4)}
.faq-nav ul{list-style:none;margin:0;padding:0}
.faq-nav ul:last-child{margin-bottom:0}
.faq-nav-item{display:flex;width:100%;align-items:center;gap:.6rem;
  justify-content:space-between;text-align:left;cursor:pointer;
  font-family:'Outfit',sans-serif;font-weight:700;font-size:.95rem;
  color:var(--navy);background:none;border:0;border-radius:var(--r-md);
  padding:.6rem .55rem;min-height:42px;
  transition:background-color .16s var(--ease),color .16s var(--ease)}
.faq-nav-item:hover{background:#fff;color:var(--blue)}
.faq-nav-item.is-on{background:var(--blue);color:#fff}
.faq-nav-n{font-size:var(--fs-xs);font-variant-numeric:tabular-nums;opacity:.6}
.faq-nav-item.is-on .faq-nav-n{opacity:.85}

.faq-select-wrap{margin-bottom:var(--sp-5)}
@media (min-width:960px){.faq-select-wrap{display:none}}
.faq-select-label{display:block;font-family:'Outfit',sans-serif;font-weight:800;
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-soft);margin-bottom:var(--sp-2)}
.faq-select{width:100%;font-family:'Outfit',sans-serif;font-weight:700;
  font-size:1rem;color:var(--navy);background:#fff;border:1.5px solid var(--line);
  border-radius:var(--r-md);padding:.85rem 2.4rem .85rem 1rem;min-height:52px;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231769d6' stroke-width='3' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
  background-size:16px 16px}
.faq-select:focus{outline:0;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(23,105,214,.16)}

/* One topic at a time. Every panel is rendered visible, so with no JS the page
   is the long list it used to be rather than a blank page. */
.faq-panel[hidden]{display:none}
.faq-panel:focus{outline:none}
.faq-panel .faq-group:first-child > h3{margin-top:0}
details.qa{border-bottom:1px solid var(--line);padding:0}
details.qa summary{
  list-style:none;cursor:pointer;padding:1.05rem .5rem 1.05rem 0;position:relative;
  font-family:'Outfit',sans-serif;font-weight:700;font-size:1.02rem;color:var(--navy);
  padding-right:2.5rem;min-height:48px;display:flex;align-items:center;
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{
  content:"";position:absolute;right:.6rem;top:50%;width:.6rem;height:.6rem;
  border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease)}
details.qa[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details.qa summary:hover{color:var(--blue)}
details.qa .qa-body{padding:0 .5rem 1.15rem 0;color:var(--ink-soft)}
details.qa .qa-body p:last-child{margin-bottom:0}

/* ---------- steps ---------- */
.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-4)}
@media (min-width:880px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:step;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-5);margin:0;box-shadow:var(--shadow-sm)}
.steps li::before{content:counter(step);display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:var(--navy);color:var(--gold);font-family:'Outfit',sans-serif;
  font-weight:900;margin-bottom:var(--sp-4)}
.steps h3{font-size:1.1rem}

/* ---------- split ---------- */
.split{display:grid;gap:var(--sp-6);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:var(--sp-7)}
  .split.reverse .split-media{order:2}}
.split-media{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/3}
.split-media img{width:100%;height:100%;object-fit:cover}
.checklist{list-style:none;padding:0;margin:0 0 var(--sp-5)}
.checklist li{position:relative;padding-left:1.9rem;margin-bottom:.65rem}
.checklist li::before{content:"";position:absolute;left:.25rem;top:.42em;width:.85rem;height:.5rem;
  border-left:2.5px solid var(--aqua-2);border-bottom:2.5px solid var(--aqua-2);
  transform:rotate(-45deg)}

/* ---------- final CTA ---------- */
.final-cta{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 60%,#14406e 100%);
  color:#fff;text-align:center;position:relative;overflow:hidden}
.final-cta::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 0%,rgba(40,205,217,.22),transparent 65%)}
.final-cta > *{position:relative;z-index:1}
.final-cta h2{color:#fff}
.final-cta p{color:#cfe0f2;margin-inline:auto}
.final-cta .hero-cta{justify-content:center}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:#cfe0f2;padding-block:var(--sp-7) var(--sp-6);
  font-size:var(--fs-sm)}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{color:var(--gold);text-decoration:underline}
.footer-grid{display:grid;gap:var(--sp-6);margin-bottom:var(--sp-6)}
@media (min-width:720px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.site-footer h3{color:#fff;font-size:.95rem;text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:var(--sp-4)}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.55rem}
.footer-logo{height:40px;width:auto;margin-bottom:var(--sp-4)}
.footer-hours{margin:0}
.footer-hours dt{font-weight:800;color:#fff;margin-top:.6rem}
.footer-hours dd{margin:0;color:#a9c4de}
/* the credit line the client asked for, beside the wordmark */
.nils-credit-line{font-size:var(--fs-xs);color:rgba(255,255,255,.72)}
.nils-credit-line a{color:#fff;text-decoration-thickness:.08em}
.nils-credit-line a:hover{color:var(--gold)}

.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:var(--sp-5);
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);justify-content:space-between;
  align-items:center;color:#a9c4de;font-size:var(--fs-xs)}
.footer-phone{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.1rem;color:#fff!important}

/* ---------- sticky mobile call bar ----------
   Utility, not a competing CTA: it exposes the one action a parent on a phone
   is most likely to want mid-scroll. Hidden on desktop where the header CTA
   is always visible. */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:.5rem;
  padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(10,37,64,.10);
}
/* Both buttons were flex:1, so on a 320px phone "Book Free Assessment" got half
   the bar and overflowed off the edge. Call is two words and takes what it needs;
   the primary takes the rest and is allowed to shrink. */
.callbar .btn{padding:.8rem .9rem;font-size:.95rem;min-height:46px}
.callbar .btn-ghost{flex:0 0 auto}
.callbar .btn-primary{flex:1 1 auto;min-width:0}
@media (max-width:369px){
  .callbar{gap:.4rem;padding-inline:.5rem}
  .callbar .btn{font-size:.85rem;padding:.75rem .65rem}
}
@media (min-width:1000px){.callbar{display:none}}
body:has(.callbar){padding-bottom:76px}
@media (min-width:1000px){body:has(.callbar){padding-bottom:0}}

/* ---------- article ---------- */
.article{padding-block:clamp(2rem,6vw,3.5rem)}
.article-body{font-size:1.05rem;line-height:1.75}
.article-body h2{font-size:clamp(1.4rem,3.2vw,1.9rem);margin-top:var(--sp-7);margin-bottom:var(--sp-4)}
.article-body h3{font-size:1.2rem;margin-top:var(--sp-6)}
.article-body img{border-radius:var(--r-md);margin-block:var(--sp-5)}
.article-body ul,.article-body ol{margin-bottom:var(--sp-5)}
.article-body a{font-weight:700}
.article-meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;color:var(--ink-soft);
  font-size:var(--fs-sm);margin-bottom:var(--sp-5)}
.article-takeaways{background:var(--bg-soft);border:1px solid var(--line);
  border-left:5px solid var(--aqua);border-radius:var(--r-md);padding:var(--sp-5);
  margin-bottom:var(--sp-6)}
.article-takeaways h2{margin-top:0;font-size:1.1rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-soft)}
.article-cta{background:var(--navy);color:#fff;border-radius:var(--r-lg);
  padding:var(--sp-5);margin-block:var(--sp-7);text-align:center}
.article-cta h2{color:#fff;font-size:1.35rem;margin-top:0}
.article-cta p{color:#cfe0f2}
.post-list{display:grid;gap:var(--sp-4);list-style:none;padding:0;margin:0}
@media (min-width:720px){.post-list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.post-list{grid-template-columns:repeat(3,1fr)}}
.post-card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.post-card h3{font-size:1.1rem;margin-bottom:var(--sp-2)}
.post-card p{color:var(--ink-soft);font-size:var(--fs-sm);margin-bottom:var(--sp-4)}
.post-card .post-more{margin-top:auto;font-family:'Outfit',sans-serif;font-weight:800;
  color:var(--blue);font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:.3rem}
.post-card .post-more svg{width:15px;height:15px;flex:none}

/* ---------- blog listing: thumbnails, topic tabs, paging ----------
   The listing went from 5 articles to 101, so it needs a way in that is not a
   search box. Cards carry the post's own hero, a topic label and a date; the
   tabs filter, the box searches, and both compose with the show-more batch. */
/* full bleed to the card edges. max-width:none matters: the global
   img{max-width:100%} was clamping the negative-margin width straight back to
   the content box, so the thumb sat 48px narrow with the card padding showing. */
.post-thumb{aspect-ratio:16/10;object-fit:cover;
  margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
  width:calc(100% + var(--sp-5) * 2);max-width:none;
  border-radius:var(--r-lg) var(--r-lg) 0 0;display:block;background:var(--bg-band)}
.post-cat{font-family:'Outfit',sans-serif;font-weight:800;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.12em;color:var(--blue);
  display:block;margin-bottom:var(--sp-2)}
.post-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);flex-wrap:wrap;padding-top:var(--sp-3)}
.post-date{color:var(--ink-soft);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.post-tabs{display:flex;gap:.5rem;margin-bottom:var(--sp-4)}
/* On a phone seven wrapped pills filled the screen before the first article, so
   below the two column breakpoint they become one swipeable row instead. */
@media (max-width:719px){
  /* No scroll-snap here on purpose. scroll-snap-align:start on the first pill
     snapped it to the scrollport edge, which consumed the whole padding-inline
     (scrollLeft came to rest at exactly 16px) and left the first tab flush
     against the side of the screen. */
  .post-tabs{flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--sp-4) * -1);padding-inline:var(--sp-4) 2rem}
  .post-tabs::-webkit-scrollbar{display:none}
  .post-tab{flex:0 0 auto}
}
@media (min-width:720px){.post-tabs{flex-wrap:wrap;justify-content:center}}
.post-tab{font-family:'Outfit',sans-serif;font-weight:800;font-size:.88rem;
  padding:.55rem 1rem;min-height:44px;border-radius:var(--r-pill);cursor:pointer;
  background:#fff;color:var(--navy);border:1.5px solid var(--line);
  display:inline-flex;align-items:center;gap:.45rem;
  transition:background-color .18s var(--ease),color .18s var(--ease),
  border-color .18s var(--ease)}
.post-tab:hover{border-color:var(--blue);color:var(--blue)}
.post-tab.is-on{background:var(--blue);color:#fff;border-color:var(--blue)}
.post-tab-n{font-size:var(--fs-xs);opacity:.72;font-variant-numeric:tabular-nums}
.post-tab.is-on .post-tab-n{opacity:.85}
.post-count{text-align:center;color:var(--ink-soft);font-size:var(--fs-sm);
  margin:0 0 var(--sp-5)}
.post-more-wrap{text-align:center;margin:var(--sp-6) 0 0}
.post-more-wrap[hidden],#post-more[hidden]{display:none}

/* a CTA that rides in the listing grid, so a 101 card list is never three
   screens from an action */
.post-cta-cell[hidden]{display:none}
.cta-cell{height:100%;display:flex;flex-direction:column;align-items:flex-start;
  background:linear-gradient(155deg,var(--blue) 0%,var(--navy) 100%);
  border-color:transparent;color:#fff}
.cta-cell h3{color:#fff;font-size:1.15rem;margin-bottom:var(--sp-2)}
.cta-cell p{color:#d7e7fa;font-size:var(--fs-sm)}
.cta-cell-kicker{font-family:'Outfit',sans-serif;font-weight:800;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin-bottom:var(--sp-2)}
.cta-cell .btn{margin-top:auto;background:#fff;color:var(--navy);border-color:#fff}
.cta-cell .btn:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.review-cta-cell{align-self:start}

/* ---------- in-article CTA, slim variant ----------
   A 2,500 word guide takes several breaks. The first is the full navy card;
   the rest are this single line, because four identical cards reads as nagging. */
.article-cta-slim{background:var(--bg-band);color:var(--ink);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;padding:var(--sp-4) var(--sp-5)}
.article-cta-slim p{color:var(--ink);font-family:'Outfit',sans-serif;font-weight:800;
  font-size:1.05rem;margin:0}

/* the form that closes an article */
.article-form{margin-top:var(--sp-6)}
.article-form .form-card{margin:0}

/* ---------- related posts ---------- */
.related{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.related h2{font-size:1.1rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-soft);margin-bottom:var(--sp-4)}
.related-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-3)}
@media (min-width:760px){.related-list{grid-template-columns:repeat(3,1fr)}}
.related-list a{display:block;height:100%;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--sp-4);font-family:'Outfit',sans-serif;
  font-weight:700;font-size:.98rem;line-height:1.35;text-decoration:none;color:var(--navy);
  transition:border-color .18s var(--ease),color .18s var(--ease)}
.related-list a:hover{border-color:var(--blue);color:var(--blue)}

/* ---------- notice ---------- */
.notice{background:var(--bg-band);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);font-size:var(--fs-sm);color:var(--ink-soft)}
.notice strong{color:var(--navy)}
/* Shown on the 19 posts that stay live but noindex. Gold so it reads as an
   aside rather than as the article's own opening. Declared AFTER .notice on
   purpose: same specificity, so source order is what decides the background. */
.notice-moved{background:#fff8e3;border-color:#f2dfa8;color:var(--ink);
  margin-bottom:var(--sp-5)}

/* ---------- reveal on scroll (progressive, no-JS safe) ---------- */
.anim{opacity:1;transform:none}
.js .anim{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .anim.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .anim{opacity:1;transform:none}
}

/* Standalone links sitting directly in a card are tap targets, not prose links,
   so they need a real touch height. */
.card > a:not(.btn){display:inline-flex;align-items:center;min-height:44px;
  font-family:'Outfit',sans-serif;font-weight:800}

/* Cards sitting on a navy band invert: the default white card on navy is a
   glare. Keep the same shape, change the surface. */
.band-navy .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);
  box-shadow:none;color:#e6f0fa}
.band-navy .card h3{color:#fff}
.band-navy .card p{color:#cfe0f2}
.band-navy .card .eyebrow{color:var(--gold)}
.band-navy .card .form-foot{color:#9fb8d2}
.band-navy .card ol,.band-navy .card li{color:#e6f0fa}
.band-navy .card:hover{transform:none;box-shadow:none;background:rgba(255,255,255,.1)}
.band-navy .card-icon{background:rgba(255,255,255,.12);color:var(--aqua)}

/* ==========================================================================
   MEDIA BACKGROUNDS
   The original Wix site ran a looping background video on five pages. Those
   were recovered and re-encoded (130 MB -> 5 MB). They sit behind a navy scrim
   so headline contrast never depends on which frame is showing.
   ========================================================================== */
.has-media{position:relative;isolation:isolate;overflow:hidden;background:var(--navy)}
.media-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center;pointer-events:none}
/* Scrim. The first pass used 86/72/92% navy, which turned a bright, friendly
   shot of a child swimming into something dark and forbidding. This is roughly
   half that, weighted so the darkest part sits bottom-left behind the copy and
   the right side (where the form card sits) stays bright. The video itself is
   lifted slightly rather than dimmed. */
.has-media .media-bg{filter:brightness(1.12) saturate(1.06) contrast(.96)}
.has-media::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(105deg,rgba(10,37,64,.72) 0%,rgba(10,37,64,.46) 42%,rgba(10,37,64,.20) 72%),
    linear-gradient(180deg,rgba(10,37,64,.28) 0%,rgba(10,37,64,0) 30%,rgba(10,37,64,.46) 100%),
    radial-gradient(130% 90% at 82% 4%,rgba(40,205,217,.22),transparent 62%);
}
/* page headers are short, so they need a flatter, still-light wash */
.page-head.has-media::before{
  background:
    linear-gradient(100deg,rgba(10,37,64,.76) 0%,rgba(10,37,64,.50) 55%,rgba(10,37,64,.30) 100%),
    radial-gradient(120% 100% at 85% 0%,rgba(40,205,217,.20),transparent 60%);
}
/* the hero already paints its own gradient; do not double up */
.hero.has-media::after{display:none}
.page-head.has-media::after{display:none}
@media (prefers-reduced-motion:reduce){
  .media-bg[data-video]{display:none}
}

/* cadet mascots, the brand's own characters */
.hero-mascot{position:absolute;bottom:-6px;z-index:0;pointer-events:none;
  width:clamp(88px,13vw,190px);height:auto;opacity:.96;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.42))}
.hero-mascot.jet{right:1%}
.hero-mascot.jade{left:1%;transform:scaleX(-1)}
@media (max-width:939px){
  .hero-mascot{width:84px;opacity:.85}
  .hero-mascot.jade{display:none}
}
@media (max-width:520px){.hero-mascot{display:none}}

/* ==========================================================================
   WAVE DIVIDERS
   Previous version baked the fill colour into the SVG data URI, so a wave
   between two tinted bands painted WHITE over blue and left a hard seam. The
   shape is now a MASK and the colour comes from --wave-into, which must be set
   to the background of the section the wave flows into. One shape, any colour.
   Rule: only put a divider between sections that are actually different colours.
   ========================================================================== */
.wave-bottom,.wave-top{position:relative}
.wave-bottom::after,.wave-top::before{
  content:"";position:absolute;left:-1px;right:-1px;height:clamp(28px,4vw,54px);
  pointer-events:none;z-index:2;
  background-color:var(--wave-into,var(--bg-soft));
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-size:1200px 100%;mask-size:1200px 100%;
  -webkit-mask-position:bottom center;mask-position:bottom center;
}
.wave-bottom::after{
  bottom:-1px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V40c150-20 300 16 450 16s300-28 450-22 200 32 300 6V60Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V40c150-20 300 16 450 16s300-28 450-22 200 32 300 6V60Z' fill='%23000'/%3E%3C/svg%3E");
}
.wave-top::before{
  top:-1px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0v20c150 20 300-16 450-16s300 28 450 22 200-32 300-6V0Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0v20c150 20 300-16 450-16s300 28 450 22 200-32 300-6V0Z' fill='%23000'/%3E%3C/svg%3E");
}
/* the colour the wave flows INTO, one class per destination band */
.wave-into-white{--wave-into:#fff}
.wave-into-soft{--wave-into:var(--bg-soft)}
.wave-into-navy{--wave-into:var(--navy)}
.wave-into-gold{--wave-into:var(--gold)}

/* ==========================================================================
   BAND TEXTURE
   A flat #f3f8fd band across a whole page reads as unfinished. This adds a
   barely-there caustic ripple, the same idea as the water motif.
   ========================================================================== */
.band-soft{
  background-color:var(--bg-soft);
  background-image:
    radial-gradient(900px 320px at 12% -10%,rgba(40,205,217,.10),transparent 62%),
    radial-gradient(760px 300px at 92% 108%,rgba(23,105,214,.09),transparent 60%);
}
.band-navy{
  background-color:var(--navy);
  background-image:
    radial-gradient(900px 420px at 10% 0%,rgba(40,205,217,.16),transparent 60%),
    radial-gradient(700px 380px at 95% 100%,rgba(23,105,214,.20),transparent 62%);
}

/* a photo band: image + scrim, for breaking up long text pages */
.photo-band{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:var(--navy)}
.photo-band .photo-band-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover}
.photo-band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,37,64,.88),rgba(10,37,64,.74))}
.photo-band h2,.photo-band h3{color:#fff}
.photo-band p{color:#cfe0f2}

/* media strip: three photos, used to give thin pages something to look at */
.media-strip{display:grid;gap:.6rem;grid-template-columns:repeat(3,1fr)}
.media-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md)}
@media (max-width:640px){.media-strip{grid-template-columns:repeat(3,1fr);gap:.4rem}}

/* Nils Digital credit in the footer */
.nils-credit{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  color:#a9c4de;font-size:var(--fs-xs);min-height:44px}
.nils-credit img{height:17px;width:auto;opacity:.82;
  transition:opacity .18s var(--ease)}
.nils-credit:hover{color:#fff;text-decoration:none}
.nils-credit:hover img{opacity:1}

/* ==========================================================================
   REVIEWS  (structure follows the Aquanauts build)
   ========================================================================== */
.rating-card{display:flex;flex-direction:column;align-items:center;gap:.4rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5);box-shadow:var(--shadow-sm);max-width:420px;
  margin:0 auto var(--sp-6);text-align:center}
.rating-score{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.rating-value{font-family:'Outfit',sans-serif;font-weight:900;font-size:3rem;
  line-height:1;color:var(--navy)}
.rating-card .stars{font-size:1.35rem;letter-spacing:.12em}
.rating-meta{font-size:var(--fs-sm);color:var(--ink-soft);font-weight:700}
.rating-note{font-size:var(--fs-xs);color:var(--ink-soft);margin:.5rem 0 0}

.review-tabs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
  margin-bottom:var(--sp-6)}
.review-tab{font-family:'Outfit',sans-serif;font-weight:800;font-size:.9rem;
  padding:.6rem 1.05rem;min-height:44px;border-radius:var(--r-pill);cursor:pointer;
  background:#fff;color:var(--navy);border:1.5px solid var(--line);
  transition:background-color .18s var(--ease),color .18s var(--ease),
  border-color .18s var(--ease)}
.review-tab:hover{border-color:var(--blue);color:var(--blue)}
.review-tab.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}

.review-grid{display:grid;gap:var(--sp-4)}
@media (min-width:700px){.review-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.review-grid{grid-template-columns:repeat(3,1fr)}}
.review-card{margin:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:var(--sp-3)}
.review-card .stars{color:var(--gold-2);font-size:1.05rem;letter-spacing:.1em}
.review-card blockquote{margin:0;font-size:.975rem;line-height:1.65;color:var(--ink);
  flex:1}
.review-card figcaption{display:flex;align-items:center;gap:.7rem;
  border-top:1px solid var(--line);padding-top:var(--sp-3)}
.review-avatar{display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:50%;background:var(--bg-band);color:var(--blue-2);
  font-family:'Outfit',sans-serif;font-weight:800;font-size:.9rem}
.review-who{display:flex;flex-direction:column;line-height:1.3}
.review-who strong{font-family:'Outfit',sans-serif;font-size:.95rem;color:var(--navy)}
.review-src{font-size:var(--fs-xs);color:var(--ink-soft)}

/* ---------- numbered benefit list (Aquanauts "why choose" pattern) ---------- */
.benefits{counter-reset:benefit;list-style:none;padding:0;margin:0 0 var(--sp-6);
  display:grid;gap:var(--sp-4)}
.benefits li{counter-increment:benefit;display:grid;
  grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:start;margin:0}
.benefits li::before{content:counter(benefit);display:grid;place-items:center;
  width:40px;height:40px;flex:none;border-radius:50%;
  background:var(--navy);color:var(--gold);
  font-family:'Outfit',sans-serif;font-weight:900;font-size:1.05rem}
.benefits strong{display:block;font-family:'Outfit',sans-serif;font-size:1.08rem;
  color:var(--navy);margin-bottom:.15rem}
.benefits span{color:var(--ink-soft)}
.band-navy .benefits strong{color:#fff}
.band-navy .benefits span{color:#cfe0f2}
.band-navy .benefits li::before{background:var(--gold);color:var(--navy)}

/* stat badge */
.stat-badge{display:inline-flex;flex-direction:column;align-items:center;
  background:var(--gold);color:var(--navy);border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow-md);line-height:1.1}
.stat-badge b{font-family:'Outfit',sans-serif;font-weight:900;font-size:2.1rem}
.stat-badge span{font-family:'Outfit',sans-serif;font-weight:800;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.1em;margin-top:.2rem}

/* service cards need a visible action, not just a description */
.card .card-cta{margin-top:auto;padding-top:var(--sp-4)}
/* The four program buttons line up across the row. nowrap is the guard: a label
   that grows past one line strands the arrow on the right and leaves that card's
   button taller than its neighbours, so a long label has to be caught in review
   rather than silently wrapped. */
/* No white-space:nowrap here. It was added to stop a long label wrapping, but an
   unwrappable label sets the card's min-content width, and on a 320px window
   "How certification works" pushed the card 9px past the viewport and scrolled
   the page sideways. The height-equality gate already catches a wrapped label,
   because two lines make that button taller than its neighbours. */
.card .card-cta .btn{min-height:52px}
.card{display:flex;flex-direction:column}
/* Cards in a row are the same height because the grid stretches them, but their
   trailing action followed the text, so a card with two lines of copy put its
   link 50px above its neighbour's. Anything that ends a card, a wrapped
   .card-cta or a bare link, gets pushed to the bottom edge. Worst case before
   this was 305px of stagger across four cards on /for-coaches/. */
.card > .card-cta:last-child,
.card > a:last-child{margin-top:auto}
.card > a:last-child{padding-top:var(--sp-4)}
.card > .card-cta:last-child{margin-bottom:0}

/* mid-page CTA band */
.cta-band{background:var(--gold);color:var(--navy);padding-block:var(--sp-6)}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--sp-4)}
.cta-band h2{margin:0;font-size:clamp(1.3rem,2.6vw,1.75rem)}
.cta-band p{margin:.25rem 0 0;color:#3d3016;font-weight:600}
.cta-band .btn-solid{background:var(--navy);color:#fff}

/* ==========================================================================
   PALETTE CORRECTION
   The logo is blue and yellow on white. Navy is a text colour, not a fill for
   every second block. Numbered markers, stat figures and section fills move on
   to blue and yellow so the page reads as the brand rather than as dark slabs.
   ========================================================================== */
.benefits li::before{background:var(--blue);color:#fff}
.band-navy .benefits li::before,.band-blue .benefits li::before{
  background:var(--gold);color:var(--navy)}
.steps li::before{background:var(--blue);color:#fff}

/* a mid-tone blue band, used instead of another navy slab */
.band-blue{
  background-color:var(--blue);color:#fff;
  background-image:
    radial-gradient(900px 420px at 10% 0%,rgba(40,205,217,.28),transparent 60%),
    radial-gradient(700px 380px at 95% 100%,rgba(10,37,64,.30),transparent 62%);
}
.band-blue h2,.band-blue h3{color:#fff}
.band-blue p{color:#e4f0ff}
.band-blue .lead{color:#e4f0ff}
.band-blue .eyebrow{color:var(--gold)}
.band-blue .card{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);
  color:#eef6ff;box-shadow:none}
.band-blue .card h3{color:#fff}
.band-blue .card p{color:#dfeaff}
.band-blue .card .eyebrow{color:var(--gold)}
.band-blue .card .form-foot{color:#c3d8f5}
.band-blue .card:hover{transform:none;box-shadow:none;background:rgba(255,255,255,.16)}

/* proof row: the numbers that used to sit in a floating badge */
.proof-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
@media (min-width:820px){.proof-row{grid-template-columns:repeat(4,1fr)}}
.proof{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-3);text-align:center;box-shadow:var(--shadow-sm)}
.proof b{display:block;font-family:'Outfit',sans-serif;font-weight:900;
  font-size:clamp(1.35rem,3vw,1.9rem);color:var(--blue);line-height:1.05}
.proof span{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.08em;margin-top:.25rem}

/* milestones, replacing the plain ordered list */
.milestones{counter-reset:ms;list-style:none;padding:0;margin:0;
  display:grid;gap:var(--sp-3);grid-template-columns:repeat(1,1fr)}
@media (min-width:620px){.milestones{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.milestones{grid-template-columns:repeat(3,1fr)}}
.milestones li{counter-increment:ms;margin:0;display:flex;align-items:center;gap:.75rem;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-pill);padding:.7rem 1rem;font-weight:700;color:#fff}
.milestones li::before{content:counter(ms);display:grid;place-items:center;
  width:30px;height:30px;flex:none;border-radius:50%;background:var(--gold);
  color:var(--navy);font-family:'Outfit',sans-serif;font-weight:900;font-size:.9rem}

/* ==========================================================================
   GALLERY MARQUEE  (LowCountry pattern)
   ========================================================================== */
.gallery-section{padding-block:clamp(3rem,8vw,5rem);overflow:hidden;background:var(--bg-soft)}
.marquee-row{display:flex;gap:12px;margin-bottom:12px;width:100%;overflow:hidden}
.marquee-row:last-child{margin-bottom:0}
.marquee-track{display:flex;gap:12px;flex-shrink:0;animation:marquee-left 80s linear infinite}
.marquee-row.reverse .marquee-track{animation:marquee-right 80s linear infinite}
.marquee-row:hover .marquee-track,
.marquee-row:focus-within .marquee-track{animation-play-state:paused}
.marquee-track img{height:clamp(140px,20vw,230px);width:auto;flex:none;
  border-radius:var(--r-md);object-fit:cover;box-shadow:var(--shadow-sm)}
@keyframes marquee-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none!important;flex-wrap:wrap;justify-content:center}
}

/* ==========================================================================
   LOCATION MAPS  (Center Lane pattern: lazy via data-src)
   ========================================================================== */
.loc-map{position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:16/10;background:var(--bg-band);border:1px solid var(--line)}
.loc-map iframe{width:100%;height:100%;border:0;display:block}

/* ==========================================================================
   PROGRAM QUIZ  (Center Lane pattern)
   ========================================================================== */
/* The quiz now sits on real water rather than a flat tint. The heading block
   goes light-on-dark; the card itself stays white so the questions keep the
   same contrast they had. */
.quiz-section.has-media{padding-block:clamp(3rem,7vw,5rem)}
.quiz-section.has-media .section-head h2{color:#fff}
.quiz-section.has-media .section-head .lead{color:#dbe9fa}
.quiz-section.has-media .section-head .eyebrow{color:var(--gold)}
.quiz-card{position:relative;background:#fff;border-radius:var(--r-xl);
  padding:clamp(1.5rem,4vw,2.4rem);box-shadow:var(--shadow-lg);
  border:1px solid var(--line);overflow:hidden;text-align:center}
.quiz-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--aqua) 55%,var(--gold) 100%)}
.quiz-stage{animation:quiz-fade .3s var(--ease) both}
.quiz-stage[hidden]{display:none}
@keyframes quiz-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.quiz-intro-text{color:var(--ink-soft);max-width:46ch;margin:0 auto var(--sp-5)}
.quiz-step{font-family:'Outfit',sans-serif;font-weight:800;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.14em;color:var(--blue);margin:0 0 .5rem}
.quiz-question{font-size:clamp(1.25rem,3vw,1.65rem);margin:0 auto var(--sp-5);max-width:22ch}
.quiz-answers{display:grid;gap:.7rem;max-width:420px;margin:0 auto}
.quiz-back{margin-top:var(--sp-4);background:none;border:0;cursor:pointer;
  font-family:'Outfit',sans-serif;font-weight:700;color:var(--ink-soft);
  font-size:var(--fs-sm);min-height:44px;padding:.5rem 1rem}
.quiz-back:hover{color:var(--blue)}
.quiz-price{font-family:'Outfit',sans-serif;font-weight:800;color:var(--blue);
  margin:0 0 var(--sp-3)}
.quiz-result p{max-width:48ch;margin-inline:auto}
.quiz-fallback{list-style:none;padding:0;margin:var(--sp-5) 0 0;display:grid;gap:.6rem}
.quiz-fallback a{display:block;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--sp-4);text-decoration:none;color:var(--ink)}

/* an explicitly white band, so a wave flowing into it has a colour to match */
.band-white{background:#fff}
/* ==========================================================================
   LEGACY SKIN  (instructor pages only)
   Emilio's call: /swim-instructor-certification/, /swiminstructorretreat/ and
   /superherocoach/ reproduce the LIVE Wix design rather than the rebuild's, so
   they look to a returning visitor exactly like the pages they replace.

   Every colour here was measured off the live pages, not guessed:
     #39729b  section blue and body copy      rgb(57,114,155)
     #0c3c60  deep navy band                  rgb(12,60,96)
     #d1e0eb  pale blue panel and step text   rgb(209,224,235)
     #ffff00  hero heading yellow             rgb(255,255,0)
     #fdf733  retreat hero yellow             rgb(253,247,51)
     #25318d  retreat section headings        rgb(37,49,141)
     #ff6161  red action button               rgb(255,97,97)

   FONT NOTE: the live headings use two fonts Wix serves as obfuscated uploads
   (wfont_3f090f_… and wfont_79dfbe_…). Those are licensed files on the client's
   Wix account; they cannot be copied or hotlinked. Luckiest Guy is the closest
   free equivalent and is used for that role. The retreat hero is the exception,
   it renders in plain Impact on the live site, so it matches exactly.
   ========================================================================== */
.legacy{--lg-blue:#39729b;--lg-navy:#0c3c60;--lg-pale:#d1e0eb;
  --lg-yellow:#ffff00;--lg-yellow-2:#fdf733;--lg-indigo:#25318d;--lg-red:#ff6161}
.legacy{color:var(--lg-blue);font-family:'Manrope',Arial,Helvetica,sans-serif}
.legacy p{color:var(--lg-blue);font-size:1.05rem;line-height:1.6}
.legacy .wrap-narrow{max-width:900px}

/* the comic display face */
.legacy h1,.legacy h2,.legacy h3,.legacy .lg-display{
  font-family:'Luckiest Guy','Luckiest Guy Fallback',Impact,'Arial Black',sans-serif;
  font-weight:400;letter-spacing:.01em;line-height:1.12}

/* ---- hero -------------------------------------------------------------- */
.lg-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;
  padding-block:clamp(2.5rem,7vw,4.5rem);background:var(--lg-navy)}
.lg-hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.lg-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(12,60,96,.34)}
.lg-hero-logo{margin:0 auto clamp(1rem,3vw,1.75rem);width:min(460px,72%);height:auto}
.lg-hero .lg-kicker{color:#fff;font-size:clamp(1.5rem,3.4vw,2.2rem);margin:0 0 .25rem;
  font-family:'Luckiest Guy','Luckiest Guy Fallback',Impact,sans-serif}
.lg-hero h1{color:var(--lg-yellow);font-size:clamp(1.9rem,5.2vw,2.9rem);margin:0}

/* the retreat hero is Impact on the live site, so it is Impact here */
.lg-hero.lg-impact h1{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  color:var(--lg-yellow-2);font-size:clamp(2.2rem,6.4vw,3.5rem);letter-spacing:.02em}

/* ---- body copy --------------------------------------------------------- */
.lg-body{padding-block:clamp(2rem,5vw,3.25rem)}
.lg-body p{margin-bottom:1.1rem}
.lg-body p:last-child{margin-bottom:0}

/* ---- pale blue panel: photo one side, copy the other -------------------- */
.lg-panel{background:var(--lg-pale);padding:clamp(1.5rem,4vw,2.5rem)}
.lg-panel-inner{display:grid;gap:clamp(1.25rem,3vw,2.25rem);align-items:center}
@media (min-width:820px){.lg-panel-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.lg-panel img{width:100%;height:auto;border-radius:4px;display:block;
  aspect-ratio:431/351;object-fit:cover;object-position:center 30%}
.lg-panel h2,.lg-panel p{color:var(--lg-navy)}
.lg-panel .lg-lines{font-size:clamp(1.05rem,2.2vw,1.3rem);line-height:1.5;
  color:var(--lg-navy);font-family:'Manrope',Arial,sans-serif;font-weight:600}
.lg-panel .lg-lines span{display:block;margin-bottom:1rem}

/* ---- red action button, 50px pill on the live site ---------------------- */
.lg-btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--lg-red);color:#000;font-family:'Manrope',Arial,sans-serif;
  font-weight:800;font-size:1.05rem;padding:.85rem 1.9rem;border-radius:50px;
  text-decoration:none;min-height:48px;border:0;
  box-shadow:0 3px 0 rgba(0,0,0,.18);transition:transform .16s ease,filter .16s ease}
.lg-btn:hover{color:#000;filter:brightness(1.06);transform:translateY(-2px)}

/* ---- the three numbered step cards ------------------------------------- */
.lg-steps{display:grid;gap:clamp(1rem,2.5vw,1.5rem);list-style:none;margin:0;padding:0}
@media (min-width:760px){.lg-steps{grid-template-columns:repeat(3,1fr)}}
.lg-step{background:var(--lg-blue);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;text-align:center}
.lg-step h3{background:var(--lg-navy);color:var(--lg-pale);margin:0;
  padding:.85rem 1rem;font-size:1.55rem}
.lg-step-body{padding:1.25rem;display:flex;flex-direction:column;gap:.75rem;flex:1}
.lg-step-body p{color:#fff;margin:0;font-size:1rem}
.lg-step-body .lg-btn{margin-top:auto;align-self:center}

/* ---- navy closing band -------------------------------------------------- */
.lg-band{background:var(--lg-navy);color:#fff;text-align:center;
  padding-block:clamp(2rem,5vw,3rem)}
.lg-band h2{color:var(--lg-pale)}
.lg-band p{color:#fff}
.lg-band a{color:var(--lg-yellow)}

/* ---- retreat sections --------------------------------------------------- */
.lg-section{padding-block:clamp(1.75rem,4.5vw,2.75rem)}
.lg-section h2{color:var(--lg-indigo);font-size:clamp(1.6rem,3.8vw,2.5rem);
  margin-bottom:1rem}
.lg-media{display:grid;gap:1rem;margin-top:1.5rem}
@media (min-width:700px){.lg-media{grid-template-columns:repeat(2,1fr)}}
.lg-media img{width:100%;height:100%;object-fit:cover;border-radius:4px;display:block;
  aspect-ratio:4/3}