/* The site's components.
 * SSOT: tokens.css (values), layout.css (primitives, --flow tokens)
 * One viewport query here: the header nav bar at xl.
 * Waves are the only ambient animation; reduced motion stops them at the bottom.
 */

/* ------------------------------------------------------------------- base */

body {
	background: var(--yellow);
	color: var(--navy);
	font-family: var(--font-body);
	display: grid;
	grid-template-rows: auto 1fr auto;
	/* An auto column would grow to a sideways-scrolling row and widen the page. */
	grid-template-columns: minmax(0, 1fr);
	min-block-size: 100svb;
	margin: 0;
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.accent { color: var(--red-cta); }
.eyebrow {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--red-accent);
	margin: 0 0 var(--s-3);
}
.badge {
	display: inline-block;
	background: var(--red-cta);
	color: var(--white);
	border-radius: var(--radius-input);
	padding: var(--s-1) var(--s-3);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 var(--s-4);
}

:where(a, button, summary):focus-visible {
	outline: var(--ring);
	outline-offset: 3px;
	border-radius: var(--radius-input);
}

.skip-link:focus {
	position: fixed;
	inset-block-start: var(--s-2);
	inset-inline-start: var(--s-2);
	z-index: 100;
	background: var(--white);
	color: var(--navy);
	padding: var(--s-2) var(--s-3);
	border-radius: var(--radius-input);
	inline-size: auto;
	block-size: auto;
	clip-path: none;
}

/* ---------------------------------------------------------------- buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-1);
	min-block-size: var(--tap);
	padding: var(--s-3) var(--s-4);
	border: 1.5px solid transparent;
	border-radius: var(--radius-input);
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn--cta {
	background: var(--red-cta);
	color: var(--white);
}
.btn--cta:hover { background: var(--red-cta-hover); color: var(--white); }
.btn--lg {
	padding: var(--s-3) var(--s-5);
	font-size: var(--text-lg);
	box-shadow: var(--shadow-cta);
}

.btn--outline {
	background: none;
	color: var(--navy);
	border-color: var(--navy);
	font-weight: 600;
}
.btn--outline:hover { color: var(--red-cta); border-color: var(--red-cta); }

.btn--white { background: var(--white); color: var(--red-accent); }
.btn--ghost {
	background: none;
	color: var(--white);
	border-color: rgb(255 255 255 / 0.5);
	font-weight: 600;
}
.btn--ghost:hover { border-color: var(--white); color: var(--white); }

.btn--plan {
	inline-size: 100%;
	margin-block-start: var(--s-4);
	background: none;
	color: var(--navy);
	border-color: var(--navy);
}
.btn--plan:hover { background: var(--navy); color: var(--yellow); }

/* --------------------------------------------------------------- chrome */

.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--yellow) 93%, transparent);
	backdrop-filter: blur(10px);
	border-block-end: 1px solid var(--yellow-line);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	padding-block: var(--s-3);
}

.lockup {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	text-decoration: none;
	color: inherit;
}
/* Wordmark is three lines in the artwork; logo grows until they read. */
.lockup__logo { display: block; block-size: clamp(3.5rem, 3rem + 2vw, 4.5rem); inline-size: auto; }

.site-header__nav {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	flex: 1;
}
.primary-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5);
	flex: 1;
	justify-content: center;
}
.primary-nav a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--tap);
	padding-inline: var(--s-2);
	border-radius: var(--radius-input);
	color: var(--navy);
	text-decoration: none;
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: 0.01em;
}
.primary-nav a:hover { background: color-mix(in srgb, var(--white) 35%, transparent); }
.primary-nav a:hover { color: var(--red-cta); }

.site-footer {
	border-block-start: 1px solid var(--yellow-line);
}
.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	align-items: center;
	justify-content: var(--flow-spread);
	text-align: var(--flow);
	padding-block: var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
}
.site-footer__brand { display: flex; align-items: center; gap: var(--s-2); }
.site-footer__logo { display: block; block-size: 3rem; inline-size: auto; }
.site-footer__legal { margin: 0; font-size: var(--text-xs); color: var(--yellow-ink); }
.site-footer__coach {
	font-size: var(--text-xs);
	color: var(--yellow-ink-2);
	text-decoration: none;
}
.site-footer__coach:hover { color: var(--red-cta); }
/* Returning families' link: reads as a link, not small print. */
.site-footer__lessons {
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--navy);
}
.site-footer__lessons:hover { color: var(--red-cta); }

/* ------------------------------------------------------------------ hero */

.hero {
	--split-gap: var(--s-7);
	padding-block: var(--s-6);
}
.hero__body {
	font-size: var(--text-lg);
	line-height: 1.85;
	color: var(--navy-2);
	max-inline-size: 30rem;
	margin: 0 0 var(--s-5);
}
.hero h1 { margin: 0 0 var(--s-4); }

/* One row of equal columns at every width, never 2 + 1. */
.stats {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--s-4);
	margin: var(--s-5) 0 0;
}
.stats__item { margin: 0; }
.stats__figure {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: var(--text-2xl);
	color: var(--red-accent);
}
.stats__label {
	margin: 0;
	font-size: var(--text-xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--yellow-ink);
}

.hero__media {
	position: relative;
	/* Stacked, the pool is a picture under the pitch, not a wall of it. */
	inline-size: min(100%, 40rem);
	justify-self: center;
}

.photo {
	margin: 0;
	border-radius: var(--radius-panel);
	overflow: hidden;
	border: 1.5px solid var(--yellow-line);
	box-shadow: var(--shadow-photo);
}
.photo__img { inline-size: 100%; display: block; }

.slot-chip {
	position: absolute;
	inset-inline-end: calc(-1 * var(--s-2));
	inset-block-end: calc(-1 * var(--s-3));
	background: var(--navy-surface);
	color: var(--yellow);
	border-radius: var(--radius-soft);
	padding: var(--s-3) var(--s-4);
	box-shadow: var(--shadow-chip);
	margin: 0;
}
.slot-chip__title {
	display: block;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: var(--text-base);
}
.slot-chip__value {
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
}

/* ---------------------------------------------------------- announcement */

.news {
	margin-block: var(--s-4) 0;
	background: var(--navy-surface);
	color: var(--white);
	border-radius: var(--radius-soft);
	border-inline-start: 6px solid var(--yellow);
	padding: var(--s-3) var(--s-4);
	box-shadow: var(--shadow-chip);
}
.news__label {
	margin: 0;
	color: var(--yellow);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.news__title {
	margin: var(--s-1) 0 0;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: var(--text-lg);
	line-height: 1.2;
}
.news__body { margin-block-start: var(--s-2); font-size: var(--text-sm); }
.news__body > * { margin: 0; }
.news__body > * + * { margin-block-start: var(--s-2); }
.news__body a { color: var(--yellow); }

/* ----------------------------------------------------------------- bands */

.band {
	position: relative;
	overflow: hidden;
}
.band--red {
	background: var(--red);
	border-block: 1px solid var(--red-line);
	color: var(--warm);
}
.band--navy {
	background: var(--navy-surface);
	border-block: 1px solid var(--navy-line);
	color: var(--hub-body);
}
.band__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--s-6);
	inline-size: min(100% - 2 * var(--gutter), var(--wrap));
	margin-inline: auto;
}
.band__inner--narrow { --wrap: var(--wrap-text); }

.band--red h2 { color: var(--white); }

/* .l-head note; ink follows its ground. */
.head-note { font-size: var(--text-base); color: var(--yellow-ink); }
.band--red .head-note { color: var(--warm); }

/* One path period = half the viewBox, so -50% lands on its own repeat. */
/* Block drifts (transform), surface swells (translate/scale): separate properties
   so they add. Periods share no common beat, so the water never repeats. */
.waves {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.waves__layer {
	position: absolute;
	inset-inline-start: 0;
	inline-size: 200%;
	inset-block-end: -2%;
	block-size: var(--wave-h, 40%);
	animation: banks-drift var(--wave-drift, 40s) linear infinite;
	will-change: transform;
}
.waves__layer svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	transform-origin: 50% 100%;
	animation: banks-swell var(--wave-swell, 8s) ease-in-out var(--wave-delay, 0s) infinite alternate;
}
.waves__layer--back  { --wave-h: 46%; --wave-drift: 61s; --wave-swell: 7.9s; --wave-delay: -4s; }
.waves__layer--mid   { --wave-h: 38%; --wave-drift: 41s; --wave-swell: 6.1s;  --wave-delay: -7s; }
.waves__layer--front { --wave-h: 30%; --wave-drift: 24s; --wave-swell: 4.3s;  --wave-delay: -2s; }

.waves--red .waves__layer--back path  { fill: rgb(255 255 255 / 0.035); }
.waves--red .waves__layer--mid path   { fill: rgb(255 210 130 / 0.06); }
.waves--red .waves__layer--front path { fill: rgb(255 210 130 / 0.08); }
.waves--navy .waves__layer--back path  { fill: color-mix(in srgb, var(--teal) 4%, transparent); }
.waves--navy .waves__layer--mid path   { fill: color-mix(in srgb, var(--teal) 5%, transparent); }
.waves--navy .waves__layer--front path { fill: color-mix(in srgb, var(--teal) 7%, transparent); }

@keyframes banks-drift {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes banks-swell {
	from { translate: 0 3%;  scale: 1 0.9; }
	to   { translate: 0 -2%; scale: 1 1.07; }
}

/* ----------------------------------------------------------- price cards */

/* Up to three: stacked, one row once the row is wide enough (container).
   Four+: one sideways-scrolling row with the next card peeking.
   Subgrid over six rows lines up fields across cards. Row pads for the ribbon. */
.price-cards {
	--cards-gap: var(--s-4);
	display: grid;
	gap: var(--cards-gap);
	padding-block-start: var(--s-2);
}
@container (width >= 44rem) {
	.price-cards {
		grid-auto-flow: column;
		grid-template-rows: repeat(6, auto);
		grid-auto-columns: minmax(0, 1fr);
	}
}
.price-cards:has(> :nth-child(4)) {
	grid-auto-flow: column;
	grid-template-rows: repeat(6, auto);
	grid-auto-columns: max(min(16rem, 85%), (100% - 2 * var(--cards-gap)) / 3.25);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	padding-block: var(--s-3) var(--s-2);
	scrollbar-color: color-mix(in srgb, var(--white) 45%, transparent) transparent;
}
.price-cards:has(> :nth-child(4)) > .price-card { scroll-snap-align: start; }

.price-card {
	display: grid;
	grid-row: span 6;
	grid-template-rows: subgrid;
	row-gap: 0;
	align-content: start;
}
.price-card__name  { grid-row: 1; }
.price-card__dur   { grid-row: 2; }
.price-card__price { grid-row: 3; align-self: end; }
.price-card__note  { grid-row: 4; }
.price-card__desc  { grid-row: 5; }
.price-card .btn--plan { grid-row: 6; align-self: end; }

.price-card {
	position: relative;
	background: var(--cream);
	border: 1.5px solid var(--cream);
	border-radius: var(--radius-card);
	padding: var(--s-5) var(--s-4);
	color: var(--muted);
}
.price-card--feature {
	background: var(--yellow);
	border-color: var(--yellow);
	color: var(--yellow-ink);
}
.price-card__tag {
	position: absolute;
	inset-block-start: calc(-1 * var(--s-2));
	inset-inline-start: var(--s-5);
	background: var(--red-cta);
	color: var(--white);
	border-radius: var(--radius-pill);
	padding: var(--s-1) var(--s-3);
	font-size: var(--text-xxs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
}
.price-card__name { margin: 0; color: var(--navy); }
.price-card--feature .price-card__name,
.price-card--feature .price-card__price { color: var(--navy-deep); }
.price-card__dur { margin: var(--s-1) 0 var(--s-4); font-size: var(--text-xs); }
.price-card__price {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: var(--text-section);
	line-height: 1;
	color: var(--navy);
}
.price-card__price span { font-size: var(--text-sm); font-weight: 600; color: inherit; }
.price-card__note { margin: var(--s-1) 0 0; font-size: var(--text-xs); }
.price-card__desc { margin: var(--s-3) 0 0; font-size: var(--text-sm); line-height: 1.7; }
.price-card--feature .btn--plan { background: var(--navy-deep); color: var(--yellow); border-color: var(--navy-deep); }
.price-card--feature .btn--plan:hover { background: var(--navy); }

/* ------------------------------------------------------------- age cards */

.age-cards { --switch-at: 36rem; --switch-gap: var(--s-4); margin-block-start: var(--s-4); }
.age-card {
	display: flex;
	gap: var(--s-4);
	align-items: flex-start;
	background: var(--red-card);
	border: 1.5px solid var(--red-card);
	border-radius: var(--radius-soft);
	padding: var(--s-4) var(--s-5);
}
.age-card__mark {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: var(--text-xl);
	line-height: 1;
	margin: 0;
}
.age-card__mark--yellow { color: var(--yellow); }
.age-card__mark--teal { color: var(--teal); }
.age-card__title { margin: 0; font-family: var(--font-body); font-size: var(--text-lg); font-weight: 700; color: var(--white); }
.age-card__body { margin: var(--s-1) 0 0; font-size: var(--text-sm); line-height: 1.75; color: var(--warm); }

/* ---------------------------------------------------------------- offers */

.offers { margin-block-start: var(--s-6); }
.offers__title { color: var(--white); }

/* Offers: price-card surface, lighter content; the figure leads. */
.offer-cards { --grid-min: 16rem; --grid-gap: var(--s-4); }

.offer-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	background: var(--cream);
	border: 1.5px solid var(--cream);
	border-radius: var(--radius-card);
	padding: var(--s-5);
	padding-block-start: calc(var(--s-5) + var(--s-2));
	color: var(--muted);
}
/* A hand-given perk, not a price: set apart in yellow. */
.offer-card--perk { background: var(--yellow); border-color: var(--yellow); color: var(--yellow-ink); }
.offer-card__tag {
	position: absolute;
	inset-block-start: calc(-1 * var(--s-2));
	inset-inline-start: var(--s-5);
	margin: 0;
	background: var(--red-cta);
	color: var(--white);
	border-radius: var(--radius-pill);
	padding: var(--s-1) var(--s-3);
	font-size: var(--text-xxs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.offer-card--perk .offer-card__tag { background: var(--navy-deep); color: var(--yellow); }
.offer-card__figure {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: var(--text-section);
	line-height: 1;
	color: var(--navy);
}
.offer-card__figure span { font-size: var(--text-lg); font-weight: 700; color: inherit; }
.offer-card--perk .offer-card__figure { color: var(--navy-deep); }
.offer-card__title { margin: 0; font-family: var(--font-body); font-size: var(--text-lg); font-weight: 700; color: var(--navy); }
.offer-card__group { margin: var(--s-2) 0 0; font-size: var(--text-xxs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.offer-card__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); font-size: var(--text-sm); line-height: 1.6; }
.offer-card__list li { padding-inline-start: 1.1em; position: relative; }
.offer-card__list li::before { content: "✓"; position: absolute; inset-inline-start: 0; font-weight: 700; color: var(--red-cta); }
.offer-card--perk .offer-card__list li::before { color: var(--navy-deep); }
.offer-card__list--prices li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s-2); padding-inline-start: 0; }
.offer-card__list--prices li::before { content: none; }
.offer-card__price s { opacity: 0.7; }
.offer-card__price b { color: var(--navy); }
.offer-card__fine { margin: 0; font-size: var(--text-xs); }
/* The button sits on the card's floor, so a row of cards lines their buttons up. */
.offer-card .btn--plan { margin-block-start: auto; }

/* ----------------------------------------------------------------- coach */

/* Fixed portrait column so the portrait is not the loudest thing; centres when stacked. */
.coach {
	--split-cols: 21rem 1fr;
	padding-block: var(--s-6);
}
.coach__media {
	position: relative;
	inline-size: min(100%, 21rem);
	justify-self: center;
}
.coach__copy { min-inline-size: 0; }
.coach__portrait {
	inline-size: 100%;
	display: block;
	/* Source is a 1:2.5 sliver; crop in CSS to 4:5, held high on Jay. */
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 20%;
	border-radius: var(--radius-card);
	border: 1.5px solid var(--yellow-line);
}
.coach__inset {
	position: absolute;
	inset-inline-end: calc(-1 * var(--s-3));
	inset-block-end: calc(-1 * var(--s-3));
	inline-size: 11rem;
	block-size: 7.5rem;
	object-fit: cover;
	border-radius: var(--radius-soft);
	border: 3px solid var(--yellow);
	box-shadow: var(--shadow-chip);
}
.coach h2 { margin: 0 0 var(--s-4); }
.coach__para {
	font-size: var(--text-lg);
	line-height: 1.9;
	color: var(--navy-2);
	max-inline-size: 42rem;
	margin: 0 0 var(--s-4);
}

/* ------------------------------------------------------------------- faq */

.faq__title { text-align: center; color: var(--cream-2); margin: 0 0 var(--s-5); }
.faq__item { border-block-end: 1px solid var(--hub-line); }
.faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-5) var(--s-2);
	cursor: pointer;
	font-weight: 600;
	font-size: var(--text-xl);
	color: var(--cream-2);
	list-style: none;
	min-block-size: var(--tap);
}
.faq__q:hover { color: var(--yellow); }
.faq__q::-webkit-details-marker { display: none; }
/* The +/− marker is the disclosure state, so CSS owns it — no JS accordion. */
.faq__q::after {
	content: "+";
	font-size: var(--text-2xl);
	color: var(--yellow);
	line-height: 1;
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a {
	margin: 0;
	padding: 0 var(--s-2) var(--s-5);
	font-size: var(--text-lg);
	line-height: 1.85;
	color: var(--hub-body);
}

/* --------------------------------------------------------------- contact */

.contact { padding-block: var(--s-6); }
.contact__panel {
	background: var(--grad-cta);
	border-radius: var(--radius-panel);
	padding: var(--s-6) var(--s-5);
}
.contact__title { color: var(--white); margin: 0 0 var(--s-3); }
.contact__body {
	color: var(--warm-2);
	font-size: var(--text-base);
	line-height: 1.8;
	max-inline-size: 28rem;
	margin: 0 0 var(--s-5);
}
.contact__details {
	color: var(--warm-3);
	font-size: var(--text-base);
	line-height: 2;
	font-style: normal;
}
.contact__details a { color: var(--warm-3); }
.contact__label {
	font-weight: 700;
	color: var(--white);
	font-size: var(--text-xxs);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin: var(--s-3) 0 var(--s-1);
}
.contact__label:first-child { margin-block-start: 0; }

/* ------------------------------------------------------------ the menu */

/* The menu button is the nav until the xl bar; landscape tablets included. */
.nav-toggle {
	display: grid;
	place-items: center;
	margin-inline-start: auto;
	inline-size: var(--tap);
	block-size: var(--tap);
	background: none;
	border: 0;
	cursor: pointer;
}
.nav-toggle__box { display: grid; gap: 5px; }
.nav-toggle__box span {
	display: block;
	block-size: 2px;
	inline-size: 22px;
	background: var(--navy);
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
/* Open, the three bars fold into a close mark. 7px = one bar + one gap. */
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Flyout over the page, on the sticky header (its containing block).
   visibility, not display, so it eases in and leaves the tab order when shut. */
.site-header__nav {
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--s-3);
	padding: var(--s-3) var(--gutter) var(--s-5);
	max-block-size: calc(100svb - var(--header-h));
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--yellow);
	border-block-end: 1px solid var(--yellow-line);
	box-shadow: var(--shadow-chip);
	visibility: hidden;
	opacity: 0;
	transform: translateY(calc(-1 * var(--s-2)));
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.nav-toggle[aria-expanded="true"] + .site-header__nav {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}
.primary-nav {
	flex-direction: column;
	align-items: center;
	gap: var(--s-1);
	justify-content: flex-start;
}
/* One centred column, a thumb's width even on a tablet. */
.site-header__nav > * { inline-size: min(100%, 24rem); margin-inline: auto; }
.primary-nav a { justify-content: center; min-inline-size: 60%; }
.site-header__nav .btn { min-block-size: calc(var(--tap) + var(--s-1)); }

/* Dims the page; a tap closes the menu (main.js, via the header). */
.site-header::after {
	content: "";
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	block-size: 100svb;
	background: color-mix(in srgb, var(--navy-deep) 45%, transparent);
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.site-header:has(.nav-toggle[aria-expanded="true"])::after {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}
:root:has(.nav-toggle[aria-expanded="true"]) { overflow: hidden; }

/* xl (--bp-xl) — the nav fits as a bar, in the header's own row. */
@media (width >= 80em) {
	.nav-toggle,
	.site-header::after { display: none; }
	.site-header__nav {
		position: static;
		flex: 1;
		flex-direction: row;
		align-items: center;
		padding: 0;
		max-block-size: none;
		overflow: visible;
		background: none;
		border: 0;
		box-shadow: none;
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: none;
	}
	.site-header__nav > * { inline-size: auto; margin-inline: 0; }
	.primary-nav { flex-direction: row; gap: var(--s-5); justify-content: center; }
	.primary-nav a { min-inline-size: 0; }
	.site-header__nav .btn { min-block-size: var(--tap); }
	.site-header__lessons { display: none; }
}

/* Anchor targets clear the sticky header. */
[id] { scroll-margin-block-start: var(--header-h); }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.waves__layer, .waves__layer svg { animation: none; }
	* { transition-duration: 1ms !important; }
}

/* ---------------------------------------------------------- testimonials */

.says { padding-block: var(--s-6) 0; }
.says__grid { --grid-min: 17rem; --grid-gap: var(--s-3); }
.says__head { margin-block-end: var(--s-4); }
.says__head h2 { margin: 0; }

.say {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	background: var(--white);
	border: 1.5px solid var(--yellow-line);
	border-radius: var(--radius-soft);
	padding: var(--s-4);
}
/* The quote mark is the card's one ornament, in the brand yellow. */
.say__words {
	margin: 0;
	flex: 1;
	font-size: var(--text-lg);
	line-height: 1.7;
	color: var(--navy-2);
}
.say__words::before {
	content: "\201C";
	display: block;
	font-family: var(--font-display);
	font-size: 3.5rem;
	line-height: 0.8;
	color: var(--yellow);
}
.say__words p { margin: 0; }
.say__name {
	font-weight: 700;
	color: var(--navy);
}
.say__name::before { content: "— "; color: var(--muted); font-weight: 400; }

/* -------------------------------------------------------------- policies */

.policies { padding-block: var(--s-6); }
/* Four cards: one column, two by two, or one row — never three over one. */
.policies__grid { display: grid; gap: var(--s-3); }
@container (width >= 36rem) { .policies__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (width >= 64rem) { .policies__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.policy {
	background: var(--cream);
	border: 1.5px solid var(--yellow-line);
	border-radius: var(--radius-soft);
	padding: var(--s-4);
}
.policy__title {
	margin: 0 0 var(--s-2);
	font-size: var(--text-xl);
	color: var(--navy);
}
.policy__body {
	margin: 0;
	font-size: var(--text-base);
	line-height: 1.8;
	color: var(--muted);
}