.aa-video-hero {
	--aa-hero-blue: #278cff;
	--aa-hero-overlay: 0.42;
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	min-height: 100svh;
	margin: 0;
	overflow: hidden;
	color: #fff;
	background-color: #020b1d;
	background-position: center;
	background-size: cover;
}

.aa-video-hero__media,
.aa-video-hero__veil,
.aa-video-hero__network {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.aa-video-hero__media {
	z-index: -4;
	object-fit: cover;
}

.aa-video-hero__veil {
	z-index: -3;
	background:
		linear-gradient(90deg, rgba(1, 8, 22, 0.96) 0%, rgba(1, 8, 22, 0.68) 42%, rgba(1, 8, 22, 0.15) 78%),
		rgba(0, 8, 25, var(--aa-hero-overlay));
}

.aa-video-hero__network {
	z-index: -2;
	opacity: 0.28;
	background-image:
		radial-gradient(circle at 79% 48%, rgba(42, 139, 255, 0.65) 0 1px, transparent 2px),
		radial-gradient(circle at 63% 29%, rgba(42, 139, 255, 0.55) 0 1px, transparent 2px),
		linear-gradient(122deg, transparent 47%, rgba(42, 139, 255, 0.2) 48%, transparent 49%);
	background-size: 82px 82px, 113px 113px, 180px 180px;
	mask-image: linear-gradient(90deg, transparent 24%, #000 62%);
}

.aa-video-hero__content {
	width: min(92%, 1460px);
	margin-inline: auto;
	padding: clamp(9rem, 16vh, 13rem) 0 clamp(7rem, 12vh, 10rem);
}

/*
 * The colour is stated explicitly and scoped to the hero so it outranks
 * theme.json's elements.heading rule (:root :where(h1...) { color:#06142e }),
 * which targets the h1 directly and therefore beats the white this would
 * otherwise inherit from .aa-video-hero.
 */
.aa-video-hero .aa-video-hero__heading {
	max-width: 900px;
	margin: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--sans, Arial, sans-serif);
	font-size: clamp(3.5rem, 7.2vw, 7rem);
	font-weight: 750;
	line-height: 0.98;
	letter-spacing: -0.055em;
}

.aa-video-hero__subtitle {
	margin: 1.4rem 0 0;
	font-size: clamp(1.8rem, 3.8vw, 3.75rem);
	font-weight: 300;
	line-height: 1.05;
	color: #57a8ff;
}

.aa-video-hero__rule {
	display: block;
	width: 95px;
	height: 4px;
	margin-top: 2.5rem;
	background: var(--aa-hero-blue);
}

.aa-video-hero__social {
	position: absolute;
	right: clamp(2rem, 5vw, 5rem);
	bottom: clamp(2rem, 5vw, 4rem);
	display: flex;
	gap: 1.4rem;
}

.aa-video-hero__social a {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	color: #fff;
	border: 1px solid var(--aa-hero-blue);
	border-radius: 8px;
	transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.aa-video-hero__social a:hover,
.aa-video-hero__social a:focus-visible {
	color: #041226;
	background: var(--aa-hero-blue);
	transform: translateY(-3px);
}

.aa-video-hero__social svg {
	width: 33px;
	height: 33px;
	fill: currentColor;
}

@media (max-width: 700px) {
	.aa-video-hero__content {
		padding-inline: 1.25rem;
	}

	.aa-video-hero__social {
		left: 1.25rem;
		right: auto;
		bottom: 1.75rem;
		gap: 0.75rem;
	}

	.aa-video-hero__social a {
		width: 54px;
		height: 54px;
	}

	.aa-video-hero__social svg {
		width: 25px;
		height: 25px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aa-video-hero__media {
		display: none;
	}

	.aa-video-hero__social a {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Navigation inside the hero.
   The homepage has no separate site header; the header template part is
   rendered inside this container and floated over the video.
   -------------------------------------------------------------------------- */

.aa-video-hero__topbar {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 3;
	/* Breathing room at the top edge — the nav sat too tight against it. */
	padding-top: clamp(2rem, 4.5vh, 3.5rem);
	padding-bottom: clamp(1rem, 2vh, 1.5rem);
}

.aa-video-hero__topbar header,
.aa-video-hero__topbar .aa-site-header,
.aa-video-hero__topbar .wp-block-template-part {
	background: transparent;
}

.aa-video-hero__topbar a { color: #fff; }

/* The hero content clears the bar rather than sitting under it. */
.aa-video-hero__content {
	position: relative;
	z-index: 2;
}

@media (max-width: 781px) {
	.aa-video-hero__topbar { padding-top: 1.5rem; padding-bottom: 0.75rem; }
}

/* --------------------------------------------------------------------------
   Homepage: suppress the site header and footer.

   Carlos: the homepage is one container with the video background — the nav
   sits inside it and the social links act as the footer. front-page.html omits
   both template parts, but a template customised in the Site Editor is stored
   in the database and overrides the file, so this is the safety net.
   -------------------------------------------------------------------------- */

/*
 * Not tied to a direct-child position, since the exact nesting depends on the
 * template. :not(.aa-hero-header) keeps the hero's own header visible.
 */
.home header.aa-site-header:not(.aa-hero-header),
.home footer.aa-site-footer {
	display: none;
}

/* ------------------------------------------------- Hero navigation styling */

.aa-video-hero__topbar .aa-hero-header {
	padding-block: 0;
	background: transparent;
}

.aa-video-hero__topbar nav.wp-block-navigation,
.aa-video-hero__topbar .wp-block-navigation__container {
	gap: clamp(1.5rem, 2.8vw, 2.75rem);
}

.aa-video-hero__topbar .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 0.35rem;
	font-size: 0.95rem;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: color 180ms ease;
}

.aa-video-hero__topbar .wp-block-navigation-item__content::after {
	position: absolute;
	right: 50%;
	bottom: 0;
	left: 50%;
	height: 2px;
	content: "";
	background: var(--aa-hero-blue, #278cff);
	transition: right 200ms ease, left 200ms ease;
}

.aa-video-hero__topbar .wp-block-navigation-item__content:hover,
.aa-video-hero__topbar .current-menu-item .wp-block-navigation-item__content {
	color: #cfe4ff;
}

.aa-video-hero__topbar .wp-block-navigation-item__content:hover::after,
.aa-video-hero__topbar .wp-block-navigation-item__content:focus-visible::after,
.aa-video-hero__topbar .current-menu-item .wp-block-navigation-item__content::after {
	right: 0;
	left: 0;
}

.aa-video-hero__topbar .aa-logo-link { width: min(101px, 26vw); }

@media (max-width: 900px) {
	.aa-video-hero__topbar nav.wp-block-navigation,
	.aa-video-hero__topbar .wp-block-navigation__container { gap: 1.1rem; }
	.aa-video-hero__topbar .wp-block-navigation-item__content { font-size: 0.85rem; }
}

/* --------------------------------------------------------------------------
   Homepage mobile fixes.
   The topbar paints its links white for the video background; once the
   pop-out menu opens on a white panel that made them invisible. The overlay
   wins here regardless of stylesheet order.
   -------------------------------------------------------------------------- */

.aa-video-hero__topbar .wp-block-navigation__responsive-container.is-menu-open a,
.aa-video-hero__topbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #0f2340 !important;
}

.aa-video-hero__topbar .wp-block-navigation__responsive-container-close {
	color: #0f2340 !important;
}

/* Nothing in the hero may push the page sideways. */
.aa-video-hero { max-width: 100vw; overflow-x: clip; }

.aa-video-hero__social { flex-wrap: wrap; row-gap: 0.5rem; }