/* About page styles. Auto-enqueued for templates/page-about/page-about.php.
   Mobile-first; the desktop layout (Figma 1440 design) is restored at ≥1024px.
   All section styling lives here — the template carries no inline styles. */

.te-about .te-accent,
.te-accent { color: #FF6900; }

/* Scroll reveal — fade + slide up on first viewport entry (global.js toggles
   .is-revealed). Matches the workforce-model section's effect. */
.te-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease, transform .7s ease;
	will-change: opacity, transform;
}
.te-reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.te-reveal { opacity: 1; transform: none; transition: none; }
}
/* Stagger the pillar cards. */
.te-about-pillar:nth-child(2) { transition-delay: .1s; }
.te-about-pillar:nth-child(3) { transition-delay: .2s; }

/* ──────────────────────────────────────────────────────────
   1. HERO
   ────────────────────────────────────────────────────────── */
/* Mobile/tablet: full-color photo banner (no scrim — client rule), cropped on
   the plated dish, with the copy BELOW the image on white in the site's navy
   type. Desktop (≥1024) restores the overlaid composition. */
.te-about-hero {
	background: #ffffff;
}
.te-about-hero__scrim { display: none; }
.te-about-hero__media {
	position: relative;
	height: 460px;
	line-height: 0;
	overflow: hidden;
}
.te-about-hero__bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Mobile/tablet banner: a tall window on the salad column — the full vertical
   story shows, tweezers at the top to plate at the bottom. (Desktop overrides
   with its own crop.) */
@media (max-width: 1023.98px) {
	.te-about-hero__bg { object-position: 75% 45%; transform: scale(1.28); transform-origin: 75% 55%; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	.te-about-hero__media { height: 560px; }
}
.te-about-hero__inner {
	max-width: 1152px;
	margin: 0 auto;
	padding: 40px 24px 56px;
}
.te-about-hero__content { max-width: 1024px; }
.te-about-hero__eyebrow {
	margin: 0 0 16px;
	color: #FF6900;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 2.8px;
	text-transform: uppercase;
}
.te-about-hero__title {
	margin: 0 0 20px;
	color: #003366;
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	font-size: 40px;
	line-height: 46px;
}
.te-about-hero__lead {
	margin: 0;
	max-width: 755px;
	color: #364153;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 28px;
	position: relative;
	padding-left: 18px;
}
/* Blue accent bar: spans the text's visual height at any line count. */
.te-about-hero__lead::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.3em;
	bottom: 0.3em;
	width: 4px;
	background: #2263C5;
}
/* Tablet: step the H1 up toward its desktop size (same ladder as the
   homepage) instead of holding the 40px mobile size to 1024px. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.te-about-hero__title { font-size: 56px; line-height: 62px; }
}

.te-about-hero__wave {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	line-height: 0;
}
.te-about-hero__wave svg { width: 100%; height: 64px; display: block; }

/* ──────────────────────────────────────────────────────────
   2. BRANDS STRIP
   ────────────────────────────────────────────────────────── */
.te-about-brands {
	background: #ffffff;
	padding: 56px 24px 72px;
}
.te-about-brands__inner {
	max-width: 1152px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.te-about-brands__eyebrow {
	margin: 0 0 32px;
	color: #BF4E00; /* AA on white (4.88:1) */
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 20px;
	letter-spacing: 2.8px;
	text-transform: uppercase;
	text-align: center;
}
.te-about-brands__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 28px 44px;
}
.te-about-brands__logo {
	width: auto;
	height: 38px;
	object-fit: contain;
}
/* Logos link to their brand pages — gentle hover affordance. */
.te-about-brands__link { display: inline-flex; transition: opacity .2s ease; }
.te-about-brands__link:hover { opacity: 0.7; }

/* ──────────────────────────────────────────────────────────
   3. INTRO / MISSION ("Where Education Meets Workforce Opportunity")
   ────────────────────────────────────────────────────────── */
.te-about-intro {
	background: #ffffff;
	padding: 32px 24px 64px;
}
.te-about-intro__inner {
	max-width: 1150px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.te-about-intro__heading {
	margin: 0;
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 38px;
	color: #003366;
}
.te-about-intro__body {
	margin: 24px 0 0;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 29.25px;
	color: #364153;
}
.te-about-intro__media { position: relative; width: 100%; }
.te-about-intro__photo {
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	height: 340px;
}
.te-about-intro__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Stacked (below the text): the photo shows whole — full width, natural
   height, no fixed-height crop. Desktop restores its cropped height. */
@media (max-width: 1023.98px) {
	/* Full-bleed: pull the photo out of the section's 24px side padding to the
	   viewport edges; square corners at the edges. The card keeps its insets. */
	.te-about-intro__media { margin-left: -24px; margin-right: -24px; width: auto; }
	.te-about-intro__photo { height: auto; border-radius: 0; }
	.te-about-intro__photo img { height: auto; }
}
.te-about-intro__card {
	position: relative;
	/* Inset from the photo's edges so it reads as floating over it (matches
	   the homepage Who We Are card), not a same-width slab. */
	margin: -40px 16px 0;
	background: #003366;
	border-radius: 16px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	padding: 19px 20px 24px 25px;
}
.te-about-intro__card p {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: #ffffff;
}
.te-about-intro__card strong { font-weight: 700; }

/* ──────────────────────────────────────────────────────────
   4. THE TRIUMPH ADVANTAGE (shared workforce-model part)
   About-only treatment: the part stays flat cream elsewhere; here it gets the
   Figma cream→transparent gradient, with a cream wave divider at its top.
   ────────────────────────────────────────────────────────── */
.te-about .te-workforce {
	background: linear-gradient(to bottom, #F8F6F3 0%, rgba(248, 246, 243, 0) 100%);
}
.te-about-wf-wave {
	background: #ffffff;
	line-height: 0;
}
.te-about-wf-wave svg { display: block; width: 100%; height: 56px; }

/* ──────────────────────────────────────────────────────────
   5. HOW THE BRANDS WORK TOGETHER (3 panels)
   Mobile: solid deep-brand colour blocks (white text stays legible);
   Desktop (≥1024px): full-bleed photo with the copy overlaid left/right.
   ────────────────────────────────────────────────────────── */
.te-about-panels {
	background: #ffffff;
	overflow: hidden;
}
.te-about-panels__head {
	max-width: 1152px; /* wide enough for the heading to sit on one line on desktop */
	margin: 0 auto;
	padding: 56px 24px 32px;
	text-align: center;
}
.te-about-panels__heading {
	margin: 0;
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 38px;
	color: #003366;
}
.te-about-panels__sub {
	margin: 16px auto 0;
	max-width: 892px;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #4A5565;
}
.te-about-panel { position: relative; background-size: cover; background-position: center; }
/* Sampled from the desktop panel's baked tan wash (panel-education.jpg,
   ~#8e673a) so the mobile/tablet solid band matches it — the old #6e5634
   read darker and muddier. White copy on it: 4.8:1, AA. */
.te-about-panel--education { background-color: #8e673a; }
.te-about-panel--workforce { background-color: #2c5aa0; }
.te-about-panel--recruiting { background-color: #4a7a44; }
.te-about-panel__bg { display: none; }
.te-about-panel__container {
	position: relative;
	max-width: 1152px;
	margin: 0 auto;
	padding: 56px 24px;
}

/* Mobile/tablet: no color wash over photos (client rule) — each panel shows
   its photo full-color as a strip on top, with the copy on the solid brand
   color below it. Photos only fetched on small screens — desktop uses the
   baked full-bleed __bg image. */
@media (max-width: 1023.98px) {
	.te-about-panel::before {
		content: '';
		display: block;
		aspect-ratio: 16 / 9;
		background-size: cover;
		background-position: center;
	}
	.te-about-panel--education::before { background-image: url(../images/panel-education-photo.webp); }
	.te-about-panel--workforce::before { background-image: url(../images/panel-workforce-photo.webp); }
	.te-about-panel--recruiting::before { background-image: url(../images/panel-recruiting-photo.webp); }
}
.te-about-panel__content { max-width: 580px; }
.te-about-panel__pill {
	display: inline-block;
	border-radius: 9999px;
	padding: 5px 12px;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #ffffff;
}
.te-about-panel--education .te-about-panel__pill { background: #B89369; }
.te-about-panel--workforce .te-about-panel__pill { background: #5885C9; }
.te-about-panel--recruiting .te-about-panel__pill { background: #63905C; }
.te-about-panel__logos { display: flex; align-items: center; gap: 40px; margin: 20px 0; }
.te-about-panel__logo {
	width: auto;
	height: 44px;
	object-fit: contain;
	filter: brightness(0) invert(1); /* whiten on the coloured panels */
}
.te-about-panel__logo--gecko { height: 50px; }
.te-about-panel__heading {
	margin: 0;
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 36px;
	color: #ffffff;
	text-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.te-about-panel__body {
	margin: 16px 0 0;
	max-width: 571px;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: #ffffff;
}

/* ──────────────────────────────────────────────────────────
   6. THE RESULT (image band + talent-system cards)
   ────────────────────────────────────────────────────────── */
.te-about-result {
	/* Figma: section sits on a white→cream gradient ("gradient on top"). */
	background: linear-gradient(to bottom, #ffffff 0%, #f8f6f3 100%);
	padding: 48px 24px 48px;
}
/* "Wave at bottom": the cream section waves down into the white Three Pillars
   section. Cream sits above the wavy line, white (= pillars) below it. */
.te-about-result-wave {
	background: #f8f6f3;
	line-height: 0;
}
.te-about-result-wave svg { display: block; width: 100%; height: 58px; }
.te-about-result__inner {
	max-width: 1300px;
	margin: 0 auto;
}
.te-about-result__band {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: #0d1f3c; /* mobile: solid navy — the photo doesn't crop well at phone aspect */
}
.te-about-result__media {
	display: none; /* mobile: solid navy band, no photo */
	position: absolute;
	inset: 0;
	overflow: hidden; /* clips the zoomed photo to the rounded band */
	border-radius: 16px;
}
.te-about-result__bg {
	/* Crop matches Figma's image-fill transform exactly (node 2361:3581):
	   the photo is ~1.5× the band's width and ~1.38× its height, offset up/left,
	   i.e. zoomed in ~1.38× past a plain cover. Source aspect (1.835) matches the
	   design's, so the explicit %s reproduce the crop with no distortion. */
	position: absolute;
	max-width: none;
	width: 149.91%;
	height: 137.87%;
	left: -30.49%;
	top: -24.38%;
}
.te-about-result__overlay {
	display: none; /* mobile uses the solid navy band */
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(13, 31, 60, 0) 30%, rgba(13, 31, 60, 0.85) 75%, #0d1f3c 95%);
}
.te-about-result__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48px 16px 40px; /* mobile: no photo above, so small top padding */
}
.te-about-result__intro { text-align: center; margin-bottom: 28px; }
.te-about-result__title {
	margin: 0;
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	font-size: 36px;
	line-height: 1.1;
	color: #ffffff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.te-about-result__subtitle {
	margin: 8px 0 0;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.45;
	color: #ffffff;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
.te-about-result__cards {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}
.te-about-result__card {
	background: #ffffff;
	border: 1px solid rgba(190, 219, 255, 0.5);
	border-radius: 16px;
	box-shadow: 0 0 15px 0 rgba(202, 213, 237, 0.5);
	padding: 28px;
}
.te-about-result__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 2px solid #00659f;
	border-radius: 9999px;
	margin-bottom: 16px;
}
.te-about-result__badge svg { width: 28px; height: 28px; }
.te-about-result__card-title {
	margin: 0 0 12px;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 28px;
	color: #003366;
}
.te-about-result__card-text {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 22.75px;
	color: #4a5565;
}

/* ──────────────────────────────────────────────────────────
   7. THREE PILLARS (For Individuals / Employers / Industry)
   ────────────────────────────────────────────────────────── */
.te-about-pillars { background: #ffffff; }
.te-about-pillars__inner {
	max-width: 1152px;
	margin: 0 auto;
	padding: 64px 24px;
}
.te-about-pillars__heading {
	margin: 0 auto 40px;
	max-width: 880px;
	text-align: center;
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 34px;
	color: #0d1f3c;
}
.te-about-pillars__grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}
.te-about-pillar {
	position: relative;
	width: 100%;
	max-width: 347px;
	/* Shadow on the whole pillar (not just the box) so it follows the card's
	   real silhouette — the wavy top + rounded bottom — as one shape. A
	   box-shadow on the box alone draws a straight glow under the wave, making
	   the orange wave look detached from the white body. */
	filter: drop-shadow(0 0 16px rgba(202, 213, 237, 0.85));
}
.te-about-pillar__wave { width: 100%; height: 20px; display: block; overflow: visible; position: relative; z-index: 1; }
.te-about-pillar__box {
	background: #ffffff;
	border-radius: 0 0 16px 16px;
	padding: 8px 32px 32px;
	margin-top: -1px;
	/* Fill the pillar's height so side-by-side cards bottom out together. */
	flex: 1 1 auto;
}
.te-about-pillar__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 57px;
	height: 57px;
	border: 2px solid #00659f;
	border-radius: 9999px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	margin-bottom: 32px;
}
.te-about-pillar__icon { width: 26px; height: 26px; }
.te-about-pillar__title {
	margin: 0 0 20px;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 27.5px;
	color: #003366;
}
.te-about-pillar__text {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 22.75px;
	color: #4a5565;
}

/* ──────────────────────────────────────────────────────────
   7. CTA
   ────────────────────────────────────────────────────────── */
.te-about-cta {
	position: relative;
	overflow: hidden;
	background-color: #0d1f3c;
	/* Navy gradient + the Figma light-line texture (full-width, anchored top). */
	background-image:
		url(../images/brands-texture.svg),
		linear-gradient(180deg, #081936 0%, #132C53 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: top center, center;
	background-size: 100% auto, cover;
}
/* White wave at the top: the white pillars section dips down into the navy. */
.te-about-cta__wave {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	line-height: 0;
	pointer-events: none;
}
.te-about-cta__wave svg { display: block; width: 100%; height: 48px; overflow: visible; }
.te-about-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 768px;
	margin: 0 auto;
	padding: 110px 24px 64px; /* more top room above the heading on mobile (desktop overridden below) */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
}
.te-about-cta__heading {
	margin: 0;
	max-width: 550px;
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 36px;
	color: #ffffff;
}
.te-about-cta__text {
	margin: 0;
	max-width: 672px;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #BEDBFF;
}
.te-about-cta__actions { padding-top: 24px; }
.te-about-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 64px;
	padding: 0 32px;
	background: #BF4E00; /* AA: white label 4.88:1 */
	border-radius: 8px;
	color: #ffffff;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 28px;
	text-decoration: none;
}
.te-about-cta__btn:hover { background: #A84600; }
.te-about-cta__btn-icon { width: 20px; height: 20px; }

/* ══════════════════════════════════════════════════════════
   DESKTOP (≥1024px) — restore the Figma 1440 layout
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

	/* 1. HERO — desktop keeps the approved overlaid composition: full-bleed
	   photo behind, left gradient scrim, white copy over the dark zone. */
	.te-about-hero { background: #102953; position: relative; overflow: hidden; }
	.te-about-hero__media { position: absolute; inset: 0; height: 100%; }
	.te-about-hero__bg { object-position: center 62%; }
	.te-about-hero__scrim {
		display: block;
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(13, 31, 60, 0.8) 0%, rgba(13, 31, 60, 0.62) 38%, rgba(13, 31, 60, 0.5) 54%, rgba(13, 31, 60, 0) 64%);
	}
	.te-about-hero__title { color: #ffffff; }
	.te-about-hero__lead { color: #E5E7EB; }
	/* Standard 1224px container (not 1152) so the copy starts further left,
	   clear of the dish — per Figma at 1440. */
	.te-about-hero__inner { position: relative; z-index: 1; display: flex; align-items: center; min-height: 800px; padding: 128px 24px; max-width: 1224px; }
	.te-about-hero__eyebrow { margin-bottom: 16px; }
	.te-about-hero__title { font-size: 72px; line-height: 80px; margin-bottom: 36px; }
	.te-about-hero__lead { font-size: 24px; line-height: 39px; padding-left: 28px; }
	.te-about-hero__wave svg { height: 90px; }

	/* 2. BRANDS STRIP */
	.te-about-brands { padding: 90px 24px 112px; }
	.te-about-brands__eyebrow { margin-bottom: 45px; }
	.te-about-brands__logos { gap: 96px; }
	.te-about-brands__logo { height: 50px; }
	.te-about-brands__logo--aegs { height: 47px; }
	.te-about-brands__logo--gecko { height: 45px; }

	/* 3. INTRO */
	.te-about-intro { padding: 32px 24px 112px; }
	.te-about-intro__inner { flex-direction: row; align-items: flex-start; gap: 64px; }
	.te-about-intro__text { flex: 1 1 0; min-width: 0; padding-top: 40px; }
	.te-about-intro__body { max-width: 442px; }
	.te-about-intro__heading { font-size: 36px; line-height: 44px; }
	.te-about-intro__media { width: 543px; flex-shrink: 0; }
	.te-about-intro__photo { height: 520px; }
	.te-about-intro__card {
		position: absolute;
		bottom: 28px;
		left: -306px;
		width: 466px;
		margin: 0;
	}
	.te-about-intro__card p { font-size: 18px; line-height: 29px; }

	/* 5. PANELS — photo background with overlaid copy */
	.te-about-panels__head { padding: 96px 24px 90px; }
	.te-about-panels__heading { font-size: 48px; line-height: 52px; }
	.te-about-panel { margin-top: -1px; }
	.te-about-panel__bg { display: block; width: 100%; }
	.te-about-panel__inner {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
	}
	.te-about-panel__container {
		width: 100%;
		/* Wider than the standard container: pushes the copy toward the screen
		   edges, over the panels' darker color rather than the gradient zone. */
		max-width: 1320px;
		padding: 0 24px;
		display: flex;
	}
	.te-about-panel--workforce .te-about-panel__container { justify-content: flex-end; }
	.te-about-panel__logo { height: 50px; }
	.te-about-panel__logo--gecko { height: 56px; }
	.te-about-panel__heading { font-size: 48px; line-height: 54px; }
	.te-about-panel__body { font-size: 18px; line-height: 29.25px; }

	/* 6. THE RESULT — the photo band keeps the Figma proportion (1300×771) and
	   the two cards are ABSOLUTELY positioned, straddling the band's bottom edge
	   (Figma's content container is 973px vs the 771px photo, so the cards spill
	   ~140px down onto the cream). The big bottom padding leaves room for them. */
	.te-about-result { padding: 208px 70px 188px; }
	.te-about-result__band {
		aspect-ratio: 1300 / 771;
		overflow: visible; /* let the cards overhang below the photo */
	}
	.te-about-result__media { display: block; }
	.te-about-result__overlay { display: block; border-radius: 16px; }
	.te-about-result__body { display: contents; } /* intro + cards anchor to .__band */
	.te-about-result__intro {
		position: absolute;
		left: 0;
		right: 0;
		/* Anchored from the band's bottom so the text always sits low on the
		   photo, just above the overhanging cards, at any band height. */
		bottom: 170px;
		margin: 0;
	}
	.te-about-result__title { font-size: 48px; line-height: 48px; }
	.te-about-result__subtitle { font-size: 18px; line-height: 28px; margin-top: 10px; }
	.te-about-result__cards {
		position: absolute;
		left: 0;
		right: 0;
		bottom: -140px;
		width: auto;
		flex-direction: row;
		justify-content: center;
		align-items: stretch; /* both cards equal height */
		gap: 32px;
	}
	.te-about-result__card { width: 450px; padding: 33px; }

	/* 7. PILLARS — three across */
	.te-about-pillars__inner { padding: 112px 24px; }
	.te-about-pillars__heading { font-size: 36px; line-height: 42px; margin-bottom: 56px; }
	.te-about-pillars__grid { flex-direction: row; justify-content: center; align-items: stretch; gap: 36px; }
	.te-about-pillar { flex: 1 1 0; display: flex; flex-direction: column; }
	.te-about-pillar__box { flex: 1 1 auto; } /* boxes fill to equal height */

	/* 7. CTA */
	.te-about-cta__inner { padding: 110px 24px; }
	.te-about-cta__heading { font-size: 36px; line-height: 40px; }
}

/* Mobile (<1024px): the top-anchored full-width texture only fills the upper
   strip of this tall, narrow phone-width section — let it cover top-to-bottom. */
@media (max-width: 1023.98px) {
	.te-about-cta {
		background-size: cover, cover;
	}
}

/* ══════════════════════════════════════════════════════════
   HERO food-vs-text separation.
   Narrow desktop (1024–1319): no zoom, and the white copy is
   capped so it ends before the bright dish (ADA contrast +
   aesthetics). Full desktop (≥1320): Figma composition — the
   dish zoomed and nudged right, clear of the wider text.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1319.98px) {
	.te-about-hero__title { font-size: 56px; line-height: 62px; }
	.te-about-hero__lead { max-width: 560px; }
}
@media (min-width: 1320px) {
	.te-about-hero__bg { transform: translateX(4%) scale(1.15); transform-origin: 75% 62%; }
}

/* ══════════════════════════════════════════════════════════
   INTRO/MISSION responsive layout (mirrors the homepage
   Who We Are treatment).
   ══════════════════════════════════════════════════════════ */
/* Narrow desktop: no room to float the callout over the photo — re-lay the
   row as a grid, dissolving the media wrapper so the card sits in the text
   column right below the paragraph, with the photo spanning the right side. */
@media (min-width: 1024px) and (max-width: 1319.98px) {
	.te-about-intro__inner { display: grid; grid-template-columns: 1fr 543px; column-gap: 64px; row-gap: 28px; align-items: start; }
	.te-about-intro__text { grid-column: 1; grid-row: 1; }
	.te-about-intro__media { display: contents; }
	.te-about-intro__photo { grid-column: 2; grid-row: 1 / 3; }
	.te-about-intro__card { grid-column: 1; grid-row: 2; position: static; width: auto; margin: 0; }

	/* The Result: taller wrapped cards here — keep the bottom-anchored intro
	   a bit higher so it clears their top edge. */
	.te-about-result__intro { bottom: 200px; }
	/* Keep the cards floating INSET over the photo (not edge-to-edge with it):
	   inset the row and let the cards share the space instead of fixed 450px. */
	.te-about-result__cards { left: 48px; right: 48px; }
	.te-about-result__card { width: auto; flex: 1 1 0; max-width: 450px; }
}

/* ══════════════════════════════════════════════════════════
   Tablet (768–1023): side-by-side layouts arrive before 1024,
   and The Result keeps its team photo.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023.98px) {
	/* The Result: same composition as desktop — full-color photo band at its
	   designed aspect (no overlay wash), title/subtitle anchored low on the
	   image over its existing bottom-only darkening, cards overhanging below. */
	.te-about-result { padding-top: 112px; padding-bottom: 280px; } /* breathing room above; room for the deeper card overhang below */
	.te-about-result__band { aspect-ratio: 1300 / 771; overflow: visible; }
	.te-about-result__media { display: block; }
	.te-about-result__overlay { display: block; border-radius: 16px; }
	.te-about-result__body { display: contents; }
	/* Bottom-anchored intro: low on the photo, just above the deep-overhang
	   cards (which sit mostly below the band at this level). */
	.te-about-result__intro { position: absolute; left: 0; right: 0; bottom: 130px; margin: 0; }
	.te-about-result__cards {
		position: absolute;
		left: 32px;
		right: 32px;
		bottom: -240px;
		width: auto;
		flex-direction: row;
		justify-content: center;
		align-items: stretch;
		gap: 24px;
	}
	.te-about-result__card { flex: 1 1 0; }

	/* Pillars (For Individuals / Employers / Industry): three across. */
	.te-about-pillars__grid { flex-direction: row; justify-content: center; align-items: stretch; gap: 24px; }
	.te-about-pillar { flex: 1 1 0; display: flex; flex-direction: column; }
}

/* Phones (<768): same composition as tablet/desktop, full-bleed — edge-to-edge
   photo (cropped tighter on the people), title/subtitle over the image's
   bottom via the desktop-style bottom-only gradient, stacked cards on the
   full-width navy band below. */
@media (max-width: 767.98px) {
	.te-about-result { padding-left: 0; padding-right: 0; padding-top: 96px; }
	.te-about-result__band { border-radius: 0; }
	.te-about-result__media {
		display: block;
		position: relative;
		inset: auto;
		border-radius: 0;
		aspect-ratio: 4 / 3; /* tighter than the photo's native 1.84 — zooms in on the team */
		overflow: hidden;
	}
	.te-about-result__bg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
	}
	/* Bottom-only darkening (as on desktop), ending in the band's navy so the
	   image melts into the background the cards sit on. */
	.te-about-result__media::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom, rgba(13, 31, 60, 0) 45%, rgba(13, 31, 60, 0.85) 82%, #0d1f3c 100%);
	}
	.te-about-result__intro { position: relative; z-index: 2; margin-top: -104px; margin-bottom: 36px; }
	.te-about-result__body { padding: 0 16px 40px; }
}

/* Orange accents inside the #003366 intro card: #FF6900 is 4.37:1 there (just
   under AA 4.5); this imperceptibly lighter orange reads 4.60:1. */
.te-about-intro__card .te-accent { color: #FF7214; }

/* ── WCAG AA orange pass ── banner-mode hero copy sits on white. */
@media (max-width: 1023.98px) {
	.te-about-hero__eyebrow { color: #BF4E00; }
	.te-about-hero__title .te-accent { color: #EF6200; } /* large 3.27:1 */
}

/* Decorative waves never intercept clicks or text selection. */
.te-about-hero__wave,
.te-about-wf-wave,
.te-about-result-wave,
.te-about-pillar__wave,
.te-about-cta__wave { pointer-events: none; }

/* Mobile: long centered paragraphs left-justify (site-wide pattern). */
@media (max-width: 767.98px) {
	.te-about-panels__sub,
	.te-about-cta__text { text-align: left; }
}

/* Mobile: below-banner hero H1 matches the homepage's 32px (site-wide). */
@media (max-width: 767.98px) {
	.te-about-hero__title { font-size: 32px; line-height: 1.15; }
}

/* Mobile: H2s match the homepage section headings' 30px/1.15 (site-wide
   pass) — intro/panels/CTA already sit at 30px. */
@media (max-width: 767.98px) {
	.te-about-result__title,
	.te-about-pillars__heading { font-size: 30px; }
	.te-about-intro__heading,
	.te-about-panels__heading,
	.te-about-result__title,
	.te-about-pillars__heading,
	.te-about-cta__heading { line-height: 1.15; }
}

/* Mobile: hero crop slides further left so the salad column sits centered
   in the frame (it hugged the right edge at 75%). */
@media (max-width: 767.98px) {
	.te-about-hero__bg { object-position: 95% 45%; }
}

/* Mobile: Our Family of Brands — one logo per row, larger marks (same
   optical ladder as the desktop sizes). */
@media (max-width: 767.98px) {
	.te-about-brands__logos { flex-direction: column; gap: 40px; }
	.te-about-brands__logo { height: 52px; }
	.te-about-brands__logo--aegs { height: 49px; }
	.te-about-brands__logo--gecko { height: 47px; }
}

/* Mobile: panel photo strips zoom in on their subjects — the Education
   student (head near the frame top, so the crop biases low) and the
   Workforce guest checking in at reception. */
@media (max-width: 767.98px) {
	/* Taller photo strips (16/9 → 3/2) on all three panels — Education,
	   Workforce, and Recruiting (Gecko) stay equal heights. */
	.te-about-panel::before { aspect-ratio: 3 / 2; }
	.te-about-panel--education::before { background-size: 175%; background-position: 100% 30%; }
	.te-about-panel--workforce::before { background-size: 220%; background-position: 4% 42%; }
}

/* Mobile: the Result banner zooms in on the team (origin between the five
   faces; the media box clips the spill). */
@media (max-width: 767.98px) {
	.te-about-result__bg { transform: scale(1.35); transform-origin: 54% 35%; }
}

/* Mobile: Result cards — typography steps up (site-wide card pattern). */
@media (max-width: 767.98px) {
	.te-about-result__card-title { font-size: 20px; line-height: 28px; }
	.te-about-result__card-text { font-size: 16px; line-height: 1.6; }
}

/* Mobile: flat Result→Pillars boundary — the wave divider goes away and
   the Result section drops its white→cream gradient (the cream rendered
   as a strip below the navy band); the pillars heading reads
   left-justified; -1px overlaps kill the iOS subpixel hairline at the
   section junctions (site-wide fix pattern). The CTA keeps its crescent
   wave. */
@media (max-width: 767.98px) {
	.te-about-result-wave { display: none; }
	.te-about-result { background: #ffffff; }
	.te-about-pillars__heading { text-align: left; }
	.te-about-pillars,
	.te-about-cta { margin-top: -1px; }
	/* The CTA's overflow:hidden clips any upward overlap, so the subpixel
	   navy row above the white wave gets painted over instead: the
	   section's own top row is a white border. */
	.te-about-cta { border-top: 1px solid #ffffff; }
}

/* Mobile: pillar-card blurbs step up (site-wide card pattern); half the
   white space above the pillars heading. */
@media (max-width: 767.98px) {
	.te-about-pillar__text { font-size: 16px; line-height: 1.6; }
	.te-about-pillars__inner { padding-top: 32px; }
}

/* Mobile: the intro's navy card overlaps the photo 15px less, so more of
   the table shows at the image's bottom (same treatment as the AEGS
   mission caption). */
@media (max-width: 767.98px) {
	.te-about-intro__card { margin-top: -25px; }
}