:root{--blue:#132eab;--blue-d:#0d2185;--red:#dc001f;--red-d:#b80019;--yellow:#ffdc27;--teal:#19a2a8;--tint:#f1f8fc;--tint2:#e3f2fa;--ink:#212121;--body:#444;--muted:#5b6478;--line:#d8e4f0;--r:12px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--header-h,150px);-webkit-text-size-adjust:100%}
body{margin:0;font-family:Poppins,ui-sans-serif,system-ui,sans-serif;font-weight:500;color:var(--body);font-size:16px;line-height:1.6;background:#fff}
img{max-width:100%;height:auto;display:block}a{color:var(--blue)}
h1,h2,h3{font-family:Poppins,ui-sans-serif,system-ui,sans-serif;color:var(--blue);font-weight:700;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,7vw,3.6rem);letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,4.6vw,2.5rem)}h3{font-size:1.2rem}
p{margin:0 0 1em}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px 12px;z-index:99}
.center{text-align:center}.light{color:#fff!important}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:.6em}
.eyebrow.light{color:var(--yellow)!important}
.sub{font-size:1.05rem;color:var(--muted);max-width:720px}.sub.center{margin-left:auto;margin-right:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;font:700 1rem/1.2 Poppins,sans-serif;padding:14px 28px;border-radius:40px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-d)}
.btn-outline{background:#fff;color:var(--blue);border-color:var(--blue)}.btn-outline:hover{background:var(--tint)}
.btn-sm{padding:10px 18px;font-size:.92rem}.btn-block{width:100%}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
/* top bar + header */
.topbar{background:var(--blue);color:#fff;font-size:.78rem;font-weight:500}
.topbar-in{font-size:.72rem;display:flex;justify-content:space-between;gap:12px;padding:7px 20px}.tb-right{display:none}
.site-header{background:#fff;border-bottom:5px solid var(--red);position:sticky;top:0;z-index:20}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 20px}
.logo img{width:96px;height:auto}
.nav{display:none;gap:28px;align-items:center}
.nav a{color:var(--blue);font-weight:600;text-decoration:none;font-size:1rem}.nav a:hover{color:var(--red)}
/* hero */
.hero{position:relative;background:linear-gradient(180deg,#e9f7fd 0%,#d4f0fa 100%);overflow:hidden;padding:44px 0 90px}
.hero-bg{position:absolute;inset:0;opacity:.28}.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:80% center}
/* hero slideshow: the original hero, then swim-program photos, crossfading (app.js) */
.hero-bg .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.hero-bg .slide.is-on{opacity:1}
.hero-bg .photo{object-position:center 35%}
.hero-pause{position:absolute;right:16px;bottom:96px;z-index:2;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:var(--navy,#14287a);padding:0;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.hero-pause::before{content:"";display:block;margin:auto;width:4px;height:12px;border-left:4px solid currentColor;border-right:4px solid currentColor;box-sizing:content-box}
.hero-pause.is-paused::before{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor;margin-left:12px}
.hero-pause:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.hero-in{position:relative;z-index:1;max-width:1200px}
.hero h1 .hl{color:var(--red)}
.squiggle{width:min(320px,70%);margin:-.2em 0 1.2em}
.lead{font-size:1.08rem;color:#1d2a55;max-width:640px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.wave{position:absolute;left:0;width:100%;height:40px;display:block}
.wave-bottom{bottom:-1px}.wave-top{top:-1px}
/* facts band */
.facts{background:var(--blue);color:#fff;padding:8px 0 40px}
.facts-grid{display:grid;gap:22px}
.facts .k{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#aab6ea;font-weight:700;margin:0 0 .3em}
.facts .v{color:var(--yellow);font-weight:700;font-size:1.35rem;line-height:1.2;margin:0 0 .3em}.facts .v span:not(.nw){color:#fff;font-size:.9rem;font-weight:500}
.facts .v.sm{color:#fff;font-size:1.02rem;font-weight:600}
.facts .d{font-size:.9rem;color:#dfe5ff;margin:0}.facts a{color:var(--yellow);font-weight:700;text-decoration:none}
/* sections */
.section{padding:64px 0;position:relative}
.section.tint{background:var(--tint)}
.section.blue{background:var(--blue);padding:96px 0}
/* options */
.options{display:grid;gap:22px;margin-top:32px}
/* Each card has its own color, like the BSS class-level cards (Starfish orange, Turtle 2 green); the button stays red. */
.opt{--c:var(--blue);--c-d:var(--blue);--c-l:var(--tint);background:#fff;border:3px solid var(--c);border-radius:20px;padding:30px;box-shadow:0 6px 24px rgba(19,46,171,.06);display:flex;flex-direction:column}
.opt-orange{--c:#e8813a;--c-d:#b4501c;--c-l:#fdf1e7}
.opt-green{--c:#a9c84a;--c-d:#3e6a1e;--c-l:#f3f8e6}
.opt h3{font-size:clamp(1.5rem,3.6vw,1.75rem);line-height:1.15;margin-bottom:10px;color:var(--c-d)}
.price{font:800 clamp(2.4rem,6vw,2.9rem)/1 Poppins,sans-serif;color:var(--red);margin:0}
.price-note{color:var(--muted);font-size:1.02rem;margin:6px 0 18px}
.checks{list-style:none;padding:0;margin:0 0 1.2em;flex:1}
.checks li{position:relative;padding-left:26px;margin-bottom:10px}
.checks li::before{content:"\2713";position:absolute;left:2px;top:0;font-weight:800;color:var(--c-d,var(--teal))}
.checks strong{color:var(--ink)}
.best{font-size:.9rem;background:var(--c-l,var(--tint));border-radius:10px;padding:10px 14px;margin:0 0 20px;color:var(--c-d,var(--blue));font-weight:600}
/* cards */
.cards{display:grid;gap:18px;margin-top:32px}
.card{background:#fff;border-radius:var(--r);padding:24px;box-shadow:0 2px 14px rgba(19,46,171,.08)}
.ic{width:52px;height:52px;border-radius:50%;background:var(--blue);display:grid;place-items:center;margin-bottom:14px}
.ic svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card:nth-child(2) .ic{background:var(--red)}.card:nth-child(3) .ic{background:var(--teal)}.card:nth-child(4) .ic{background:#902e8e}.card:nth-child(5) .ic{background:#e17a2e}.card:nth-child(6) .ic{background:var(--blue)}
.card p{margin:0;font-size:.95rem}
/* why */
.why-grid{display:grid;gap:36px;align-items:start}
.research{margin:24px 0 0;background:var(--blue);color:#fff;border-radius:16px;padding:24px;font-size:1.05rem;font-style:italic;font-weight:500;position:relative}
.research .k{font-style:normal;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);font-weight:700;margin:0 0 .5em}
.why-list{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.why-list li{display:flex;gap:18px;background:var(--tint);border-radius:var(--r);padding:20px}
.num{font-weight:800;font-size:1.6rem;color:var(--red);line-height:1}
.why-list p{margin:0}
/* certificate */
.cert{margin:36px auto 0;max-width:960px;background:#fff;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.25);display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;border-left:10px solid var(--yellow);color:var(--ink)}
.cert-main{padding:26px 22px}
.cert-school{font-size:1.4rem;font-weight:800;color:var(--blue);margin:0}
.cert-meta{font-size:.85rem;color:var(--muted);margin:0 0 16px}
.cert-offer{background:var(--tint2);border:1.5px solid #b8d4ee;border-radius:12px;padding:16px 18px;margin-bottom:18px}
.cert-kicker{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0 0 .3em}
.cert-big{font-size:clamp(1.5rem,5vw,2rem);font-weight:800;color:var(--blue);margin:0;line-height:1.15}
.cert-line{margin:.4em 0;font-size:.95rem}
.code{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-weight:700;border:2px dashed var(--blue);color:var(--blue);padding:1px 8px;border-radius:6px;font-size:.85rem}
.cert-plus{margin:.6em 0 0;padding-top:.6em;border-top:1px solid #b8d4ee;font-weight:700;font-size:.9rem}
.cert-steps{margin:0;padding-left:0;list-style:none;counter-reset:s}
.cert-steps li{counter-increment:s;position:relative;padding-left:34px;margin-bottom:10px;font-size:.92rem}
.cert-steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-size:.8rem;display:grid;place-items:center}
.cert-side{background:linear-gradient(160deg,#1a39c4,var(--blue-d));color:#fff;text-align:center;padding:24px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pennants{width:144px;height:14px;margin-bottom:10px;background:conic-gradient(from 135deg at 50% 100%,var(--yellow) 0 90deg,transparent 0) 0 0/18px 14px repeat-x}
.cert-season{font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin:0}
.cert-sm{font-size:.82rem;margin:0 0 .4em;color:#dfe5ff}
.cert-tag{font-size:1.3rem;font-weight:800;margin:.3em 0;line-height:1.2}
.cert-logo{margin:16px 0 10px}
.cert-logo img{width:150px}
.cert-loc{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin:0 0 .3em;line-height:1.5}

.note{margin-top:18px;font-size:.9rem;opacity:.9}
/* steps */
.steps{display:grid;gap:20px;margin-top:32px}
.step{background:#fff;border:2px solid var(--line);border-radius:16px;padding:26px 22px;position:relative}
.step-n{width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;font-size:1.3rem;display:grid;place-items:center;margin-bottom:14px}
.step p{margin:0;font-size:.95rem}
.faq{max-width:820px;margin:64px auto 0}
.faq h2{margin-bottom:20px}
details{background:var(--tint);border-radius:var(--r);margin-bottom:12px;padding:0 20px}
summary{cursor:pointer;font-weight:700;color:var(--blue);padding:16px 28px 16px 0;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:12px;font-size:1.5rem;color:var(--red);font-weight:700}
details[open] summary::after{content:"–"}
details p{margin:0 0 16px}
/* form */
.form-grid{display:grid;gap:32px;align-items:start}
.contact-box{background:#fff;border-radius:var(--r);padding:20px;border-left:6px solid var(--red);margin-top:20px}
.contact-box .k{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--red);margin:0}
.big-phone{font-size:1.6rem;font-weight:800;text-decoration:none;color:var(--blue)}
.contact-box p{margin:0}.contact-box .d{font-size:.9rem;color:var(--muted)}
.form,.thanks{background:#fff;border-radius:16px;padding:26px 20px;box-shadow:0 8px 24px rgba(19,46,171,.12)}
.form h3{font-size:1.4rem}
.form label{display:block;font-weight:600;color:var(--ink);font-size:.92rem;margin-bottom:14px}
.opt-l{font-weight:500;color:var(--muted)}
.form input:not([type=radio]),.form select,.form textarea{display:block;width:100%;margin-top:6px;font:500 16px Poppins,sans-serif;color:var(--ink);padding:12px 14px;border:1.5px solid #b8c9de;border-radius:10px;background:#fff}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(19,46,171,.18)}
.row2{display:grid;gap:0 14px}
fieldset{border:0;padding:0;margin:0 0 14px}
legend{font-weight:600;color:var(--ink);font-size:.92rem;margin-bottom:8px;padding:0}
.radios{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.radio{margin:0!important;position:relative}
.radio input{position:absolute;opacity:0}
.radio span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:8px 10px;border:1.5px solid #b8c9de;border-radius:10px;font-size:.88rem;font-weight:600;color:var(--blue);cursor:pointer;line-height:1.25}
.radio input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}
.radio input:focus-visible+span{box-shadow:0 0 0 3px rgba(19,46,171,.3)}
/* The option toggles wear their card's color (orange promo codes, green certificates). */
.radio.opt-orange span,.radio.opt-green span{border-color:var(--c);color:var(--c-d)}
.radio.opt-orange input:checked+span,.radio.opt-green input:checked+span{background:var(--c-d);border-color:var(--c-d);color:#fff}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status{margin:10px 0 0;font-size:.92rem;min-height:1em}.form-status.err{color:var(--red)}
.fine{font-size:.8rem;color:var(--muted);margin:8px 0 0}
.thanks{text-align:center;padding:40px 24px}.thanks-ic{font-size:2.6rem}
.thanks:focus{outline:none}
/* footer: matches britishswimschool.com's (measured from the live site) */
.footer{color:#fff;margin-top:-1px}
.f-wave{height:12px;background:var(--tint);margin-bottom:-3px;position:relative}.f-wave svg{display:block}.f-wave-lg{display:none}
.f-body{background:var(--blue);padding:64px 24px;display:flex;flex-direction:column;gap:24px}
.f-body>*{width:100%;max-width:1280px;margin:0 auto}
.f-top{display:flex;flex-direction:column;gap:48px}
.f-brand img{width:180px}
.footer a{color:rgba(255,255,255,.9);text-decoration:none;transition:color .15s}.footer a:hover{color:#fff}
.f-phone{display:block;margin-top:32px;font-size:26px;font-weight:700;line-height:1;color:#fff!important}
.f-email{display:block;margin-top:16px;font-size:16px;overflow-wrap:anywhere}
.f-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.f-cols h3{color:#fff;font-size:18px;line-height:1.5;margin:0}
.f-cols ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.9)}
.f-social{display:flex;gap:12px;margin-top:40px}.f-social img{width:36px;height:36px}.f-social a:hover{opacity:.8}
.footer hr{border:0;border-top:1px solid rgba(255,255,255,.15);margin:0 auto}
.f-legal{display:flex;flex-direction:column;gap:16px;font-size:13px;color:rgba(255,255,255,.8)}.f-legal p{margin:0}
.f-legal nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}.f-legal nav>span[aria-hidden]{color:rgba(255,255,255,.4)}.footer .f-legal a{color:rgba(255,255,255,.8)}
@media (min-width:640px){.f-cols{grid-template-columns:repeat(3,1fr)}.f-legal{flex-direction:row;justify-content:space-between;align-items:center}}
@media (min-width:768px){.f-body{padding:64px 40px}}
@media (min-width:1024px){
  .f-wave{height:18px}.f-wave-sm{display:none}.f-wave-lg{display:block}
  .f-body{padding:80px}
  .f-cols{grid-template-columns:repeat(3,max-content);column-gap:72px;white-space:nowrap}
}
/* Brand beside the link columns only when both fit; the email never wraps there. */
@media (min-width:1200px){
  .f-top{flex-direction:row;gap:64px}.f-brand{flex:none}.f-email{white-space:nowrap}.f-right{flex:1}
  .f-cols{justify-content:end;column-gap:56px}
  .f-social{justify-content:flex-end}
}
/* breakpoints */
@media (min-width:640px){
  .row2{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .cert{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .cert-main{padding:32px}
  .facts-grid{grid-template-columns:repeat(3,1fr)}
  .tb-right{display:inline}
}
@media (min-width:900px){
  body{font-size:17px}
  .logo img{width:124px}
  .nav{display:flex}
  .hero{padding:80px 0 130px}
  .hero-bg{opacity:1}
  .hero-bg .photo{left:auto;width:64%}
  .hero-pause{bottom:136px;right:24px}
  .hero-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(233,247,253,.97) 0%,rgba(233,247,253,.9) 38%,rgba(233,247,253,0) 62%);z-index:1}
  .hero-in>*{max-width:640px}
  .options{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:repeat(3,1fr)}
  .why-grid{grid-template-columns:1fr 1fr;gap:56px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .form-grid{grid-template-columns:.9fr 1.1fr;gap:56px}
  .form,.thanks{padding:36px}
  .wave{height:60px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}.hero-bg .slide{transition:none}}
/* bssdhe additions: field errors from the server, simple pages (thanks, 404) */
.form [aria-invalid=true]{border-color:var(--red)!important}
.field-err{display:block;color:var(--red);font-size:.82rem;font-weight:600;margin-top:4px}
.field-err:empty{display:none}
.simple{min-height:70vh;display:grid;place-items:center;text-align:center;padding:64px 20px;background:var(--tint)}
.simple p{color:var(--muted)}
/* header styled after the current britishswimschool.com location header */
.site-header .topbar{font-size:.78rem}
.topbar-in{justify-content:center;align-items:center;gap:36px;padding:7px 20px;font-size:.74rem}
.tb-rating{display:none}
.stars{color:var(--yellow);letter-spacing:2px;margin-right:6px}
.tb-loc{display:inline-flex;align-items:center;gap:6px;text-align:center}
.tb-loc svg{width:14px;height:14px;fill:none;stroke:#7fc3ff;stroke-width:2;flex:none}
.tb-loc a{color:#fff;text-decoration:underline;margin-left:4px;display:none}
.header-in{padding:10px 20px}
.logo{position:relative;z-index:2}
@media (min-width:640px){.tb-rating{display:inline}.tb-loc a{display:inline}}
@media (min-width:900px){
  .header-in{padding:12px 20px;justify-content:flex-start}
  .logo{margin:-36px 0 -6px}
  .logo img{width:168px}
  .nav{margin-left:auto;gap:36px}
  .nav a{font-weight:600;font-size:1rem}
  .header-in>.btn{margin-left:36px;padding:12px 24px;font-size:1rem}
}
/* Room for the full nav labels on mid-size screens. */
@media (min-width:900px) and (max-width:1179px){.nav{gap:22px}.nav a{font-size:.95rem}.header-in>.btn{margin-left:22px}}
.hero h1 .hl{white-space:nowrap}
.req{color:var(--red);font-weight:800}
.form [hidden]{display:none!important}
.radio-wide{grid-column:1/-1}
.radio input:checked+span::before{content:"\2713";margin-right:6px;font-weight:800}
.simple.privacy > div{max-width:680px;text-align:left}
.simple.privacy h2{font-size:1.15rem;margin:1.4em 0 .3em}
.ic.ic-done{margin:0 auto 14px;background:#19a2a8}
.form-grid>*{min-width:0}.contact-box a{overflow-wrap:anywhere}

/* Phone number lives in the top bar, so the header row is only page sections in order. */
.tb-phone{color:#fff;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.tb-phone:hover{text-decoration:underline}.tb-phone svg{width:12px;height:12px;fill:currentColor}
.f-ver{display:inline-block;background:rgba(255,255,255,.14);color:#fff;font-weight:700;padding:1px 8px;border-radius:999px;letter-spacing:.02em}
/* Place names stay on one line. */
.nw{white-space:nowrap}
/* A card reached from an FAQ link gets a soft glow in its own color so it is obvious which one. */
.opt:target{box-shadow:0 0 0 6px var(--c-l),0 0 0 9px var(--c)}
.facts .d a[href^="#"]{color:inherit;font-weight:inherit;text-decoration:underline}
/* Phones: long addresses and links wrap instead of widening the page, and the certificate's columns can shrink. */
.cert-main,.cert-side{min-width:0}
.cert-steps strong,.simple a{overflow-wrap:anywhere}
.simple{grid-template-columns:minmax(0,1fr)}
.simple > div{min-width:0;max-width:100%}
.simple.privacy > div{max-width:min(680px,100%)}