/* Escoffier brand page — animation + effects the Tailwind utilities / inline
   styles can't express. Ported from the page's inline <style> block plus the
   scroll-fade and counter helpers. */

/* Scroll fade-up (mirrors the React <Fade> component). Per-element stagger is
   set inline via `transition-delay`. */
.te-fade {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 0.9s ease, transform 0.9s ease;
	will-change: opacity, transform;
}
.te-fade.is-visible {
	opacity: 1;
	/* `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. */
	transform: none;
	will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
	.te-fade { opacity: 1; transform: none; transition: none; }
}

/* Employer marquee */
@keyframes te-marquee-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
.marquee-track {
	animation: te-marquee-scroll 28s linear infinite;
}
.marquee-track.is-paused {
	animation-play-state: paused;
}

/* Employer logo tint (navy duotone) */
.te-emp-logo {
	filter: brightness(0) saturate(100%) invert(25%) sepia(15%) saturate(600%) hue-rotate(185deg) brightness(90%);
	object-fit: contain;
}

/* Card / panel / press-logo hovers (from the source <style> block) */
.card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12); }
.campus-panel { overflow: hidden; }
.campus-img { transition: transform 0.6s ease; }
.campus-panel:hover .campus-img { transform: scale(1.03); }
.press-logo { transition: opacity 0.2s ease; opacity: 0.75; }
.press-logo:hover { opacity: 1; }

/* ─────────────────────────────────────────────────────────────
   Migrated inline styles (semantic .te-esc-* classes by section)
   Zero-visual-change refactor — values preserved exactly.
   ───────────────────────────────────────────────────────────── */

/* Per-element fade stagger (reproduces inline transition-delay). */
.te-esc-metric:nth-child(1) { transition-delay: 0ms; }
.te-esc-metric:nth-child(2) { transition-delay: 110ms; }
.te-esc-metric:nth-child(3) { transition-delay: 220ms; }
.te-esc-metric:nth-child(4) { transition-delay: 330ms; }
.te-esc-metric:nth-child(5) { transition-delay: 440ms; }
.te-esc-delay-80  { transition-delay: 80ms; }
.te-esc-delay-120 { transition-delay: 120ms; }
.te-esc-delay-160 { transition-delay: 160ms; }
.te-esc-delay-200 { transition-delay: 200ms; }

/* ── 1. HERO ── */
.te-esc-hero { min-height: 90vh; background: #0d1f3c; }
.te-esc-hero__img {
	/* Full-bleed cover under a light scrim — matches the homepage/About heroes
	   (was: right-anchored photo with a near-solid navy left half). */
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% center;
	max-width: none;
	/* Slide the group right (cropping the right-side trees) as far as possible
	   with everyone still in frame; slight zoom covers the left edge. */
	transform: translateX(8%) translateY(-11%) scale(1.17);
	transform-origin: center 70%;
}
.te-esc-hero__overlay {
	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-esc-hero__title {
	font-family: "DM Serif Display", serif;
	font-size: 64px;
	font-weight: 400;
	line-height: 70px;
	letter-spacing: 0;
	text-shadow: 0 1px 12px rgba(0,0,0,0.55), 0 2px 32px rgba(0,0,0,0.35);
}
.te-esc-hero__lede {
	/* Real width cap (the markup's max-w-xl never applies — undeclared
	   variable); 44rem matches the AEGS/Gecko hero sub in brand.css. */
	max-width: 44rem;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 39px;
	letter-spacing: 0;
	color: #E5E7EB;
	text-shadow: 0 1px 12px rgba(0,0,0,0.55), 0 2px 32px rgba(0,0,0,0.35);
	position: relative;
}
/* Blue accent bar: spans the text's visual height at any line count. */
.te-esc-hero__lede::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.3em;
	bottom: 0.3em;
	width: 4px;
	background: #2263C5;
}
.te-esc-hero__footnote {
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	font-style: italic;
	line-height: 20px;
	text-shadow: 0 1px 8px rgba(0,0,0,0.7), 0 1px 20px rgba(0,0,0,0.5);
}

/* AA orange button: overrides the markup's bg-[#FF6900]/hover (white label 4.88:1). */
.te-esc-btn-orange { background: #BF4E00; color: #ffffff; }
.te-esc-btn-orange:hover { background: #A84600; }
/* Outline button (CTA secondary). */
.te-esc-btn-outline { border-color: #BF4E00; color: #BF4E00; } /* AA on white (4.88:1) */
.te-esc-btn-outline:hover { background: rgba(255, 105, 0, 0.06); }

/* Shared wave dividers (line-height + svg sizing). Purely decorative and
   layered above content (z-20) — never intercept clicks/selection. */
.te-esc-wave { line-height: 0; pointer-events: none; }
.te-esc-wave__svg { width: 100%; height: 120px; display: block; overflow: visible; } /* fills overshoot the viewBox so edge rows render solid (Safari blend hairlines) */
.te-esc-wave__svg--90 { height: 90px; }
.te-esc-wave__svg--100 { height: 100px; }

/* ── 2. KEY METRICS ── */
/* The wrapper overlaps the hero footnote (-mt-14, z-30): let clicks/selection
   pass through its transparent area; the card itself stays interactive. */
.te-esc-metrics-wrap { pointer-events: none; }
.te-esc-metrics { pointer-events: auto; }
.te-esc-metric__num {
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	font-size: 75px;
	line-height: 60px;
	color: #EF6200; /* AA large text on white (3.27:1) */
}
.te-esc-metric__label { color: #0d1f3c; }
.te-esc-metrics-notes {
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	font-style: italic;
	color: #6A7282;
	line-height: 20px;
}
.te-esc-metrics-notes a { color: #6A7282; }
/* Disclaimer links: underline removed on hover (site-wide pattern). */
.te-esc-metrics-notes a:hover,
.te-esc-hero__footnote a:hover { text-decoration: none; }

/* ── 3. HERITAGE ── */
.te-esc-heritage { background: #0d1f3c; min-height: 70vh; margin-top: 80px; }
.te-esc-heritage__img { filter: grayscale(100%); }
/* Soft, diffused falloff: fully clear by 85% so the image's right side shows
   its true color (the old curve held a navy tint across the entire photo). */
.te-esc-heritage__overlay {
	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-esc-heritage__inner { min-height: 70vh; }
.te-esc-eyebrow { color: #FF6900; }
.te-esc-heritage__h2 {
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	font-size: 48px;
}

/* ── PARTNERSHIPS ── */
.te-esc-partners { background: #F8F6F3; }
.te-esc-partners__h2 {
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	color: #0d1f3c;
	font-size: 36px;
}
.te-esc-partners__p { font-size: 17px; }
.te-esc-partner-card { box-shadow: 0 4px 24px rgba(26,35,50,0.08); }
.te-esc-partner-logo { object-fit: contain; object-position: left center; }
.te-esc-partner-logo--ducasse { height: 48px; }
.te-esc-partner-logo--roches { height: 40px; }
.te-esc-flag { object-fit: contain; flex-shrink: 0; }
.te-esc-flag--france { height: 28px; width: 28px; }
.te-esc-flag--sm { height: 24px; }

/* ── EMPLOYER STRIP ── */
.te-esc-employers { padding-top: 140px; padding-bottom: 80px; }
.te-esc-employers__h2 {
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	color: #0d1f3c;
	font-size: 36px;
}
.te-esc-employers__badge { font-style: italic; }
/* Capped at the site's 1280px content width: the unique logo set (6 x 220px
   = 1320px) is wider than the window, so no logo can appear twice at once. */
.te-esc-marquee-wrap { padding-right: 64px; max-width: 1280px; margin-left: auto; margin-right: auto; }
#te-marquee-toggle { cursor: pointer; }
.te-esc-marquee-mask {
	mask-image: linear-gradient(to right, transparent 0%, black 8%, black 88%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 88%, transparent 100%);
}
#te-marquee { width: max-content; }
.te-esc-emp-item { width: 220px; padding: 0 28px; }
.te-esc-employers__note {
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	font-style: italic;
	line-height: 20px;
	color: #6A7282;
}

/* ── QUOTES (leadership + testimonial) ── */
.te-esc-cream { background: #F8F6F3; }
.te-esc-white { background: #ffffff; }
.te-esc-quote-block { padding-top: 48px; padding-bottom: 80px; }
.te-esc-quote-avatar {
	width: 72px;
	height: 72px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.te-esc-quote {
	font-family: Georgia, serif;
	font-size: 30px;
	line-height: 41.3px;
	font-weight: 400;
	font-style: italic;
	color: #1A2332;
}
.te-esc-quote-name {
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: #1A2332;
}
.te-esc-quote-role {
	font-family: Inter, system-ui, sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: #1A2332;
	letter-spacing: 0.01em;
}

/* Testimonial avatar (scaled crop). */
.te-esc-testi-block { padding-top: 80px; padding-bottom: 72px; }
.te-esc-testi-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	background: #e8e4de;
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
	flex-shrink: 0;
}
.te-esc-testi-avatar__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	transform: scale(1.6);
	transform-origin: center 25%;
}
.te-esc-testi-note {
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	font-style: italic;
	line-height: 16px;
	color: #6A7282;
}
.te-esc-divider-cream { background: #F8F6F3; line-height: 0; }
.te-esc-divider-white { background: #ffffff; line-height: 0; }

/* ── VIDEO GALLERY ── */
.te-esc-video-section {
	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);
}
.te-esc-video__h2 {
	font-family: "DM Serif Display", serif;
	font-weight: 400;
}
.te-esc-video__play { background: rgba(255,255,255,0.75); }
.te-esc-video__caption { font-family: Inter, system-ui, sans-serif; }

/* ── CTA ── */
.te-esc-cta__h2 {
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	line-height: 1.25;
	color: #003366;
}
.te-esc-cta__brands-link { color: #0d1f3c; }
.te-esc-cta__brands-link:hover { text-decoration: underline; }

/* Mobile/tablet hero: full-color banner (no overlay — client rule), copy
   below on white in navy type. Desktop keeps the overlaid composition. */
@media (max-width: 1023.98px) {
	.te-esc-hero { min-height: 0; background: #ffffff; display: block; }
	.te-esc-hero__img { position: static; inset: auto; width: 100%; height: 460px; max-width: 100%; object-fit: cover; object-position: center; transform: none; mask-image: none; -webkit-mask-image: none; }
	.te-esc-hero__overlay { display: none; }
	.te-esc-hero .py-32 { padding-top: 40px; padding-bottom: 56px; }
	.te-esc-hero__title { color: #003366; text-shadow: none; }
	.te-esc-hero__lede { color: #364153; text-shadow: none; }
	.te-esc-hero__footnote { color: #6a7282; text-shadow: none; }
	.te-esc-hero__footnote a { color: inherit; }
	/* Copy sits on white below the banner here — no over-photo shadows needed. */
	.te-esc-hero .te-esc-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-esc-hero .te-esc-wave { display: none; }

	/* Metrics: PICA's sub-desktop sizing — smaller numbers and slimmer cell
	   padding so each claim label line fits without extra wrapping. Flat white
	   band at these widths (desktop keeps the floating card). */
	.te-esc-metrics { border-radius: 0; box-shadow: none; }
	.te-esc-metric__num { font-size: 52px; line-height: 48px; }
	.te-esc-metric .px-7 { padding-left: 10px; padding-right: 10px; }

	/* Heritage: photo becomes a full-width banner above the copy (About-page
	   pattern). Right-anchored crop keeps the chef in frame; no gradient wash. */
	.te-esc-heritage { min-height: 0; }
	.te-esc-heritage__media { position: static; width: 100%; height: 380px; }
	.te-esc-heritage__img { object-position: right center; }
	.te-esc-heritage__overlay { display: none; }
	.te-esc-heritage__inner { min-height: 0; }
	.te-esc-heritage__inner > .max-w-7xl { padding: 40px 24px 96px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	.te-esc-hero__img { height: 560px; }
	.te-esc-heritage__media { height: 460px; }
	/* 5-across metric cells are narrow here: drop the designed two-line label
	   split and wrap naturally, balanced, so no word strands on its own line. */
	.te-esc-metric__label br { display: none; }
	.te-esc-metric__label { text-wrap: balance; }
}

/* Heritage, narrow desktop: the chef is centered in the source image, so a
   left-anchored crop places him at the right of the frame — where the gradient
   is lightest and clear of the text column. Full desktop (≥1320px) keeps the
   original centered crop. */
@media (min-width: 1024px) and (max-width: 1319.98px) {
	.te-esc-heritage__img { object-position: left top; }
}

/* CTA: when the buttons stack, the column shrink-wraps to the widest button
   (the orange one) and Contact Triumph stretches to match its width. */
@media (max-width: 639.98px) {
	.te-esc-cta__actions { display: inline-flex; align-items: stretch; }
	.te-esc-cta__actions > a { justify-content: center; }
}

/* Video gallery below desktop: 2-up with the 3rd centered beneath (640-1023px)
   so the cards stay small enough to avoid pixelated thumbnails; 1-up on phones.
   Wider row gap separates the stacked rows (caption-to-next-video breathing room). */
@media (max-width: 1023.98px) {
	.te-esc-video-grid { row-gap: 40px; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
	.te-esc-video-grid { grid-template-columns: repeat(2, 1fr); }
	.te-esc-video-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}

/* Real 48rem cap on the quote/testimonial blocks — the markup's max-w-3xl
   never applies (undeclared variable); matches the AEGS/Gecko quote width. */
.te-esc-quote-block,
.te-esc-testi-block { max-width: 48rem; }

/* ── WCAG AA orange pass ── */
.te-esc-partners .te-esc-eyebrow { color: #BF4E00; } /* cream section (4.52:1) */
.te-esc-employers__badge { background: #EF6200; } /* white label is large text, 3.27:1 */

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

/* Mobile: partner-card body text steps up (site-wide card pattern). */
@media (max-width: 767.98px) {
	.te-esc-partner-card .text-sm { font-size: 16px; line-height: 1.6; }
}

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

/* Tablet: H1 steps to the site's 56px ladder (homepage/About/Gecko/AEGS)
   instead of holding the 64px desktop size; lede matches PICAchef's
   19px/30px. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.te-esc-hero__title { font-size: 56px; line-height: 62px; }
	.te-esc-hero__lede { font-size: 19px; line-height: 30px; }
}

/* All levels (iPad landscape is 1024px — desktop layout — and hidpi
   desktops can blend too): -1px overlaps cover the subpixel blend row at
   the BOTTOM edge of each section-closing wave svg — it renders as a gray
   hairline on fractional device-pixel grids (each following section pulls
   up over it). The heritage media also overlaps its own top edge; the 1px
   is invisible in every layout. */
.te-esc-heritage__media { margin-top: -1px; }
.te-esc-partners,
.te-esc-video-section,
.te-esc-white { margin-top: -1px; }

/* 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 container 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-esc-hero .py-32 { position: static; }
	.te-esc-hero__logo-wrap { position: absolute; top: 24px; left: 24px; z-index: 20; margin: 0; }
}

/* Mobile: hero lede matches the homepage lede (18px/1.55); footnotes tighten
   to the site's 16px disclaimer leading; H2s match the homepage section
   headings (30px) — site-wide pass. */
@media (max-width: 767.98px) {
	.te-esc-hero__lede { font-size: 18px; line-height: 1.55; }
	.te-esc-hero__footnote,
	.te-esc-metrics-notes { line-height: 16px; }
	.te-esc-heritage__h2,
	.te-esc-partners__h2,
	.te-esc-video__h2,
	.te-esc-cta__h2 { font-size: 30px; line-height: 1.15; }
	/* Edge case: the marquee heading runs looser than the 1.15 pass so the
	   orange "Partnered" badge clears the wrapped line below — 1.35 matches
	   Gecko/AEGS exactly (native leading differed subtly). */
	.te-esc-employers__h2 { font-size: 30px; line-height: 1.35; }
}

/* Mobile: heritage banner anchors LEFT so Escoffier and everything left of
   him (the chair) stay in frame, and the image nudges a tad down so his
   head clears the white top wave without swallowing it (the revealed strip
   is white, seamless with the wave; the media box clips the overflow at the
   bottom). The gap above "Global Partnerships" is trimmed on the partners
   side only — the heritage copy keeps its 96px so the 90px cream bottom
   wave never overlaps the last paragraph. */
@media (max-width: 767.98px) {
	/* -1px overlap kills the iOS subpixel hairline where the section's navy
	   bg peeks at the white boundary (same fix as the homepage CTA seam);
	   margin-top 0 drops the 80px gap above the banner. */
	.te-esc-heritage { margin-top: 0; }
	.te-esc-heritage__media { overflow: hidden; background: #ffffff; margin-top: -1px; }
	.te-esc-heritage__img { object-position: left center; transform: translateY(16px); }
	.te-esc-partners { padding-top: 48px; }
}

/* Mobile: hero banner crop at 45% — the window can just fit both the
   leftmost student's face (~22% in) and the rightmost's (~75%). */
@media (max-width: 767.98px) {
	.te-esc-hero__img { object-position: 45% center; }
}

/* Mobile: claims labels drop their designed two-line <br> split and wrap
   balanced instead (mirrors the tablet rule) — no more "for" stranded on
   its own line. */
@media (max-width: 767.98px) {
	.te-esc-metric__label br { display: none; }
	.te-esc-metric__label { text-wrap: balance; }
}

/* Mobile: the employer-marquee footnote joins the 16px disclaimer leading
   (was missed in the disclaimer pass); tighter section rhythm — less cream
   below the leadership quote, less navy above "Experience…", less white
   below the student testimonial. */
@media (max-width: 767.98px) {
	/* Disclaimers/footnotes step from 12px to 13px (site-wide legibility
	   floor; tightened ~1.3 leading preserved). */
	.te-esc-hero__footnote,
	.te-esc-metrics-notes,
	.te-esc-testi-note,
	.te-esc-employers__note { font-size: 13px; line-height: 17px; }
	.te-esc-quote-block { padding-bottom: 40px; }
	.te-esc-video-section { padding-top: 56px; }
	.te-esc-testi-block { padding-bottom: 36px; }
	/* Narrow window: slimmer logo cells so 2+ logos show at once, plus a
	   faster loop so the next one isn't a wait. */
	.te-esc-emp-item { width: 160px; padding: 0 16px; }
	.marquee-track { animation-duration: 21s; }
}

/* Mobile: claims card — slimmer side padding + a real gutter between two
   truly equal columns (minmax(0,1fr) stops long numbers like "8,000+"
   forcing their column wider and shoving the other into the edge); numbers
   step to 44px so they fit their half; larger labels; disclaimers pull up
   by a third. */
@media (max-width: 767.98px) {
	.te-esc-metrics { padding-left: 16px; padding-right: 16px; }
	.te-esc-metrics .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
	/* Odd claim count: the leftover last claim spans both columns, centered,
	   instead of orphaning bottom-left. */
	.te-esc-metrics .grid-cols-2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
	.te-esc-metric__num { font-size: 48px; }
	.te-esc-metric__label { font-size: 13px; }
	.te-esc-metrics-notes { margin-top: 20px; }
}

/* Mobile: partnership cards bleed 16px into the section's 32px side padding
   (cards only — the section's own copy keeps its margins) with slightly
   larger country names; 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-esc-partner-card { margin-left: -16px; margin-right: -16px; }
	.te-esc-partner-card .te-esc-eyebrow { font-size: 13px; }
	.te-esc-employers { padding-top: 70px; }
	.te-esc-quote-avatar,
	.te-esc-testi-avatar { width: 88px; height: 88px; }
	.te-esc-white.pb-40 { padding-bottom: 80px; }
	.te-esc-cta__brands-link { font-size: 16px; }
	.te-esc-cta__brands-link svg { width: 18px; height: 18px; }
}