-------------------------------------------------------------------------- */
.em3-cr-hero {
position: relative;
padding-top: 65px; /* nav clearance: the video starts flush below the fixed glass header */
background: var(--em3-bg-deep);
color: var(--em3-ink); /* dark-context: H1 must be white, not the global #333 */
overflow: hidden;
isolation: isolate;
}
/* No admin-bar override needed: WP's html{margin-top} already shifts the in-flow hero down by
the admin-bar height, and nav.css offsets the fixed nav itself - so clearing the nav's own
65px height keeps the video flush below the header whether logged in or out. */
.em3-cr-hero h1 { color: var(--em3-ink); }
/* Full-bleed looping video; the hero is exactly as tall as the video. */
.em3-cr-hero__video { display: block; width: 100%; height: auto; aspect-ratio: 1366 / 700; background: var(--em3-bg-deep); }
/* Bottom scrim so the overlaid copy stays legible over the footage. */
.em3-cr-hero::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 60%;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg, transparent 0%, rgba(5,13,51,0.35) 45%, rgba(5,13,51,0.88) 100%);
}
/* Copy overlaid on the lower portion of the video. */
.em3-cr-hero__body {
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 2;
padding-bottom: 56px;
}
.em3-cr-hero__body .em3-eyebrow { margin-bottom: 20px; }
.em3-cr-hero h1 { max-width: none; margin: 0; }
.em3-cr-hero__sub {
margin: 20px 0 0;
max-width: 620px;
font-size: 18px;
line-height: 1.55;
color: var(--em3-ink-muted);
}
.em3-hero-actions { margin-top: 32px; display: flex; gap: 16px; flex-wrap: wrap; }
/* Narrow screens: the video is short, so drop the copy below it (in-flow) on the dark hero
background instead of overlaying, so it never overlaps. */
@media (max-width: 760px) {
.em3-cr-hero::after { display: none; }
.em3-cr-hero__body { position: static; padding: 32px var(--em3-pad-x) 44px; }
}
@media (max-width: 640px) { .em3-cr-hero__sub { font-size: 16px; } }
/* --------------------------------------------------------------------------
3. Mission / Who we are (WHITE) - unified block: a tall portrait that
auto-matches the copy height (left) + all copy stacked (right). The image
is absolutely positioned so it fills whatever height the copy column sets,
so neither column ever leaves dead whitespace.