/* =====================================================================
 * Pedagogy Club — Custom CSS
 *
 * HOW TO INSTALL:
 *   1. In WordPress admin: Elementor → Site Settings → Custom CSS
 *   2. Paste this entire file
 *   3. Save & Update
 *
 * This file defines the design system: colour tokens, dark mode,
 * typography, and all the layout styles for the custom sections.
 * The Elementor page imports HTML that references these styles.
 * ===================================================================== */


/* ========================================================================
 * TOKENS — light + dark themes
 * ====================================================================== */
:root {
	/* Light palette — aligned to Pedagogy Club brand */
	--ink:       #1a2d4d;   --ink-soft:  #334766;  --ink-mute: #64708a;
	--cream:     #faf7f0;   --cream-2:   #f3ecdc;  --chalk:    #e8e2d5;
	--paper:     #ffffff;

	/* BRAND: the core three colours */
	--brand-blue:   #009CE3;   /* pedagogy.club logo blue */
	--brand-blue-d: #0079B0;
	--brand-blue-l: #d5eefb;

	--brand-purple: #7B4488;   /* footprint / mascot purple */
	--brand-purple-d: #5a2e66;
	--brand-purple-l: #ead7f0;

	--saffron:   #e8a734;   --saffron-d: #b8821e;   --saffron-l: #fbe9c2;

	/* Kept supporting hues, trimmed down */
	--teal:      #0f766e;   --teal-d:    #0b5652;   --teal-l:    #d7ebe8;
	--clay:      #c76f4e;   --clay-d:    #a8572f;   --clay-l:    #f4dfd1;
	--plum:      #5a2e66;   --plum-d:    #3f2046;   --plum-l:    #ead7f0;
	--sky:       #8dafc6;   --sky-d:     #5f8a9f;   --sky-l:     #dbe7ef;

	/* Kept for legacy mapping in some cells */
	--rose:      #c86f7a;   --rose-d:    #9d5160;   --rose-l:    #f3d9de;
	--sage:      #7a8f6a;   --sage-d:    #5a6a4d;   --sage-l:    #dbe2d0;

	/* Semantic */
	--bg:        var(--cream);
	--bg-2:      var(--cream-2);
	--surface:   var(--paper);
	--fg:        var(--ink);
	--fg-soft:   var(--ink-soft);
	--fg-mute:   var(--ink-mute);
	--line:      var(--chalk);
	--rule:      var(--ink);

	/* Type scale — bumped vs v2 */
	--display-1: clamp(3.8rem, 9.5vw, 9rem);
	--display-2: clamp(2.6rem, 5.4vw, 4.4rem);
	--h2:        clamp(2rem, 3.6vw, 3rem);
	--body:      1.0625rem;
	--small:     0.88rem;
	--tiny:      0.75rem;
	--mono:      0.78rem;

	--content: 1240px;
	--narrow:  860px;
	--gutter:  clamp(20px, 4vw, 48px);

	--serif:  'Fraunces', 'Newsreader', ui-serif, Georgia, serif;
	--italic: 'Instrument Serif', 'Fraunces', ui-serif, Georgia, serif;
	--sans:   'Public Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	--mn:     'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Dark-mode tokens. Most section backgrounds keep their identity but shift
 * to deeper, more saturated versions; text switches to cream; dark-section
 * sections (ink, plum, clay) stay roughly the same since they were already dark. */
@media (prefers-color-scheme: dark) {
	:root[data-theme="auto"] {
		--bg:      #0e1620;
		--bg-2:    #17212d;
		--surface: #1e2a38;
		--fg:      #f2ece0;
		--fg-soft: #c5c2b8;
		--fg-mute: #8d8c84;
		--line:    rgba(242,236,224,0.14);
		--rule:    rgba(242,236,224,0.2);

		--cream:     #1e2a38;
		--cream-2:   #263445;
		--chalk:     rgba(242,236,224,0.14);
		--paper:     #2a3748;
		--ink:       #f2ece0;

		--saffron-l: #4a3a12;
		--rose-l:    #3d1f28;
		--sage-l:    #2b3a25;
		--plum-l:    #3d2140;
		--sky-l:     #243a48;
		--teal-l:    #0b3733;
		--clay-l:    #4d2918;
	}
}
:root[data-theme="dark"] {
	--bg: #0e1620; --bg-2: #17212d; --surface: #1e2a38;
	--fg: #f2ece0; --fg-soft: #c5c2b8; --fg-mute: #8d8c84;
	--line: rgba(242,236,224,0.14); --rule: rgba(242,236,224,0.2);
	--cream: #1e2a38; --cream-2: #263445; --chalk: rgba(242,236,224,0.14);
	--paper: #2a3748; --ink: #f2ece0;
	--saffron-l: #4a3a12; --rose-l: #3d1f28; --sage-l: #2b3a25;
	--plum-l: #3d2140; --sky-l: #243a48; --teal-l: #0b3733; --clay-l: #4d2918;
}

/* ========================================================================
 * BASE
 * ====================================================================== */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
	margin: 0;
	font-family: var(--sans);
	font-size: var(--body);
	line-height: 1.6;
	color: var(--fg);
	background: var(--bg);
	overflow-x: hidden; /* fallback for older browsers */
	overflow-x: clip;   /* preferred — doesn't break position:sticky */
	transition: background 300ms ease, color 300ms ease;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Grain overlay */
body::before {
	content: "";
	position: fixed; inset: 0; z-index: 1000; pointer-events: none;
	opacity: 0.14;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.05  0 0 0 0 0.05  0 0 0 0.5 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* ========================================================================
 * UTILITY
 * ====================================================================== */
.wrap   { width: min(var(--content), 100% - (var(--gutter) * 2)); margin-inline: auto; position: relative; z-index: 1; }
.narrow { width: min(var(--narrow), 100% - (var(--gutter) * 2));  margin-inline: auto; position: relative; z-index: 1; }

.mono {
	font-family: var(--mn);
	font-size: var(--mono);
	font-weight: 500;
	letter-spacing: 0.02em;
}
.mono-label {
	font-family: var(--mn);
	font-size: var(--mono);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-mute);
}

.chapter {
	font-family: var(--mn);
	font-size: var(--mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	display: inline-flex; align-items: baseline; gap: 12px;
	margin-bottom: 18px;
}
.chapter::before {
	content: ""; width: 28px; height: 1px; background: currentColor;
	position: relative; top: -5px;
}

.serif-h {
	font-family: var(--serif);
	font-weight: 550;
	font-size: var(--h2);
	line-height: 1.05;
	letter-spacing: -0.022em;
	font-variation-settings: "opsz" 90, "SOFT" 50, "WONK" 1;
	margin: 0 0 0.6em;
	text-wrap: balance;
}
.serif-h em {
	font-family: var(--italic); font-style: italic; font-weight: 400;
}

/* Highlight-marker effect */
.hl {
	position: relative; display: inline-block; padding: 0 0.14em; z-index: 0;
}
.hl::before {
	content: ""; position: absolute; inset: 10% -4% 14% -4%;
	background: var(--saffron); z-index: -1;
	transform: skew(-4deg) rotate(-0.8deg);
	border-radius: 4px; opacity: 0.82;
}
.hl.rose::before { background: var(--rose); }
.hl.sage::before { background: var(--sage-l); }
.hl.clay::before { background: var(--clay-l); }
.hl.sky::before  { background: var(--sky-l); }
.hl.teal::before { background: var(--teal-l); }
.hl.plum::before { background: var(--plum-l); }

/* Buttons */
.btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 15px 26px; border-radius: 999px;
	font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
	letter-spacing: 0.01em; border: 2px solid transparent;
	cursor: pointer; text-decoration: none;
	transition: transform 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn-primary { background: var(--brand-blue); color: var(--cream); }
.btn-primary:hover { background: var(--brand-purple); transform: translateY(-2px) rotate(-0.6deg); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn-ghost:hover { background: var(--fg); color: var(--bg); transform: translateY(-2px) rotate(0.6deg); }
.btn-saffron { background: var(--saffron); color: var(--ink); border-color: var(--ink); }
.btn-saffron:hover { background: var(--ink); color: var(--saffron); transform: translateY(-2px) rotate(-0.6deg); }
.btn-purple { background: var(--brand-purple); color: var(--cream); border-color: var(--brand-purple); }
.btn-purple:hover { background: var(--brand-purple-d); transform: translateY(-2px) rotate(-0.6deg); }
.btn-whatsapp { background: #25D366; color: #fff; }
.btn-whatsapp:hover { background: #128C7E; transform: translateY(-2px) rotate(-0.6deg); }
.btn .arr { transition: transform 180ms ease; }
.btn:hover .arr { transform: translateX(4px); }

/* ========================================================================
 * NAV
 * ====================================================================== */
.nav {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--bg) 82%, transparent);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 2px solid var(--rule);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; }
.brand-logo {
	height: 44px; width: auto; display: block;
	transition: transform 220ms ease;
}
.brand:hover .brand-logo { transform: scale(1.04) rotate(-1deg); }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links > a:not(.btn) { color: var(--fg); text-decoration: none; font-size: 0.95rem; font-weight: 700; position: relative; letter-spacing: -0.005em; }
.nav-links > a:not(.btn)::after {
	content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 2px;
	background: var(--clay); transform: scaleX(0); transform-origin: left; transition: transform 220ms ease;
}
.nav-links > a:not(.btn):hover::after { transform: scaleX(1); }
.nav-links .btn { padding: 10px 20px; }

.theme-toggle {
	background: transparent; border: 1.5px solid var(--rule);
	color: var(--fg); width: 36px; height: 36px; border-radius: 50%;
	display: grid; place-items: center; cursor: pointer;
	transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
	padding: 0;
}
.theme-toggle:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: rotate(12deg); }
.theme-toggle svg { width: 16px; height: 16px; }
:root[data-theme="dark"] .theme-toggle .sun,
:root[data-theme="auto"] .theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: light) {
	:root[data-theme="auto"] .theme-toggle .moon { display: none; }
	:root[data-theme="auto"] .theme-toggle .sun { display: block; }
}

@media (max-width: 780px) {
	.nav-links { gap: 14px; }
	.nav-links a:not(.btn):not(.theme-toggle) { display: none; }
}

/* ========================================================================
 * HERO — 2-column: text left, classroom photo with floating Clubby right
 * ====================================================================== */
.hero {
	position: relative;
	padding: clamp(36px, 6vh, 80px) 0 clamp(72px, 10vh, 120px);
	/* No overflow: hidden — Clubby and ribbon intentionally bleed out.
	   Horizontal scroll is prevented by overflow-x: clip on body. */
	isolation: isolate;
}

/* Newspaper masthead strip at top */
.hero-masthead {
	display: flex;
	align-items: baseline;
	gap: clamp(22px, 3vw, 40px);
	padding-bottom: 16px;
	border-bottom: 1.5px solid var(--rule);
	font-family: var(--mn);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--fg);
	flex-wrap: wrap;
	margin-bottom: clamp(40px, 6vh, 72px);
	position: relative;
	z-index: 3;
}
.hero-masthead .item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}
.hero-masthead .item::before {
	content: "";
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--brand-blue);
	display: inline-block;
	flex-shrink: 0;
}
.hero-masthead .item.edition::before { display: none; }
.hero-masthead .edition {
	font-family: var(--italic);
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1.15rem;
	color: var(--brand-purple);
	font-weight: 400;
}

/* Two-column hero grid */
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
@media (max-width: 920px) {
	.hero-grid { grid-template-columns: 1fr; gap: 48px; }
}

.hero-text { position: relative; z-index: 2; }

/* Mega headline */
.hero-mega {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(2.8rem, 7.2vw, 6rem);
	line-height: 0.96;
	letter-spacing: -0.035em;
	color: var(--fg);
	margin: 0 0 clamp(20px, 3vh, 32px);
	font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
	text-wrap: balance;
}
.hero-mega em {
	font-family: var(--italic);
	font-style: italic;
	font-weight: 400;
	color: var(--brand-purple);
}
.hero-mega .word-slot em {
	color: var(--brand-blue);
}

/* Rotating-word slot */
.word-slot {
	display: inline-grid;
	grid-template-areas: "stack";
	vertical-align: baseline;
}
.word-slot .word {
	grid-area: stack;
	justify-self: start;
	font-family: var(--italic);
	font-style: italic;
	color: var(--brand-blue);
	opacity: 0;
	animation: word-cycle 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	white-space: nowrap;
}
.word-slot .word:nth-child(1) { animation-delay: 0s; }
.word-slot .word:nth-child(2) { animation-delay: 3s; }
.word-slot .word:nth-child(3) { animation-delay: 6s; }
.word-slot .word:nth-child(4) { animation-delay: 9s; }
@keyframes word-cycle {
	0%, 2%    { opacity: 0; transform: translateY(30%) rotate(2deg); filter: blur(6px); }
	6%, 23%   { opacity: 1; transform: translateY(0) rotate(0deg);   filter: blur(0); }
	27%, 100% { opacity: 0; transform: translateY(-30%) rotate(-1deg); filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) {
	.word-slot .word { animation: none; }
	.word-slot .word:nth-child(1) { opacity: 1; }
}

/* Definition-style sub-head — the Clubby gag */
.hero-def {
	font-family: var(--italic);
	font-style: italic;
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	color: var(--fg-soft);
	margin: 0 0 28px;
	padding-left: 20px;
	border-left: 3px solid var(--brand-purple);
	line-height: 1.45;
	max-width: 44ch;
}
.hero-def strong {
	font-family: var(--serif);
	font-style: normal;
	font-weight: 600;
	color: var(--brand-purple);
	font-variation-settings: "opsz" 60;
}
.hero-def .phon {
	font-family: var(--mn);
	font-style: normal;
	font-size: 0.85em;
	color: var(--fg-mute);
	margin: 0 4px;
}

.hero-sub {
	font-size: clamp(1.02rem, 1.4vw, 1.18rem);
	line-height: 1.6;
	color: var(--fg-soft);
	max-width: 52ch;
	margin: 0 0 32px;
}
.hero-sub em { font-family: var(--italic); font-style: italic; color: var(--brand-purple); }
.hero-sub strong { color: var(--fg); font-weight: 700; }

.hero-ctas {
	display: flex; flex-wrap: wrap; gap: 14px;
	margin-bottom: 32px;
}

/* Compact meta row under CTAs */
.hero-meta {
	display: flex; gap: clamp(18px, 3vw, 40px); flex-wrap: wrap;
	padding-top: 24px;
	border-top: 1.5px dashed var(--chalk);
	font-family: var(--mn);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--fg-mute);
}
.hero-meta .meta-item { display: flex; flex-direction: column; gap: 2px; }
.hero-meta .meta-label {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.68rem;
	color: var(--brand-purple);
	font-weight: 700;
}
.hero-meta .meta-value { color: var(--fg); font-weight: 600; font-size: 0.92rem; }

/* Right column — photo + floating Clubby */
.hero-visual {
	position: relative;
}
.hero-photo-frame {
	background: var(--paper);
	border: 2px solid var(--ink);
	border-radius: 8px;
	padding: 14px 14px 12px;
	box-shadow: 14px 14px 0 0 var(--brand-blue);
	transform: rotate(-1.4deg);
	position: relative;
	transition: transform 300ms ease;
}
.hero-photo-frame:hover { transform: rotate(-0.6deg) translateY(-4px); }
.hero-photo-frame img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}
.hero-photo-caption {
	display: flex; justify-content: space-between; align-items: baseline;
	margin-top: 10px; padding: 0 4px;
	font-family: var(--mn); font-size: 0.72rem; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--fg-mute);
}
.hero-photo-caption strong { color: var(--brand-purple); font-weight: 700; }
.hero-photo-caption em {
	font-family: var(--italic); font-style: italic;
	text-transform: none; letter-spacing: 0;
	color: var(--brand-blue); font-size: 0.92rem;
}

/* The families ribbon — hangs off the top-right corner, outside the photo frame */
.hero-ribbon {
	position: absolute;
	top: -22px;
	right: -24px;
	z-index: 4;
	background: var(--saffron);
	color: var(--ink);
	border: 2px solid var(--ink);
	padding: 12px 20px 14px;
	border-radius: 6px;
	box-shadow: 4px 4px 0 0 var(--ink);
	transform: rotate(6deg);
	text-align: center;
	font-family: var(--serif);
	line-height: 1;
}
.hero-ribbon .num {
	font-size: 1.7rem; font-weight: 700; display: block;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.02em;
}
.hero-ribbon .lbl {
	font-family: var(--mn); font-size: 0.62rem; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	margin-top: 4px; display: block; color: var(--ink);
}

/* Clubby floating at the bottom-right of the photo, with a speech bubble */
.hero-clubby {
	position: absolute;
	bottom: -8px;           /* new Clubby's feet sit at image edge — don't clip */
	right: -32px;
	z-index: 5;
	width: clamp(150px, 17vw, 210px);
	animation: clubby-bob 4s ease-in-out infinite;
	pointer-events: none;
}
.hero-clubby img {
	width: 100%;
	height: auto;
	display: block;
}
@keyframes clubby-bob {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-6px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) { .hero-clubby { animation: none; } }

/* Speech bubble anchored to Clubby */
.hero-bubble {
	position: absolute;
	right: clamp(110px, 16vw, 180px);
	bottom: clamp(-16px, 0vh, 12px);
	z-index: 6;
	background: var(--brand-blue-l);
	color: var(--ink);
	border: 2px solid var(--ink);
	border-radius: 16px;
	padding: 10px 16px;
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(0.85rem, 1.1vw, 1rem);
	line-height: 1.3;
	max-width: 200px;
	transform: rotate(-3deg);
	box-shadow: 4px 4px 0 0 var(--ink);
}
.hero-bubble::after {
	content: "";
	position: absolute; right: -12px; bottom: 18px;
	width: 0; height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 14px solid var(--brand-blue-l);
	filter: drop-shadow(2px 0 0 var(--ink));
}
.hero-bubble em { font-family: var(--italic); font-style: italic; color: var(--brand-purple); }

@media (max-width: 920px) {
	.hero-clubby { bottom: -4px; right: -8px; width: clamp(140px, 20vw, 180px); }
	.hero-bubble { right: 120px; bottom: 8px; max-width: 170px; }
	.hero-ribbon { top: -14px; right: -14px; padding: 8px 14px 10px; }
	.hero-ribbon .num { font-size: 1.3rem; }
}
@media (max-width: 560px) {
	.hero-bubble { display: none; }
	.hero-clubby { width: 130px; right: 4px; bottom: -4px; }
}


/* ========================================================================
 * MARQUEE — grammar school names
 * ====================================================================== */
.marquee {
	background: var(--brand-purple);
	color: var(--saffron);
	padding: 18px 0;
	overflow: hidden;
	position: relative;
	border-top: 3px solid var(--ink);
	border-bottom: 3px solid var(--ink);
}
.marquee::before, .marquee::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(to right, var(--brand-purple), transparent); }
.marquee::after  { right: 0; background: linear-gradient(to left, var(--brand-purple), transparent); }
.marquee-track {
	display: flex; gap: 48px; align-items: center;
	animation: scroll 45s linear infinite;
	width: max-content;
}
.marquee-track .item {
	font-family: var(--serif); font-weight: 450; font-size: 1.6rem;
	letter-spacing: -0.01em;
	white-space: nowrap;
	font-variation-settings: "opsz" 80;
}
.marquee-track .item em { font-family: var(--italic); font-style: italic; color: var(--cream); opacity: 0.4; font-size: 0.85em; }
.marquee-track .item .sep {
	display: inline-block; width: 7px; height: 7px; border-radius: 50%;
	background: var(--clay); margin: 0 8px; vertical-align: middle;
}
@keyframes scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.marquee-track { animation: none; }
}

/* ========================================================================
 * STATS — with radial chart
 * ====================================================================== */
.stats {
	background: var(--saffron);
	color: var(--ink);
	padding: 56px 0;
	position: relative; overflow: hidden;
}
.stats::before {
	content: ""; position: absolute; inset: 0;
	background: repeating-linear-gradient(45deg, transparent 0 22px, rgba(10,31,58,0.05) 22px 24px);
	pointer-events: none;
}
.stats-grid {
	display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr;
	gap: clamp(24px, 3vw, 40px);
	align-items: center;
}
@media (max-width: 820px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .stats-grid { grid-template-columns: 1fr; gap: 24px; } }

.stat-donut {
	display: flex; align-items: center; gap: 20px;
	grid-column: auto;
}
.stat-donut svg { width: 120px; height: 120px; flex-shrink: 0; }
.stat-donut .donut-track  { fill: none; stroke: rgba(10,31,58,0.18); stroke-width: 10; }
.stat-donut .donut-fill {
	fill: none; stroke: var(--ink); stroke-width: 10; stroke-linecap: round;
	stroke-dasharray: 283; stroke-dashoffset: 283;
	animation: donut 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards;
	transform: rotate(-90deg); transform-origin: center;
}
@keyframes donut {
	to { stroke-dashoffset: 57; } /* 80% of 283 = 226 filled, 57 remaining */
}
.stat-donut .big { font-family: var(--serif); font-size: 2rem; font-weight: 500; color: var(--ink); line-height: 1; font-variation-settings: "opsz" 144; margin-bottom: 6px; font-variant-numeric: oldstyle-nums; }
.stat-donut .lbl { font-size: 0.88rem; color: var(--ink); font-weight: 500; max-width: 22ch; }
.stat-donut .lbl em { font-family: var(--italic); font-style: italic; color: var(--plum-d); }

.stat .k {
	font-family: var(--serif); font-weight: 500;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	line-height: 0.9; color: var(--ink);
	letter-spacing: -0.025em; margin-bottom: 10px;
	font-variation-settings: "opsz" 144, "SOFT" 30;
	font-variant-numeric: oldstyle-nums;
}
.stat .k sup { font-size: 0.5em; color: var(--clay-d); vertical-align: super; margin-left: 3px; font-family: var(--sans); font-weight: 700; }
.stat .k em { font-family: var(--italic); font-style: italic; color: var(--clay-d); font-size: 0.6em; }
.stat .l { font-size: 0.88rem; color: var(--ink); line-height: 1.4; font-weight: 500; }
.stat .l em { font-family: var(--italic); font-style: italic; color: var(--plum-d); }

/* ========================================================================
 * SECTION BASE
 * ====================================================================== */
section { padding: clamp(72px, 11vh, 130px) 0; position: relative; overflow: hidden; }
.section-head { margin-bottom: clamp(40px, 5vh, 64px); max-width: 780px; position: relative; }
.section-head .serif-h { margin-bottom: 18px; }
.section-head p {
	color: var(--fg-soft); font-size: 1.1rem; line-height: 1.6;
	max-width: 62ch; margin: 0;
}

.ghost-numeral {
	position: absolute;
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(14rem, 30vw, 26rem);
	line-height: 0.7; letter-spacing: -0.05em;
	color: currentColor; opacity: 0.06;
	font-variation-settings: "opsz" 144;
	pointer-events: none; z-index: 0;
	font-variant-numeric: oldstyle-nums;
}

/* ========================================================================
 * BENTO — "What you get" — the new section
 * ====================================================================== */
.bento {
	background: var(--bg);
	border-top: 3px solid var(--ink);
	border-bottom: 3px solid var(--ink);
	padding: clamp(64px, 10vh, 120px) 0;
}
.bento .chapter { color: var(--teal-d); }
.bento-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, minmax(170px, auto));
	grid-template-areas:
		"hero hero tall small"
		"hero hero tall teal"
		"wide wide mono mono";
	gap: 16px;
}
@media (max-width: 900px) {
	.bento-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
		grid-template-areas: none;
	}
	.bento-cell { grid-area: auto; }
	.bento-cell.hero-c, .bento-cell.wide, .bento-cell.mono-cell { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	.bento-grid { grid-template-columns: 1fr; }
	.bento-cell { grid-column: 1; }
}

.bento-cell {
	background: var(--surface);
	border: 2px solid var(--ink);
	border-radius: 6px;
	padding: 28px;
	display: flex; flex-direction: column; justify-content: space-between;
	position: relative; overflow: hidden;
	transition: transform 220ms ease, box-shadow 220ms ease;
}
.bento-cell:hover { transform: translateY(-3px); }

.bento-cell h3 {
	font-family: var(--serif); font-weight: 600;
	font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.15;
	letter-spacing: -0.01em; margin: 0 0 12px;
	font-variation-settings: "opsz" 90, "SOFT" 50;
}
.bento-cell h3 em { font-family: var(--italic); font-style: italic; color: var(--clay-d); }
.bento-cell p { margin: 0; color: var(--fg-soft); font-size: 0.98rem; line-height: 1.55; }
.bento-cell .tag {
	font-family: var(--mn); font-size: 0.72rem; font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px;
}

/* Cell sizes + colours — bento layout */
.bento-cell.hero-c   { grid-area: hero; background: var(--saffron); color: var(--ink); border-color: var(--ink); box-shadow: 10px 10px 0 0 var(--ink); }
.bento-cell.hero-c h3 { font-size: clamp(2rem, 3vw, 2.6rem); }
.bento-cell.hero-c .tag { color: var(--clay-d); }

.bento-cell.tall     { grid-area: tall; background: var(--plum); color: var(--cream); border-color: var(--ink); }
.bento-cell.tall h3 { color: var(--cream); }
.bento-cell.tall h3 em { color: var(--saffron); }
.bento-cell.tall p { color: rgba(250,247,240,0.8); }
.bento-cell.tall .tag { color: var(--saffron); }

.bento-cell.wide     { grid-area: wide; background: var(--sage); color: var(--cream); border-color: var(--ink); }
.bento-cell.wide h3 { color: var(--cream); }
.bento-cell.wide h3 em { color: var(--saffron-l); }
.bento-cell.wide p { color: rgba(250,247,240,0.82); }
.bento-cell.wide .tag { color: var(--saffron-l); }

.bento-cell.small    { grid-area: small; background: var(--rose-l); color: var(--ink); border-color: var(--ink); }
.bento-cell.small .tag { color: var(--rose-d); }

.bento-cell.teal-cell { grid-area: teal; background: var(--teal); color: var(--cream); border-color: var(--ink); }
.bento-cell.teal-cell h3 { color: var(--cream); font-size: 1.2rem; }
.bento-cell.teal-cell p { color: rgba(250,247,240,0.82); font-size: 0.9rem; }
.bento-cell.teal-cell .tag { color: var(--saffron); }

.bento-cell.mono-cell {
	grid-area: mono; background: var(--ink); color: var(--cream); border-color: var(--ink);
	flex-direction: row; align-items: center; gap: 28px; justify-content: flex-start;
}
.bento-cell.mono-cell .mono-inner { flex: 1; }
.bento-cell.mono-cell h3 { color: var(--cream); font-family: var(--mn); font-size: 1.05rem; letter-spacing: -0.01em; font-weight: 500; margin-bottom: 6px; }
.bento-cell.mono-cell h3 em { color: var(--saffron); font-family: var(--italic); }
.bento-cell.mono-cell p { color: rgba(250,247,240,0.82); font-size: 0.95rem; margin: 0; }
.bento-cell.mono-cell .tag { color: var(--saffron); margin-bottom: 10px; }
.bento-cell.mono-cell .big-digit {
	font-family: var(--serif); font-size: clamp(4rem, 10vw, 7.5rem); font-weight: 500; line-height: 0.85; color: var(--saffron);
	font-variation-settings: "opsz" 144; font-variant-numeric: oldstyle-nums; flex-shrink: 0;
}

/* Bento cell deco on hover */
.bento-cell .deco {
	position: absolute; right: -12px; bottom: -12px; font-family: var(--serif);
	font-size: 8rem; line-height: 0.7; font-weight: 400; opacity: 0.08;
	pointer-events: none; letter-spacing: -0.05em;
	font-variation-settings: "opsz" 144;
}

/* ========================================================================
 * HOW IT WORKS — sage section
 * ====================================================================== */
.how {
	background: var(--sage-l);
	color: var(--fg);
}
.how .ghost-numeral { top: -20px; right: -30px; color: var(--sage-d); }
.how .chapter { color: var(--sage-d); }

.steps {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 3vw, 40px);
	counter-reset: step;
}
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step {
	counter-increment: step;
	padding: 40px 28px 32px;
	background: var(--surface);
	border: 2px solid var(--ink);
	border-radius: 4px;
	box-shadow: 8px 8px 0 0 var(--sage-d);
	position: relative;
	transition: transform 220ms ease, box-shadow 220ms ease;
	text-align: center;
}
.step:hover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 0 var(--clay); }
.step:nth-child(1) { transform: rotate(-0.8deg); }
.step:nth-child(2) { transform: rotate(0.5deg); }
.step:nth-child(3) { transform: rotate(-0.3deg); }
.step::before {
	content: counter(step, upper-roman);
	position: absolute; top: -14px; left: -14px;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--ink); color: var(--saffron);
	display: grid; place-items: center;
	font-family: var(--serif); font-size: 0.95rem; font-weight: 600;
}
.step h3 {
	font-family: var(--serif); font-size: 1.55rem; font-weight: 500; letter-spacing: -0.01em;
	margin: 0 0 14px; color: var(--fg); line-height: 1.2;
	font-variation-settings: "opsz" 100;
}
/* Subtitle inside step h3 — "Every week" / "Separate day" / "Every six weeks".
   Displays on its own line beneath the main noun, in a smaller italic. */
.step h3 .sub {
	display: block;
	font-family: var(--italic);
	font-style: italic;
	font-weight: 400;
	font-size: 0.85rem;
	color: var(--clay-d);
	letter-spacing: 0;
	margin-top: 2px;
	line-height: 1.2;
}
.step h3 .sub em { font-style: italic; }
.step p { color: var(--fg-soft); line-height: 1.6; margin: 0; font-size: 1rem; text-align: left; }
.step p em { font-family: var(--italic); font-style: italic; color: var(--clay-d); }

/* Character avatar at the top of each step card */
.step-character {
	width: 100px; height: 100px;
	margin: 0 auto 12px;
	display: grid; place-items: center;
	background: var(--brand-blue-l);
	border: 2px solid var(--ink);
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	transition: transform 300ms ease;
}
.step:hover .step-character { transform: scale(1.05) rotate(-3deg); }
.step-character img { width: 90%; height: 90%; object-fit: contain; }
.step-character::before {
	content: ""; position: absolute; inset: -6px; border-radius: 50%;
	border: 1.5px dashed var(--brand-purple); opacity: 0.5;
}

/* ========================================================================
 * SCHEDULE — navy
 * ====================================================================== */
.schedule-preview { background: var(--ink); color: var(--cream); }
.schedule-preview::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: linear-gradient(90deg, var(--clay), var(--saffron), var(--rose), var(--teal));
}
.schedule-preview .ghost-numeral { top: 20px; right: -30px; color: var(--saffron); }
.schedule-preview .chapter { color: var(--saffron); }
.schedule-preview .serif-h { color: var(--cream); }
.schedule-preview .serif-h em { color: var(--saffron); }
.schedule-preview .section-head p { color: rgba(250,247,240,0.72); }
.schedule-preview .hl::before { opacity: 0.35; }

.schedule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .schedule-grid { grid-template-columns: 1fr; } }
.class-card {
	background: rgba(250,247,240,0.04);
	border: 2px solid rgba(250,247,240,0.14);
	border-radius: 6px;
	padding: 24px; position: relative;
	transition: background 220ms ease, transform 220ms ease;
}
.class-card:nth-child(1) { border-left: 4px solid var(--saffron); }
.class-card:nth-child(2) { border-left: 4px solid var(--rose); }
.class-card:nth-child(3) { border-left: 4px solid var(--clay); }
.class-card:nth-child(4) { border-left: 4px solid var(--teal); }
.class-card:nth-child(5) { border-left: 4px solid var(--sage); }
.class-card:nth-child(6) { border-left: 4px solid var(--sky); }
.class-card:hover { background: rgba(250,247,240,0.08); transform: translateY(-3px); }
.class-card .day {
	font-family: var(--mn); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
	font-weight: 600; color: var(--saffron); margin-bottom: 6px;
}
.class-card:nth-child(2) .day { color: var(--rose-l); }
.class-card:nth-child(3) .day { color: var(--clay-l); }
.class-card:nth-child(4) .day { color: var(--teal-l); }
.class-card:nth-child(5) .day { color: var(--sage-l); }
.class-card:nth-child(6) .day { color: var(--sky-l); }
.class-card .t {
	font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: var(--cream);
	letter-spacing: -0.01em; margin: 0 0 8px; line-height: 1.2;
	font-variation-settings: "opsz" 100;
}
.class-card .meta { font-size: 0.88rem; color: rgba(250,247,240,0.65); margin-bottom: 18px; font-family: var(--mn); }
.class-card .meta strong { color: var(--cream); font-weight: 500; }

.availability {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 5px 12px; border-radius: 999px;
	font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em;
	text-transform: uppercase; font-family: var(--mn);
}
.availability.ok   { background: rgba(122,143,106,0.22); color: #b7d1a1; }
.availability.low  { background: rgba(232,167,52,0.22); color: #fbd784; }
.availability.full { background: rgba(200,111,122,0.22); color: #f0aeb7; }
.availability .pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.availability.ok .pulse { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.7); } }

/* Action row — availability pill + Register button, side-by-side with
   graceful wrapping on narrow cards. */
.class-card-action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin-top: 2px;
}

/* Register / Join-waiting-list button on each schedule card.
   Uses each card's accent colour (saffron/rose/clay/teal/sage/sky)
   via :nth-child rules below so the button feels part of the card
   rather than a generic CTA. */
.class-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 16px;
	background: transparent;
	color: var(--cream);
	border: 1.5px solid rgba(250, 247, 240, 0.3);
	border-radius: 4px;
	text-decoration: none;
	font-family: var(--mn);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.class-cta:hover,
.class-cta:focus-visible {
	background: var(--cream);
	color: var(--ink);
	border-color: var(--cream);
	outline: none;
}
.class-cta span {
	display: inline-block;
	font-size: 0.92rem;
	line-height: 1;
	transition: transform 180ms ease;
}
.class-cta:hover span,
.class-cta:focus-visible span {
	transform: translateX(3px);
}

/* Each card has a different accent colour — echo that on the button border
   so the row reads as a unified whole. Hover fills with the accent colour. */
.class-card:nth-child(1) .class-cta { border-color: rgba(232, 167, 52, 0.55); color: var(--saffron); }
.class-card:nth-child(1) .class-cta:hover,
.class-card:nth-child(1) .class-cta:focus-visible { background: var(--saffron); color: var(--ink); border-color: var(--saffron); }

.class-card:nth-child(2) .class-cta { border-color: rgba(200, 111, 122, 0.55); color: var(--rose-l); }
.class-card:nth-child(2) .class-cta:hover,
.class-card:nth-child(2) .class-cta:focus-visible { background: var(--rose-l); color: var(--ink); border-color: var(--rose-l); }

.class-card:nth-child(3) .class-cta { border-color: rgba(199, 111, 78, 0.55); color: var(--clay-l); }
.class-card:nth-child(3) .class-cta:hover,
.class-card:nth-child(3) .class-cta:focus-visible { background: var(--clay-l); color: var(--ink); border-color: var(--clay-l); }

.class-card:nth-child(4) .class-cta { border-color: rgba(70, 137, 129, 0.6); color: var(--teal-l); }
.class-card:nth-child(4) .class-cta:hover,
.class-card:nth-child(4) .class-cta:focus-visible { background: var(--teal-l); color: var(--ink); border-color: var(--teal-l); }

.class-card:nth-child(5) .class-cta { border-color: rgba(122, 143, 106, 0.6); color: var(--sage-l); }
.class-card:nth-child(5) .class-cta:hover,
.class-card:nth-child(5) .class-cta:focus-visible { background: var(--sage-l); color: var(--ink); border-color: var(--sage-l); }

.class-card:nth-child(6) .class-cta { border-color: rgba(0, 156, 227, 0.55); color: var(--sky-l); }
.class-card:nth-child(6) .class-cta:hover,
.class-card:nth-child(6) .class-cta:focus-visible { background: var(--sky-l); color: var(--ink); border-color: var(--sky-l); }

@media (prefers-reduced-motion: reduce) {
	.class-cta, .class-cta span { transition: none; }
	.class-cta:hover span, .class-cta:focus-visible span { transform: none; }
}

.schedule-foot {
	margin-top: 40px; display: flex; justify-content: space-between; align-items: center;
	gap: 20px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid rgba(250,247,240,0.14);
}
.schedule-foot .note { color: rgba(250,247,240,0.62); font-size: 0.94rem; margin: 0; max-width: 56ch; }
.schedule-foot .note em { font-family: var(--italic); font-style: italic; color: var(--saffron); }

/* ========================================================================
 * ENROL — dusty rose
 * ====================================================================== */
.enrol { background: var(--rose-l); color: var(--fg); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.enrol .ghost-numeral { top: -10px; left: -20px; color: var(--rose-d); }
.enrol .chapter { color: var(--rose-d); }
.enrol-frame {
	background: var(--surface);
	border: 2px solid var(--ink);
	border-radius: 6px;
	padding: clamp(32px, 5vw, 56px);
	position: relative;
	box-shadow: 14px 14px 0 0 var(--rose-d);
}
.enrol-frame::before {
	content: ""; position: absolute; top: -2px; left: 40px; width: 120px; height: 6px;
	background: var(--clay);
}

/* Policy callout — "No entry test. Just register." */
.enrol-policy {
	background: var(--saffron-l);
	border: 2px solid var(--ink);
	border-radius: 6px;
	padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 48px) clamp(26px, 4vw, 36px);
	margin-bottom: clamp(28px, 4vh, 44px);
	position: relative;
	box-shadow: 10px 10px 0 0 var(--brand-purple);
	color: var(--ink);
	transform: rotate(-0.4deg);
	transition: transform 320ms ease, box-shadow 320ms ease;
}
.enrol-policy:hover {
	transform: rotate(0deg) translate(-2px, -2px);
	box-shadow: 12px 12px 0 0 var(--brand-purple);
}
.enrol-policy-flag {
	position: absolute;
	top: -14px;
	left: clamp(20px, 4vw, 36px);
	background: var(--ink);
	color: var(--saffron);
	font-family: var(--mn);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 3px;
	transform: rotate(-2deg);
}
.enrol-policy-title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0 0 14px;
	font-variation-settings: "opsz" 100, "SOFT" 50;
	text-wrap: balance;
}
.enrol-policy-title em {
	font-family: var(--italic);
	font-style: italic;
	font-weight: 400;
	color: var(--brand-purple);
}
.enrol-policy-body {
	font-size: clamp(1rem, 1.4vw, 1.12rem);
	line-height: 1.55;
	color: var(--ink);
	margin: 0;
	max-width: 62ch;
}
.enrol-policy-body em {
	font-family: var(--italic);
	font-style: italic;
	color: var(--brand-purple);
	font-size: 1.05em;
}
@media (prefers-reduced-motion: reduce) {
	.enrol-policy { transform: none; }
	.enrol-policy:hover { transform: translate(-2px, -2px); }
}
.enrol-lede {
	font-family: var(--italic); font-style: italic; font-size: 1.4rem; color: var(--fg-soft);
	max-width: 58ch; margin: 0 0 32px; line-height: 1.45;
}
/* Registration placeholder — designed slot for the [pedagogy_enrolment] shortcode */
.enrol-placeholder {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 28px 30px;
	background: var(--rose-l);
	border: 2px dashed var(--rose-d);
	border-radius: 8px;
	color: var(--fg-soft);
	position: relative;
}
.enrol-placeholder::before {
	content: "Plugin slot";
	position: absolute;
	top: -11px;
	left: 24px;
	font-family: var(--mn);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: var(--bg);
	color: var(--rose-d);
	padding: 2px 10px;
	border: 1.5px dashed var(--rose-d);
	border-radius: 3px;
}
.enrol-placeholder-icon {
	width: 40px; height: 40px;
	flex-shrink: 0;
	display: grid; place-items: center;
	color: var(--rose-d);
	background: var(--bg);
	border: 1.5px solid var(--rose-d);
	border-radius: 50%;
}
.enrol-placeholder-icon svg { width: 22px; height: 22px; }
.enrol-placeholder-text {
	flex: 1;
	font-size: 0.95rem;
	line-height: 1.55;
}
.enrol-placeholder-text strong {
	display: block;
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--fg);
	margin-bottom: 4px;
	font-variation-settings: "opsz" 60;
}
.enrol-placeholder code {
	display: inline-block;
	background: var(--ink); color: var(--saffron);
	padding: 2px 9px;
	border-radius: 3px;
	font-family: var(--mn); font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
@media (max-width: 640px) {
	.enrol-placeholder { flex-direction: column; gap: 14px; padding: 24px 20px 20px; }
	.enrol-placeholder::before { left: 14px; }
}

/* ========================================================================
 * ABOUT — plum
 * ====================================================================== */
.about { background: var(--plum); color: var(--cream); border-top: 3px solid var(--ink); }
.about .ghost-numeral { bottom: -40px; left: -30px; color: var(--saffron); opacity: 0.09; }
.about .chapter { color: var(--saffron); }
.about .serif-h { color: var(--cream); }
.about .serif-h em { color: var(--saffron); }
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 920px) { .about-grid { grid-template-columns: 1fr; } }
.about-prose { font-size: 1.15rem; line-height: 1.7; color: rgba(250,247,240,0.92); }
.about-prose p { margin: 0 0 1.1em; max-width: 52ch; }
.about-prose p:first-of-type::first-letter {
	font-family: var(--serif); font-weight: 500; font-size: 4.6em; line-height: 0.82;
	float: left; margin: 0.05em 0.14em 0 -0.04em; color: var(--saffron);
	font-variation-settings: "opsz" 144;
}
.about-prose em { font-family: var(--italic); font-style: italic; color: var(--cream); }
/* Teachers — 2x2 typography grid; subject-coloured underlines */
.teachers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
@media (max-width: 520px) {
	.teachers { grid-template-columns: 1fr; }
}
.teacher {
	position: relative;
	padding: 22px 22px 20px;
	background: rgba(250,247,240,0.04);
	border: 1px solid rgba(250,247,240,0.14);
	border-radius: 6px;
	transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
	overflow: hidden;
}
.teacher::before {
	/* Coloured bar running down the left edge — subject identity */
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--saffron);
	opacity: 0;
	transition: opacity 220ms ease;
}
.teacher[data-subject="english"]::before { background: var(--saffron); }
.teacher[data-subject="maths"]::before   { background: var(--sky); }
.teacher:hover {
	background: rgba(250,247,240,0.09);
	border-color: rgba(250,247,240,0.3);
	transform: translateY(-2px);
}
.teacher:hover::before { opacity: 1; }

.teacher .t-name {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.18rem;
	color: var(--cream);
	margin: 0;
	font-variation-settings: "opsz" 60, "SOFT" 50;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.teacher .t-underline {
	display: block;
	margin: 8px 0 12px;
	height: 3px;
	width: 32px;
	border-radius: 2px;
	transition: width 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.teacher[data-subject="english"] .t-underline { background: var(--saffron); }
.teacher[data-subject="maths"]   .t-underline { background: var(--sky); }
.teacher:hover .t-underline { width: 56px; }

.teacher .t-subject {
	font-family: var(--italic);
	font-style: italic;
	font-size: 1.02rem;
	margin-bottom: 4px;
	line-height: 1.25;
}
.teacher[data-subject="english"] .t-subject { color: var(--saffron); }
.teacher[data-subject="maths"]   .t-subject { color: var(--sky); }

.teacher .t-days {
	font-family: var(--mn);
	font-size: 0.74rem;
	color: rgba(250,247,240,0.55);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
}

.teacher .t-badge {
	position: absolute;
	top: 14px;
	right: 16px;
	font-family: var(--mn);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--saffron);
	padding: 3px 8px;
	border: 1px solid rgba(232,167,52,0.4);
	border-radius: 3px;
	background: rgba(232,167,52,0.08);
}

/* Small teaching-team header above the grid */
.teachers-head {
	font-family: var(--mn);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--saffron);
	margin-bottom: 14px;
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.teachers-head::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(250,247,240,0.18);
}
.teachers-head .count {
	color: rgba(250,247,240,0.55);
	font-family: var(--italic);
	font-style: italic;
	font-size: 0.82rem;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
}

/* ========================================================================
 * VOICES
 * ====================================================================== */
.voices { background: var(--bg); color: var(--fg); }
.voices .chapter { color: var(--sky-d); }
.voice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 5vw, 56px); }
@media (max-width: 820px) { .voice-grid { grid-template-columns: 1fr; } }
.voice { position: relative; padding: 36px 0 36px 68px; border-top: 2px solid var(--rule); }
.voice::before {
	content: "\201C";
	position: absolute; top: 18px; left: 0;
	font-family: var(--serif); font-weight: 400; font-size: 6rem; line-height: 1;
	font-variation-settings: "opsz" 144;
}
.voice:nth-child(1)::before { color: var(--clay); }
.voice:nth-child(2)::before { color: var(--saffron-d); }
.voice:nth-child(3)::before { color: var(--rose-d); }
.voice:nth-child(4)::before { color: var(--sage-d); }
.voice q {
	font-family: var(--serif); font-weight: 500; font-size: 1.45rem; line-height: 1.4;
	color: var(--fg); quotes: none; letter-spacing: -0.005em;
	display: block; margin-bottom: 22px;
	font-variation-settings: "opsz" 100, "SOFT" 50;
}
.voice q::before, .voice q::after { content: none; }
.voice .attr { font-family: var(--mn); font-size: 0.85rem; color: var(--fg-mute); letter-spacing: 0.02em; }
.voice .attr strong { color: var(--fg); font-weight: 600; }
.voice .attr em { font-family: var(--italic); font-style: italic; color: var(--clay-d); }

/* Founder quote — dedicated centered treatment */
.founder-quote .section-head { margin-bottom: clamp(36px, 5vh, 56px); }
.fq {
	margin: 0;
	padding: clamp(40px, 5vw, 56px) clamp(28px, 5vw, 64px) clamp(32px, 4vw, 44px);
	background: var(--surface);
	border: 2px solid var(--ink);
	border-radius: 10px;
	box-shadow: 14px 14px 0 0 var(--brand-purple);
	position: relative;
	text-align: center;
}
.fq-mark {
	position: absolute;
	top: -18px; left: clamp(24px, 5vw, 48px);
	font-family: var(--serif);
	font-weight: 500;
	font-size: 6rem;
	line-height: 0.6;
	color: var(--brand-purple);
	font-variation-settings: "opsz" 144;
	background: var(--bg);
	padding: 0 14px;
	user-select: none;
}
.fq-body {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(1.2rem, 1.8vw, 1.55rem);
	line-height: 1.45;
	color: var(--fg);
	letter-spacing: -0.005em;
	margin: 0 auto clamp(32px, 4vh, 48px);
	max-width: 60ch;
	font-variation-settings: "opsz" 100, "SOFT" 50;
	text-wrap: pretty;
}
.fq-body em {
	font-family: var(--italic);
	font-style: italic;
	font-weight: 400;
	color: var(--brand-purple);
}
.fq-attr {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding-top: 22px;
	border-top: 1.5px dashed var(--chalk);
}
.fq-avatar {
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--brand-purple); color: var(--cream);
	display: grid; place-items: center;
	font-family: var(--serif); font-weight: 700; font-size: 1rem;
	border: 2px solid var(--ink);
	flex-shrink: 0;
}
.fq-who { text-align: left; }
.fq-name {
	font-family: var(--serif); font-weight: 600; font-size: 1.05rem;
	letter-spacing: -0.005em; color: var(--fg); line-height: 1.1;
	font-variation-settings: "opsz" 60;
}
.fq-role {
	font-family: var(--mn); font-size: 0.78rem;
	color: var(--fg-mute); margin-top: 4px;
}
.fq-role em { font-family: var(--italic); font-style: italic; color: var(--brand-purple); }

/* ========================================================================
 * LOCATION
 * ====================================================================== */
.location { background: var(--ink); color: var(--cream); border-top: 3px solid var(--ink); }
.location::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: linear-gradient(90deg, var(--teal), var(--sky), var(--sage));
}
.location .ghost-numeral { top: 20px; left: -30px; color: var(--clay); opacity: 0.08; }
.location .chapter { color: var(--clay); }
.location .serif-h { color: var(--cream); }
.location .serif-h em { color: var(--clay); }
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 820px) { .loc-grid { grid-template-columns: 1fr; } }

/* Classroom photo header at the top of the Location section */
.loc-photo-header {
	margin: 0;
	position: relative;
	border: 2px solid var(--saffron);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 14px 14px 0 0 var(--brand-blue);
}
.loc-photo-header img {
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	object-position: center 60%;
	display: block;
}
.loc-photo-header figcaption {
	position: absolute;
	bottom: 14px; left: 14px;
	background: var(--ink);
	color: var(--cream);
	padding: 8px 14px;
	border-radius: 4px;
	font-family: var(--mn);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	border: 1.5px solid var(--saffron);
}
.loc-photo-header figcaption strong {
	color: var(--saffron);
	font-weight: 600;
	margin-right: 8px;
}
.loc-photo-header figcaption em {
	font-family: var(--italic); font-style: italic;
	color: var(--cream); font-size: 0.92rem;
}
@media (max-width: 820px) {
	.loc-photo-header img { aspect-ratio: 16 / 9; }
	.loc-photo-header figcaption { font-size: 0.72rem; padding: 6px 10px; bottom: 10px; left: 10px; }
}
.loc-details { font-size: 1.08rem; line-height: 1.7; }
.loc-details p { margin: 0 0 1em; color: rgba(250,247,240,0.88); max-width: 48ch; }
.loc-details p em { font-family: var(--italic); font-style: italic; color: var(--clay); }
.loc-list { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid rgba(250,247,240,0.18); }
.loc-list li {
	display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 16px 0;
	border-bottom: 1px solid rgba(250,247,240,0.18); font-size: 0.96rem;
}
.loc-list dt { font-family: var(--mn); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--clay); align-self: center; }
.loc-list dd { margin: 0; color: var(--cream); font-weight: 500; align-self: center; }
.loc-map {
	background: var(--cream); border: 3px solid var(--saffron);
	border-radius: 8px; padding: 28px; aspect-ratio: 4 / 3;
	display: grid; place-items: center; position: relative; overflow: hidden;
	box-shadow: 14px 14px 0 0 var(--clay);
}
.loc-map svg { width: 100%; height: 100%; }

/* ========================================================================
 * FAQ — saffron
 * ====================================================================== */
.faq { background: var(--saffron-l); color: var(--fg); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.faq::before {
	content: ""; position: absolute; inset: 0;
	background: repeating-linear-gradient(-45deg, transparent 0 32px, rgba(10,31,58,0.04) 32px 34px);
	pointer-events: none;
}
.faq .ghost-numeral { bottom: -30px; right: -10px; color: var(--saffron-d); opacity: 0.13; }
.faq .chapter { color: var(--saffron-d); }
.faq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 920px) { .faq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-card {
	background: var(--surface); border: 2px solid var(--ink); border-radius: 6px;
	padding: 24px;
	display: grid; grid-template-columns: 80px 1fr; gap: 18px; align-items: start;
	transition: transform 220ms ease, box-shadow 220ms ease;
	box-shadow: 6px 6px 0 0 var(--ink);
}
.faq-card:nth-child(1) { transform: rotate(-0.5deg); }
.faq-card:nth-child(2) { transform: rotate(0.4deg); }
.faq-card:nth-child(3) { transform: rotate(-0.3deg); }
.faq-card:nth-child(4) { transform: rotate(0.6deg); }
.faq-card:nth-child(5) { transform: rotate(-0.6deg); }
.faq-card:nth-child(6) { transform: rotate(0.3deg); }
.faq-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 0 var(--clay); }
.faq-qr { width: 80px; height: 80px; border-radius: 4px; padding: 5px; background: var(--paper); border: 1.5px solid var(--ink); }
.faq-card .num { font-family: var(--mn); font-size: 0.78rem; color: var(--clay-d); margin-bottom: 3px; font-weight: 600; letter-spacing: 0.1em; }
.faq-card h4 {
	font-family: var(--serif); font-weight: 500; font-size: 1.08rem; line-height: 1.3;
	margin: 0 0 8px; letter-spacing: -0.005em; font-variation-settings: "opsz" 60;
}
.faq-card p { margin: 0; font-size: 0.9rem; color: var(--fg-mute); line-height: 1.5; }

/* ========================================================================
 * CONTACT — terracotta
 * ====================================================================== */
.contact {
	background: var(--clay); color: var(--cream); text-align: center;
	position: relative; overflow: hidden; border-top: 3px solid var(--ink);
}
.contact::before {
	content: ""; position: absolute; top: 30px; left: 5%; width: 220px; height: 220px;
	border-radius: 50%; background: var(--saffron); opacity: 0.25; pointer-events: none;
}
.contact::after {
	content: ""; position: absolute; bottom: 40px; right: 5%; width: 160px; height: 160px;
	border-radius: 50%; background: var(--plum); opacity: 0.3; pointer-events: none;
}
.contact .chapter { color: var(--cream); opacity: 0.8; }
.contact .serif-h { color: var(--cream); }
.contact .serif-h em { color: var(--saffron); }
.contact-sub { color: rgba(250,247,240,0.9); max-width: 52ch; margin: 0 auto 40px; font-size: 1.15rem; }
.contact-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.contact .btn-primary { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.contact .btn-primary:hover { background: var(--ink); color: var(--cream); }
.contact .btn-ghost { color: var(--cream); border-color: var(--cream); }
.contact .btn-ghost:hover { background: var(--cream); color: var(--clay-d); }

/* ========================================================================
 * FOOTER
 * ====================================================================== */
.footer { background: var(--ink); color: rgba(250,247,240,0.78); padding: 64px 0 32px; font-size: 0.92rem; position: relative; border-top: 3px solid var(--saffron); }
.footer a { color: var(--cream); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(250,247,240,0.14); margin-bottom: 24px; }
@media (max-width: 780px) { .footer-top { grid-template-columns: 1fr; gap: 28px; } }
.footer h5 { font-family: var(--mn); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--saffron); font-weight: 600; margin: 0 0 14px; }
.footer .big-mark { font-family: var(--serif); font-weight: 400; font-size: 2.6rem; color: var(--cream); line-height: 1; letter-spacing: -0.02em; margin: 0 0 14px; font-variation-settings: "opsz" 144; }
.footer .big-mark em { font-family: var(--italic); font-style: italic; color: var(--saffron); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 8px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; }
.footer-bottom .palette { display: flex; gap: 4px; }
.footer-bottom .palette span { width: 16px; height: 16px; border-radius: 50%; display: inline-block; border: 1px solid rgba(250,247,240,0.2); }

/* Developer credit — subtle row at the very bottom of the footer,
   separated from the main footer-bottom by a thin rule. Uses the same
   monospace-uppercase typography as the section headings so it reads
   as a deliberate stamp rather than an afterthought. */
.footer-credit {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid rgba(250,247,240,0.08);
	text-align: center;
	font-family: var(--mn);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(250,247,240,0.42);
}
.footer-credit a {
	color: rgba(250,247,240,0.75);
	text-decoration: none;
	border-bottom: 1px dotted rgba(250,247,240,0.3);
	padding-bottom: 1px;
	transition: color 180ms ease, border-color 180ms ease;
}
.footer-credit a:hover,
.footer-credit a:focus-visible {
	color: var(--cream);
	border-bottom-color: var(--cream);
	outline: none;
}
.footer-credit-arr {
	display: inline-block;
	transition: transform 180ms ease;
	margin-left: 1px;
}
.footer-credit a:hover .footer-credit-arr,
.footer-credit a:focus-visible .footer-credit-arr {
	transform: translate(2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
	.footer-credit a, .footer-credit-arr { transition: none; }
	.footer-credit a:hover .footer-credit-arr { transform: none; }
}

/* ========================================================================
 * FLOATING STICKY CTA
 * ====================================================================== */
.sticky-cta {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 40;
	background: var(--ink);
	color: var(--cream);
	border-radius: 999px;
	padding: 10px 10px 10px 18px;
	box-shadow: 0 10px 30px rgba(10,31,58,0.25), 4px 4px 0 0 var(--saffron);
	display: flex; align-items: center; gap: 14px;
	text-decoration: none;
	transform: translateY(140%);
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
	font-size: 0.92rem;
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta .count { font-family: var(--serif); font-weight: 500; color: var(--saffron); font-size: 1.1rem; font-variation-settings: "opsz" 100; }
.sticky-cta .lbl { font-family: var(--mn); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.sticky-cta .go {
	background: var(--saffron); color: var(--ink); border-radius: 999px;
	padding: 8px 16px; font-family: var(--sans); font-weight: 700; font-size: 0.86rem;
	display: inline-flex; align-items: center; gap: 6px;
	transition: background 180ms ease;
}
.sticky-cta:hover .go { background: var(--cream); }
.sticky-cta .sticky-pulse {
	width: 8px; height: 8px; border-radius: 50%; background: #86efac;
	animation: pulse-sm 1.8s ease-in-out infinite;
}
@keyframes pulse-sm { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } }
@media (max-width: 520px) {
	.sticky-cta { right: 12px; bottom: 12px; font-size: 0.85rem; padding: 8px 8px 8px 14px; }
	.sticky-cta .lbl { display: none; }
}

/* ========================================================================
 * SCROLL-DRIVEN ANIMATIONS (progressive enhancement)
 * ====================================================================== */
@supports (animation-timeline: view()) {
	.reveal {
		animation: reveal-up linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 30%;
	}
	@keyframes reveal-up {
		from { opacity: 0; transform: translateY(24px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	.ghost-numeral {
		animation: ghost-scale linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 100%;
	}
	@keyframes ghost-scale {
		from { transform: scale(0.85) translateY(40px); opacity: 0; }
		20%  { opacity: 0.06; }
		to   { transform: scale(1.05) translateY(-20px); opacity: 0; }
	}
}

/* Fallback reveal (JS-driven) */
.reveal-fallback { opacity: 0; transform: translateY(20px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal-fallback.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.reveal, .reveal-fallback { opacity: 1; transform: none; animation: none; transition: none; }
	* { animation: none !important; }
}

::selection { background: var(--saffron); color: var(--ink); }
.onum { font-variant-numeric: oldstyle-nums; }
/* ========================================================================
 * DYNAMIC MOTION LAYER (v5.1)
 * Everything here respects prefers-reduced-motion at the bottom.
 * ====================================================================== */

/* --- Sequenced hero entrance ------------------------------------------ */
@keyframes hero-rise {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-rise-scale {
	from { opacity: 0; transform: translateY(40px) scale(0.96) rotate(-1.4deg); }
	to   { opacity: 1; transform: translateY(0)   scale(1)    rotate(-1.4deg); }
}
@keyframes ribbon-drop {
	0%   { opacity: 0; transform: translateY(-40px) rotate(6deg) scale(0.6); }
	60%  { opacity: 1; transform: translateY(8px)   rotate(12deg) scale(1.04); }
	100% { opacity: 1; transform: translateY(0)    rotate(6deg) scale(1); }
}
@keyframes clubby-walk-in {
	0%   { opacity: 0; transform: translateX(80px) translateY(20px) scale(0.9); }
	70%  { opacity: 1; transform: translateX(-6px) translateY(-4px) scale(1.02); }
	100% { opacity: 1; transform: translateX(0)    translateY(0)    scale(1); }
}
@keyframes bubble-pop {
	0%   { opacity: 0; transform: rotate(-3deg) scale(0); }
	65%  { opacity: 1; transform: rotate(-1deg) scale(1.1); }
	100% { opacity: 1; transform: rotate(-3deg) scale(1); }
}

.hero-masthead      { animation: hero-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 100ms both; }
.hero-mega          { animation: hero-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 250ms both; }
.hero-def           { animation: hero-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 500ms both; }
.hero-sub           { animation: hero-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 650ms both; }
.hero-ctas          { animation: hero-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 800ms both; }
.hero-meta          { animation: hero-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 950ms both; }
.hero-photo-frame   { animation: hero-rise-scale 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 400ms both; }
.hero-ribbon        { animation: ribbon-drop 900ms cubic-bezier(0.34, 1.56, 0.64, 1) 1100ms both; }
.hero-clubby        { animation: clubby-walk-in 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 1300ms both, clubby-bob 4s ease-in-out 2100ms infinite; }
.hero-bubble        { animation: bubble-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 1700ms both; }

/* --- Photo frame tilt on mouse ---------------------------------------- */
/* Uses CSS custom properties driven from JS mousemove */
.hero-photo-frame {
	--mx: 0;
	--my: 0;
	transform: perspective(1200px)
		rotateY(calc(var(--mx) * 4deg))
		rotateX(calc(var(--my) * -3deg))
		rotate(-1.4deg);
	transition: transform 140ms ease;
	will-change: transform;
}
.hero-photo-frame:hover {
	transition: transform 80ms ease;
}

/* --- Button shine sweep on hover -------------------------------------- */
.btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.btn::after {
	content: "";
	position: absolute;
	top: 0; left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.4) 50%, transparent 80%);
	transform: skewX(-18deg);
	transition: left 560ms cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	z-index: 1;
}
.btn:hover::after { left: 200%; }
.btn-ghost::after { background: linear-gradient(110deg, transparent 20%, rgba(26,45,77,0.12) 50%, transparent 80%); }

/* --- Counter-up stat values ------------------------------------------ */
.stat .k, .stat-donut .big { display: inline-block; }
.stat .k[data-count], .stat-donut text[data-count] { transition: none; }

/* --- Clubby blink ----------------------------------------------------- */
/* Since Clubby is a PNG we can't animate his eyes directly, but we can
   occasionally scale him vertically to simulate a blink/breath. */
@keyframes clubby-blink {
	0%, 94%, 100% { transform: translateY(0) scaleY(1); }
	96%           { transform: translateY(1px) scaleY(0.96); }
	98%           { transform: translateY(0) scaleY(1); }
}
.hero-clubby img {
	animation: clubby-blink 6.5s ease-in-out 2500ms infinite;
}

/* --- Character family personality on Curriculum ---------------------- */
.step-character img {
	transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
	transform-origin: center bottom;
}
/* Scholar — bows forward on hover */
.step:nth-child(1) .step-character img:hover,
.step:nth-child(1):hover .step-character img {
	transform: rotate(-8deg) scale(1.08);
}
/* Wizard — hat wobble (rotate whole character) */
.step:nth-child(2) .step-character img:hover,
.step:nth-child(2):hover .step-character img {
	animation: wizard-wobble 800ms ease-in-out;
}
@keyframes wizard-wobble {
	0%, 100% { transform: rotate(0) scale(1); }
	20%      { transform: rotate(-10deg) scale(1.08); }
	50%      { transform: rotate(8deg) scale(1.08); }
	80%      { transform: rotate(-4deg) scale(1.04); }
}
/* Robot — twitchy antenna / body shake */
.step:nth-child(3) .step-character img:hover,
.step:nth-child(3):hover .step-character img {
	animation: robot-glitch 600ms steps(6);
}
@keyframes robot-glitch {
	0%   { transform: translate(0,0); }
	16%  { transform: translate(-2px, 1px); }
	33%  { transform: translate(2px, -1px); }
	50%  { transform: translate(-1px, 2px); }
	66%  { transform: translate(1px, -2px); }
	83%  { transform: translate(-1px, 0); }
	100% { transform: translate(0,0) scale(1.06); }
}

/* Idle float on the characters so they aren't static */
@keyframes char-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}
.step:nth-child(1) .step-character { animation: char-float 4s ease-in-out       infinite; }
.step:nth-child(2) .step-character { animation: char-float 4.6s ease-in-out 0.4s infinite; }
.step:nth-child(3) .step-character { animation: char-float 3.8s ease-in-out 0.8s infinite; }

/* --- Marquee: brighter in the middle, dimmer at edges ---------------- */
.marquee {
	position: relative;
}
.marquee-track .item {
	transition: opacity 220ms ease, transform 220ms ease;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee .marquee-track .item { opacity: 0.75; }
.marquee .marquee-track .item:hover {
	opacity: 1;
	transform: scale(1.08);
	color: var(--cream);
}

/* --- Ghost numerals — parallax drift on scroll ----------------------- */
@supports (animation-timeline: view()) {
	.ghost-numeral {
		animation: ghost-drift linear both;
		animation-timeline: view();
		animation-range: cover 0% cover 100%;
	}
	@keyframes ghost-drift {
		from { transform: translateY(-40px) rotate(-3deg); }
		to   { transform: translateY(40px)  rotate(3deg); }
	}
}

/* --- Sticky CTA bounce-in --------------------------------------------- */
.sticky-cta.visible {
	animation: cta-bounce-in 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cta-bounce-in {
	0%   { transform: translateX(120%) translateY(0) rotate(5deg); }
	60%  { transform: translateX(-8px) translateY(-4px) rotate(-2deg); }
	100% { transform: translateX(0) translateY(0) rotate(0); }
}

/* --- Hero mega — subtle letter-breathe on load ----------------------- */
@keyframes letter-breathe {
	0%, 100% { font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1; }
	50%      { font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1; }
}
/* Only applies after the entrance finishes — delayed start */
.hero-mega {
	animation: hero-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 250ms both,
			   letter-breathe 8s ease-in-out 3s infinite;
}

/* --- Curriculum: step cards slide + settle on entry ------------------ */
@keyframes step-drop {
	0%   { opacity: 0; transform: translateY(40px) scale(0.95) rotate(0); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}
.how .step:nth-child(1).visible { animation: step-drop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.how .step:nth-child(2).visible { animation: step-drop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 150ms both; }
.how .step:nth-child(3).visible { animation: step-drop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms both; }

/* --- Reduced motion override — turns EVERYTHING off ------------------ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0ms !important;
	}
	.hero-masthead, .hero-mega, .hero-def, .hero-sub, .hero-ctas,
	.hero-meta, .hero-photo-frame, .hero-ribbon, .hero-clubby,
	.hero-bubble, .step, .sticky-cta.visible {
		opacity: 1 !important; transform: none !important;
	}
	.hero-photo-frame { transform: rotate(-1.4deg) !important; }
	.hero-ribbon      { transform: rotate(6deg) !important; }
	.hero-clubby      { transform: rotate(0) !important; }
	.hero-bubble      { transform: rotate(-3deg) !important; }
}
/* ========================================================================
 * NEWS BANNER — editable notice ticker above the navigation
 * ====================================================================== */
.news-banner {
	position: relative;
	z-index: 51; /* above the sticky nav */
	border-bottom: 2px solid var(--ink);
	overflow: hidden;
	transition: height 400ms ease, opacity 300ms ease, border-bottom-width 300ms ease,
	            background-color 600ms ease, color 600ms ease;
}
.news-banner[data-dismissed="true"] {
	opacity: 0;
	border-bottom-width: 0;
}

/* The inner row — a single flex line that aligns with site content width */
.news-banner-row {
	width: min(var(--content), 100%);
	margin: 0 auto;
	padding: 10px clamp(20px, 4vw, 48px);
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.5vw, 18px);
	min-height: 54px;
}

/* Notices container — grid layout so all notices stack in the same cell */
.news-banner-inner {
	flex: 1;
	min-width: 0; /* allow flex child to truncate rather than overflow */
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	position: relative;
}

/* Each notice occupies the same grid area; only .active is visible */
.notice {
	grid-row: 1;
	grid-column: 1;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
	min-width: 0;
}
.notice.active {
	opacity: 1;
	pointer-events: auto;
}

.notice-icon {
	width: 20px; height: 20px; flex-shrink: 0;
	display: grid; place-items: center;
}
.notice-icon svg { width: 100%; height: 100%; }

.notice-label {
	font-family: var(--mn);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 3px;
	background: rgba(0,0,0,0.18);
	flex-shrink: 0;
	white-space: nowrap;
	line-height: 1.2;
}

.notice-title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 0.98rem;
	font-variation-settings: "opsz" 60, "SOFT" 50;
	letter-spacing: -0.005em;
	line-height: 1.3;
}

.notice-subtitle {
	font-family: var(--italic);
	font-style: italic;
	font-size: 0.9rem;
	opacity: 0.88;
	line-height: 1.3;
}

.notice-link {
	font-family: var(--mn);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 700;
	white-space: nowrap;
	margin-left: auto;
}

/* Type-specific colour schemes driven by [data-type] on the banner */
.news-banner[data-type="info"]    { background: var(--saffron);      color: var(--ink); }
.news-banner[data-type="info"]    .notice-label { background: rgba(26,45,77,0.15); color: var(--ink); }
.news-banner[data-type="notice"]  { background: var(--brand-blue);   color: var(--cream); }
.news-banner[data-type="notice"]  .notice-label { background: rgba(255,255,255,0.22); color: var(--cream); }
.news-banner[data-type="alert"]   { background: var(--brand-purple); color: var(--cream); }
.news-banner[data-type="alert"]   .notice-label { background: rgba(255,255,255,0.22); color: var(--cream); }
.news-banner[data-type="urgent"]  { background: var(--clay);         color: var(--cream); }
.news-banner[data-type="urgent"]  .notice-label { background: rgba(0,0,0,0.22); color: var(--cream); }

/* Urgent type pulses gently */
@keyframes urgent-pulse {
	0%, 100% { background-color: var(--clay); }
	50%      { background-color: var(--clay-d); }
}
.news-banner[data-type="urgent"] { animation: urgent-pulse 2.4s ease-in-out infinite; }

/* Pagination dots — sit inline in the flex row, right-aligned */
.news-dots {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
	align-items: center;
}
.news-dots .dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: currentColor; opacity: 0.38;
	transition: opacity 200ms ease, transform 200ms ease;
	cursor: pointer;
	border: 0; padding: 0;
	-webkit-appearance: none; appearance: none;
}
.news-dots .dot.active { opacity: 1; transform: scale(1.35); }
.news-dots .dot:hover  { opacity: 0.75; }

/* Dismiss button — flex child, no absolute positioning */
.news-dismiss {
	width: 28px; height: 28px;
	background: transparent;
	border: 1.5px solid currentColor;
	color: inherit;
	border-radius: 50%;
	font-size: 1.05rem;
	line-height: 1;
	display: grid; place-items: center;
	cursor: pointer;
	opacity: 0.65;
	transition: opacity 180ms ease, transform 240ms ease, background 180ms ease;
	flex-shrink: 0;
	padding: 0;
	font-family: var(--sans);
	font-weight: 300;
}
.news-dismiss:hover {
	opacity: 1;
	background: rgba(0,0,0,0.15);
	transform: rotate(90deg);
}

/* Mobile: compress, hide dots to save horizontal space */
@media (max-width: 720px) {
	.news-banner-row { padding: 10px clamp(14px, 3vw, 24px); gap: 10px; }
	.notice-title    { font-size: 0.9rem; flex-basis: 100%; }
	.notice-subtitle { font-size: 0.82rem; flex-basis: 100%; margin-top: -4px; }
	.notice-link     { margin-left: 0; flex-basis: 100%; }
	.news-dots       { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.notice { transition: none !important; }
	.news-banner[data-type="urgent"] { animation: none !important; }
}

/* ========================================================================
 * LANGUAGE FEATURE — nav button + slide-in drawer
 * ====================================================================== */

/* Font stacks with system fallbacks. No external font load required —
   modern OSes ship decent defaults for each script. Google Fonts Noto Sans
   can be added as a progressive enhancement later. */
.lang-panel[lang="hi"], .lang-tab[lang="hi"], .lang-strip-btn[lang="hi"] { font-family: "Noto Sans Devanagari", "Mangal", "Nirmala UI", "Kohinoor Devanagari", system-ui, sans-serif; }
.lang-panel[lang="gu"], .lang-tab[lang="gu"], .lang-strip-btn[lang="gu"] { font-family: "Noto Sans Gujarati", "Shruti", "Nirmala UI", "Kohinoor Gujarati", system-ui, sans-serif; }
.lang-panel[lang="ta"], .lang-tab[lang="ta"], .lang-strip-btn[lang="ta"] { font-family: "Noto Sans Tamil", "Latha", "Nirmala UI", "Tamil Sangam MN", system-ui, sans-serif; }
.lang-panel[lang="te"], .lang-tab[lang="te"], .lang-strip-btn[lang="te"] { font-family: "Noto Sans Telugu", "Gautami", "Nirmala UI", "Kohinoor Telugu", system-ui, sans-serif; }

/* ─── LANGUAGE STRIP — always-visible top bar ───────────────────────── */
.lang-strip {
	background: var(--cream);
	border-bottom: 1.5px solid var(--rule);
	position: relative;
	z-index: 52; /* above nav and news banner */
}
.lang-strip-inner {
	max-width: var(--content);
	margin: 0 auto;
	padding: 12px clamp(18px, 4vw, 48px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(14px, 2vw, 24px);
	flex-wrap: wrap;
}
.lang-strip-label {
	font-family: var(--mn);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--ink);
	text-transform: none;
	flex-shrink: 0;
}
.lang-strip-buttons {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.lang-strip-btn {
	background: transparent;
	border: 1.5px solid var(--ink);
	color: var(--ink);
	padding: 7px 16px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1;
	transition: background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
	font-family: inherit; /* allows lang-specific override above */
	position: relative;
	white-space: nowrap;
}
.lang-strip-btn:hover,
.lang-strip-btn:focus-visible {
	background: var(--brand-purple);
	color: var(--cream);
	border-color: var(--brand-purple);
	transform: translateY(-1px);
	box-shadow: 0 2px 0 0 var(--ink);
	outline: none;
}
.lang-strip-btn.is-current {
	background: var(--ink);
	color: var(--saffron);
	border-color: var(--ink);
	cursor: default;
}
.lang-strip-btn.is-current:hover {
	transform: none;
	box-shadow: none;
}

/* Mobile: slightly reduced scale, label stacks above buttons */
@media (max-width: 640px) {
	.lang-strip-inner { flex-direction: column; gap: 10px; padding: 12px 16px; }
	.lang-strip-label { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
	.lang-strip-btn { padding: 6px 13px; font-size: 0.88rem; }
}
@media (max-width: 400px) {
	.lang-strip-buttons { gap: 6px; }
	.lang-strip-btn { padding: 5px 11px; font-size: 0.82rem; }
}

/* ─── NAV BUTTON — now more explicit with bilingual label ──────────── */
.lang-toggle {
	background: var(--brand-purple);
	border: 1.5px solid var(--brand-purple);
	color: var(--cream);
	border-radius: 999px;
	padding: 8px 16px 8px 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 220ms ease, box-shadow 220ms ease;
	font-family: var(--sans);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.lang-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }
.lang-toggle:hover {
	background: var(--ink);
	border-color: var(--ink);
	transform: translateY(-1px);
	box-shadow: 0 3px 0 0 var(--brand-purple);
}
.lang-toggle-label {
	display: inline-flex;
	flex-direction: column;
	line-height: 1;
	gap: 2px;
	align-items: flex-start;
}
.lang-toggle-primary {
	font-size: 0.82rem;
	font-weight: 600;
}
.lang-toggle-secondary {
	font-size: 0.82rem;
	font-weight: 400;
	opacity: 0.85;
	font-family: "Noto Sans Devanagari", "Mangal", "Nirmala UI", system-ui, sans-serif;
}
@media (max-width: 880px) {
	.lang-toggle-label { display: inline; }
	.lang-toggle-secondary { display: none; }
	.lang-toggle { padding: 8px 14px; }
}
@media (max-width: 640px) {
	.lang-toggle-primary { display: none; }
	.lang-toggle-secondary { display: inline; font-family: "Noto Sans Devanagari", "Mangal", "Nirmala UI", system-ui, sans-serif; }
	.lang-toggle { padding: 8px 12px; }
}

/* Backdrop behind the drawer — soft dim */
.lang-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(26, 45, 77, 0.35);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 90;
	opacity: 0;
	transition: opacity 300ms ease;
}
.lang-backdrop.visible { opacity: 1; }

/* The drawer itself — slides in from the right */
.lang-drawer {
	position: fixed;
	top: 0; right: 0;
	width: min(460px, 94vw);
	height: 100dvh;
	background: var(--bg);
	border-left: 2px solid var(--ink);
	z-index: 100;
	overflow-y: auto;
	padding: 28px clamp(22px, 4vw, 36px) 40px;
	transform: translateX(100%);
	transition: transform 420ms cubic-bezier(0.2, 0.85, 0.2, 1);
	box-shadow: -20px 0 40px -10px rgba(0, 0, 0, 0.25);
}
.lang-drawer.visible { transform: translateX(0); }

.lang-drawer-head {
	display: flex; justify-content: space-between; align-items: center;
	padding-bottom: 18px;
	border-bottom: 1.5px solid var(--rule);
	margin-bottom: 20px;
}
.lang-drawer-title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--fg);
	margin: 0;
	letter-spacing: -0.01em;
	font-variation-settings: "opsz" 60;
}
.lang-close {
	background: transparent; border: 1.5px solid var(--rule);
	width: 34px; height: 34px; border-radius: 50%;
	font-size: 1.3rem; line-height: 1; color: var(--fg);
	display: grid; place-items: center;
	cursor: pointer;
	transition: transform 260ms ease, background 180ms ease;
	font-family: var(--sans); font-weight: 300;
}
.lang-close:hover { transform: rotate(90deg); background: var(--surface); }

/* Language tabs */
.lang-tabs {
	display: flex; flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 24px;
}
.lang-tab {
	background: transparent;
	border: 1.5px solid var(--rule);
	color: var(--fg-soft);
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 0.88rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.lang-tab:hover {
	border-color: var(--brand-purple);
	color: var(--fg);
}
.lang-tab.active {
	background: var(--brand-purple);
	color: var(--cream);
	border-color: var(--brand-purple);
}

/* Preliminary translation notice */
.lang-disclaimer {
	display: flex; align-items: flex-start; gap: 8px;
	padding: 10px 14px;
	margin-bottom: 20px;
	background: rgba(232, 167, 52, 0.12);
	border: 1px solid rgba(232, 167, 52, 0.4);
	border-radius: 4px;
	color: var(--fg-soft);
	font-family: var(--italic);
	font-style: italic;
	font-size: 0.86rem;
	line-height: 1.4;
}
.lang-disclaimer svg {
	width: 16px; height: 16px; flex-shrink: 0;
	color: var(--saffron-d); margin-top: 2px;
}

/* Panels — only active one is visible */
.lang-panel { display: none; }
.lang-panel.active { display: block; }

.lang-greeting {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.5rem, 4vw, 1.9rem);
	line-height: 1.2;
	color: var(--fg);
	margin: 0 0 14px;
	font-variation-settings: "opsz" 100, "SOFT" 50;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
/* For non-Latin scripts, the serif font doesn't apply well — inherit the
   language-specific font instead */
.lang-panel[lang="hi"] .lang-greeting,
.lang-panel[lang="gu"] .lang-greeting,
.lang-panel[lang="ta"] .lang-greeting,
.lang-panel[lang="te"] .lang-greeting {
	font-family: inherit;
	font-weight: 700;
}
.lang-greeting em {
	font-family: var(--italic);
	font-style: italic;
	font-weight: 400;
	color: var(--brand-purple);
}
.lang-panel[lang="hi"] .lang-greeting em,
.lang-panel[lang="gu"] .lang-greeting em,
.lang-panel[lang="ta"] .lang-greeting em,
.lang-panel[lang="te"] .lang-greeting em {
	font-family: inherit; font-style: normal; color: var(--brand-purple);
}

.lang-intro {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--fg);
	margin: 0 0 22px;
}

.lang-facts {
	list-style: none;
	padding: 18px 20px;
	margin: 0 0 26px;
	background: var(--surface);
	border: 1.5px solid var(--rule);
	border-radius: 6px;
}
.lang-facts li {
	padding: 9px 0;
	border-bottom: 1px dashed rgba(26, 45, 77, 0.14);
	font-size: 0.96rem;
	line-height: 1.45;
	color: var(--fg);
}
.lang-facts li:last-child { border-bottom: none; padding-bottom: 0; }
.lang-facts li:first-child { padding-top: 0; }
.lang-facts strong { color: var(--brand-purple); font-weight: 700; }

.lang-cta-row {
	display: flex; flex-direction: column; gap: 10px;
	margin-bottom: 24px;
}
.lang-cta {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 20px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 700;
	font-size: 1rem;
	transition: background 180ms ease, transform 180ms ease;
	text-align: center;
	line-height: 1.3;
}
.lang-cta:hover { transform: translateY(-2px); }
.lang-cta-primary {
	background: var(--brand-purple);
	color: var(--cream);
}
.lang-cta-primary:hover { background: var(--ink); }
.lang-cta-whatsapp {
	background: #25D366;
	color: #fff;
	font-size: 0.94rem;
}
.lang-cta-whatsapp:hover { background: #128C7E; }

.lang-footer {
	font-size: 0.82rem;
	color: var(--fg-mute);
	font-family: var(--italic);
	font-style: italic;
	margin: 0;
	padding-top: 18px;
	border-top: 1.5px solid var(--rule);
	line-height: 1.5;
}
.lang-footer a { color: var(--brand-blue); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.lang-drawer { transition: none; }
	.lang-backdrop { transition: none; }
	.lang-close:hover { transform: none; }
	.lang-cta:hover { transform: none; }
}


/* ============================================================================
 * BOOKINGS-CLOSED STATE (master switch off)
 * Three places affected: Chapter III banner + per-card pending tag,
 * Chapter IV closed notice in place of the form, schedule-foot CTA variant.
 * ========================================================================== */

/* Chapter III — banner above the schedule grid */
.schedule-closed-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6em 1em;
	margin: 0 0 1.4em;
	padding: 0.95em 1.2em;
	background: var(--cream, #f6f4ee);
	border-left: 4px solid var(--brand-blue, #1a2d4d);
	border-radius: 4px;
	font-size: 0.98rem;
}
.schedule-closed-banner strong {
	color: var(--brand-blue, #1a2d4d);
	font-size: 1.05rem;
}
.schedule-closed-banner span {
	color: var(--fg, #34384a);
}

/* Chapter III — per-card "Opening soon" tag (replaces the Register link) */
.class-cta-pending {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(26, 45, 77, 0.08);
	color: var(--brand-blue, #1a2d4d);
	font-family: var(--sans);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.01em;
}

/* Outline button — used by the Chapter III bottom CTA when closed */
.btn-outline {
	background: transparent;
	color: var(--fg);
	border-color: var(--fg);
}
.btn-outline:hover {
	background: var(--fg);
	color: var(--bg);
	transform: translateY(-2px) rotate(-0.6deg);
}

/* Chapter IV — full closed-state panel that replaces the rich card layout */
.enrol-closed {
	max-width: 640px;
	margin: 1.5em auto;
	padding: 2em 2.2em;
	background: var(--cream, #f6f4ee);
	border-left: 4px solid var(--brand-blue, #1a2d4d);
	border-radius: 6px;
	text-align: left;
}
.enrol-closed-icon {
	width: 48px;
	height: 48px;
	margin: 0 0 0.8em;
	color: var(--brand-blue, #1a2d4d);
}
.enrol-closed-icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: none;
}
.enrol-closed-heading {
	margin: 0 0 0.6em;
	font-family: var(--serif, Georgia, serif);
	font-size: 1.6rem;
	color: var(--brand-blue, #1a2d4d);
}
.enrol-closed-body {
	margin: 0 0 0.9em;
	color: var(--fg, #34384a);
	line-height: 1.55;
}
.enrol-closed-body:last-of-type {
	margin-bottom: 1.4em;
}
.enrol-closed-cta {
	margin: 1.4em 0 0;
}