/**
 * Edison 2026 — the light design (v1).
 *
 * Everything here is scoped under .tesl so it cannot touch the dark v4 page.
 * Section colours, card shapes and decorative flourishes live in CSS; the
 * words and photographs stay as ordinary Gutenberg blocks.
 */

.tesl {
	--l-ivory: #FBF8F3;
	--l-mint: #EDF4F2;
	--l-teal: #0C3B3B;
	--l-teal-card: #134A4A;
	--l-red: #BC1823;
	--l-red-dark: #8E1119;
	--l-cta: #008080;
	--l-cta-hover: #016060;
	--l-cta-shadow: #01605F;

	--l-ink: #0C3B3B;
	--l-body: #3D4E4E;
	--l-muted: #5B6A6A;
	--l-brown: #6B5C48;

	--l-sand: #F3EDE4;
	--l-border: #EADFD1;
	--l-border-warm: #E3D6C4;
	--l-tint: #E6F1F0;
	--l-tint-2: #DCEAE7;
	--l-dash: #CFE0DD;
	--l-photo-bg: #E2EDEB;

	--l-on-dark: #B8D3D1;
	--l-on-dark-2: #A8C7C5;
	--l-on-dark-3: #C8DEDC;
	--l-rose: #F0B6B9;

	--l-shadow-card: 0 10px 26px rgba(12, 59, 59, 0.06);
	--l-shadow-lift: 0 22px 50px rgba(12, 59, 59, 0.12);
	--l-pad-x: clamp(16px, 4vw, 36px);

	background: var(--l-ivory);
	color: var(--l-body);
	font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
	font-size: 17.5px;
	line-height: 1.8;
	overflow-x: hidden;
}

.tesl :where(h1, h2, h3, h4) {
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.12;
	color: var(--l-ink);
	text-wrap: balance;
}

.tesl :where(p, li) { color: var(--l-body); }
.tesl :where(a):not(.wp-element-button) { color: var(--l-cta-hover); }
.tesl :where(a):not(.wp-element-button):hover { color: var(--l-red); }

/* ==========================================================================
   1. Sections
   ========================================================================== */

.tesl-sec {
	position: relative;
	padding: clamp(56px, 7vw, 100px) 0;
}
.tesl-sec > * {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--l-pad-x);
	position: relative;
	z-index: 1;
}

.tesl-sec.has-mint-background-color { background: var(--l-mint); }
.tesl-sec.has-ivory-background-color { background: var(--l-ivory); }
.tesl-sec.has-school-teal-background-color { background: var(--l-teal); }

/* Text that sits on the dark teal band. */
.tesl-sec.has-school-teal-background-color :where(h1, h2, h3) { color: #fff; }
.tesl-sec.has-school-teal-background-color :where(p, li) { color: var(--l-on-dark); }

/* Angled top edges — the seam that makes the page feel hand-cut. */
.tesl-sec--angle-left {
	clip-path: polygon(0 3.4vw, 100% 0, 100% 100%, 0 100%);
	padding-top: calc(3.4vw + clamp(64px, 7vw, 104px));
	margin-top: -2vw;
}
.tesl-sec--angle-right {
	clip-path: polygon(0 0, 100% 3vw, 100% 100%, 0 100%);
	padding-top: calc(3vw + clamp(56px, 7vw, 96px));
}

/* Arched top corners. */
.tesl-sec--arch {
	border-radius: clamp(40px, 7vw, 110px) clamp(40px, 7vw, 110px) 0 0;
	margin-top: clamp(-40px, -4vw, -20px);
}

/* The band that straddles cream above and teal below. */
.tesl-sec--seam {
	background: linear-gradient(var(--l-ivory) 50%, var(--l-teal) 50%);
	padding: clamp(20px, 3vw, 36px) 0 0;
}

/* Dotted-circle and blob flourishes. */
.tesl-sec--dots::before {
	content: "";
	position: absolute;
	right: -110px;
	top: 40px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	border: 2px dashed var(--l-on-dark-2);
	opacity: 0.16;
	pointer-events: none;
}

/* ==========================================================================
   2. Type
   ========================================================================== */

.tesl-eyebrow {
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--l-red) !important;
	margin: 0 0 18px;
}
.tesl-sec.has-school-teal-background-color .tesl-eyebrow { color: var(--l-rose) !important; }

.tesl-lede {
	font-size: 18px;
	line-height: 1.8;
	color: var(--l-body) !important;
	max-width: 58ch;
	text-wrap: pretty;
}

.tesl-strong {
	font-weight: 700;
	color: var(--l-ink) !important;
}

.tesl-note {
	font-size: 15px;
	line-height: 1.7;
	color: var(--l-muted) !important;
}

/* The pill above the hero headline. */
.tesl-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
	padding: 8px 18px 8px 12px;
	border-radius: 999px;
	background: #fff;
	border: 1.5px solid var(--l-border-warm);
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--l-cta-hover) !important;
}
.tesl-badge::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--l-red);
	flex: none;
}

/* The hand-drawn underline under "them." */
.tesl-underline {
	position: relative;
	display: inline-block;
	color: var(--l-red);
}
.tesl-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 14px;
	background: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13 C 50 4, 110 18, 196 8' fill='none' stroke='%23008080' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   3. Buttons — the chunky offset-shadow style
   ========================================================================== */

.tesl .wp-block-button__link {
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1;
	min-height: 58px;
	display: inline-flex;
	align-items: center;
	padding: 0 32px;
	border-radius: 999px;
	background: var(--l-cta);
	color: #fff;
	box-shadow: 0 6px 0 0 var(--l-cta-shadow);
	transition: transform 140ms cubic-bezier(.2, .8, .2, 1), box-shadow 140ms cubic-bezier(.2, .8, .2, 1), background 140ms ease;
}
.tesl .wp-block-button__link:hover {
	background: var(--l-cta-hover);
	color: #fff;
	transform: translateY(2px);
	box-shadow: 0 4px 0 0 var(--l-cta-shadow);
}

.tesl .is-style-outline .wp-block-button__link,
.tesl .tesl-btn-ghost .wp-block-button__link {
	background: #fff;
	color: var(--l-cta-hover);
	border: 2px solid #BBD5D2;
	box-shadow: none;
}
.tesl .is-style-outline .wp-block-button__link:hover,
.tesl .tesl-btn-ghost .wp-block-button__link:hover {
	background: var(--l-tint);
	color: var(--l-cta-hover);
	transform: none;
}

.tesl .tesl-btn-red .wp-block-button__link {
	background: var(--l-red);
	color: #fff;
	box-shadow: 0 6px 0 0 var(--l-red-dark);
	min-height: 54px;
}
.tesl .tesl-btn-red .wp-block-button__link:hover {
	background: #A2141D;
	box-shadow: 0 4px 0 0 var(--l-red-dark);
}

.tesl .tesl-btn-white .wp-block-button__link {
	background: #fff;
	color: var(--l-ink);
	box-shadow: none;
	min-height: 50px;
	font-size: 16px;
	padding: 0 26px;
}
.tesl .tesl-btn-white .wp-block-button__link:hover { background: var(--l-on-dark); transform: none; }

/* ==========================================================================
   4. Grids and cards
   ========================================================================== */

.tesl-grid {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
	grid-template-columns: repeat(auto-fit, minmax(var(--l-min, 270px), 1fr));
}
.tesl-grid--2   { --l-min: 290px; }
.tesl-grid--3   { --l-min: 268px; }
.tesl-grid--6   { --l-min: 272px; }
.tesl-grid--wide { --l-min: 290px; gap: clamp(28px, 5vw, 60px); align-items: center; }
.tesl-grid--top { align-items: start; gap: clamp(28px, 4vw, 56px); }

.tesl-card {
	background: #fff;
	border-radius: 24px;
	padding: 30px;
	box-shadow: var(--l-shadow-card);
}
.tesl-card--dashed {
	background: transparent;
	border: 1.5px dashed #D9CDBB;
	box-shadow: none;
	padding: 28px;
}
.tesl-card--dashed :where(p, span) { color: var(--l-brown) !important; }
.tesl-card--outline {
	border: 1.5px solid var(--l-cta);
	box-shadow: 0 14px 34px rgba(12, 59, 59, 0.08);
	padding: 28px;
}
.tesl-card--outline p { font-weight: 700; color: var(--l-ink) !important; }

.tesl-card--teal { background: var(--l-teal-card); position: relative; padding: 32px; box-shadow: none; }
.tesl-card--red  { background: var(--l-red); position: relative; padding: 32px; box-shadow: none; }
.tesl-card--teal :where(h3), .tesl-card--red :where(h3) { color: #fff; margin: 24px 0 10px; }
.tesl-card--teal p { color: var(--l-on-dark) !important; }
.tesl-card--red p { color: #FBE0E2 !important; }

.tesl-card--bordered {
	border: 1.5px solid var(--l-border);
	border-radius: 22px;
	padding: 26px 28px;
	box-shadow: none;
}

/* The little label above the two comparison cards. */
.tesl-cardlabel {
	display: block;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 18px;
}
.tesl-card--dashed .tesl-cardlabel { color: var(--l-brown) !important; }
.tesl-card--outline .tesl-cardlabel { color: var(--l-cta-hover) !important; }

/* Numbered badge that pokes out of the top of a promise card. The numeral
   comes from the card's position, so adding a fifth promise numbers itself. */
.tesl-card--teal, .tesl-card--red { margin-top: 15px; }
.tesl-promises { counter-reset: tesl-promise; }
.tesl-promises > * { counter-increment: tesl-promise; }
.tesl-card--teal::before, .tesl-card--red::before {
	content: "0" counter(tesl-promise);
	position: absolute;
	top: -15px;
	left: 28px;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 15px;
	background: #fff;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 800;
	font-size: 18px;
	line-height: 1;
}
.tesl-card--teal::before { color: var(--l-teal); }
.tesl-card--red::before { color: var(--l-red); }

/* Circled numerals on the three steps. */
.tesl-step-num {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--l-tint);
	color: var(--l-cta) !important;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 800;
	font-size: 22px;
	line-height: 1;
	margin: 0 0 22px;
}

.tesl-timestamp {
	display: block;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--l-cta-hover) !important;
	margin: 0 0 12px;
}

/* ==========================================================================
   5. Icon tiles on the "kids here" cards. Drawn in CSS so the card body
      stays a plain heading + paragraph an editor can rewrite.
   ========================================================================== */

.tesl-card[class*="tesl-ico-"]::before {
	content: "";
	display: block;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background-color: var(--l-tint);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
	margin-bottom: 18px;
}
.tesl-ico-book::before    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008080' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h7a3 3 0 0 1 3 3v11a2.5 2.5 0 0 0-2.5-2.5H4Z'/%3E%3Cpath d='M20 5h-3a3 3 0 0 0-3 3v11a2.5 2.5 0 0 1 2.5-2.5H20Z'/%3E%3C/svg%3E"); }
.tesl-ico-pulse::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008080' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h4l2.5-7 4 14 2.5-7h5'/%3E%3C/svg%3E"); }
.tesl-ico-target::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008080' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 3.5v2M12 18.5v2M3.5 12h2M18.5 12h2'/%3E%3C/svg%3E"); }
.tesl-ico-heart::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008080' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.3-7.5-9.4A4.1 4.1 0 0 1 12 8.4a4.1 4.1 0 0 1 7.5 2.7c0 5.1-7.5 9.4-7.5 9.4Z'/%3E%3C/svg%3E"); }
.tesl-ico-list::before    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008080' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M7.5 9h9M7.5 13h6'/%3E%3C/svg%3E"); }
.tesl-ico-star::before    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008080' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.5 5.3 5.8.8-4.2 4 1 5.7-5.1-2.7-5.1 2.7 1-5.7-4.2-4 5.8-.8Z'/%3E%3C/svg%3E"); }

/* ==========================================================================
   6. Photography — organic corner shapes
   ========================================================================== */

.tesl-photo img,
.tesl-photo { border-radius: 36px 36px 120px 36px; overflow: hidden; display: block; }
.tesl-photo { background: var(--l-photo-bg); box-shadow: var(--l-shadow-lift); margin: 0; }
.tesl-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5 / 4; border-radius: 0; }

.tesl-photo--tl img, .tesl-photo--tl { border-radius: 140px 34px 34px 34px; }
.tesl-photo--bl img, .tesl-photo--bl { border-radius: 32px 32px 32px 110px; }
.tesl-photo--43 img { aspect-ratio: 4 / 3; }
.tesl-photo--1610 img { aspect-ratio: 16 / 10; }

/* Hero composition: two circles and a floating figure. */
.tesl-hero-art { position: relative; min-height: clamp(340px, 44vw, 500px); }
.tesl-hero-art > .wp-block-image { margin: 0; position: absolute; }
.tesl-hero-art > .wp-block-image:nth-of-type(1) {
	right: 2%;
	top: 0;
	width: clamp(230px, 70%, 410px);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--l-photo-bg);
	box-shadow: 0 26px 60px rgba(12, 59, 59, 0.16);
}
.tesl-hero-art > .wp-block-image:nth-of-type(2) {
	left: 0;
	bottom: 2%;
	width: clamp(148px, 44%, 258px);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	border: 9px solid var(--l-ivory);
	background: #F1EAE0;
	box-shadow: 0 18px 44px rgba(12, 59, 59, 0.14);
}
.tesl-hero-art > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tesl-hero-art::before {
	content: "";
	position: absolute;
	right: calc(2% + 22px);
	top: 22px;
	width: clamp(230px, 70%, 410px);
	aspect-ratio: 1;
	border-radius: 50% 50% 50% 12%;
	background: var(--l-tint-2);
	opacity: 0.75;
}

.tesl-floatcard {
	position: absolute;
	right: 0;
	bottom: 8%;
	z-index: 2;
	background: #fff;
	border: 1.5px solid var(--l-border-warm);
	border-radius: 22px;
	padding: 16px 22px;
	box-shadow: 0 16px 34px rgba(12, 59, 59, 0.12);
	animation: tesl-floaty 6s ease-in-out infinite;
}
.tesl-floatcard b {
	display: block;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 800;
	font-size: 32px;
	line-height: 1;
	color: var(--l-cta);
	letter-spacing: -0.03em;
}
.tesl-floatcard span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--l-muted); margin-top: 6px; }

@keyframes tesl-floaty {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

/* The four-photo band with alternating shapes. */
.tesl-photoband {
	display: grid;
	gap: clamp(14px, 2vw, 22px);
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	align-items: end;
}
.tesl-photoband > .wp-block-image {
	margin: 0;
	overflow: hidden;
	background: var(--l-photo-bg);
	box-shadow: 0 18px 40px rgba(12, 59, 59, 0.16);
}
.tesl-photoband > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tesl-photoband > .wp-block-image:nth-child(odd)  { border-radius: 26px 86px 26px 26px; }
.tesl-photoband > .wp-block-image:nth-child(even) { border-radius: 86px 26px 26px 26px; margin-bottom: clamp(18px, 3vw, 40px); }
.tesl-photoband > .wp-block-image:nth-child(odd) img  { aspect-ratio: 3 / 4; }
.tesl-photoband > .wp-block-image:nth-child(even) img { aspect-ratio: 1; }

/* Caption chip on the question photo. */
.tesl-photo-caption {
	display: inline-block;
	background: var(--l-red);
	color: #fff !important;
	border-radius: 18px;
	padding: 12px 18px;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	max-width: 70%;
	box-shadow: 0 10px 24px rgba(12, 59, 59, 0.18);
	margin: -22px 0 0 -10px;
	position: relative;
	z-index: 2;
}

/* The horse circle that overlaps the dark/light seam. */
.tesl-circle-photo { margin: 0 0 -30px auto !important; width: clamp(120px, 15vw, 190px); }
.tesl-circle-photo img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	border: 9px solid var(--l-ivory);
	box-shadow: 0 18px 40px rgba(12, 59, 59, 0.2);
	display: block;
}

/* ==========================================================================
   7. The statistics island that lifts out of the seam
   ========================================================================== */

.tesl-island {
	position: relative;
	z-index: 2;
	max-width: 1180px;
	margin: 0 auto -46px;
	padding: 0 var(--l-pad-x);
}
.tesl-island > * {
	background: #fff;
	border: 1.5px solid var(--l-border);
	border-radius: 32px;
	box-shadow: 0 22px 50px rgba(12, 59, 59, 0.09);
	padding: clamp(26px, 3.4vw, 40px);
	display: grid;
	gap: clamp(20px, 3vw, 36px);
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.tesl-figure {
	display: block;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(30px, 3.2vw, 42px);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--l-cta) !important;
	margin: 0;
}
.tesl-figure + p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--l-muted) !important; }

/* ==========================================================================
   8. Quotation
   ========================================================================== */

.tesl-quote {
	font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
	font-weight: 400;
	font-size: clamp(21px, 2.3vw, 29px);
	line-height: 1.5;
	color: var(--l-ink) !important;
	margin: 0 0 22px;
	text-wrap: pretty;
}
.tesl-quote::before {
	content: "";
	display: block;
	width: 40px;
	height: 30px;
	margin-bottom: 14px;
	background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M4 26V15c0-7 4-11 10-12v5c-3 1-5 3-5 7h5v11Zm22 0V15c0-7 4-11 10-12v5c-3 1-5 3-5 7h5v11Z' fill='%23CFE0DD'/%3E%3C/svg%3E");
}
.tesl-attrib {
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	color: var(--l-muted) !important;
	margin: 0 0 30px;
}

/* The wave that carries the dark promises band into the cream quote band. */
.tesl-sec--wave::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: clamp(40px, 5vw, 80px);
	background: no-repeat top center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0 C 240 78, 420 6, 700 40 S 1160 92, 1440 18 L1440 0 Z' fill='%230C3B3B'/%3E%3C/svg%3E");
	z-index: 0;
}
.tesl-sec--wave { padding-top: clamp(80px, 9vw, 120px); }

/* ==========================================================================
   9. Contact panels in the visit section
   ========================================================================== */

.tesl-contact-card {
	background: var(--l-teal);
	border-radius: 28px;
	padding: clamp(24px, 3vw, 36px);
}
.tesl-contact-card :where(h2, h3) { color: #fff; }
.tesl-contact-card :where(p, li) { color: var(--l-on-dark) !important; }
.tesl-contact-card a:not(.wp-element-button) { color: var(--l-on-dark-3); }
.tesl-contact-card a:not(.wp-element-button):hover { color: #fff; }
.tesl-phone {
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	font-size: 21px;
	line-height: 1.4;
	color: #fff !important;
	text-decoration: none;
}
.tesl-phone:hover { color: var(--l-rose) !important; text-decoration: underline; }

.tesl-events-card {
	background: var(--l-sand);
	border-radius: 28px;
	padding: clamp(24px, 3vw, 36px);
}
.tesl-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tesl-events li {
	display: grid;
	gap: 4px;
	padding-bottom: 14px;
	border-bottom: 1px solid #E1D5C3;
}
.tesl-events li:last-child { border-bottom: 0; padding-bottom: 0; }
.tesl-events .tesl-when {
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--l-brown);
}
.tesl-events li:first-child .tesl-when { color: var(--l-red); }
.tesl-events .tesl-what { font-size: 17px; line-height: 1.5; color: var(--l-ink); }

/* Dashed "About paying for it" panel. */
.tesl-payfor {
	margin-top: clamp(20px, 3vw, 30px);
	background: #fff;
	border: 2px dashed #B4D4D0;
	border-radius: 24px;
	padding: clamp(24px, 3vw, 34px);
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	align-items: center;
}

.tesl-sticky { position: sticky; top: 120px; align-self: start; }
@media (max-width: 900px) { .tesl-sticky { position: static; } }

/* ==========================================================================
   10. Form
   ========================================================================== */

.tesl-form {
	background: #fff;
	border: 1.5px solid var(--l-border);
	border-radius: 28px;
	padding: clamp(24px, 3vw, 38px);
}
.tesl-form .fluentform .ff-el-group { margin-bottom: 20px; }
.tesl-form .fluentform .ff-el-input--label label {
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	font-size: 15.5px;
	line-height: 1.4;
	color: var(--l-ink);
	margin-bottom: 8px;
}
.tesl-form .fluentform input[type="text"],
.tesl-form .fluentform input[type="email"],
.tesl-form .fluentform input[type="tel"],
.tesl-form .fluentform textarea {
	min-height: 52px;
	padding: 0 16px;
	border: 1.5px solid #E0D6C6;
	border-radius: 14px;
	background: var(--l-ivory);
	font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
	font-size: 17px;
	color: var(--l-ink);
	width: 100%;
	box-shadow: none;
}
.tesl-form .fluentform textarea { padding: 14px 16px; line-height: 1.6; resize: vertical; min-height: 120px; }
.tesl-form .fluentform input:focus,
.tesl-form .fluentform textarea:focus { border-color: var(--l-cta); background: #fff; outline: none; box-shadow: none; }
.tesl-form .fluentform input::placeholder, .tesl-form .fluentform textarea::placeholder { color: #9AA6A6; }
.tesl-form .fluentform .ff-btn-submit {
	min-height: 56px;
	padding: 0 30px;
	border-radius: 999px;
	border: 0;
	background: var(--l-cta);
	color: #fff;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 0 0 var(--l-cta-shadow);
	transition: transform 140ms cubic-bezier(.2, .8, .2, 1), box-shadow 140ms cubic-bezier(.2, .8, .2, 1), background 140ms ease;
}
.tesl-form .fluentform .ff-btn-submit:hover {
	background: var(--l-cta-hover);
	transform: translateY(2px);
	box-shadow: 0 4px 0 0 var(--l-cta-shadow);
}
.tesl-form .ff-message-success {
	font-size: 17px;
	line-height: 1.7;
	color: var(--l-ink);
	background: var(--l-tint);
	border: 1.5px solid var(--l-cta);
	border-radius: 16px;
	padding: 18px 20px;
}

/* ==========================================================================
   11. Header and footer for the light page
   ========================================================================== */

.tesl-utility { background: var(--l-teal); color: var(--l-on-dark-2); }
.tesl-utility > div {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--l-pad-x);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px clamp(10px, 2vw, 26px);
	min-height: 44px;
}
.tesl-utility span { font-size: 13px; line-height: 1.4; color: var(--l-on-dark-2); margin-right: auto; }
.tesl-utility a { font-size: 14px; line-height: 1.4; color: var(--l-on-dark-3); text-decoration: none; padding: 9px 0; }
.tesl-utility a:hover { color: #fff; text-decoration: underline; }

.tesl-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(251, 248, 243, 0.95);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--l-border);
}
.tesl-header__bar {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: 12px var(--l-pad-x);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 26px;
}
.tesl-header__logo { margin-right: auto; display: block; flex: none; }
.tesl-header__logo img { display: block; height: clamp(44px, 5vw, 54px); width: auto; }

/* --------------------------------------------------------------------------
   The mega menu. Three top-level items, each a real link to its landing page,
   each disclosing a full-width panel on hover or keyboard focus. No JS.
   -------------------------------------------------------------------------- */

.tesl-mega { display: flex; flex-wrap: wrap; align-items: center; gap: 6px clamp(8px, 1.6vw, 18px); }

/* Static, so the absolutely-positioned panel resolves against .tesl-header__bar
   and can be pulled out to the full window width. */
.tesl-mega__group { position: static; }

.tesl-mega__trigger {
	position: relative;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	color: var(--l-teal);
	text-decoration: none;
	padding: 12px 16px;
	border-radius: 999px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background 140ms cubic-bezier(.2, .8, .2, 1);
}
.tesl-mega__group:hover > .tesl-mega__trigger,
.tesl-mega__group:focus-within > .tesl-mega__trigger { background: var(--l-tint); color: var(--l-cta-hover); }
.tesl-mega__caret { font-size: 0.72em; opacity: 0.6; }

/* An invisible bridge across the header's padding, so the cursor can travel
   from the trigger down to the panel without the hover dropping. */
.tesl-mega__group:hover > .tesl-mega__trigger::after,
.tesl-mega__group:focus-within > .tesl-mega__trigger::after {
	content: '';
	position: absolute;
	top: 100%;
	left: -50vw;
	right: -50vw;
	height: 18px;
}

.tesl-mega__panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--l-ivory);
	border-top: 1px solid var(--l-border);
	box-shadow: var(--l-shadow-lift);
	z-index: 65;
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.tesl-mega__group:hover > .tesl-mega__panel,
.tesl-mega__group:focus-within > .tesl-mega__panel { display: block; }

.tesl-mega__cols,
.tesl-mega__cards {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(22px, 3vw, 34px) var(--l-pad-x);
	display: grid;
}
.tesl-mega__cols { gap: clamp(16px, 2.4vw, 40px); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tesl-mega__cards { gap: clamp(14px, 2vw, 26px); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.tesl-mega__eyebrow {
	display: block;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--l-brown);
	margin: 0 0 12px;
	padding: 0 12px;
}
.tesl-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tesl-mega__link,
.tesl-mega__card {
	display: block;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background 140ms ease, border-color 140ms ease;
}
.tesl-mega__link { padding: 9px 12px; border-radius: 12px; }
.tesl-mega__card { padding: 14px; border-radius: 16px; }
.tesl-mega__link:hover,
.tesl-mega__card:hover { background: var(--l-tint); border-color: var(--l-border); }

.tesl-mega__t,
.tesl-mega__cardt {
	display: block;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	color: var(--l-ink);
}
.tesl-mega__t { font-size: 16px; line-height: 1.4; }
.tesl-mega__cardt { font-size: 20px; line-height: 1.3; margin-bottom: 6px; letter-spacing: -0.02em; }
.tesl-mega__d,
.tesl-mega__cardd { display: block; color: var(--l-muted); }
.tesl-mega__d { font-size: 14px; line-height: 1.5; margin-top: 2px; }
.tesl-mega__cardd { font-size: 15px; line-height: 1.6; }

/* The button that opens a menu where there is no hover. JavaScript adds it, so
   it only ever appears on a page that can use it; it is hidden on wide screens
   where the panels open on hover instead. */
.tesl-mega__toggle { display: none; }

/* Below the mega-menu breakpoint the panels stack inline under their link and
   open on tap, so touch users can still reach every item. */
@media (max-width: 860px) {
	.tesl-mega { width: 100%; gap: 0; }
	.tesl-mega__group {
		flex: 1 1 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-top: 1px solid var(--l-border);
	}
	.tesl-mega__trigger { margin-right: auto; }
	.tesl-mega__group:hover > .tesl-mega__trigger,
	.tesl-mega__group:focus-within > .tesl-mega__trigger { background: transparent; color: var(--l-teal); }
	.tesl-mega__group:hover > .tesl-mega__trigger::after,
	.tesl-mega__group:focus-within > .tesl-mega__trigger::after { content: none; }
	.tesl-mega__caret { display: none; }

	.tesl-mega__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		flex: none;
		border: 1px solid var(--l-border);
		border-radius: 999px;
		background: #fff;
		color: var(--l-teal);
		font-size: 15px;
		line-height: 1;
		cursor: pointer;
		transition: background 140ms ease, transform 140ms ease;
	}
	.tesl-mega__toggle:hover { background: var(--l-tint); }
	.tesl-mega__group.is-open > .tesl-mega__toggle { background: var(--l-tint); transform: rotate(180deg); }

	.tesl-mega__panel {
		position: static;
		width: auto;
		flex: 1 1 100%;
		transform: none;
		box-shadow: none;
		border-top: 0;
		max-height: none;
	}
	.tesl-mega__group:hover > .tesl-mega__panel,
	.tesl-mega__group:focus-within > .tesl-mega__panel { display: none; }
	.tesl-mega__group.is-open > .tesl-mega__panel { display: block; }

	.tesl-mega__cols,
	.tesl-mega__cards {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 4px 0 18px;
	}
	.tesl-mega__card { padding: 12px; }
}

.tesl-header__cta {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--l-cta);
	color: #fff !important;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 6px 0 0 var(--l-cta-shadow);
	transition: transform 140ms cubic-bezier(.2, .8, .2, 1), box-shadow 140ms cubic-bezier(.2, .8, .2, 1), background 140ms ease;
}
.tesl-header__cta:hover,
.tesl-mega__group:hover > .tesl-header__cta,
.tesl-mega__group:focus-within > .tesl-header__cta {
	background: var(--l-cta-hover);
	color: #fff !important;
	transform: translateY(2px);
	box-shadow: 0 4px 0 0 var(--l-cta-shadow);
}

/* The reading bar sits open on this design rather than hiding in a popover. */
.tesl-reading { background: var(--l-sand); border-top: 1px solid var(--l-border); }
.tesl-reading > div {
	max-width: 1280px;
	margin: 0 auto;
	padding: 8px var(--l-pad-x);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
}
.tesl-reading p { font-size: 13.5px; line-height: 1.4; color: var(--l-brown) !important; margin: 0 auto 0 0; }
.tesl-reading button {
	min-height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1.5px solid #DCCDB8;
	background: #fff;
	color: var(--l-teal);
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background 140ms ease, border-color 140ms ease;
}
.tesl-reading button:hover { background: var(--l-tint); border-color: var(--l-cta); }

.tesl-footer { background: var(--l-teal); color: var(--l-on-dark-2); }
.tesl-footer__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(44px, 5vw, 64px) var(--l-pad-x);
	display: grid;
	gap: clamp(28px, 4vw, 48px);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.tesl-footer p, .tesl-footer li { font-size: 16px; line-height: 1.7; color: var(--l-on-dark-2); }
.tesl-footer a { color: var(--l-on-dark-3); text-decoration: none; }
.tesl-footer a:hover { color: #fff; text-decoration: underline; }
.tesl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tesl-footer__logo { display: block; height: 56px; width: auto; margin-bottom: 20px; }
.tesl-footer__label {
	display: block;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9DBDBB;
	margin-bottom: 16px;
}
.tesl-badges { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.tesl-badges a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1.5px solid #24564F;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
}
.tesl-badges a:hover { border-color: var(--l-on-dark-3); text-decoration: none; }
.tesl-footer__bar { border-top: 1px solid #24564F; }
.tesl-footer__bar > div {
	max-width: 1280px;
	margin: 0 auto;
	padding: 18px var(--l-pad-x);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
}
.tesl-footer__bar ul { display: flex; flex-wrap: wrap; gap: 18px; }

/* ==========================================================================
   12. Rhythm and motion
   ========================================================================== */

.tesl h2 { margin: 0 0 14px; }
.tesl h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; }
.tesl p { margin: 0 0 16px; }
.tesl p:last-child { margin-bottom: 0; }
.tesl figure { margin: 0; }
.tesl .wp-block-buttons { margin: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.tesl .tesl-card > :last-child { margin-bottom: 0; }

.tesl h1 {
	font-weight: 800;
	font-size: clamp(36px, 5.2vw, 64px);
	line-height: 1.04;
	letter-spacing: -0.035em;
	margin: 0 0 30px;
}
.tesl-sec h2 { font-size: clamp(28px, 3.6vw, 46px); }

html[data-motion="off"] .tesl-floatcard { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .tesl-floatcard { animation: none !important; } }

/* A centred line that closes a section, and the strong call to action that
   sends a family down to the form. These mirror .tes-centerline and
   .tes-cta-strong on the dark design. */
.tesl-centerline {
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-weight: 700;
	letter-spacing: -0.03em;
	font-size: clamp(21px, 2.4vw, 30px);
	line-height: 1.25;
	color: var(--l-ink) !important;
	text-align: center;
	text-wrap: balance;
	max-width: 26ch;
	margin: clamp(32px, 4.5vw, 56px) auto 0;
}

.tesl .tesl-cta-strong { margin-top: clamp(30px, 4vw, 50px); }
.tesl .tesl-cta-strong .wp-block-button__link {
	background: var(--l-red);
	color: #fff;
	font-size: 18px;
	padding: 22px 40px;
	box-shadow: 0 6px 0 0 var(--l-red-dark);
}
.tesl .tesl-cta-strong .wp-block-button__link:hover {
	background: var(--l-red-dark);
	box-shadow: 0 4px 0 0 var(--l-red-dark);
}
.tesl p.tesl-cta-note { margin-top: 16px; font-size: 15px; color: var(--l-muted) !important; }

/* The draw-on-scroll strike-through is shared with the dark design; only the
   ink colour changes here. */
.tesl .tes-strike { color: var(--l-muted) !important; }
.tesl .tes-strike .tes-strike__ink {
	background-image: linear-gradient(var(--l-red), var(--l-red));
}
html .tesl .tes-strike { text-decoration-color: var(--l-red); }

/* The closing section: headline and buttons sit level with each other.
   The closer is the only arched section whose grid is a direct child. */
.tesl-sec--arch > .tesl-grid--wide { align-items: center; }

/* Angled clips cause trouble on narrow screens — straighten them out. */
@media (max-width: 700px) {
	.tesl-sec--angle-left, .tesl-sec--angle-right { clip-path: none; margin-top: 0; padding-top: clamp(56px, 7vw, 96px); }
	.tesl-photo-caption { max-width: 100%; }
	.tesl-hero-art { min-height: 320px; }
}