/* ═══════════════════════════════════════════════════════════════════════════════
   MAESTRO PAGE
   Extends the site's established design language — page-hero, page-splits,
   glass cards, ce-steps, home-cta all reused unchanged. This file only adds
   the section types unique to Maestro: motivational hook, overview video,
   reporting tab showcase, comparison strip, stats bar and testimonial grid.
═══════════════════════════════════════════════════════════════════════════════ */


/* ── Motivational hook ────────────────────────────────────────────────────────
   Cream background — visual break between dark hero and dark overview video.
   Centred, generous white space. Peer-to-peer tone, no CTA.                   */

.ce-mae-hook {
	background: #fff;
	padding: 5rem 0 2rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	position: relative;
	overflow: clip;
}

.ce-mae-hook::before {
	content: '';
	position: absolute;
	width: 450px;
	height: 450px;
	background: #f9f9f9;
	border-radius: 2.75rem;
	transform: rotate(45deg);
	top: -80px;
	left: -90px;
	pointer-events: none;
	z-index: 0;
}

.ce-mae-hook::after {
	content: '';
	position: absolute;
	width: 260px;
	height: 260px;
	background: #f9f9f9;
	border-radius: 2rem;
	transform: rotate(45deg);
	top: 420px;
	left: 178px;
	pointer-events: none;
	z-index: 0;
}

.ce-mae-hook .site-container {
	position: relative;
	z-index: 1;
}

.ce-mae-hook__inner {
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Title row — icon badge + heading, centred, mirrors page-split__heading-row */
.ce-mae-hook__title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
}

.ce-mae-hook__heading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #646464;
	line-height: 1.25;
	margin: 0;
}

/* Body paragraphs */
.ce-mae-hook__body {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	color: #4a5a6a;
	line-height: 1.85;
	margin: 0;
}

/* Bridge — the standout takeaway, just below heading size */
.ce-mae-hook__bridge {
	font-family: var(--ci-font-primary);
	font-size: clamp(1.475rem, 2.35vw, 2.075rem);
	font-weight: 700;
	color: #253d47;
	line-height: 1.25;
	margin: 0;
}

@media (max-width: 600px) {
	.ce-mae-hook { padding: 3.5rem 0; }
	.ce-mae-overview { padding: 3rem 0; }
}


/* ── Overview video ───────────────────────────────────────────────────────────
   Deep burgundy background. Full-width trigger panel.                         */

.ce-mae-overview {
	background: #253d47;
	padding: 5rem 0;
}

/* Title row — icon badge + heading centred, mirrors other sections */
.ce-mae-overview__title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	margin-bottom: 0.875rem;
}

/* Override icon badge for dark background */
.ce-mae-overview .page-split__icon-badge {
	background: rgba(250, 240, 244, 0.9);
	border-color: #af4d76;
	color: #af4d76;
	--fa-primary-color: #af4d76;
	--fa-secondary-color: #af4d76;
	--fa-secondary-opacity: 0.4;
}

.ce-mae-overview__heading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #ffffff;
	margin: 0;
	line-height: 1.25;
}

.ce-mae-overview__sub {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
	max-width: 780px;
	margin: 0 auto 3rem;
	line-height: 1.75;
}

/* Full-width video trigger */
.ce-mae-overview__trigger {
	width: 100%;
	position: relative;
	border-radius: 1.25rem;
	overflow: clip;
	box-shadow:
		0 24px 64px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(255, 255, 255, 0.07);
	cursor: pointer;
	display: block;
}

.ce-mae-overview__trigger img {
	width: 100%;
	display: block;
	vertical-align: top;
}

.ce-mae-overview__placeholder {
	aspect-ratio: 16 / 9;
	background: #d0d4d8;
}

/* Playing in place. The panel keeps the shape the poster gave it so the page
   does not jump when the image is swapped for the player, and the cursor stops
   claiming there is anything left to click. */
.ce-mae-inline-video.is-playing {
	aspect-ratio: 16 / 9;
	background: #000;
	cursor: default;
}

.ce-mae-inline-video.is-playing iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

/* Duration badge */
.ce-mae-overview__duration {
	position: absolute;
	bottom: 1.25rem;
	right: 1.25rem;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	padding: 0.3rem 0.65rem;
	border-radius: 9999px;
	z-index: 3;
	pointer-events: none;
}

/* No-video notice */
.ce-mae-overview__video-notice {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(113, 148, 126, 0.25);
	border: 1px solid rgba(113, 148, 126, 0.4);
	border-radius: 9999px;
	padding: 0.4rem 1rem;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: rgba(255, 255, 255, 0.65);
	pointer-events: none;
	white-space: nowrap;
	z-index: 3;
}

.ce-mae-overview__video-notice i {
	color: #71947e;
	font-size: 0.875rem;
	--fa-primary-color: #71947e;
	--fa-secondary-color: rgba(113, 148, 126, 0.4);
}


/* ── Apple-style feature carousel (comparison prototype) ──────────────────────
   TEMPORARY — sits directly under the overview video for a side-by-side look.
   Remove alongside [ce_mae_apple_carousel] and its template call once a
   decision is made either way.                                                */

.mae-carousel {
	background: #253d47;
	padding: 4rem 0 4rem;
	overflow: hidden;
}

.mae-carousel__title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	margin-bottom: 0.875rem;
}

.mae-carousel .page-split__icon-badge {
	background: rgba(250, 240, 244, 0.9);
	border-color: #af4d76;
	color: #af4d76;
	--fa-primary-color: #af4d76;
	--fa-secondary-color: #af4d76;
	--fa-secondary-opacity: 0.4;
}

.mae-carousel__heading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #ffffff;
	margin: 0;
	line-height: 1.25;
}

.mae-carousel__sub {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
	max-width: 780px;
	margin: 0 auto 3rem;
	line-height: 1.75;
}

.mae-carousel__track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0.5rem max(2rem, calc((100vw - 1280px) / 2 + 2rem)) 1.5rem;
	margin: 0 0 1.5rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
}

.mae-carousel__track::-webkit-scrollbar {
	display: none;
}

.mae-carousel__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.mae-carousel__card {
	flex: 0 0 min(640px, 82vw);
	scroll-snap-align: center;
	background: #1c2e37;
	border-radius: 1.25rem;
	padding: 2rem;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
	overflow: hidden;
	user-select: none;
}

.mae-carousel__card-header {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 1.25rem;
}

.mae-carousel__card-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mae-carousel__card-list li {
	position: relative;
	padding-left: 1.1rem;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-body);
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.6;
}

.mae-carousel__card-list li:not(:last-child) {
	margin-bottom: 0.6rem;
}

.mae-carousel__card-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 0.35rem;
	height: 0.35rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
}

.mae-carousel__card-header .page-split__icon-badge {
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1rem;
}

.mae-carousel__card-title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: #ffffff;
	margin: 0;
}

/* Apple-style playback control — one shared bar for the whole carousel
   (not per card): a pill of position dots plus a play/pause button that
   auto-advances through the cards. */
.mae-carousel__scrubber {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

.mae-carousel__dots {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	background: #232326;
	border-radius: 9999px;
	padding: 0.6rem 0.85rem;
}

.mae-carousel__dot {
	flex: 0 0 auto;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.4);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: width 0.2s ease, background 0.2s ease;
}

.mae-carousel__dot:hover {
	background: rgba(255, 255, 255, 0.6);
}

.mae-carousel__dot.is-active {
	width: 1.75rem;
	background: rgba(255, 255, 255, 0.85);
}

.mae-carousel__play {
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: #232326;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 0.9rem;
	padding-left: 0.15em;
	cursor: pointer;
}

.mae-carousel__play:hover {
	background: #323236;
}

.mae-carousel__play.is-playing {
	padding-left: 0;
}

@media (max-width: 600px) {
	.mae-carousel { padding: 3rem 0; }
	.mae-carousel__card { flex-basis: 86vw; padding: 1.5rem; }
}


/* ── Video trigger overlay (on page-split__image and overview trigger) ────────
   Play button centred on any panel. Matches the site's glass aesthetic.       */

.mae-video-panel {
	position: relative;
	cursor: pointer;
	overflow: clip;
}

.mae-video-panel::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.22);
	transition: background 0.25s ease;
	z-index: 1;
}

.mae-video-panel:hover::after {
	background: rgba(0, 0, 0, 0.36);
}

.mae-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	pointer-events: none;
}

.mae-video-play__circle {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	color: #1e2d3d;
	padding-left: 0.2em;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(255, 255, 255, 0.2);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.mae-video-panel:hover .mae-video-play__circle {
	transform: scale(1.08);
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45), 0 0 0 8px rgba(255, 255, 255, 0.22);
}

.mae-video-play__label {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
	/* Sentence case, like the rest of the site. The wide tracking stays — it
	   was doing the work of holding the letters apart over a photograph, and
	   that job did not go away with the capitals. */
	letter-spacing: 0.04em;
}

/* Larger play button for the overview section */
.mae-video-play--large .mae-video-play__circle {
	width: 6.5rem;
	height: 6.5rem;
	font-size: 2rem;
}


/* ── DaCast video modal ───────────────────────────────────────────────────────*/

/* Opening animation — see also .cs-lm-overlay and .ce-ofsted-modal, which now
   use the same curve and the same card entrance.

   This one used to fade the wrapper from 0 to 1 over 0.28s and do nothing else,
   so the card did not move at all: it materialised rather than opened, which is
   what made it read as a flash. The other two modals both animated their panel;
   this was the odd one out.

   0.24s on a strong ease-out rather than 0.28s on symmetric `ease`. `ease` idles
   before it accelerates, which costs perceived speed at the front of a short
   animation; cubic-bezier(0.16, 1, 0.3, 1) leaves immediately and decelerates
   into place, so it measures faster AND lands softer. */
.mae-video-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	align-items: center;
	justify-content: center;

	/* display: none while closed, exactly as .ce-ofsted-modal does it.

	   This replaced a hand-built two-stage entrance — the dim fading up
	   alone, then the card following once the page had been locked behind
	   it. That existed to hide work the open does, on the theory that the
	   work was what flashed. It wasn't: the flash was the phone's own tap
	   highlight painting a grey wash over the card, and once that was
	   removed the staging was solving a problem that no longer existed while
	   costing a quarter second before anything moved.

	   The Ofsted framework modals never had any of it and always read
	   better, so this is now the same mechanism. display: none also means
	   the modal is not painted, not composited and not in the accessibility
	   tree while closed — no layer to keep, nothing to leak a frame. */
	display: none;
}

/* One class, and both animations start on the same frame. */
.mae-video-modal.is-open {
	display: flex;
	animation: ce-modal-fadein 0.18s ease-out;
}

.mae-video-modal.is-open .mae-video-modal__container {
	animation: ce-modal-panel-in 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.mae-video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);

	/* Belt and braces against scroll chaining: overflow: hidden holds the
	   document, but iOS will still let a touch drag the page under an
	   overlay unless something refuses the gesture. */
	touch-action: none;
}

/* White card container */
.mae-video-modal__container {
	position: relative;
	z-index: 1;
	width: min(92vw, 680px);
	background: #ffffff;
	border-radius: 1.5rem;
	overflow: clip;
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
}

/* Close button — inside the card, top-right corner */
.mae-video-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 10;
	background: rgba(0, 0, 0, 0.07);
	border: none;
	border-radius: 50%;
	width: 2.25rem;
	height: 2.25rem;
	color: #4a5a6a;
	font-size: 0.95rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.18s ease, color 0.18s ease;
}

.mae-video-modal__close:hover {
	background: rgba(0, 0, 0, 0.14);
	color: #1e2d3d;
}

/* Inner padded body */
.mae-video-modal__body {
	padding: 2.25rem 2.25rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Icon + heading row */
.mae-video-modal__header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-right: 2.5rem; /* clear the close button */
}

.mae-video-modal__icon-badge {
	width: 3rem;
	height: 3rem;
	border-radius: 0.75rem;
	background: #f0f0ee;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	color: #71947e;
	flex-shrink: 0;
}

/* Icon badge colour — matches the card's pastel tint */
.mae-video-modal__icon-badge[data-modal-color="engage"] {
	background: rgba(249, 157, 49, 0.35);
	color: var(--ci-color-engage);
	--fa-primary-color: var(--ci-color-engage);
	--fa-secondary-color: rgba(249, 157, 49, 0.5);
}
.mae-video-modal__icon-badge[data-modal-color="develop"] {
	background: rgba(175, 77, 118, 0.28);
	color: var(--ci-color-develop);
	--fa-primary-color: var(--ci-color-develop);
	--fa-secondary-color: rgba(175, 77, 118, 0.42);
}
.mae-video-modal__icon-badge[data-modal-color="innovate"] {
	background: rgba(83, 141, 169, 0.32);
	color: var(--ci-color-innovate);
	--fa-primary-color: var(--ci-color-innovate);
	--fa-secondary-color: rgba(83, 141, 169, 0.48);
}
.mae-video-modal__icon-badge[data-modal-color="olive"] {
	background: rgba(207, 214, 102, 0.40);
	color: #8a9020;
	--fa-primary-color: #8a9020;
	--fa-secondary-color: rgba(207, 214, 102, 0.6);
}

.mae-video-modal__title {
	font-family: var(--ci-font-primary);
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	font-weight: 700;
	color: #1e2d3d;
	margin: 0;
	line-height: 1.25;
}

.mae-video-modal__desc {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-body);
	color: #6a7a8a;
	line-height: 1.75;
	margin: 0;
}

/* Video area */
.mae-video-modal__video-wrap {
	position: relative;
}

/* Grey placeholder — shown when no video URL is set */
.mae-video-modal__placeholder {
	aspect-ratio: 16 / 9;
	background: #d4d8dc;
	border-radius: 0.75rem;
}

/* Live embed — hidden until video URL supplied */
.mae-video-modal__embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: 0.75rem;
	overflow: clip;
	background: #000;
}

.mae-video-modal__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

@media (max-width: 520px) {
	.mae-video-modal__container {
		width: 100%;
		/* Content (title + desc + 16:9 placeholder) can be taller than the
		   viewport — scroll internally rather than overflowing off-screen. */
		max-height: 90vh;
		overflow-y: auto;
	}
	.mae-video-modal__body { padding: 1.75rem 1.5rem 1.5rem; }
}


/* ── Mid-page CTA — contained card, not a page-ending section ───────────────
   Cream background keeps the page flowing. The burgundy card is an exit ramp
   for visitors who are already convinced — not a hard stop.                   */

.ce-mae-cta-small {
	background: #f9f9f9;
	padding: 4rem 0;
}

.ce-mae-cta-small__card {
	background: rgba(175, 77, 118, 0.11);
	backdrop-filter: blur(24px) saturate(1.4) brightness(1.02);
	-webkit-backdrop-filter: blur(24px) saturate(1.4) brightness(1.02);
	border: 1px solid rgba(175, 77, 118, 0.25);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		0 8px 40px rgba(175, 77, 118, 0.08);
	border-radius: 1.5rem;
	padding: 1.875rem 3rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.5rem;
}

.ce-mae-cta-small .ce-mae-cta-small__btn {
	background: #f99d31;
	border-color: #f99d31;
	color: #ffffff;
}

.ce-mae-cta-small .ce-mae-cta-small__btn:hover {
	background: #e08a1e;
	border-color: #e08a1e;
}

.ce-mae-cta-small__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: center;
	gap: 0.4rem;
}

.ce-mae-cta-small__heading {
	font-family: var(--ci-font-primary);
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	font-weight: 700;
	color: #253d47;
	margin: 0;
	line-height: 1.3;
}

.ce-mae-cta-small__sub {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-body);
	color: #646464;
	margin: 0;
	line-height: 1.6;
}

.ce-mae-cta-small__btn {
	flex-shrink: 0;
	align-self: center;
}

/* Hide empty paragraphs injected by wpautop */
.ce-mae-cta-small p:empty { display: none; }

@media (max-width: 680px) {
	.ce-mae-cta-small {
		padding: 2.5rem 0;
	}

	.ce-mae-cta-small__card {
		flex-direction: column;
		align-items: flex-start;
		padding: 2rem 1.75rem;
		gap: 1.5rem;
	}
}


/* ── Reporting tabbed showcase ────────────────────────────────────────────────
   Cream background (matches ce-steps, ce-feature-list sections).
   Tabs: glass cards using site's established card pattern.
   Active tab: moss-tinted glass (same as ce-checklist--grid items).           */


/* ── Foundational reassurance — uses site-standard ce-feature-list cards ────
   Only overrides needed: white background + diamonds + title row + 2-col grid  */

.ce-mae-reassurance {
	background: #fff;
	position: relative;
	overflow: clip;
}

.ce-mae-reassurance::before {
	content: '';
	position: absolute;
	width: 450px;
	height: 450px;
	background: #f9f9f9;
	border-radius: 2.75rem;
	transform: rotate(45deg);
	top: -80px;
	left: -90px;
	pointer-events: none;
	z-index: 0;
}

.ce-mae-reassurance::after {
	content: '';
	position: absolute;
	width: 260px;
	height: 260px;
	background: #f9f9f9;
	border-radius: 2rem;
	transform: rotate(45deg);
	top: 420px;
	left: 178px;
	pointer-events: none;
	z-index: 0;
}

.ce-mae-reassurance .site-container {
	position: relative;
	z-index: 1;
}

.ce-mae-reassurance__title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	margin-bottom: 0.75rem;
}

.ce-mae-reassurance .ce-feature-list__heading {
	color: #646464;
}

.ce-mae-reassurance__sub {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	color: #7a8a9a;
	text-align: center;
	margin: 0 auto 3rem;
	line-height: 1.7;
}

/* 2-col grid override — feature-list defaults to 3-col */
.ce-mae-reassurance__grid {
	grid-template-columns: 1fr 1fr;
}

/* Cards here are twice as wide as the standard 3-col layout, so the same
   copy wraps to fewer, longer lines — the base 13rem min-height (tuned for
   the narrower 3-col cards) leaves a block of empty space below the text.
   Let height hug the content instead. */
.ce-mae-reassurance .ce-feature-list__item {
	min-height: 0;
}

/* Icon + title on same row */
.ce-mae-reassurance .ce-feature-list__header {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.ce-mae-reassurance .ce-feature-list__badge {
	font-size: 1.75rem;
	flex-shrink: 0;
}

@media (max-width: 680px) {
	.ce-mae-reassurance__grid { grid-template-columns: 1fr; }
}

.ce-mae-reporting {
	background: #ffffff;
	padding: 5rem 0;
	position: relative;
	overflow: clip;
}

.ce-mae-reporting::before {
	content: '';
	position: absolute;
	width: 450px;
	height: 450px;
	background: #f9f9f9;
	border-radius: 2.75rem;
	transform: rotate(45deg);
	top: -80px;
	left: -90px;
	pointer-events: none;
	z-index: 0;
}

.ce-mae-reporting::after {
	content: '';
	position: absolute;
	width: 260px;
	height: 260px;
	background: #f9f9f9;
	border-radius: 2rem;
	transform: rotate(45deg);
	top: 420px;
	left: 178px;
	pointer-events: none;
	z-index: 0;
}

.ce-mae-reporting .site-container {
	position: relative;
	z-index: 1;
}

.ce-mae-reporting__heading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #646464;
	text-align: center;
	margin: 0 0 0.875rem;
	line-height: 1.25;
}

.ce-mae-reporting__sub {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	color: var(--ci-color-text-muted);
	text-align: center;
	max-width: 600px;
	margin: 0 auto 3rem;
	line-height: 1.75;
}

/* Feature card grid — pastel tint cards, matching home-what colour palette */

.ce-mae-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

/* ── One column at iPad portrait and below ───────────────────────────────────
   Three tiles across a tablet leaves each card about 240px wide, and the blurb
   inside measures 22 characters a line at 820px — 25 at 900, 19 at 701. These
   are short blurbs rather than prose, so a narrow column survives longer here
   than it would in a paragraph, but at iPad portrait it is two or three words
   a line.

   900 rather than a device width: that is where the tiles stop being wide
   enough to read across. iPad landscape (1024, 29 characters) and every
   desktop width keep the three-up grid the section was designed as. */
@media (max-width: 900px) {
	.ce-mae-feature-grid {
		grid-template-columns: 1fr;
	}

	/* Full width is too much the other way: a one-line blurb given the whole
	   tablet runs to 90 characters at 900px against a comfortable 75. 40rem lands at 74
	   here — this card body is a step smaller than the page text, so the same
	   cap in rem buys fewer characters than it does elsewhere. Capping
	   the paragraph rather than the card keeps the tinted panel full width, so
	   the section still reads as a stack of cards. */
	.ce-mae-feature-card__desc {
		max-width: 40rem;
	}
}

/* Native <button> — full card is the click target.

   The surface below is .ce-feature-list__item's, value for value: the same
   radius, padding, gap, hairline border, glass shadow and backdrop blur that
   the shared card uses on 24 other files. This card had drifted to its own
   set — 20px radius against 24, 22px padding against 28/24, a 1.5px border,
   and a plain 0 2px 10px drop shadow with no backdrop blur and none of the
   inset white top highlight — which left it reading flatter than the cards
   sitting a few sections above it on this same page.

   The shared card's 13rem min-height is deliberately not copied. It exists to
   stop a row of short cards collapsing, and .ce-mae-reassurance already turns
   it off for its own cards a few sections up — applied here it bound six of
   the nine, holding them 11px taller than their content and putting slack
   above the play row. Matching the cards beside it means leaving it out.

   What stays local is what this card genuinely adds: it is a <button> with a
   video behind it, so cursor, text-align and the __play row below are its
   own. The look is not. */
/* SUBGRID over all three rows — header, paragraph, play label — so the cards
   in a row agree on where each part starts.

   Same defect and same cure as the header-plus-paragraph cards in
   feature-list.css, but this card is its own component, so that rule's shape
   test excludes it and the span is stated below instead. "Class Attainment"
   wrapping to two lines while "Group Analysis" stays on one pushed one
   paragraph 36px below its neighbour's.

   The span is worked out from the card's SHAPE, not fixed, because this
   component is used with two different card structures: Maestro's cards carry
   a "Watch video" label as a third child, the assessment page's do not. A flat
   span 3 made every assessment card claim a row it never filled — 19px of dead
   space at the bottom of all twelve, and each card 18px taller than its
   content. Matching the span to the child count is the only version that is
   correct for both.

   The play label keeps its position: it already sat on a shared line via
   margin-top: auto against equal-height cards, and under subgrid it sits on a
   shared line because it has a track of its own. Row three simply replaces the
   auto margin as the thing that aligns it, so the label does not move.

   row-gap restated because a subgrid inherits its parent's gutters — without
   it the 1.25rem between cards would open up inside them, replacing the 1rem
   the flex gap gave. */
.ce-mae-feature-card {
	display: grid;
	grid-template-rows: subgrid;
	row-gap: 1rem;
	align-content: start;
	justify-items: start;
	padding: 1.75rem 1.5rem;
	border-radius: 1.5rem;
	border: 1px solid transparent;
	backdrop-filter: blur(20px) saturate(1.3);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 20px rgba(0, 0, 0, 0.05);
	text-align: left;
	width: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	/* No press appearance at all. This is a <button>, so a phone puts its own
	   translucent grey wash over it on touch — that was the dim. Killing the
	   highlight rather than restyling it, because the confirmation the tap
	   registered is the modal itself: the screen darkens and the card floats
	   in, which says "pressed" far more clearly than a grey flash on something
	   that is about to be covered up anyway. */
	-webkit-tap-highlight-color: transparent;
}

/* The span matches the card's own child count, so one component serves both
   structures. :nth-child(n):last-child means "the nth child is also the last",
   i.e. exactly n children — the same shape test feature-list.css uses. */
.ce-mae-feature-card:has(> :nth-child(3):last-child) {
	grid-row: span 3;
}

.ce-mae-feature-card:has(> :nth-child(2):last-child) {
	grid-row: span 2;
}


/* Belt and braces: whatever the UA does for :active or :focus on a button,
   this card looks the same pressed as it does at rest. :focus-visible is
   deliberately NOT included — keyboard users still get their ring. */
.ce-mae-feature-card:active,
.ce-mae-feature-card:focus {
	outline: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 20px rgba(0, 0, 0, 0.05);
	transform: translateZ(0);
	opacity: 1;
	filter: none;
}

/* Suppress <br> elements injected by WordPress wpautop between/inside cards */
.ce-mae-feature-grid br,
.ce-mae-feature-card br { display: none; }

/* Gated to a real cursor. Ungated, a tap applied :hover and left it applied
   until the next tap somewhere else — a card that stayed visibly changed long
   after the press, which is the other half of "should not dim or anything". */
@media (hover: hover) and (pointer: fine) {
	button.ce-mae-feature-card:hover {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 28px rgba(0, 0, 0, 0.08);
	}
}

/* The pointer and the lift belong to the button form only. This component is
   rendered two ways — a <button> that opens a video modal, and a plain <div>
   on the assessment page and wherever the videos are switched off — and a
   card that offers a hand cursor and lifts under the mouse is promising a
   click that never happens. */
button.ce-mae-feature-card {
	cursor: pointer;
}

/* Header row — icon badge + title side by side */
.ce-mae-feature-card__header {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	width: 100%;
}

/* Icon — bare, colour-matched to card accent (no badge box).

   1.75rem, not the 2.25rem this used to carry. feature-list.css declares
   2.25rem as the base, but fourteen page stylesheets step it down to 1.75rem
   for cards of this size, so that — not the base — is what a feature card's
   icon looks like on this site. At 2.25rem it was 29% larger than the icon on
   the cards further up the same page. */
.ce-mae-feature-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
	background: none;
	flex-shrink: 0;
}

.ce-mae-feature-card__title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: #1e2d3d;
	line-height: 1.3;
	display: block;
}

.ce-mae-feature-card__desc {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-body);
	/* The shared card's muted grey. #4a5a6a — a blue-grey used nowhere else in
	   the card system — was the only thing separating this body copy from
	   .ce-feature-list__desc, which matches it in every other respect. */
	color: var(--ci-color-text-muted);
	line-height: 1.65;
	display: block;
}

/* Play indicator — icon + label, pushed to bottom-left */
.ce-mae-feature-card__play {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	letter-spacing: 0.02em;
	opacity: 0.6;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.ce-mae-feature-card__play i {
	font-size: 1rem;
}

@media (hover: hover) and (pointer: fine) {
	.ce-mae-feature-card:hover .ce-mae-feature-card__play {
		opacity: 1;
	}
}

/* Play indicator colour — matches card accent (duotone vars included) */
.ce-mae-feature-card:nth-child(4n+1) .ce-mae-feature-card__play { color: var(--ci-color-engage);   --fa-primary-color: var(--ci-color-engage);   --fa-secondary-color: rgba(249,157,49,0.4); }
.ce-mae-feature-card:nth-child(4n+2) .ce-mae-feature-card__play { color: var(--ci-color-develop);  --fa-primary-color: var(--ci-color-develop);  --fa-secondary-color: rgba(175,77,118,0.35); }
.ce-mae-feature-card:nth-child(4n+3) .ce-mae-feature-card__play { color: var(--ci-color-innovate); --fa-primary-color: var(--ci-color-innovate); --fa-secondary-color: rgba(83,141,169,0.4); }
.ce-mae-feature-card:nth-child(4n+4) .ce-mae-feature-card__play { color: #71947e;                  --fa-primary-color: #71947e;                  --fa-secondary-color: rgba(113,148,126,0.4); }

/* 4-step colour cycling — card bg is a light pastel tint of the brand colour,
   icon is a more saturated version of the same hue.

   The tints below are .ce-feature-list__item's, exactly. This set had drifted
   on every step — alphas a point or two off on the first three, and the
   fourth a different colour entirely: olive #8a9020 where the shared card
   cycles to sage #71947e. Olive appears in two stylesheets on the site; sage
   appears in nine, including feature-list.css itself, so sage is the fourth
   brand step and this was the outlier. */

.ce-mae-feature-card:nth-child(4n+1) {
	background: rgba(249, 157, 49, 0.13);
	border-color: rgba(249, 157, 49, 0.3);
}
.ce-mae-feature-card:nth-child(4n+1) .ce-mae-feature-card__icon {
	color: var(--ci-color-engage);
	--fa-primary-color: var(--ci-color-engage);
	--fa-secondary-color: rgba(249, 157, 49, 0.4);
}

.ce-mae-feature-card:nth-child(4n+2) {
	background: rgba(175, 77, 118, 0.11);
	border-color: rgba(175, 77, 118, 0.25);
}
.ce-mae-feature-card:nth-child(4n+2) .ce-mae-feature-card__icon {
	color: var(--ci-color-develop);
	--fa-primary-color: var(--ci-color-develop);
	--fa-secondary-color: rgba(175, 77, 118, 0.4);
}

.ce-mae-feature-card:nth-child(4n+3) {
	background: rgba(83, 141, 169, 0.13);
	border-color: rgba(83, 141, 169, 0.28);
}
.ce-mae-feature-card:nth-child(4n+3) .ce-mae-feature-card__icon {
	color: var(--ci-color-innovate);
	--fa-primary-color: var(--ci-color-innovate);
	--fa-secondary-color: rgba(83, 141, 169, 0.4);
}

.ce-mae-feature-card:nth-child(4n+4) {
	background: rgba(113, 148, 126, 0.13);
	border-color: rgba(113, 148, 126, 0.28);
}
.ce-mae-feature-card:nth-child(4n+4) .ce-mae-feature-card__icon {
	color: #71947e;
	--fa-primary-color: #71947e;
	--fa-secondary-color: rgba(113, 148, 126, 0.4);
}

@media (max-width: 700px) {
	.ce-mae-reporting { padding: 3rem 0; }
	.ce-mae-feature-grid { grid-template-columns: 1fr; }
}


/* ── Comparison table ─────────────────────────────────────────────────────────
   Ported from the international site's design-comparison component.
   Gold (#c6a54e) replaced with Maestro burgundy (#692D46).                   */

.ce-mae-compare {
	background: #253d47;
	padding: 5rem 0;
}

/* Section header */
.design-comparison__header {
	text-align: center;
	margin-bottom: 3rem;
}

.design-comparison__heading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #ffffff;
	margin: 0;
	line-height: 1.25;
}

/* Table wrapper — liquid glass */
.design-comparison__table-wrap {
	max-width: 740px;
	margin: 0 auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(48px) saturate(1.6) brightness(1.12);
	-webkit-backdrop-filter: blur(48px) saturate(1.6) brightness(1.12);
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 12px 40px rgba(37, 61, 71, 0.3);
}

/* Table base */
.design-comparison__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--ci-font-primary);
	background-color: transparent;
	min-width: 420px;
}

/* Header row */
.design-comparison__table thead th {
	padding: 1rem 1.25rem;
	font-family: var(--ci-font-primary);
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
}

.design-comparison__col-feature {
	text-align: left !important;
	width: 58%;
	background-color: rgba(255, 255, 255, 0.35);
	color: #1e2d3d;
}

.design-comparison__col-ci {
	width: 21%;
	background-color: #253d47;
	color: #ffffff;
}

.design-comparison__col-other {
	width: 21%;
	background-color: rgba(220, 220, 228, 0.55);
	color: #1e2d3d;
}

.design-comparison__brand { color: #ffffff; }

/* Body rows */
.design-comparison__table tbody tr {
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	transition: background-color 0.15s ease;
}

.design-comparison__table tbody tr:last-child { border-bottom: none; }

@media (hover: hover) and (pointer: fine) {
	.design-comparison__table tbody tr:hover { background-color: rgba(37, 61, 71, 0.05); }
}

.design-comparison__table tbody td {
	padding: 0.85rem 1.25rem;
	font-size: var(--ci-text-card-body);
	color: #3a4a5a;
	line-height: 1.5;
	text-align: center;
}

.design-comparison__table tbody td:first-child {
	text-align: left;
	color: #1e2d3d;
	font-weight: 500;
}

/* Cornerstones column — light navy tint */
.design-comparison__table tbody td:nth-child(2) {
	background-color: rgba(37, 61, 71, 0.08);
}

/* Cell tints by result type (applies to Other providers column — specificity
   means nth-child(2) above wins for the Cornerstones column) */
.design-comparison__table td:has(.design-comparison__cross)   { background-color: rgba(185, 28, 28, 0.06); }
.design-comparison__table td:has(.design-comparison__tick)    { background-color: rgba(34, 197, 94, 0.06); }
.design-comparison__table td:has(.design-comparison__limited) { background-color: rgba(198, 165, 78, 0.07); }

/* Tick & cross icons */
.design-comparison__tick,
.design-comparison__cross {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1;
}

.design-comparison__tick  { background-color: rgba(34, 197, 94, 0.15);  color: #16a34a; }
.design-comparison__cross { background-color: rgba(185, 28, 28, 0.10);  color: #b91c1c; }

/* Limited pill */
.design-comparison__limited {
	display: inline-block;
	font-size: var(--ci-text-utility);
	font-weight: 600;
	color: #92620a;
	background-color: rgba(198, 165, 78, 0.18);
	border-radius: 9999px;
	padding: 0.2rem 0.65rem;
}

/* Mobile — compact 3-column */
@media (max-width: 600px) {
	.ce-mae-compare { padding: 3rem 0; }

	.design-comparison__table-wrap { border-radius: 12px; }

	.design-comparison__table {
		min-width: 0;
		table-layout: fixed;
		width: 100%;
	}

	/* Buy the table back the width it needs. The section's .site-container
	   carries 2rem of padding a side, which on a 390px screen spends 64px —
	   more than half of what the Cornerstones column was short by — on margin
	   beside a component that is already a card with its own inset. */
	.ce-mae-compare .site-container {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* Sized from the text, not guessed. "Cornerstones" is one unbreakable word
	   measuring 97.5px at this weight and size; the column was 76px wide with
	   8px of padding, so it had 68px to put 97.5px in and simply spilled out
	   over the next column. 112px clears it with room for the way a real
	   device rounds glyph widths.

	   "Other providers" is two words, so it wraps at the space by itself and
	   only needs to fit "providers" (68.5px). The feature column takes what
	   is left, which is more than it had before all the same. */
	.design-comparison__col-feature { width: auto; text-align: center !important; }
	.design-comparison__col-ci      { width: 112px; }
	.design-comparison__col-other   { width: 78px; }

	.design-comparison__table thead th {
		padding: 0.6rem 0.25rem;
		font-size: var(--ci-text-utility);
		line-height: 1.3;

		/* Headings wrap between words or not at all. Without this they
		   inherit nothing harmful today, but the tbody rule below used to
		   reach the pill and split it as "Limite / d" — the same mistake is
		   one careless selector away here. */
		word-break: normal;
		overflow-wrap: normal;
		hyphens: none;
	}

	.design-comparison__col-feature { padding-left: 0.75rem; }

	.design-comparison__table tbody td {
		padding: 0.75rem 0.25rem;
		font-size: var(--ci-text-card-body);
	}

	/* Breaking mid-word is for the long feature descriptions ONLY.

	   It used to be on every cell, which is what split the "Limited" pill
	   across two lines: the pill had 47px of inner width for a 54px word, and
	   word-break: break-word gave the browser permission to hyphen-less
	   chop it rather than let it overflow. The other two columns hold an icon
	   or a two-syllable label — nothing in them should ever break. */
	/* Breaking is for the long feature descriptions ONLY, and even there only
	   as a last resort.

	   Two separate faults lived in one declaration. It was on every cell,
	   which is what split the "Limited" pill as "Limite / d" — the pill had
	   47px of inner width for a 54px word and word-break gave the browser
	   permission to chop it. And it paired that with hyphens: auto, which in
	   a column this narrow hyphenated almost every row — "cur-riculum",
	   "plat-form", "sum-mative", "person-alised" — none of which needed to
	   break at all. The longest single word in the whole table is
	   "cross-curricular" at 120px, comfortably inside the column.

	   overflow-wrap: break-word rather than word-break: it only breaks a word
	   that genuinely cannot fit on a line of its own, so it stays as the
	   safety net for a future row without hyphenating today's. */
	.design-comparison__table tbody td:first-child {
		padding-left: 0.75rem;
		padding-right: 0.5rem;
		overflow-wrap: break-word;
		hyphens: none;
	}

	.design-comparison__limited {
		white-space: nowrap;
		padding: 0.2rem 0.5rem;
	}
}


/* ── Featured testimonial — horizontal strip before final CTA ────────────────
   Quote left · vertical divider · identity right. Tight single-row height.   */

.ce-mae-testimonial-featured {
	background: #253d47;
	padding: 2.5rem 0;
}

/* Opaque cream tint — same card language as the .cc-ts-bubble speech-bubble
   cards above on this page (and send.css), rather than the translucent
   glass card this used before. A light, genuinely-coloured card reads as a
   stronger attention device against the dark section than a frosted panel
   that barely separates from its background. */
.ce-mae-testimonial-featured__card {
	background: rgb(254, 242, 228);
	border-radius: 1.25rem;
	padding: 1.75rem 2.25rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 2rem;
}

/* Quote — fills available width */
.ce-mae-testimonial-featured__quote {
	flex: 1;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.8;
	color: var(--ci-color-navy);
	margin: 0;
	font-style: normal;
	text-align: left;
}

/* Vertical divider */
.ce-mae-testimonial-featured__divider {
	width: 1px;
	align-self: stretch;
	background: rgba(30, 45, 61, 0.16);
	border: none;
	flex-shrink: 0;
}

/* Identity — fixed width right column. Wide enough that a school name like
   "Sandown Primary School and Nursery" fits on one line rather than
   wrapping against the old, narrower 220px. */
.ce-mae-testimonial-featured__identity {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	flex-shrink: 0;
	width: 340px;
}

/* Placeholder for the school's own logo — same grey used for "no image
   yet" elsewhere on the site (.ce-proj-card__image--no-image,
   .cc-ts-crest), rather than a translucent white square that assumed a
   dark card behind it. */
.ce-mae-testimonial-featured__logo-placeholder {
	width: 48px;
	height: 48px;
	border-radius: 0.5rem;
	background-image: linear-gradient(135deg, #e8edf0 0%, #d4dce0 100%);
	flex-shrink: 0;
}

/* Real school logo, once supplied — replaces the gradient placeholder above.
   object-fit:contain since a crest can't be cropped without losing detail. */
.ce-mae-testimonial-featured__logo {
	width: 48px;
	height: 48px;
	border-radius: 0.5rem;
	object-fit: contain;
	flex-shrink: 0;
}

.ce-mae-testimonial-featured__info {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.ce-mae-testimonial-featured__name {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: var(--ci-color-navy);
	margin: 0;
	line-height: 1.3;
}

.ce-mae-testimonial-featured__role,
.ce-mae-testimonial-featured__school {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: var(--ci-color-text-muted);
	margin: 0;
}

/* Suppress empty <p> tags injected by wpautop */
.ce-mae-testimonial-featured p:empty { display: none; }

/* ── Below 1000px — collapse to vertical ─────────────────────────────────────
   The identity column is a fixed 340px, so it takes the same width whatever
   the card is given and every pixel lost comes off the quote. Measured across
   the range, with the quote's own characters-per-line (comfortable is 45–75):

     1280+  76 chars, 3 lines, divider at 66% of the card
     1100   58 chars, 3 lines, 61%
     1024   50 chars, 4 lines, 57%
     1000   47 chars, 4 lines, 56%
      900   37 chars, 5 lines, 51%
      820   29 chars, 6 lines, 46%   ← reported as "divider too far left"
      700   19 chars, 9 lines, 36%
      641   13 chars, 15 lines, 30%

   The divider drifting left is the symptom; the fixed column is the cause, and
   the two are the same number. There is no position for the divider that fixes
   it, because the space genuinely is not there: at 820 the card has 619px of
   content width, the identity needs 326 of it to keep "Sandown Primary School
   and Nursery" on one line, and 293 is not a column of prose.

   So it stacks instead, which is what the phone layout already did — this only
   raises the width it starts at. Stacked, the quote gets the full 684px at 820
   (about 70 characters) and the school name still fits on one line. 1000 is
   the boundary because 1024 still clears 50 characters two-up, so iPad
   landscape and every desktop width keep the side-by-side card.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
	.ce-mae-testimonial-featured__card {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}
	/* Stacked, the quote can have the whole card, and near the top of this
	   range that is too much of a good thing — 89 characters a line at 1000px,
	   against a comfortable maximum of about 75. The cap costs nothing at the
	   widths that never reach it. */
	.ce-mae-testimonial-featured__quote {
		max-width: 45rem;
	}
	/* Full width, not a 40px stub. Stacked, a short rule sitting under a
	   left-aligned quote reads as a line that failed to draw rather than as
	   a deliberate flourish — it only worked as an accent when it was the
	   vertical rule between two columns. align-self: stretch takes the card's
	   full content width in a column flex container. */
	.ce-mae-testimonial-featured__divider {
		width: auto;
		align-self: stretch;
		height: 1px;
	}
	.ce-mae-testimonial-featured__identity { width: auto; }
}

/* Phones also tighten the padding — kept separate from the stacking above so
   tablets keep the roomier card. */
@media (max-width: 640px) {
	.ce-mae-testimonial-featured { padding: 2rem 0; }
	.ce-mae-testimonial-featured__card { padding: 1.5rem; }
}


/* ── Stats bar ────────────────────────────────────────────────────────────────*/

.ce-mae-stats {
	background: #1e2d3d;
	padding: 4.5rem 0;
}

.ce-mae-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.ce-mae-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2rem 1.5rem;
	gap: 0.25rem;
	position: relative;
}

.ce-mae-stats__item + .ce-mae-stats__item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 20%;
	height: 60%;
	width: 1px;
	background: rgba(255, 255, 255, 0.1);
}

.ce-mae-stats__number {
	font-family: var(--ci-font-primary);
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 700;
	color: #71947e;
	line-height: 1;
	display: block;
}

.ce-mae-stats__label {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: #fff;
	margin-top: 0.375rem;
	display: block;
}

.ce-mae-stats__detail {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: rgba(255, 255, 255, 0.4);
	display: block;
}

@media (max-width: 700px) {
	.ce-mae-stats { padding: 2.75rem 0; }
	.ce-mae-stats__grid { grid-template-columns: repeat(2, 1fr); }
	.ce-mae-stats__item:nth-child(2n+1)::before { display: none; }
	.ce-mae-stats__item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.07); }
}


/* ── Testimonials ─────────────────────────────────────────────────────────────
   Uses the site-standard moss background (#71947e) + .testimonials__card.
   Only the grid wrapper is new.                                                */

.ce-mae-testimonials {
	background: #253d47;
	padding: 5rem 0;
}

.ce-mae-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2rem;
}

@media (max-width: 900px) {
	.ce-mae-testimonials {
		padding: 3rem 0;
	}

	.ce-mae-testimonials__grid {
		grid-template-columns: 1fr;
		max-width: 540px;
		margin-left: auto;
		margin-right: auto;
	}
}


/* ── Maestro ending CTA — secondary button: see home-cta.css (.ce-mae-cta) ── */

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL BACKDROPS ON PHONES — drop the blur
   ═══════════════════════════════════════════════════════════════════════════

   backdrop-filter is the expensive part of opening these. It forces the
   compositor to re-blur everything behind the layer on every frame while the
   backdrop's opacity ramps, and on a phone that is exactly the wrong work to be
   doing during a 240ms entrance. It is also the least visible part: behind 82%
   black (video modal) and 65% (Ofsted) there is very little left to see through,
   so the blur is paying a per-frame cost for an effect nobody can make out.

   Removed below 767px and the background darkened a little to compensate.
   Desktop keeps the blur, where there is headroom for it.
────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

	/* No blur, and darker to make up for it — 0.88 left the page faintly
	   legible through the dim. */
	.mae-video-modal__backdrop {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgba(0, 0, 0, 0.94);
	}



	.ce-ofsted-modal__backdrop {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgba(0, 0, 0, 0.72);
	}

}

/* Honour a reduced-motion preference: the modals still fade, but nothing
   travels or scales. */
@media (prefers-reduced-motion: reduce) {

	.cs-lm-modal {
		transition: opacity 0.12s linear;
		transform: none;
	}

	.cs-lm-overlay.is-open .cs-lm-modal {
		transform: none;
	}

	/* Both modals are keyframe-driven now, so the travel is switched off the
	   same way — matching how .ce-ofsted-modal already did it. */
	.mae-video-modal.is-open,
	.mae-video-modal.is-open .mae-video-modal__container,
	.ce-ofsted-modal.is-open .ce-ofsted-modal__panel {
		animation: none;
	}

	.ce-ofsted-modal.is-open .ce-ofsted-modal__panel {
		animation: none;
	}

}