/* Hero Media block — Figma 582:834. Fills the viewport below the site header. */
/* Logged-in admin bar: WordPress pushes the page down by these amounts (see _admin_bar_bump_cb). */
body.admin-bar { --dc-admin-bar-height: 32px; }
@media (max-width: 782px) { body.admin-bar { --dc-admin-bar-height: 46px; } }
.hero-media {
	--site-header-height: 114px;
	--hero-media-headline-font: "Antonio", "Arial Narrow", sans-serif;
	position: relative;
	isolation: isolate;
	display: grid;
	container-type: size;
	width: 100%;
	/* Viewport minus the site header (and the WordPress admin bar when logged in). */
	height: calc(100vh - var(--site-header-height) - var(--dc-admin-bar-height, 0px));
	height: calc(100svh - var(--site-header-height) - var(--dc-admin-bar-height, 0px));
	min-height: 420px;
	margin: 0;
	overflow: hidden;
	color: #fff;
	background: #1d1d1d;
}

.hero-media__background,
.hero-media__content {
	grid-area: 1 / 1;
	min-width: 0;
}

.hero-media__background { position: relative; z-index: 0; }
.hero-media__content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 32px clamp(24px, 6.25%, 90px); }

.hero-media__image,
.hero-media__video,
.hero-media__embed {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	object-fit: cover;
	object-position: 50% 47%;
}

.hero-media__video,
.hero-media__embed { z-index: 1; }

/* Player iframes cannot object-fit, so size them to cover the container. */
.hero-media__embed {
	top: 50%;
	left: 50%;
	width: max(100cqw, 177.78cqh);
	height: max(100cqh, 56.25cqw);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

@supports not (width: 1cqw) {
	.hero-media__embed { width: 178%; height: 178%; }
}

/* Headline — Antonio Bold 34px, white, split either side of the wordmark. */
.hero-media__headline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 45px;
	width: 100%;
	max-width: 1200px;
	margin: 0;
	font-family: var(--hero-media-headline-font);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 1px 12px rgb(0 0 0 / 30%);
}

.hero-media__text { flex: 1 1 0; white-space: nowrap; }
.hero-media__text--before { text-align: right; }
.hero-media__text--after { text-align: left; }
.hero-media__logo { flex: 0 0 auto; display: block; width: 345px; max-width: 100%; }
.hero-media__logo-image { display: block; width: 100%; height: auto; max-width: 345px; margin-inline: auto; filter: drop-shadow(0 2px 14px rgb(0 0 0 / 25%)); }

/* Full-bleed inside the theme's constrained content column, flush under the header. */
body:has(.hero-media.alignfull) { overflow-x: clip; } /* 100vw plus a classic scrollbar would otherwise add a horizontal scrollbar */
.entry-content > .hero-media.alignfull,
.entry-content > .hero-media.alignwide { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }
.entry-content > .hero-media.alignwide { width: min(100vw, 1440px); margin-inline: calc(50% - min(50vw, 720px)); }
.site-main:has(.hero-media--flush),
.site-header + .site-main:has(.hero-media--flush) { padding-top: 0; }
.site-main:has(.hero-media--flush) > .entry:first-child > .entry-header:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Scroll cue — Figma 744:4866: Brandon Grotesque Bold 18px, 0.12em tracking, white, triangle below the label, 34px off the hero's bottom edge. */
.hero-media__scroll {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 34px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	width: max-content;
	margin: 0 auto; /* centred with auto margins, not a transform, so the entrance animation's transform cannot shift it */
	padding: 8px 20px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-family: "Brandon Grotesque", "Brandon Grotesque Web", "brandon-grotesque", "Footer Brandon Fallback", Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-shadow: 0 1px 12px rgb(0 0 0 / 30%);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.hero-media__scroll:hover,
.hero-media__scroll:focus { background: transparent; color: #fff; }
.hero-media__scroll:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero-media__scroll-label { display: block; }
.hero-media__scroll-arrow { display: block; width: 23px; height: 23px; filter: drop-shadow(0 1px 6px rgb(0 0 0 / 30%)); animation: hero-media-scroll-bob 1.4s ease-in-out infinite; }
@keyframes hero-media-scroll-bob { 50% { transform: translateY(5px); } }

/* Entrance — the headline halves rise in either side of the wordmark and the scroll cue follows; a still photo settles
   from a slow 6% zoom. Everything waits while the diamond intro is up (html.has-hero-intro) and plays as it opens. */
.hero-media__text { animation: hero-media-rise 1s cubic-bezier(.2, .7, .2, 1) .35s both; }
.hero-media__text--after { animation-delay: .5s; }
.hero-media__scroll { animation: hero-media-rise 1s cubic-bezier(.2, .7, .2, 1) .9s both; }
.hero-media--image .hero-media__image { animation: hero-media-settle 12s cubic-bezier(.2, .6, .2, 1) both; }
html.has-hero-intro .hero-media__text,
html.has-hero-intro .hero-media__scroll,
html.has-hero-intro .hero-media--image .hero-media__image { animation-play-state: paused; }
@keyframes hero-media-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hero-media-settle { from { transform: scale(1.06); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.hero-media__video,
	.hero-media__embed { display: none; }
	.hero-media__scroll-arrow { animation: none; }
	.hero-media__text,
	.hero-media__scroll,
	.hero-media--image .hero-media__image { animation: none; }
}

@media (max-width: 1199px) {
	.hero-media { --site-header-height: 75px; }
	.hero-media__headline { font-size: clamp(22px, 2.4vw, 34px); gap: 12px 32px; }
	.hero-media__logo { width: clamp(220px, 24vw, 345px); }
}

@media (max-width: 767px) {
	.hero-media__headline { flex-direction: column; gap: 24px; font-size: 22px; letter-spacing: 0.1em; text-wrap: balance; }
	.hero-media__text,
	.hero-media__text--before,
	.hero-media__text--after { flex: 0 0 auto; text-align: center; white-space: normal; }
	.hero-media__logo { width: min(286px, 65vw); } /* Figma mobile hero: 285.66 wide at 440 */
	.hero-media__content { padding-inline: var(--dc-mobile-inset, 35px); padding-bottom: 96px; } /* keep the headline clear of the scroll cue */
	.hero-media__scroll { bottom: 30px; }
}

/* Diamond intro — Figma 680:560 (card) → 680:544 (reveal). Front page only; driven by view.js.
   On click the white diamond and copy fade out (showing the hero through the diamond), then the two halves slide apart. */
/* Scrolling is blocked by view.js rather than overflow: hidden, so the scrollbar never appears or disappears and nothing reflows. */
/* While the intro runs the nav is off-screen and the hero fills the whole viewport; afterwards the nav slides in and the hero settles beneath it. */
html.has-hero-intro .site-header { position: fixed; top: var(--dc-admin-bar-height, 0px); left: 0; right: 0; z-index: 900; visibility: hidden; transform: translateY(-100%); transition: none; will-change: transform; }
html.has-hero-intro .hero-media--flush { margin-top: var(--site-header-height); }
/* No visible seam while the nav slides in: the page behind it is nav-blue and the nav overlaps the hero by a hair. */
html.has-hero-intro body { background: #062b76; }
html.has-hero-intro .site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 3px; background: #062b76; }
/* The slide-in itself is driven by view.js with two Web Animations that share one start time, so the header’s bottom edge stays glued to the hero’s top edge in every browser. */
html.has-hero-intro.is-intro-entering .site-header { visibility: visible; }
html:not(.has-hero-intro) .hero-intro { display: none; }

.hero-intro {
	--intro-blue: #062b76;
	--intro-font: "Brandon Grotesque", "Brandon Grotesque Web", "brandon-grotesque", "Footer Brandon Fallback", Arial, sans-serif;
	--intro-card-w: 841px;
	--intro-card-h: 1447px;
	/* Diamond outlines, sized relative to the card: outer red, deep red, bright red, white. */
	--d1: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	--d2: polygon(50% 4.31%, 95.69% 50%, 50% 95.69%, 4.31% 50%);
	--d3: polygon(50% 10.6%, 89.4% 50%, 50% 89.4%, 10.6% 50%);
	--d4: polygon(50% 16.1%, 83.9% 50%, 50% 83.9%, 16.1% 50%);
	position: fixed;
	inset: 0;
	top: var(--dc-admin-bar-height, 0px); /* leave the admin bar visible when logged in */
	z-index: 1000;
	display: grid;
	grid-template: 100% / 100%; /* fixed track so the taller-than-viewport card centers instead of pinning to the top */
	place-items: center;
	overflow: hidden;
	color: var(--intro-blue);
	font-family: var(--intro-font);
	cursor: pointer;
}
.hero-intro__half { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; will-change: transform; }
.hero-intro__half--left { left: 0; }
.hero-intro__half--right { left: 50%; }
.hero-intro__stage { position: absolute; top: 0; left: 0; display: grid; grid-template: 100% / 100%; place-items: center; width: 200%; height: 100%; }
.hero-intro__half--right .hero-intro__stage { left: -100%; }
.hero-intro__cover {
	position: absolute;
	inset: 0;
	background-color: var(--intro-blue);
	background-size: cover;
	background-position: 48% 66%;
	background-repeat: no-repeat;
	/* Cut the white diamond’s outline out of the grid so the hero shows through once the card fades. */
	clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, calc(50% - var(--intro-card-w) * .339) 50%, 50% calc(50% - var(--intro-card-h) * .339), calc(50% + var(--intro-card-w) * .339) 50%, 50% calc(50% + var(--intro-card-h) * .339), calc(50% - var(--intro-card-w) * .339) 50%);
}
.hero-intro__bar { position: absolute; top: 0; left: 0; width: 100%; height: 21px; background: var(--intro-blue); }
.hero-intro__ring { position: relative; width: var(--intro-card-w); height: var(--intro-card-h); }
.hero-intro__band { position: absolute; inset: 0; display: block; }
/* Each band is a diamond ring: outer outline minus the next one in (evenodd). */
.hero-intro__band--1 { background: #8a181b; clip-path: polygon(evenodd, 50% 0, 100% 50%, 50% 100%, 0 50%, 50% 0, 50% 4.31%, 95.69% 50%, 50% 95.69%, 4.31% 50%, 50% 4.31%); }
.hero-intro__band--2 { background: #700f12; clip-path: polygon(evenodd, 50% 4.31%, 95.69% 50%, 50% 95.69%, 4.31% 50%, 50% 4.31%, 50% 10.6%, 89.4% 50%, 50% 89.4%, 10.6% 50%, 50% 10.6%); }
.hero-intro__band--3 { background: #ac242a; clip-path: polygon(evenodd, 50% 10.6%, 89.4% 50%, 50% 89.4%, 10.6% 50%, 50% 10.6%, 50% 16.1%, 83.9% 50%, 50% 83.9%, 16.1% 50%, 50% 16.1%); }

.hero-intro__card {
	position: relative;
	z-index: 2;
	display: grid;
	width: var(--intro-card-w);
	max-width: none; /* the theme caps buttons at 100%; the diamond is wider than a phone screen */
	height: var(--intro-card-h);
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	container-type: size;
	-webkit-tap-highlight-color: transparent;
}
.hero-intro__card:focus-visible { outline: 0; }
.hero-intro__card:focus-visible .hero-intro__shape--4 { outline: 3px solid var(--intro-blue); outline-offset: -12px; }
.hero-intro__shape,
.hero-intro__copy { grid-area: 1 / 1; }
.hero-intro__shape--4 { display: block; width: 100%; height: 100%; background: #fff; clip-path: var(--d4); }
.hero-intro__copy { position: relative; display: block; width: 100%; height: 100%; }
.hero-intro__line,
.hero-intro__arrow { position: absolute; left: 0; width: 100%; text-align: center; }
.hero-intro__line {
	font-size: 2.21cqh;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}
.hero-intro__line--t1 { top: 30.75%; }
.hero-intro__line--t2 { top: 35.1%; }
.hero-intro__line--b1 { top: 61.3%; }
.hero-intro__line--b2 { top: 65.7%; }
/* The wordmark: positioned in px by view.js exactly over the hero's own wordmark, so the fade swaps blue for white without any movement. */
.hero-intro__brand { position: fixed; z-index: 3; top: 0; left: 0; opacity: 0; transform-origin: 0 0; will-change: transform; }
.hero-intro__brand img { display: block; width: 100%; height: 100%; }
.hero-intro.is-ready .hero-intro__brand { animation: hero-intro-fade .6s cubic-bezier(.2,.7,.2,1) .15s forwards; }
@keyframes hero-intro-fade { to { opacity: 1; } }
.hero-intro__arrow { top: 77.1%; height: 5.1%; }
.hero-intro__arrow img { display: block; width: auto; height: 75%; margin-inline: auto; transform: rotate(180deg); }
.hero-intro__copy > * { opacity: 0; transform: translateY(12px); }
.hero-intro.is-ready .hero-intro__copy > * { animation: hero-intro-rise .6s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-intro.is-ready .hero-intro__copy > :nth-child(1) { animation-delay: .25s; }
.hero-intro.is-ready .hero-intro__copy > :nth-child(2) { animation-delay: .33s; }
.hero-intro.is-ready .hero-intro__copy > :nth-child(3) { animation-delay: .41s; }
.hero-intro.is-ready .hero-intro__copy > :nth-child(4) { animation-delay: .49s; }
.hero-intro.is-ready .hero-intro__copy > :nth-child(5) { animation-delay: .65s; }
.hero-intro.is-ready .hero-intro__arrow img { animation: hero-intro-bob 1.4s ease-in-out .9s infinite; }
@keyframes hero-intro-rise { to { opacity: 1; transform: none; } }
@keyframes hero-intro-bob { 50% { transform: rotate(180deg) translateY(-6px); } }
.hero-intro.is-revealing { pointer-events: none; }
.hero-intro.is-revealing .hero-intro__arrow img { animation: none; }