/* ─────────────────────────────────────────────────────────────────────────
   Shared brand-page styling — used by /brands/aegs/ and /brands/gecko/.
   Generic .te-brand-* classes, visually derived from the Escoffier page
   (.te-esc-* in page-brand-escoffier.css) so the three brand pages match.
   Hand-written, loaded after app.css (so it outranks Tailwind utilities);
   no Tailwind recompile needed. Mobile-first, with a 1024px desktop block.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Scroll fade-up (mirrors the React <Fade>; JS adds .is-visible) ── */
.te-fade { opacity: 0; transform: translateY(36px); transition: opacity .9s ease, transform .9s ease; will-change: opacity, transform; }
/* `none` (not translateY(0)) + releasing will-change: a lingering transform/
   composited layer breaks iOS touch hit-testing inside descendant iframes —
   the YouTube player's controls go dead. */
.te-fade.is-visible { opacity: 1; transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) { .te-fade { opacity: 1; transform: none; transition: none; } }
.te-brand-d80  { transition-delay: 80ms; }
.te-brand-d120 { transition-delay: 120ms; }
.te-brand-d160 { transition-delay: 160ms; }
.te-brand-d200 { transition-delay: 200ms; }

/* ── Section backgrounds ── */
.te-brand-navy  { background: #0d1f3c; }
.te-brand-cream { background: #F8F6F3; }
.te-brand-white { background: #ffffff; }
.te-brand-navy-tex {
	background: #0d1f3c;
	background-image: repeating-linear-gradient(160deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 32px);
}

/* ── Wave dividers ── Purely decorative, often layered above content —
   never intercept clicks/selection. */
.te-brand-wave { line-height: 0; pointer-events: none; }
.te-brand-wave__svg { width: 100%; height: 70px; display: block; overflow: visible; } /* fills overshoot the viewBox so edge rows render solid (Safari blend hairlines) */
@media (min-width: 1024px) {
	.te-brand-wave__svg { height: 90px; }
	.te-brand-wave__svg--100 { height: 100px; }
}

/* ── Eyebrow + section headings ── */
.te-brand-eyebrow { color: #FF6900; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; }
.te-brand-h2 { font-family: "DM Serif Display", serif; font-weight: 400; color: #0d1f3c; font-size: 32px; line-height: 1.15; }
.te-brand-h2--light { color: #ffffff; }
.te-brand-lead { font-family: Inter, system-ui, sans-serif; font-size: 17px; line-height: 1.7; color: #4b5563; }
.te-brand-lead--light { color: rgba(255,255,255,0.8); }
@media (min-width: 1024px) { .te-brand-h2 { font-size: 48px; } .te-brand-lead { font-size: 18px; } }

/* ── Buttons (self-contained shape; orange bg/hover from Tailwind in markup) ── */
.te-brand-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
	font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 18px;
	padding: 1rem 2.5rem; border-radius: 0.75rem; transition: transform .2s ease, background .2s ease, color .2s ease;
	text-decoration: none; cursor: pointer;
}
/* Color-only hover — matches the homepage orange button (no movement). */
.te-brand-btn-orange { background: #BF4E00; color: #ffffff; } /* AA: white label 4.88:1 */
.te-brand-btn-orange:hover { background: #A84600; }
.te-brand-btn-outline { background: transparent; border: 2px solid #BF4E00; color: #BF4E00; } /* AA on white (4.88:1) */
.te-brand-btn-outline:hover { background: rgba(255,105,0,0.06); }
.te-brand-btn__icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
/* Orange button drop-shadow only over the dark hero photo (Escoffier shadow-2xl); the
   white CTA orange button has no shadow, matching Escoffier. */
.te-brand-hero .te-brand-btn-orange { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }

/* ══════════════ HERO (left-aligned copy, full-bleed photo) ══════════════
   Matches the Escoffier / PICA hero: left-aligned logo + title + subhead +
   button, an orange vertical rule on the subhead, and the photo full-bleed
   behind everything under a light left-to-right navy scrim (same treatment
   as the homepage/About heroes). */
.te-brand-hero { position: relative; min-height: 90vh; background: #0d1f3c; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.te-brand-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; max-width: none; pointer-events: none; user-select: none; -webkit-user-select: none; }
/* (Gecko hero: recruiter-interview.webp frames well on the shared default
   crop — the recruiter sits at ~70% across, faces mid-frame below the
   mobile logo chip — so the old gecko.webp-specific overrides are gone.) */
/* Gecko Our Story (sheila.webp): crop anchors left so the dark-haired
   candidate on the left stays in frame. */
.page-template-page-brand-gecko .te-brand-heritage__img { object-position: 25% center; }
.te-brand-hero__overlay { 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-brand-hero__inner { position: relative; z-index: 10; width: 100%; max-width: 80rem; margin: 0 auto; padding: 6rem 1.5rem 5rem; text-align: left; }
.te-brand-hero__logo { display: inline-flex; align-items: center; justify-content: center; background: #ffffff; border-radius: 0.875rem; padding: 1rem 1.25rem; margin-bottom: 2.5rem; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.te-brand-hero__logo img { height: 2.5rem; width: auto; display: block; }
.te-brand-hero__title { font-family: "DM Serif Display", serif; font-weight: 400; font-size: 40px; line-height: 1.08; color: #ffffff; margin: 0 0 2rem; max-width: 48rem; text-shadow: 0 1px 12px rgba(0,0,0,0.55), 0 2px 32px rgba(0,0,0,0.35); }
/* 44rem cap — visually matches the Escoffier/PICA hero lede blocks (their
   max-w-xl never applies — undeclared variable — so they're shaped by their
   manual <br>s; 44rem yields the same two-balanced-lines look here). */
.te-brand-hero__sub { font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: 18px; line-height: 1.6; color: #E5E7EB; max-width: 44rem; margin: 0 0 3rem; padding-left: 1.5rem; position: relative; text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
/* Orange accent bar: spans the text's visual height (trims the half-leading
   above/below the first/last lines) at any line count. */
.te-brand-hero__sub::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-brand-hero__title { font-size: 56px; line-height: 62px; }
	/* Hero lede matches PICAchef's tablet 19px/30px. */
	.te-brand-hero__sub { font-size: 19px; line-height: 30px; }
	/* Employer heading matches Escoffier/PICAchef's 36px at tablet widths
	   (it held its 28px base, so the orange chip ran smaller). */
	.te-brand-employers__h2 { font-size: 36px; }
}
@media (min-width: 1024px) {
	/* 24px side padding matches the homepage hero's content start. */
	.te-brand-hero__inner { padding: 8rem 1.5rem; }
	.te-brand-hero__logo img { height: 3rem; }
	.te-brand-hero__title { font-size: 64px; line-height: 70px; }
	.te-brand-hero__sub { font-size: 24px; line-height: 39px; }
}

/* ════════════════════════ generic section shell ════════════════════════ */
.te-brand-section { position: relative; overflow: hidden; padding: 64px 24px; }
.te-brand-section__inner { max-width: 72rem; margin: 0 auto; }
.te-brand-head { max-width: 46rem; margin: 0 auto 40px; text-align: center; }
.te-brand-head .te-brand-eyebrow { display: block; margin-bottom: 14px; }
.te-brand-head .te-brand-h2 { margin: 0 0 16px; }
/* AEGS "What We Offer": top wave removed; explicit margin/padding + one-line title. */
.te-brand-section.te-brand-solutions { padding-bottom: 170px; }
.te-brand-solutions .te-brand-head { max-width: none; }
@media (min-width: 1024px) { .te-brand-section { padding: 104px 24px; } .te-brand-section.te-brand-mission { padding-bottom: 204px; } .te-brand-solutions .te-brand-h2 { white-space: nowrap; } }

/* ════════════════════════ MISSION / split (white, 2-col) ════════════════════════
   Type + card match the homepage "Who We Are" and About intro sections. */
.te-brand-split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; max-width: 72rem; margin: 0 auto; }
.te-brand-split__copy .te-brand-eyebrow { display: block; margin-bottom: 14px; letter-spacing: 2.8px; }
.te-brand-split__copy .te-brand-h2 { margin: 0 0 20px; color: #003366; font-size: 30px; line-height: 1.2; }
.te-brand-split__copy .te-brand-lead { font-size: 18px; line-height: 29px; color: #364153; }
.te-brand-split__media { position: relative; }
.te-brand-split__img { width: 100%; height: auto; object-fit: cover; 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); display: block; }
.te-brand-caption { position: relative; margin: -32px 16px 0; background: #003366; color: #ffffff; border-radius: 16px; padding: 18px 22px; font-family: Inter, system-ui, sans-serif; font-size: 16px; line-height: 26px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.18); }
/* #FF7214 not #FF6900: the brand orange is 4.37:1 on the #003366 card (just
   under AA 4.5); this imperceptibly lighter orange reads 4.60:1. */
.te-brand-caption b { color: #FF7214; font-weight: 700; }
/* Stacked: photo full-bleed at its natural height (About-page pattern); the
   card keeps its insets over the photo's bottom edge. Extra bottom padding
   separates the floating card from the "What We Offer" section below. */
@media (max-width: 1023.98px) {
	.te-brand-split__media { margin-left: -24px; margin-right: -24px; }
	.te-brand-split__img { border-radius: 0; }
	.te-brand-section.te-brand-mission { padding-bottom: 112px; }
}
@media (min-width: 1024px) {
	/* About-intro geometry: fixed 543px media column with a 520px-tall cropped
	   photo, copy width-capped, card hanging off the photo's left into the
	   whitespace below the copy — so it never overlaps the paragraph. */
	.te-brand-split { grid-template-columns: 1fr 543px; gap: 64px; align-items: start; }
	.te-brand-split__copy { padding-top: 40px; }
	.te-brand-split__copy .te-brand-h2 { font-size: 36px; line-height: 44px; }
	.te-brand-split__copy .te-brand-lead { max-width: 442px; }
	.te-brand-split__img { height: 520px; }
	/* -140px hang (vs About's -306px): AEGS's longer paragraph reaches down
	   into the card's band, so the card's left edge must clear the 442px
	   copy column instead of reaching under it. */
	/* 430px (vs About's 466px): sized to this card's copy so there's no dead
	   space right of the text and it covers less of the plated dish. */
	.te-brand-caption { position: absolute; left: -140px; right: auto; bottom: 28px; width: 430px; max-width: none; margin: 0; padding: 20px 24px; font-size: 18px; line-height: 29px; backdrop-filter: blur(3px); }
}
/* 1024-1319.98: no room to float the card left of the photo (same fallback as
   the homepage) — dissolve the media wrapper into the grid so the card sits in
   the copy column right below the paragraph. */
@media (min-width: 1024px) and (max-width: 1319.98px) {
	.te-brand-split { row-gap: 28px; align-items: start; }
	.te-brand-split__copy { grid-column: 1; grid-row: 1; }
	.te-brand-split__media { display: contents; }
	.te-brand-split__img { grid-column: 2; grid-row: 1 / 3; }
	.te-brand-caption { grid-column: 1; grid-row: 2; position: static; width: auto; margin: 0; }
}

/* ════════════════════════ BRAND STORY (navy split, like Escoffier heritage) ════════════════════════ */
/* 80px above the story section (below the floating claims card) — same gap
   as the Escoffier/PICA heritage sections. */
.te-brand-heritage { position: relative; overflow: hidden; background: #0d1f3c; margin-top: 80px; }
/* Mobile/tablet: full-width, full-color banner above the copy — no wash or
   grayscale over the photo (client rule). Desktop restores the split + gradient. */
.te-brand-heritage__media { position: relative; height: 380px; }
.te-brand-heritage__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.te-brand-heritage__media-overlay { position: absolute; inset: 0; display: none; }
.te-brand-heritage__inner { position: relative; z-index: 2; max-width: 72rem; margin: 0 auto; padding: 56px 24px 72px; }
.te-brand-heritage__copy { max-width: 36rem; }
.te-brand-heritage__copy .te-brand-eyebrow { display: block; margin-bottom: 14px; }
.te-brand-heritage__copy .te-brand-h2 { margin: 0 0 20px; }
@media (min-width: 768px) and (max-width: 1023.98px) {
	.te-brand-heritage__media { height: 460px; }
}
@media (min-width: 1024px) {
	.te-brand-heritage { min-height: 70vh; display: flex; align-items: center; }
	.te-brand-heritage__media { position: absolute; inset-block: 0; right: 0; width: 50%; height: auto; }
	.te-brand-heritage__img { filter: grayscale(30%); }
	/* Soft, diffused falloff: fully clear by 85% so the image's right side
	   shows its true color (matches the Escoffier/PICA heritage curve). */
	.te-brand-heritage__media-overlay { display: block; background: linear-gradient(to right, #0d1f3c 0%, rgba(13,31,60,0.97) 8%, rgba(13,31,60,0.88) 16%, rgba(13,31,60,0.74) 25%, rgba(13,31,60,0.58) 34%, rgba(13,31,60,0.42) 43%, rgba(13,31,60,0.28) 52%, rgba(13,31,60,0.16) 61%, rgba(13,31,60,0.07) 70%, rgba(13,31,60,0.02) 78%, rgba(13,31,60,0) 85%); }
	.te-brand-heritage__inner { padding: 96px 24px; width: 100%; }
}
/* Narrow desktop: nudge the crop left so the chef sits at the right of the
   frame, clear of the gradient's dark end and the text column. Full desktop
   (≥1320px) keeps the original centered crop. */
@media (min-width: 1024px) and (max-width: 1319.98px) {
	.te-brand-heritage__img { object-position: 40% center; }
}

/* ════════════════════════ FEATURE CARDS (white, homepage style) ════════════════════════ */
.te-brand-features { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 72rem; margin: 0 auto; }
.te-brand-feature {
	background: #ffffff; border: 1px solid rgba(190,219,255,0.5); border-radius: 16px;
	box-shadow: 0 0 30px 0 rgba(202,213,237,0.8); padding: 32px; text-align: left;
}
/* No hover movement — these cards aren't links (AEGS solutions, Gecko services). */

/* AEGS Solutions + Gecko "Why Gecko" cards match the homepage "It All Starts
   with Education." cards: top wave with orange stroke, flat white body, no
   border/shadow (overrides the --green outline variant too). */
.te-brand-solutions .te-brand-feature,
.te-brand-cream .te-brand-feature { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.te-brand-feature__wave { display: block; line-height: 0; position: relative; z-index: 1; }
.te-brand-feature__wave svg { display: block; width: 100%; height: 17px; overflow: visible; }
.te-brand-feature__body { background: #ffffff; border-radius: 0 0 16px 16px; margin-top: -1px; padding: 18px 28px 30px; }
.te-brand-feature__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 9999px; background: #FF6900; margin-bottom: 18px; }
.te-brand-feature__icon svg { width: 28px; height: 28px; stroke: #ffffff; }
/* Gecko "Why Gecko" cards: plain grey border + neutral shadow (no light-blue glow). */
.te-brand-feature--green { border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 12px 30px rgba(0,0,0,0.06); }
.te-brand-feature--green .te-brand-feature__icon { background: #2d6a2d; }
.te-brand-feature__eyebrow { color: #BF4E00; /* AA on the white card (4.88:1) */ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; margin: 0 0 8px; }
.te-brand-feature__title { font-family: "DM Serif Display", serif; font-weight: 400; font-size: 22px; line-height: 1.2; color: #0d1f3c; margin: 0 0 12px; }
.te-brand-feature__text { font-family: Inter, system-ui, sans-serif; font-size: 15px; line-height: 1.65; color: #4b5563; margin: 0; }
/* 640-1023px: 2-up with a lone last card centered beneath (same ladder as the
   video galleries) instead of dropping to 1-per-row this early. */
@media (min-width: 640px) and (max-width: 1023.98px) {
	.te-brand-features { grid-template-columns: repeat(2, 1fr); }
	.te-brand-features > *:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
}
@media (min-width: 1024px) { .te-brand-features { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* ════════════ METRICS (Gecko) — flat white band < 1024px, floating card on desktop ════════════ */
/* The wrapper overlaps the hero (-56px, z-30): let clicks/selection pass
   through its transparent area; the card itself stays interactive. */
.te-brand-metrics-wrap { position: relative; z-index: 30; margin-top: -56px; padding: 0 24px; pointer-events: none; }
.te-brand-metrics-wrap .te-brand-metrics { pointer-events: auto; }
/* 2-up on phones, one row from 768px — matches Escoffier/PICA's metric grid. */
.te-brand-metrics { max-width: 80rem; margin: 0 auto; background: #fff; padding: 32px 24px; display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .te-brand-metrics { grid-template-columns: repeat(4, 1fr); } }
.te-brand-metric { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px 10px; text-align: center; }
/* Sub-desktop number size matches PICA (52/48) so labels keep room to fit. */
.te-brand-metric__num { font-family: "DM Serif Display", serif; font-weight: 400; font-size: 52px; line-height: 48px; color: #EF6200; } /* AA large text on white (3.27:1) */
.te-brand-metric__label { font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.35; color: #0d1f3c; }
@media (min-width: 1024px) {
	.te-brand-metrics { grid-template-columns: repeat(4, 1fr); padding: 40px 48px; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }
	.te-brand-metric { padding: 24px 28px; }
	.te-brand-metric__num { font-size: 75px; line-height: 60px; }
}

/* ════════════════════════ EMPLOYER MARQUEE (same as Escoffier) ════════════════════════ */
/* Matches the Escoffier/PICA employer strip (padding, badge, capped marquee). */
.te-brand-employers { background: #ffffff; padding-top: 140px; padding-bottom: 80px; }
.te-brand-employers__head { text-align: center; max-width: 44rem; margin: 0 auto 40px; padding: 0 24px; }
.te-brand-employers__h2 { font-family: "DM Serif Display", serif; font-weight: 400; color: #0d1f3c; font-size: 28px; line-height: 1.2; margin: 0 0 14px; }
.te-brand-employers__pill { background: #EF6200; /* AA: white label is large text, 3.27:1 */ color: #fff; padding: 4px 12px; border-radius: 4px; font-style: italic; }
.te-brand-employers__sub { font-family: Inter, system-ui, sans-serif; font-size: 15px; line-height: 1.6; color: #6A7282; margin: 40px 0 0; }
.te-brand-marquee-wrap { position: relative; padding-right: 64px; max-width: 1280px; margin-left: auto; margin-right: auto; }
.te-brand-marquee-mask {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 88%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 8%, black 88%, transparent 100%);
}
@keyframes te-marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-track { display: flex; align-items: center; padding: 24px 0; width: max-content; animation: te-marquee-scroll 32s linear infinite; }
.marquee-track.is-paused { animation-play-state: paused; }
.te-brand-emp-item { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 220px; padding: 0 28px; }
/* Gecko: 5 logos x 256px = 1280px — the unique set exactly fills the capped
   marquee window (PICA's numbers), so no logo shows twice at once. */
.page-template-page-brand-gecko .te-brand-emp-item { width: 256px; }
/* Logo-wall treatment: grayscale + multiply blends opaque/white logo backgrounds
   into the white section (so mixed-source logos read cleanly, not as solid blocks). */
/* Navy duotone — same treatment as the Escoffier/PICA marquee logos. */
.te-emp-logo { max-height: 72px; width: auto; max-width: 100%; object-fit: contain; filter: brightness(0) saturate(100%) invert(25%) sepia(15%) saturate(600%) hue-rotate(185deg) brightness(90%); }
/* Four Seasons' tall tree-and-text lockup reads small at the shared cap. */
.te-emp-logo[src*="four-seasons"] { max-height: 96px; }
/* Icon color #6a7282 (gray-500): 4.84:1 on white — matches the Escoffier
   toggle's WCAG-checked color. */
.te-brand-marquee-toggle { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; border: 1px solid #d1d5db; background: #fff; color: #6a7282; box-shadow: 0 1px 3px rgba(0,0,0,0.08); cursor: pointer; transition: color .2s, border-color .2s; }
.te-brand-marquee-toggle:hover { color: #0d1f3c; border-color: #0d1f3c; }
.te-brand-marquee-toggle svg { width: 16px; height: 16px; }
@media (min-width: 1024px) {
	.te-brand-employers__h2 { font-size: 36px; }
	/* The nowrap heading runs wider than the 44rem head container; block
	   overflow spills right-only, so it sat off-center vs the sub — center
	   it on its own midpoint instead. */
	.te-brand-employers__h2--nowrap { white-space: nowrap; width: max-content; position: relative; left: 50%; transform: translateX(-50%); }
}

/* ════════════════════════ TESTIMONIAL (avatar + big-quote variants) ════════════════════════ */
.te-brand-quote-block { max-width: 48rem; margin: 0 auto; padding: 48px 24px 72px; text-align: center; }
.te-brand-quote-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top; margin: 0 auto 28px; display: block; box-shadow: 0 4px 16px rgba(0,0,0,0.12); background: #e8e4de; }
/* Decorative quote glyph (Gecko testimonial — Replit style). */
/* Decorative mark (not text) — brand orange is fine here. */
.te-brand-quote-svg { width: 56px; height: 56px; display: block; margin: 0 auto 32px; color: #FF6900; }
/* Both brand testimonials use the base (Escoffier) quote style; per-page top/bottom spacing only. */
.te-brand-quote-block--gecko { padding-top: 120px; }
.te-brand-quote-block--aegs { padding-top: 150px; padding-bottom: 160px; }
/* Quote type matches Escoffier/PICA exactly (23/33 mobile, 30/41.3 desktop). */
.te-brand-quote { font-family: Georgia, serif; font-size: 23px; line-height: 33px; font-weight: 400; font-style: italic; color: #1A2332; margin: 0 0 28px; }
.te-brand-quote-name { font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: 16px; line-height: 24px; color: #1A2332; margin: 0; }
.te-brand-quote-role { font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 0.01em; color: #1A2332; margin: 4px 0 0; }
/* Matches Escoffier's .te-esc-testi-note exactly. */
.te-brand-quote-disclaimer { font-family: Inter, system-ui, sans-serif; font-weight: 400; font-style: italic; font-size: 12px; line-height: 16px; color: #6A7282; margin: 40px 0 0; }
@media (min-width: 1024px) { .te-brand-quote { font-size: 30px; line-height: 41.3px; } }

/* ════════════════════════ VIDEO GALLERY (AEGS) ════════════════════════ */
.te-brand-video__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.te-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.25); cursor: pointer; }
.te-video__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.te-video:hover .te-video__thumb { transform: scale(1.05); }
.te-video__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.2); transition: background .3s ease; }
.te-video:hover .te-video__scrim { background: rgba(0,0,0,0.1); }
.te-video__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 9999px; background: rgba(255,255,255,0.75); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.3); transition: transform .2s ease; }
.te-video:hover .te-video__play { transform: scale(1.1); }
.te-video__play svg { width: 28px; height: 28px; margin-left: 4px; fill: #000; }
.te-brand-video__caption { font-family: Inter, system-ui, sans-serif; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,0.75); text-align: center; margin: 16px 0 0; }
@media (min-width: 1024px) { .te-brand-video__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
/* Below desktop: wider row gap between stacked rows; 2-up with the 3rd centered
   beneath (640-1023px) so the cards stay small enough to avoid pixelated
   thumbnails; 1-up on phones. */
@media (max-width: 1023.98px) {
	.te-brand-video__grid { row-gap: 40px; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
	.te-brand-video__grid { grid-template-columns: repeat(2, 1fr); }
	.te-brand-video__grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}

/* "Experience…"-style video gallery — mirrors the Escoffier section: left-aligned
   serif heading over a full-width 3-up grid, 112px vertical rhythm. The subtitle is
   AEGS-specific (Escoffier has none). */
.te-brand-section.te-brand-videos { padding: 112px 0; }
.te-brand-videos__wrap { position: relative; z-index: 10; max-width: 1536px; margin: 0 auto; padding: 0 24px; }
.te-brand-videos__head { text-align: left; margin: 0 0 56px; }
.te-brand-videos__h2 { font-size: 36px; margin: 0 0 14px; }
.te-brand-videos__sub { margin: 0; }
@media (min-width: 1024px) { .te-brand-videos__h2 { font-size: 48px; } }

/* ════════════════════════ CTA (white, like Escoffier) ════════════════════════ */
.te-brand-cta { background: #ffffff; padding: 64px 24px 112px; text-align: center; }
.te-brand-cta__inner { max-width: 48rem; margin: 0 auto; }
.te-brand-cta__h2 { font-family: "DM Serif Display", serif; font-weight: 400; font-size: 34px; line-height: 1.2; color: #003366; margin: 0 0 40px; }
/* Stacked: the column shrink-wraps to the widest button (the orange one) and
   Contact Triumph stretches to match its width. */
.te-brand-cta__actions { display: inline-flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 16px; }
/* CTA orange button is bold (Escoffier CTA uses font-bold; hero stays semibold). */
.te-brand-cta .te-brand-btn-orange { font-weight: 700; }
/* flex + fit-content (not inline-flex): keeps the link on its own line below
   the stacked inline-flex button column. */
.te-brand-cta__brands { display: flex; width: fit-content; margin: 40px auto 0; align-items: center; gap: 8px; font-family: Inter, system-ui, sans-serif; font-size: 14px; color: #0d1f3c; text-decoration: none; transition: opacity .2s ease; }
.te-brand-cta__brands:hover { opacity: 0.7; text-decoration: underline; }
.te-brand-cta__brands svg { width: 16px; height: 16px; }
@media (min-width: 1024px) {
	.te-brand-cta { padding: 64px 24px 160px; }
	.te-brand-cta__h2 { font-size: 60px; }
	.te-brand-cta__actions { display: flex; flex-direction: row; align-items: center; }
}

/* Section divider helpers (solid-colour backed wave wrappers). */
.te-brand-div-cream { background: #F8F6F3; line-height: 0; }
.te-brand-div-white { background: #ffffff; line-height: 0; }
.te-brand-div-navy  { background: #0d1f3c; line-height: 0; }

/* Mobile/tablet hero (AEGS + Gecko): full-color banner (no overlay — client
   rule), copy below on white in navy type. Desktop keeps the overlaid look. */
@media (max-width: 1023.98px) {
	.te-brand-hero { min-height: 0; background: #ffffff; display: block; }
	.te-brand-hero__bg { position: static; transform: none; height: 460px; width: 100%; aspect-ratio: auto; object-fit: cover; object-position: 65% center; mask-image: none; -webkit-mask-image: none; }
	.te-brand-hero__overlay { display: none; }
	.te-brand-hero__inner { padding: 40px 24px 56px; }
	.te-brand-hero__title { color: #003366; text-shadow: none; }
	.te-brand-hero__sub { color: #364153; text-shadow: none; }
	/* Copy sits on white below the banner here — no over-photo shadows needed. */
	.te-brand-hero .te-brand-btn-orange { box-shadow: none; }
	/* The hero's white wave is invisible on the white banner background and
	   slices into the button/copy — hide it at these widths. */
	.te-brand-hero .te-brand-wave { display: none; }
	/* Logo sits flat on the white banner (matches Escoffier/PICA) — no
	   floating white card with a shadow. */
	.te-brand-hero__logo { background: transparent; box-shadow: none; padding: 1rem; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	.te-brand-hero__bg { height: 560px; }
}

/* ── WCAG AA orange pass ── eyebrows on white/cream sections (navy sections
   keep #FF6900 at 5.69:1). */
.te-brand-white .te-brand-eyebrow,
.te-brand-cream .te-brand-eyebrow { color: #BF4E00; } /* 4.88/4.52:1 */

/* White-into-cream wave above the workforce-model section (homepage curve). */
.te-brand-wf-wave { line-height: 0; background: #ffffff; pointer-events: none; }
.te-brand-wf-wave svg { display: block; width: 100%; height: 53px; overflow: visible; }

/* Mobile: long centered paragraphs left-justify (site-wide pattern). */
@media (max-width: 767.98px) {
	.te-brand-head .te-brand-lead,
	.te-brand-videos__sub,
	.te-brand-employers__sub,
	.te-brand-quote-disclaimer { text-align: left; }
}

/* Mobile: card typography steps up (AEGS "What We Offer" / Gecko "Why
   Gecko"), with more air between the stacked cards. */
@media (max-width: 767.98px) {
	.te-brand-features { gap: 32px; }
	.te-brand-feature__eyebrow { font-size: 14px; }
	.te-brand-feature__title { font-size: 24px; }
	.te-brand-feature__text { font-size: 17px; line-height: 1.65; }
}

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

/* Below-banner layouts (mobile + tablet, ≤1023): the brand logo floats
   back over the banner's upper-left in its white desktop chip, left-aligned
   with the header logo (24px). The copy block goes static so the chip
   anchors to the section (its z-10 stacking was only for the desktop
   overlay, hidden here). */
@media (max-width: 1023.98px) {
	.te-brand-hero__inner { position: static; }
	.te-brand-hero__logo {
		position: absolute;
		top: 24px;
		left: 24px;
		z-index: 20;
		margin: 0;
		background: #ffffff;
		padding: 1rem 1.25rem;
		box-shadow: 0 12px 40px rgba(0,0,0,0.25);
	}
}

/* Mobile: hero lede matches the homepage lede (18px/1.55); H2s match the
   homepage section headings (30px) — site-wide pass. */
@media (max-width: 767.98px) {
	.te-brand-hero__sub { font-size: 18px; line-height: 1.55; }
	.te-brand-h2,
	.te-brand-videos__h2,
	.te-brand-cta__h2 { font-size: 30px; line-height: 1.15; }
	/* Edge case: the marquee heading runs LOOSER than the 1.15 pass — the
	   orange pill badge needs the extra leading to clear the wrapped line
	   below it (matches how Escoffier/PICAchef's badge headings breathe). */
	.te-brand-employers__h2 { font-size: 30px; line-height: 1.35; }
	/* Employer-marquee footnote joins the tightened disclaimer leading,
	   steps up a size, and hugs the heading closer. */
	.te-brand-employers__sub { line-height: 1.4; font-size: 16px; margin-top: 24px; }
	/* Disclaimers step from 12px to 13px (site-wide legibility floor). */
	.te-brand-quote-disclaimer { font-size: 13px; line-height: 17px; }
}

/* Mobile: claims grid gets a real gutter between two truly equal columns —
   minmax(0,1fr) stops long numbers ("40,000+") forcing their column wider
   and shoving the other into the edge; numbers step to 44px so they fit
   their half. Larger labels; halve the dead space above the employer-marquee
   heading; larger testimonial headshots; halve the space below "View All
   Triumph Brands". */
@media (max-width: 767.98px) {
	.te-brand-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
	/* Numbers in the same row sit on the same line — a taller wrapped label
	   in one cell must not center its neighbor's number higher. */
	.te-brand-metric { justify-content: flex-start; }
	/* Odd claim count: the leftover last claim spans both columns, centered,
	   instead of orphaning bottom-left (no-op on the even 4-claim grids). */
	.te-brand-metrics > :last-child:nth-child(odd) { grid-column: 1 / -1; }
	.te-brand-metric__num { font-size: 48px; }
	.te-brand-metric__label { font-size: 13px; }
	.te-brand-employers { padding-top: 70px; }
	.te-brand-quote-avatar { width: 88px; height: 88px; }
	.te-brand-cta { padding-bottom: 56px; }
	.te-brand-cta__brands { font-size: 16px; }
	.te-brand-cta__brands svg { width: 18px; height: 18px; }
}

/* Mobile edge case to the site-wide 18px button rule: the Gecko/AEGS button
   labels ("Visit GeckoHospitality.com") are too long to share a line with
   the icon at 18px — 17px with slimmer side padding fits label + icon on
   one line. */
@media (max-width: 767.98px) {
	.te-brand-btn { font-size: 17px; padding: 1rem 1.5rem; }
}

/* Mobile: drop the 80px gap above the heritage banner. */
@media (max-width: 767.98px) {
	.te-brand-heritage { margin-top: 0; }
}

/* All levels (iPad landscape is 1024px — desktop layout — and hidpi
   desktops can blend too): -1px overlaps kill the subpixel hairlines at
   the heritage banner's top edge and at the blend row along the BOTTOM
   edge of its closing wave svg (the following section pulls up over it).
   The 1px is invisible in every layout. */
.te-brand-heritage__media { margin-top: -1px; }
.te-brand-heritage + section { margin-top: -1px; }
/* Same guard on the remaining section junctions (Safari exposed the
   videos→workforce seam): the wf-wave divider, the white crescent
   divider, and the CTA all tuck 1px under whatever precedes them. */
.te-brand-wf-wave,
.te-brand-div-white,
.te-brand-cta { margin-top: -1px; }

/* Mobile: halve the white space below the claims card (the mission
   section's 64px top padding) and the navy above the video-gallery
   heading (site-wide pattern). Marquee scrolls faster — fewer logos fit
   the narrow window, so the next one shouldn't be a wait. */
@media (max-width: 767.98px) {
	.te-brand-section.te-brand-mission { padding-top: 32px; }
	.te-brand-section.te-brand-videos { padding-top: 56px; }
	/* Narrow window: slimmer logo cells so 2+ logos show at once, plus a
	   faster loop so the next one isn't a wait. */
	.te-brand-emp-item,
	.page-template-page-brand-gecko .te-brand-emp-item { width: 160px; padding: 0 16px; }
	.marquee-track { animation-duration: 24s; }
	/* Halve the white below the logos and the space above the testimonial
	   (Terrydon's avatar on AEGS, the quote glyph on Gecko). */
	.te-brand-employers { padding-bottom: 40px; }
	.te-brand-quote-block--aegs { padding-top: 75px; }
	.te-brand-quote-block--gecko { padding-top: 60px; }
	/* AEGS mission photo: the navy caption card overlaps the photo 10px
	   less, so more of the plated dish shows above it. */
	.page-template-page-brand-aegs .te-brand-caption { margin-top: -22px; }
}