/* CIB brand page — animation + effects the Tailwind utilities can't express.
   Adapted from the PICA brand template (te-pica-* → te-cib-*), minus the
   partner cards and industry marquee; adds the single-video Global Network
   layout and the "Our Programs" cards ported from the Gecko "Why Gecko"
   section (brand.css .te-brand-feature*). Generic helpers (.te-fade) keep
   their shared names because page-brand-cib.js targets them. */

/* Scroll fade-up. Per-element stagger is set via .te-cib-delay-* classes. */
.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; }
}

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

/* ── 1. HERO ── */
.te-cib-hero { min-height: 90vh; background: #0d1f3c; }
/* Media wrapper hard-clips the photo (About-page pattern), so the visible
   hero height never changes. */
.te-cib-hero__media { position: absolute; inset: 0; overflow: hidden; }
.te-cib-hero__img {
	/* Full-bleed cover under the navy scrim (PICA/homepage/About heroes).
	   Near-square master (1600x1459): the group's faces sit at ~33-50% of
	   image height, so the band is pulled up to keep heads clear of the
	   bottom wave with headroom under the header. */
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	max-width: none;
}
.te-cib-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-cib-hero__logo { height: 44px; }
.te-cib-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-cib-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;
	position: relative;
	text-shadow: 0 1px 12px rgba(0,0,0,0.55), 0 2px 32px rgba(0,0,0,0.35);
}
/* Accent bar: spans the text's visual height at any line count. */
.te-cib-hero__lede::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.3em;
	bottom: 0.3em;
	width: 4px;
	background: #2263C5;
}
/* Award footnote (Escoffier's hero footnote treatment). */
.te-cib-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);
}
.te-cib-hero__footnote a:hover { text-decoration: none; }

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

/* Shared wave dividers. Purely decorative and layered above content (z-20) —
   never intercept clicks/selection. */
.te-cib-wave { line-height: 0; pointer-events: none; }
.te-cib-wave__svg { width: 100%; height: 120px; display: block; overflow: visible; } /* fills overshoot the viewBox so edge rows render solid (Safari blend hairlines) */
.te-cib-wave__svg--90 { height: 90px; }
.te-cib-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-cib-metrics-wrap { pointer-events: none; }
.te-cib-metrics { pointer-events: auto; }
.te-cib-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-cib-metric__label { color: #0d1f3c; }

/* ── 3. OUR METHODOLOGY ── */
.te-cib-heritage { background: #0d1f3c; min-height: 70vh; margin-top: 0; }
.te-cib-heritage__img { object-position: 62% center; } /* chef's face sits right of center */
.te-cib-heritage__overlay {
	/* Soft, diffused falloff: fully clear by 85% so the image's right side
	   shows its true color (matches the Escoffier/PICA heritage curve). */
	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-cib-heritage__inner { min-height: 70vh; }
.te-cib-eyebrow { color: #FF6900; }
.te-cib-heritage__h2 {
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	font-size: 48px;
}

/* ── GLOBAL NETWORK — copy + one video (PICA's partner cards are replaced
   by a single internship video with its title underneath) ── */
.te-cib-network { background: #ffffff; padding-top: 96px; padding-bottom: 144px; }
.te-cib-network__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
	max-width: 72rem;
	margin: 0 auto;
	padding: 0 32px;
}
.te-cib-network__h2 {
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	color: #0d1f3c;
	font-size: 36px;
}
.te-cib-network__p { font-size: 17px; }
.te-cib-network__caption {
	margin-top: 16px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: #0d1f3c;
	text-align: center;
}
/* Student-experience disclaimer under both columns (type from .te-cib-testi-note);
   same box as the grid so its text lines up with the section copy. */
.te-cib-network__note { max-width: 72rem; margin: 48px auto 0; padding: 0 32px; }
@media (min-width: 1024px) {
	.te-cib-network__grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}
/* Stacked (< 1024px): match the 40rem copy/video column. */
@media (max-width: 1023.98px) {
	.te-cib-network__note { max-width: calc(40rem + 64px); }
}

/* ── OUR PROGRAMS — Gecko "Why Gecko" cards (brand.css .te-brand-feature*
   on .te-brand-cream): white body under a wave top with an orange stroke,
   no border/shadow, on cream. ── */
.te-cib-programs { background: #F8F6F3; padding: 64px 24px 128px; }
.te-cib-programs__head { max-width: 46rem; margin: 0 auto 40px; text-align: center; }
.te-cib-programs__h2 {
	font-family: "DM Serif Display", serif;
	font-weight: 400;
	color: #0d1f3c;
	font-size: 48px;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance; /* even line lengths if the heading wraps, never a stranded word */
}
.te-cib-features { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 72rem; margin: 0 auto; }
/* Flex column so every white body stretches to the row's tallest card. */
.te-cib-feature { display: flex; flex-direction: column; text-align: left; }
.te-cib-feature__wave { display: block; line-height: 0; position: relative; z-index: 1; }
.te-cib-feature__wave svg { display: block; width: 100%; height: 17px; overflow: visible; }
.te-cib-feature__body { flex: 1 1 auto; background: #ffffff; border-radius: 0 0 16px 16px; margin-top: -1px; padding: 18px 28px 30px; }
.te-cib-feature__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 9999px; background: #FF6900; margin-bottom: 18px; }
.te-cib-feature__icon svg { width: 28px; height: 28px; stroke: #ffffff; }
.te-cib-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-cib-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-cib-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-cib-features { grid-template-columns: repeat(2, 1fr); }
	.te-cib-features > *:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
}
/* Side-by-side cards: reserve two title lines so each row's paragraphs start
   level when one title fits on a single line. */
@media (min-width: 640px) {
	.te-cib-feature__title { min-height: 2.4em; }
}
@media (min-width: 1024px) {
	.te-cib-programs { padding: 104px 24px 168px; }
	.te-cib-features { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

/* ── QUOTES (leadership + testimonial) ── */
.te-cib-white { background: #ffffff; }
.te-cib-quote-block { padding-top: 48px; padding-bottom: 80px; }
.te-cib-quote-avatar {
	width: 72px;
	height: 72px;
	object-position: center 22%;
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
/* Larson leadership avatar — same 72px cover crop as the base, just shifted to
   show his full head (less cut at top) without changing the image size. */
.te-cib-quote-avatar--larson { object-position: 50% 6%; }
.te-cib-quote {
	font-family: Georgia, serif;
	font-size: 30px;
	line-height: 41.3px;
	font-weight: 400;
	font-style: italic;
	color: #1A2332;
}
.te-cib-quote-name {
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: #1A2332;
}
.te-cib-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 block. Rique's headshot is a centered square close-up, so the
   avatar uses a plain centered crop (no scale). */
.te-cib-testi-block { padding-top: 80px; padding-bottom: 72px; }
.te-cib-testi-note {
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	font-style: italic;
	line-height: 16px;
	color: #6A7282;
}
.te-cib-divider-cream { background: #F8F6F3; line-height: 0; }
.te-cib-divider-white { background: #ffffff; line-height: 0; }

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

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

/* ─────────────────────────────────────────────────────────────
   Mobile-first responsive: the base rules above target desktop
   (Figma 1440); scale type/layout down on narrow viewports.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.te-cib-hero__title { font-size: 44px; line-height: 50px; }
	.te-cib-hero__lede { font-size: 19px; line-height: 30px; }
	.te-cib-metric__num { font-size: 52px; line-height: 48px; }
	/* Slimmer cell padding so each claim label line fits without extra wrapping;
	   flat white band at these widths (desktop keeps the floating card). */
	.te-cib-metrics { border-radius: 0; box-shadow: none; }
	.te-cib-metric .px-7 { padding-left: 10px; padding-right: 10px; }
	/* Methodology: photo becomes a full-width, full-color banner above the
	   copy (About-page pattern) — no wash over the image (client rule). */
	.te-cib-heritage { min-height: 0; }
	/* Her hair sits ~8% below the photo's top edge, under the section's white
	   top wave — so the banner gets a 56px white band (seamless with the
	   photo's own white studio backdrop) for the wave to cover instead. */
	.te-cib-heritage__media { position: static; width: 100%; height: 436px; padding-top: 56px; background: #ffffff; box-sizing: border-box; opacity: 1; }
	.te-cib-heritage__img { object-position: 60% 9%; }
	.te-cib-heritage__overlay { display: none; }
	.te-cib-heritage__inner { min-height: 0; }
	.te-cib-heritage__inner > .max-w-7xl { padding: 40px 24px 96px; }
	.te-cib-heritage__h2 { font-size: 34px; }
	.te-cib-network__h2 { font-size: 28px; }
	/* Stacked: copy then video, both held to a readable column. */
	.te-cib-network__copy,
	.te-cib-network__media { width: 100%; max-width: 40rem; margin: 0 auto; }
	.te-cib-programs__h2 { font-size: 36px; }
	.te-cib-cta__h2 { font-size: 28px; }
	.te-cib-quote { font-size: 23px; line-height: 33px; }
}

/* 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-cib-hero { min-height: 0; background: #ffffff; display: block; }
	/* Banner: fixed 460px height (consistent with the other hero banners). */
	.te-cib-hero__media { position: relative; height: 460px; overflow: hidden; }
	.te-cib-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: 50% 45%; }
	.te-cib-hero__overlay { display: none; }
	.te-cib-hero .py-32 { padding-top: 40px; padding-bottom: 56px; }
	.te-cib-hero__title { color: #003366; text-shadow: none; }
	.te-cib-hero__lede { color: #364153; text-shadow: none; }
	.te-cib-hero__footnote { color: #6a7282; text-shadow: none; }
	.te-cib-hero__footnote a { color: inherit; }
	/* Copy sits on white below the banner here — no over-photo shadows needed. */
	.te-cib-hero .te-cib-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-cib-hero .te-cib-wave { display: none; }
	.te-cib-hero__logo { height: 32px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	.te-cib-hero__media { height: 560px; }
	.te-cib-heritage__media { height: 516px; }
	/* 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-cib-metric__label br { display: none; }
	.te-cib-metric__label { text-wrap: balance; }
}

/* 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-cib-cta__actions { display: inline-flex; align-items: stretch; }
	.te-cib-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-cib-video-grid { row-gap: 40px; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
	.te-cib-video-grid { grid-template-columns: repeat(2, 1fr); }
	.te-cib-video-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}

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

/* ── WCAG AA orange pass ── eyebrows on white/cream (navy keeps #FF6900). */
.te-cib-network .te-cib-eyebrow,
.te-cib-programs .te-cib-eyebrow { color: #BF4E00; } /* 4.88/4.52:1 */

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

/* Mobile: below-banner hero H1 matches the homepage's 32px (site-wide). */
@media (max-width: 767.98px) {
	.te-cib-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 ≤1023 44px. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.te-cib-hero__title { font-size: 56px; line-height: 62px; }
}

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

/* 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-cib-hero__lede { font-size: 18px; line-height: 1.55; }
	.te-cib-heritage__h2,
	.te-cib-network__h2,
	.te-cib-programs__h2,
	.te-cib-video__h2,
	.te-cib-cta__h2 { font-size: 30px; line-height: 1.15; }
}

/* Mobile: claims labels drop their designed two-line <br> split and wrap
   balanced instead (mirrors the tablet rule). */
@media (max-width: 767.98px) {
	.te-cib-metric__label br { display: none; }
	.te-cib-metric__label { text-wrap: balance; }
	/* Disclaimers/footnotes step from 12px to 13px (site-wide legibility
	   floor; tightened ~1.3 leading preserved). */
	.te-cib-testi-note,
	.te-cib-hero__footnote { font-size: 13px; line-height: 17px; }
}

/* All levels (iPad landscape is 1024px — desktop layout — and hidpi
   desktops can blend too): -1px overlaps kill the subpixel hairlines at
   section junctions — the Methodology media's top edge, plus the blend row
   at the BOTTOM edge of each section-closing wave svg (each following
   section pulls up over it). The 1px is invisible in every layout. */
.te-cib-heritage__media { margin-top: -1px; }
.te-cib-network,
.te-cib-programs,
.te-cib-video-section,
.te-cib-white { margin-top: -1px; }

/* Mobile: tighter section rhythm (PICA's halved spacing), card typography
   steps up (Gecko "Why Gecko" pattern), larger testimonial headshots. */
@media (max-width: 767.98px) {
	.te-cib-metrics-wrap { margin-bottom: 40px; }
	.te-cib-network { padding-top: 48px; padding-bottom: 96px; }
	.te-cib-network__grid { gap: 32px; }
	.te-cib-network__note { margin-top: 32px; }
	.te-cib-quote-block { padding-top: 24px; padding-bottom: 40px; }
	/* Halve the navy above the video-gallery heading (site-wide pattern). */
	.te-cib-video-section { padding-top: 56px; }
	.te-cib-features { gap: 32px; }
	.te-cib-feature__eyebrow { font-size: 14px; }
	.te-cib-feature__title { font-size: 24px; }
	.te-cib-feature__text { font-size: 17px; line-height: 1.65; }
	.te-cib-quote-avatar { width: 88px; height: 88px; }
	.te-cib-white.pb-40 { padding-bottom: 80px; }
	.te-cib-cta__brands-link { font-size: 16px; }
	.te-cib-cta__brands-link svg { width: 18px; height: 18px; }
}

/* Mobile: claims card — slimmer side padding + a real gutter between two
   truly equal columns (minmax(0,1fr) stops long numbers forcing their
   column wider and shoving the other into the edge); numbers step to 44px
   so they fit their half; larger labels (matches Escoffier/PICA). */
@media (max-width: 767.98px) {
	.te-cib-metrics { padding-left: 16px; padding-right: 16px; }
	.te-cib-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-cib-metrics .grid-cols-2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
	.te-cib-metric__num { font-size: 48px; }
	.te-cib-metric__label { font-size: 13px; }
}