:root {
  --teal: #1AA2CA;
  --teal-dark: #127C9C;
  --pool: #0F87AE;
  --pool-deep: #0A5F80;
  --gold: #FED324;
  --navy: #0F172A;
  --slate: #334155;
  --mist: #E2E8F0;
  --tint: #EAF7FB;
  --radius: 18px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; font-family: "Outfit", system-ui, sans-serif; color: var(--navy); background: #fff; line-height: 1.55; font-size: 17px; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--teal-dark); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.01em; max-width: 22em; text-wrap: balance; }
h3 { font-size: 1.15rem; font-weight: 700; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }

/* Preview banner (preview build only) */
.preview-bar { background: var(--navy); color: #fff; font-size: .85rem; text-align: center; padding: 8px 16px; }
.preview-bar a { color: var(--gold); font-weight: 700; }

/* Top bar */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--mist); backdrop-filter: blur(6px); }
.brand img { display: block; width: 76px; }
.topnav { display: flex; gap: 2px; margin-left: auto; }
.topnav a { display: none; align-items: center; min-height: 44px; padding: 0 8px; color: var(--navy); text-decoration: none; font-weight: 600; font-size: .95rem; }
.topnav a.m { display: inline-flex; }   /* the links a parent needs on a phone */
.topnav a:hover { color: var(--teal-dark); }
.topcta { white-space: nowrap; }

/* Buttons. One primary style, gold with navy text and the WhatsApp mark, on every trial CTA:
   top bar, hero, prices, contact and the seal's speech bubble. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; border-radius: 999px; padding: 15px 24px; min-height: 52px; transition: transform .16s var(--ease-out), box-shadow .16s ease-out; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn .ico { flex: none; }
/* Two-tone ring: navy outline with a white halo inside it, so focus shows on white bands and on
   the navy #prices band alike. */
.btn:focus-visible, .tabs button:focus-visible, summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
.btn-gold { background: var(--gold); color: var(--navy); box-shadow: 0 6px 18px rgba(254,211,36,.45); }
.btn-gold:hover { box-shadow: 0 10px 26px rgba(254,211,36,.6); }
.btn-sm { min-height: 44px; padding: 0 16px; gap: 8px; font-size: .92rem; box-shadow: 0 4px 12px rgba(254,211,36,.4); }
.btn-teal { background: var(--teal-dark); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.85); padding: 13px 22px; }
.hero .btn:focus-visible { outline-color: var(--gold); }

/* Hero: real footage of a lesson length, under a deep-water scrim that keeps the text readable */
.hero { position: relative; isolation: isolate; display: grid; gap: 28px; padding: 22px 20px 118px; color: #fff; background: linear-gradient(170deg, var(--pool) 0%, var(--pool-deep) 100%); overflow: hidden; }
.pool { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; object-fit: cover; object-position: 58% 50%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(3,33,48,.8) 0%, rgba(3,38,55,.7) 55%, rgba(3,38,55,.6) 100%); }
.hero-copy { position: relative; }
@media (max-width: 979px) {
  /* Below desktop the landscape clip sits as a strip along the bottom of the home hero, so the
     swimmer shows whole in open water instead of as a zoomed crop hidden under the text. */
  .hero:not(.hero-join) { padding-bottom: 190px; }
  .hero:not(.hero-join) .pool { top: auto; height: 330px; object-position: 52% 70%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%); mask-image: linear-gradient(180deg, transparent 0%, #000 40%); }
  .hero:not(.hero-join)::before { background: linear-gradient(180deg, rgba(3,33,48,.8) 0%, rgba(3,38,55,.72) 50%, rgba(3,38,55,.62) 66%, rgba(3,38,55,.12) 80%, rgba(3,38,55,0) 100%); }
  .hero:not(.hero-join) .motion-toggle { left: auto; right: 12px; }
}
.eyebrow { margin: 0 0 8px; font-size: .82rem; font-weight: 800; letter-spacing: .14em; color: var(--gold); text-shadow: 0 1px 8px rgba(4,38,56,.7); }
#headline { font-size: clamp(2.1rem, 8.6vw, 3.9rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; text-shadow: 0 2px 18px rgba(5,40,60,.45); text-wrap: balance; }
#headline .ln { display: inline-block; animation: rise-in .9s var(--ease-out) both; }
#headline .ln + .ln { animation-delay: .12s; }
.sub { margin: 0 0 14px; color: #fff; font-size: 1.05rem; max-width: 34em; text-shadow: 0 1px 10px rgba(3,33,48,.6); }
.trial { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin: 0 0 16px; padding: 7px 16px 7px 7px; background: #fff; color: var(--navy); border-radius: 16px; font-weight: 500; line-height: 1.35; box-shadow: 0 8px 24px rgba(5,40,60,.25); }
.trial strong { flex: none; display: grid; place-items: center; min-width: 66px; min-height: 46px; padding: 0 10px; background: var(--gold); color: var(--navy); border-radius: 11px; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .btn-gold { flex: 1 1 100%; }
.hero-actions .btn-ghost { display: none; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 16px 0 0; }
.chips li { font-size: .85rem; font-weight: 600; color: #fff; background: rgba(3,40,58,.92); border: 1px solid rgba(255,255,255,.3); padding: 5px 11px; border-radius: 999px; }
.chips li::before { content: "\2713"; color: var(--gold); margin-right: 6px; }

/* Short proof beside a decision point: a few of a real parent's words, with who said them */
.snip { margin: 14px 0 0; font-size: .95rem; line-height: 1.4; max-width: 30em; }
.snip q { font-weight: 600; quotes: "\201C" "\201D"; }
.snip q::before, .snip q::after { color: var(--gold); font-weight: 800; }
.snip .by { display: block; margin-top: 2px; font-size: .86rem; }
.snip-hero { color: #fff; text-shadow: 0 1px 8px rgba(3,33,48,.7); }
.snip-hero .by { color: #E6F3F8; }

/* Hero bottom waves */
.waves { position: absolute; left: 0; right: 0; bottom: -1px; height: 64px; overflow: hidden; pointer-events: none; }
.waves .w { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; }
.waves .w1 { fill: rgba(255,255,255,.35); bottom: 10px; animation: drift 19s linear infinite; }
.waves .w2 { fill: #fff; height: 70%; animation: drift 12s linear infinite reverse; }

/* Bands */
.band { padding: 64px 0; }
.band-tint { background: var(--tint); }
.lede { color: var(--slate); }

/* How it works: lane rope with the seal swimming along it */
.lane { position: relative; margin-top: 24px; padding-left: 52px; --p: 0; }
@media (max-width: 719px) {
  .rope { left: 18px; }
  .swimmer { left: 0; }
  .steps li { padding: 18px 16px 18px 62px; }
  .steps li::before { left: 14px; top: 16px; }
}
.rope { position: absolute; left: 22px; top: 6px; bottom: 6px; width: 10px; border-radius: 6px; background: repeating-linear-gradient(180deg, var(--teal) 0 14px, #fff 14px 17px, var(--gold) 17px 31px, #fff 31px 34px); box-shadow: 0 0 0 1px rgba(18,124,156,.25); }
.swimmer { position: absolute; left: 4px; top: calc(var(--p) * (100% - 46px)); width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--gold); background: var(--teal); box-shadow: 0 6px 16px rgba(15,23,42,.2); z-index: 1; transition: top .2s linear, left .2s linear; }
.steps { list-style: none; counter-reset: s; display: grid; gap: 18px; padding: 0; margin: 0; }
.steps li { counter-increment: s; position: relative; padding: 22px 22px 22px 76px; border: 1px solid var(--mist); border-radius: var(--radius); background: #fff; transition: border-color .3s ease, box-shadow .3s ease; }
.steps li::before { content: counter(s); position: absolute; left: 22px; top: 20px; width: 38px; height: 38px; display: grid; place-items: center; background: #fff; color: var(--teal-dark); border: 2px solid var(--teal); font-weight: 800; border-radius: 50%; transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.steps li.reached { border-color: rgba(26,162,202,.45); box-shadow: 0 6px 20px rgba(26,162,202,.12); }
.steps li.reached::before { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: scale(1.08); }
.steps p, .card p { margin: 0; color: var(--slate); }

/* Why */
.cards { display: grid; gap: 16px; margin-top: 24px; }
.card { background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: 0 2px 10px rgba(15,23,42,.06); border-top: 4px solid var(--teal); transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(15,23,42,.1); }
.gear { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.gear svg { height: 38px; width: auto; animation: bob-sm 3s ease-in-out infinite alternate; }
.gear svg:nth-child(2) { animation-delay: .5s; }
.gear svg:nth-child(3) { animation-delay: 1s; }
/* The underwater add-on card leads with what the add-on actually looks like */
.card-clip { overflow: hidden; }
.clip { display: block; width: calc(100% + 44px); max-width: none; height: auto; aspect-ratio: 960 / 360; object-fit: cover; margin: -22px -22px 16px; background: var(--pool-deep); }

/* Parent stories: one real photo beside the three quotes */
.stories-grid { display: grid; gap: 20px; margin-top: 24px; }
.quotes { display: grid; gap: 16px; margin-top: 24px; }
.stories-grid .quotes { margin-top: 0; }
.photo { margin: 0; }
.photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 32%; border-radius: var(--radius); box-shadow: 0 14px 36px rgba(4,30,45,.4); background: var(--pool); }
.photo figcaption { margin-top: 10px; font-size: .92rem; font-weight: 600; color: #fff; }
.quote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; background: var(--tint); border-radius: var(--radius); padding: 24px; position: relative; }
.quote::before { content: "\201C"; position: absolute; top: -6px; left: 18px; font-size: 4.4rem; line-height: 1; font-weight: 800; color: var(--gold); }
.quote blockquote { margin: 18px 0 0; }
.quote blockquote p { margin: 0; font-size: 1.05rem; }
.quote figcaption { display: flex; align-items: center; gap: 12px; color: var(--slate); font-size: .92rem; }
.quote figcaption b { display: block; color: var(--navy); }
.avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--teal-dark); color: #fff; font-weight: 800; }

/* Prices */
.tabs { position: relative; display: flex; gap: 6px; margin: 20px 0 16px; background: #fff; padding: 5px; border-radius: 999px; width: fit-content; max-width: 100%; box-shadow: 0 2px 10px rgba(15,23,42,.06); }
.tabs button { position: relative; z-index: 1; font: inherit; font-weight: 700; border: 0; background: transparent; color: var(--slate); min-height: 44px; padding: 10px 16px; border-radius: 999px; cursor: pointer; transition: color .25s ease; }
.tabs button[aria-selected="true"] { background: var(--teal-dark); color: #fff; }
.tab-ink { display: none; position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--teal-dark); transition: left .35s var(--ease-out), width .35s var(--ease-out); }
.tabs.ink-on .tab-ink { display: block; }
.tabs.ink-on button[aria-selected="true"] { background: transparent; }
.panel { background: #fff; border: 1px solid var(--mist); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.js .panel[hidden] { display: none; }
.js .panel:not([hidden]) { animation: panel-in .35s ease both; }
.panel-head { font-weight: 700; color: var(--teal-dark); margin: 0 0 6px; }
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--mist); }
th { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); }
td:not(:first-child), th:not(:first-child) { text-align: right; white-space: nowrap; }
.price-cta { display: grid; gap: 16px; margin-top: 22px; align-items: center; }
.price-proof { display: grid; gap: 10px; }
.price-proof p { margin: 0; }
.price-cta .covered { font-weight: 500; }
.addons { background: #fff; border: 1px solid var(--mist); border-radius: var(--radius); padding: 14px 20px; }

/* Coaches: one honest block until real profiles exist */
.coach-one { display: grid; gap: 18px; margin-top: 20px; padding: 26px 22px; border-radius: var(--radius); background: #fff; box-shadow: 0 10px 30px rgba(15,23,42,.08); }
.coach-one img { display: block; width: 96px; height: 96px; border-radius: 50%; border: 4px solid var(--gold); background: var(--teal); }
.coach-one h3 { font-size: 1.35rem; margin-bottom: 6px; }
.coach-one p { margin: 0 0 16px; color: var(--slate); }
.hiring { margin: 22px 0 0; color: var(--slate); }
.hiring a { display: flex; width: fit-content; align-items: center; min-height: 44px; font-weight: 700; color: var(--navy); text-underline-offset: 3px; }
.certs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.certs li { font-weight: 600; font-size: .92rem; background: var(--tint); padding: 7px 14px; border-radius: 999px; }
.certs li::before { content: "\2713"; color: var(--teal-dark); margin-right: 6px; }

/* FAQ */
details { border-bottom: 1px solid rgba(15,23,42,.1); padding: 4px 0; }
summary { cursor: pointer; font-weight: 700; padding: 12px 0; min-height: 44px; align-items: center; box-sizing: border-box; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--teal-dark); font-size: 1.4rem; line-height: 1; transition: transform .2s ease; }
details[open] summary::after { content: "\2212"; }
details p, details ul { margin-top: 0; color: var(--slate); }
.addons summary { padding: 4px 0; }

/* Contact */
.contact-grid { display: grid; gap: 32px; }
.contact-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 2px; }
.contact-list a { display: inline-block; padding: 11px 0; }
.form { background: var(--tint); border-radius: var(--radius); padding: 22px; display: grid; gap: 12px; }
.form label { display: grid; gap: 4px; font-weight: 600; font-size: .92rem; }
.form input, .form textarea { font: inherit; font-weight: 400; padding: 11px 12px; border: 1px solid #CBD5E1; border-radius: 10px; background: #fff; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--teal-dark); border-color: var(--teal-dark); }
.form-note { margin: 0; min-height: 1.4em; font-weight: 600; }
.form-note.ok { color: #15803D; }
.form-note.err { color: #B91C1C; }

/* Footer */
.footer { background: var(--navy); color: var(--mist); padding: 40px 0 48px; }
.footer a { color: var(--gold); display: inline-block; padding: 12px 0; }
.footer-grid { display: grid; gap: 10px; }
.footer img { width: 110px; background: #fff; border-radius: 12px; padding: 6px; }
.copy { font-size: .85rem; opacity: .7; }

/* The dive: below the hero the page goes down through the pool (shallow, mid, deep, floor),
   meets the lifebuoy guarantee, then comes back up to the surface at the contact section.
   Colour carries the idea; the moving parts (light, bubbles, the swimming seal) are decoration
   only, move by transform alone, and never hide or move text. */
.band { position: relative; }
.band > .wrap { position: relative; z-index: 1; }
.dive-1, .dive-2, .dive-3, .dive-gold, .rise, .rise-white, .surface { --edge: #fff; }
.dive-1 { --edge: #127C9C; background: linear-gradient(180deg, #127C9C, var(--pool)); color: #fff; }
.dive-2 { --edge: var(--pool-deep); background: linear-gradient(180deg, var(--pool-deep), #084A64); color: #fff; }
.dive-3 { --edge: #083A50; background: linear-gradient(180deg, #083A50, var(--navy) 60%); color: #fff; }
.dive-gold { --edge: var(--gold); background: var(--gold); color: var(--navy); }
.rise { --edge: var(--tint); }
.rise-white { --edge: #fff; background: #fff; }
.surface { --edge: var(--pool-deep); background: linear-gradient(180deg, var(--pool-deep), #083F57); color: #fff; }
/* wave-shaped top edge, drawn in the section's own colour over the section above */
.dive-1::before, .dive-2::before, .dive-3::before, .dive-gold::before, .rise::before, .rise-white::before, .surface::before {
  content: ""; position: absolute; left: 0; right: 0; top: -31px; height: 32px; z-index: 1; background: var(--edge); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 32' preserveAspectRatio='none'%3E%3Cpath d='M0 16C240 0 480 0 720 16S1200 32 1440 16V32H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 32' preserveAspectRatio='none'%3E%3Cpath d='M0 16C240 0 480 0 720 16S1200 32 1440 16V32H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.dive-2::before, .dive-gold::before, .surface::before { transform: scaleX(-1); }
.dive-1 h2, .dive-2 h2, .dive-3 h2, .surface h2 { color: #fff; text-shadow: 0 2px 14px rgba(4,38,56,.35); }
.dive-1 .card, .dive-2 .quote { color: var(--navy); }
.dive-2 .quote { background: #fff; box-shadow: 0 10px 30px rgba(4,30,45,.35); }
.dive-3 .lede, .dive-3 .price-cta p { color: var(--mist); }
.dive-3 .price-cta .snip q { color: #fff; }
.dive-3 .lede strong { color: var(--gold); }
.price-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 4px 0 6px; }
.price-big .fig { font-size: clamp(3.2rem, 11vw, 4.6rem); font-weight: 800; line-height: 1; color: var(--gold); letter-spacing: -.02em; }
.price-big .what { font-size: 1.15rem; font-weight: 600; color: #fff; }
.dive-3 .panel, .dive-3 .addons { border-color: transparent; }
.dive-3 .panel, .dive-3 .addons { color: var(--navy); }
.surface p, .surface .contact-list { color: rgba(255,255,255,.92); }
.surface .contact-list a { color: #fff; font-weight: 600; }
.surface .form { color: var(--navy); background: #fff; box-shadow: 0 12px 34px rgba(4,30,45,.35); }

/* Light from the surface and rising bubbles, in the water sections */
.deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.caustic { position: absolute; left: 0; right: 0; top: -512px; bottom: 0; background: url("caustics.png") 0 0 / 512px 512px repeat; opacity: .45; animation: caustic-drift 48s linear infinite; }
.dive-2 .caustic { opacity: .3; animation-duration: 64s; }
.surface .caustic { opacity: .35; }
.bubbles i { position: absolute; bottom: -24px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); background: rgba(255,255,255,.12); animation: bubble-up 11s linear infinite; }
.bubbles i:nth-child(1) { left: 6%;  animation-delay: -1s; }
.bubbles i:nth-child(2) { left: 18%; width: 6px; height: 6px; animation-delay: -6s; animation-duration: 9s; }
.bubbles i:nth-child(3) { left: 33%; width: 14px; height: 14px; animation-delay: -3s; animation-duration: 14s; }
.bubbles i:nth-child(4) { left: 52%; width: 7px; height: 7px; animation-delay: -8s; }
.bubbles i:nth-child(5) { left: 68%; animation-delay: -4.5s; animation-duration: 12s; }
.bubbles i:nth-child(6) { left: 83%; width: 16px; height: 16px; animation-delay: -10s; animation-duration: 15s; }
.bubbles i:nth-child(7) { left: 94%; width: 6px; height: 6px; animation-delay: -2s; animation-duration: 8s; }

/* Guarantee: the lifebuoy moment */
.guarantee { position: relative; }
.dive-gold h2 { font-size: clamp(2rem, 6vw, 3.4rem); color: var(--navy); max-width: 14em; text-wrap: balance; }
.dive-gold p { font-size: 1.08rem; font-weight: 500; max-width: 38em; }
.ring { float: right; width: clamp(64px, 18vw, 120px); aspect-ratio: 1; margin: 0 0 12px 16px; border-radius: 50%; background: repeating-conic-gradient(var(--teal-dark) 0 45deg, #fff 45deg 90deg); -webkit-mask: radial-gradient(circle, transparent 34%, #000 35%); mask: radial-gradient(circle, transparent 34%, #000 35%); animation: bob 4.2s ease-in-out infinite alternate; filter: drop-shadow(0 8px 14px rgba(15,23,42,.25)); }

/* Contact: the swimming seal stands down here and surfaces beside the section's own button */
.surfacing { display: flex; align-items: center; gap: 14px; }
.popup-seal { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--gold); background: var(--teal); animation: bob 3.4s ease-in-out infinite alternate; }

/* Pause control for the looping motion (WCAG 2.2.2) */
.motion-toggle { position: absolute; left: 12px; bottom: 58px; z-index: 2; min-height: 44px; padding: 0 14px; font: inherit; font-size: .8rem; font-weight: 700; color: #fff; background: rgba(4,38,56,.7); border: 1px solid rgba(255,255,255,.4); border-radius: 999px; cursor: pointer; }
.motion-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.still *, .still *::before, .still *::after { animation-play-state: paused !important; }
/* Off-screen water sections drop their light and bubbles entirely, so they cost nothing on a phone
   (site.js adds .on while the section is in view) */
.js .deco:not(.on) > * { display: none; }

/* The seal CTA: the page's one floating WhatsApp button. It sits bottom-right on every width
   (the pause button lives bottom-left), swims in from below once the hero button has gone, and
   site.js tilts and bobs .seal-swim with your scrolling. */
.seal-cta { position: fixed; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  display: flex; align-items: center; gap: 12px; min-height: 60px; text-decoration: none; color: var(--navy); border-radius: 40px; -webkit-tap-highlight-color: transparent;
  opacity: 0; pointer-events: none; transform: translate3d(0, 130%, 0);
  transition: transform .3s ease-out, opacity .2s ease-out; }
/* Hidden with opacity, not visibility, so Tab can still reach it: focus brings it on screen. */
.seal-cta.show, .seal-cta:focus-visible { opacity: 1; pointer-events: auto; transform: none;
  transition: transform .6s var(--ease-out), opacity .25s ease-out; }
.seal-cta:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; box-shadow: 0 0 0 8px rgba(255,255,255,.95); }
.seal-say { position: relative; display: inline-block; height: 44px; line-height: 44px; padding: 0 16px; background: var(--gold); color: var(--navy); font-weight: 700; font-size: .95rem; white-space: nowrap; border-radius: 999px; box-shadow: 0 8px 22px rgba(15,23,42,.28); transform-origin: 100% 50%; transition: transform .16s var(--ease-out); }
.seal-say::after { content: ""; position: absolute; right: -5px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: var(--gold); border-radius: 2px; transform: rotate(45deg); }
.seal-cta:hover .seal-say { transform: translateX(-3px); }
.seal-cta:active .seal-say { transform: scale(.97); }
.seal-swim { position: relative; flex: none; width: 60px; height: 60px; will-change: transform; }
.seal-dip { display: block; width: 100%; height: 100%; }
.seal-dip img { display: block; width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--gold); background: var(--teal); box-shadow: 0 8px 22px rgba(15,23,42,.3); }
.seal-wa { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--navy); box-shadow: 0 0 0 2px #fff; }
.seal-trail { position: absolute; left: 22px; top: -4px; width: 20px; height: 40px; pointer-events: none; }
.seal-trail i { position: absolute; bottom: 0; left: 0; width: 8px; height: 8px; border-radius: 50%; border: 2px solid rgba(18,124,156,.75); background: rgba(255,255,255,.7); opacity: 0; }
.seal-trail i:nth-child(2) { left: 9px; width: 6px; height: 6px; }
.seal-trail i:nth-child(3) { left: 3px; width: 5px; height: 5px; }
.seal-cta.swimming .seal-trail i { animation: trail .9s ease-out infinite; }
.seal-cta.swimming .seal-trail i:nth-child(2) { animation-delay: .3s; }
.seal-cta.swimming .seal-trail i:nth-child(3) { animation-delay: .6s; }
.seal-cta.dip .seal-dip { animation: seal-dip .7s var(--ease-out); }
.seal-cta.dip .seal-say { animation: say-pop .6s var(--ease-out); }
@media (max-width: 479px) {
  .say-long { display: none; }       /* "S$25 trial" on a phone; the link's name stays the full sentence */
  .seal-say { padding: 0 14px; font-size: .9rem; }
  .seal-cta { gap: 10px; }
}

/* Motion */
@keyframes caustic-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 512px, 0); } }
@keyframes bubble-up { from { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } to { transform: translate3d(14px, -620px, 0); opacity: 0; } }
@keyframes trail { from { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; } 20% { opacity: 1; } to { transform: translate3d(4px, -34px, 0) scale(1); opacity: 0; } }
@keyframes seal-dip { 0% { transform: none; } 35% { transform: translate3d(0, 9px, 0) rotate(20deg); } 100% { transform: none; } }
@keyframes say-pop { 0% { transform: none; } 40% { transform: scale(1.06); } 100% { transform: none; } }
@keyframes rise-in { from { transform: translateY(.45em); } to { transform: none; } }
@keyframes bob { from { transform: translateY(-5px) rotate(-5deg); } to { transform: translateY(5px) rotate(5deg); } }
@keyframes bob-sm { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes panel-in { from { transform: translateY(8px); } to { transform: none; } }
@keyframes card-rise { from { transform: translateY(34px) scale(.96); } to { transform: none; } }

/* Scroll-linked reveal: transform only, so content is always visible even where this is unsupported */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: card-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}

@media (max-width: 379px) {
  .topcta .ico { display: none; }   /* keeps the top bar on one line at 360 */
}

@media (min-width: 720px) {
  .lane { padding-left: 0; padding-top: 70px; }
  .rope { left: 0; right: 0; top: 18px; bottom: auto; width: auto; height: 10px; background: repeating-linear-gradient(90deg, var(--teal) 0 14px, #fff 14px 17px, var(--gold) 17px 31px, #fff 31px 34px); }
  .swimmer { top: 0; left: calc(var(--p) * (100% - 46px)); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li { padding: 70px 22px 22px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: repeat(3, 1fr); }
  .photo img { aspect-ratio: 16 / 9; object-position: 50% 30%; }
  .hero-actions .btn-gold { flex: 0 0 auto; }
  .hero-actions .btn-ghost { display: inline-flex; }
  .price-cta { grid-template-columns: auto minmax(0, 1fr); gap: 16px 28px; }
  .coach-one { grid-template-columns: 120px minmax(0, 1fr); gap: 28px; padding: 32px; align-items: center; }
  .coach-one img { width: 120px; height: 120px; }
}

@media (min-width: 980px) {
  .topbar { padding: 10px 40px; gap: 24px; }
  .brand img { width: 92px; }
  .topnav { gap: 10px; }
  .topnav a { display: inline-flex; }
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); align-items: center; padding: 56px max(40px, calc((100vw - 1120px) / 2)) 110px; min-height: 600px; }
  .hero::before { background: linear-gradient(90deg, rgba(3,33,48,.86) 0%, rgba(3,33,48,.78) 38%, rgba(3,33,48,.45) 58%, rgba(3,33,48,.12) 80%, rgba(3,33,48,.05) 100%); }
  .pool { object-position: 50% 50%; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .stories-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; }
  .stories-grid .quotes { grid-template-columns: 1fr; }
  .photo { position: sticky; top: 96px; }
  .photo img { aspect-ratio: 4 / 5; object-position: 48% 38%; }
  .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Coach page (join.html). Same tokens and bands as the parent page; only what it adds lives here. */
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 6px; color: #fff; font-weight: 600; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; text-shadow: 0 1px 8px rgba(3,33,48,.7); }
.back-link:hover { color: var(--gold); }
.back-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.hero-join { padding-top: 14px; }
.hero-join #headline { font-size: clamp(2.1rem, 8vw, 3.6rem); }
.cert-tiles { list-style: none; counter-reset: c; display: grid; gap: 14px; padding: 0; margin: 22px 0 0; }
.cert-tiles li { counter-increment: c; position: relative; background: #fff; border-radius: var(--radius); padding: 20px 20px 20px 72px; box-shadow: 0 2px 10px rgba(15,23,42,.06); border-top: 4px solid var(--gold); }
.cert-tiles li::before { content: "\2713"; position: absolute; left: 20px; top: 18px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--teal-dark); color: #fff; font-weight: 800; }
.cert-tiles h3 { margin-bottom: 4px; }
.cert-tiles p { margin: 0; color: var(--slate); font-size: .95rem; }
.also { margin: 14px 0 0; color: var(--slate); max-width: 40em; }
.pay { margin: 24px 0 0; padding: 16px 20px; background: #fff; border: 1px solid rgba(15,23,42,.08); border-left: 5px solid var(--gold); border-radius: 12px; max-width: 44em; }
.pay strong { font-size: 1.15rem; }
.ready { background: #fff; color: var(--navy); border-radius: var(--radius); padding: 24px; box-shadow: 0 12px 34px rgba(4,30,45,.35); }
.ready ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ready li { position: relative; padding-left: 30px; color: var(--slate); }
.ready li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--teal-dark); font-weight: 800; }
/* Coach voice: one coach's photo beside their words. build_site.py leaves it out of the live page
   until the coach has approved it; the preview shows the draft with a dashed photo placeholder. */
.voice { margin: 0 auto; max-width: 920px; display: grid; gap: 20px; justify-items: start; align-items: center; background: #fff; border-radius: var(--radius); border-top: 4px solid var(--gold); padding: 26px 22px; box-shadow: 0 10px 30px rgba(15,23,42,.08); }
.voice-photo { display: block; width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 4px solid var(--gold); background: var(--teal); }
.voice-photo-empty { display: grid; place-items: center; box-sizing: border-box; padding: 16px; text-align: center; background: var(--tint); border: 3px dashed var(--teal-dark); color: var(--pool-deep); font-size: .88rem; font-weight: 700; line-height: 1.25; }
.voice-body { min-width: 0; }
.voice-kicker { max-width: none; margin: 0 0 6px; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-dark); }
.voice blockquote { position: relative; margin: 0; padding-top: 34px; }
.voice blockquote::before { content: "\201C"; position: absolute; top: -8px; left: -3px; font-size: 4.4rem; line-height: 1; font-weight: 800; color: var(--gold); }
.voice blockquote p { margin: 0; font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 600; line-height: 1.4; color: var(--navy); text-wrap: pretty; }
.voice figcaption { margin-top: 14px; color: var(--slate); font-size: .95rem; }
.voice figcaption b { display: block; color: var(--navy); font-size: 1.05rem; }
.voice-draft { display: inline-block; margin: 14px 0 0; padding: 5px 12px; border: 1px dashed #B45309; border-radius: 8px; background: #FEF3C7; color: #78350F; font-size: .85rem; font-weight: 600; }
@media (min-width: 720px) {
  .voice { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; padding: 38px 44px; }
  .voice-photo { width: 200px; height: 200px; }
}
@media (min-width: 720px) {
  .cert-tiles { grid-template-columns: repeat(3, 1fr); }
  .cert-tiles li { padding: 72px 22px 22px; }
  .cert-tiles li::before { left: 22px; top: 20px; }
}
/* Five steps: the lane stays vertical until there is room for five columns side by side */
@media (min-width: 720px) and (max-width: 979px) {
  .lane-5 { padding-left: 52px; padding-top: 0; }
  .lane-5 .rope { left: 22px; right: auto; top: 6px; bottom: 6px; width: 10px; height: auto; background: repeating-linear-gradient(180deg, var(--teal) 0 14px, #fff 14px 17px, var(--gold) 17px 31px, #fff 31px 34px); }
  .lane-5 .swimmer { left: 4px; top: calc(var(--p) * (100% - 46px)); }
  .lane-5 .steps { grid-template-columns: 1fr; }
  .lane-5 .steps li { padding: 22px 22px 22px 76px; }
}
@media (min-width: 980px) {
  .lane-5 .steps { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .lane-5 .steps li { padding: 70px 18px 20px; }
  .lane-5 .steps li::before { left: 18px; }
  .cards-4 { grid-template-columns: repeat(4, 1fr); }
  /* five cards as three over two, with no card left alone on a row */
  .cards-5 { grid-template-columns: repeat(6, 1fr); }
  .cards-5 > * { grid-column: span 2; }
  .cards-5 > :nth-child(n+4) { grid-column: span 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bubbles, .seal-trail { display: none; }
  .caustic { top: 0; }
}