.activ-page-hero {
	background: var(--wp--preset--color--contrast);
	border-bottom: 1px solid rgba(108, 109, 112, 0.3);
	color: var(--wp--preset--color--base);
	display: flex;
	flex-direction: column;
	font-family: var(--wp--preset--font-family--albert-sans, "Albert Sans", system-ui, sans-serif);
	isolation: isolate;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.activ-page-hero.activ-hero--light {
	background: var(--wp--preset--color--base-2);
	border-bottom-color: var(--wp--preset--color--neutral-150);
	color: var(--wp--preset--color--contrast);
}

.activ-page-hero__bg {
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

/* Mesh ellipses — <img> so SVG blur filters render (bg-image drops them). */
.activ-page-hero__ellipse {
	display: block;
	overflow: visible;
	pointer-events: none;
	position: absolute;
}

.activ-page-hero__ellipse img {
	animation: activ-page-hero-ellipse-rotate 15s linear infinite;
	display: block;
	height: auto;
	max-width: none;
	position: absolute;
	transform-origin: center center;
	width: 100%;
	will-change: transform;
}

.activ-page-hero__ellipse--2 img {
	animation-direction: reverse;
	animation-duration: 20s;
}

@keyframes activ-page-hero-ellipse-rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.activ-page-hero__ellipse img {
		animation: none;
	}
}

/* Figma: left glow — 600px, left -200, top -100, inset overflow -25%. */
.activ-page-hero__ellipse--1 {
	height: 37.5rem;
	left: -12.5rem;
	top: -6.25rem;
	width: 37.5rem;
}

.activ-page-hero__ellipse--1 img {
	height: 150%;
	left: -25%;
	top: -25%;
	width: 150%;
}

/* Figma: right arc — 907px, right -109, top calc(50% - 222px), inset -16.54%. */
.activ-page-hero__ellipse--2 {
	height: 56.6875rem;
	right: -6.8125rem;
	top: calc(50% - 13.875rem);
	transform: translateY(-50%);
	width: 56.6875rem;
}

.activ-page-hero__ellipse--2 img {
	height: 133.08%;
	left: -16.54%;
	top: -16.54%;
	width: 133.08%;
}

.activ-page-hero__shell {
	/*
	 * Figma: breadcrumbs sit ~9px under the header; title near 200px.
	 * Use measured header height so logged-in admin-bar offset stays correct.
	 */
	padding-block: calc(var(--activ-header-height, 5.6875rem) + 0.5625rem) var(--wp--preset--spacing--20);
	position: relative;
	z-index: 1;
}

.activ-page-hero__container {
	display: flex;
	flex-direction: column;
}

.activ-page-hero__content {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 62.5rem;
	width: 100%;
}

.activ-page-hero .activ-breadcrumbs {
	/* Title near Figma ~200px: (header + 9px + crumb ≈ 14px + gap). */
	margin: 0 0 calc(12.5rem - var(--activ-header-height, 5.6875rem) - 0.5625rem - 0.875rem);
	width: auto;
}

.activ-page-hero__headline,
.activ-page-hero__content > .wp-block-heading {
	font-family: var(--wp--preset--font-family--albert-sans, "Albert Sans", system-ui, sans-serif);
	font-size: clamp(2.5rem, 4.5vw, 5rem);
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 0.9;
	margin: 0 0 var(--wp--preset--spacing--8);
	max-width: 62.5rem;
	text-wrap: balance;
}

.activ-page-hero__subhead,
.activ-page-hero__content > .wp-block-paragraph {
	color: var(--wp--preset--color--neutral-500);
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: -0.5px;
	line-height: 1.4;
	margin: 0;
	max-width: 40rem;
}

/* Consecutive hero paragraphs. Avoid content gap so the breadcrumb title offset stays put. */
.activ-page-hero__content > .wp-block-paragraph + .wp-block-paragraph {
	margin-top: var(--wp--preset--spacing--8);
}

.activ-page-hero.activ-hero--light .activ-page-hero__subhead,
.activ-page-hero.activ-hero--light .activ-page-hero__content > .wp-block-paragraph {
	color: var(--wp--preset--color--neutral-700);
}

/* Light hero breadcrumbs — current crumb is black, not white. */
.activ-page-hero.activ-hero--light .activ-breadcrumbs__item:last-child .activ-breadcrumbs__link,
.activ-page-hero.activ-hero--light .activ-breadcrumbs__item:last-child .activ-breadcrumbs__text {
	color: var(--wp--preset--color--contrast);
}

.activ-page-hero.activ-hero--light .activ-breadcrumbs__link:hover,
.activ-page-hero.activ-hero--light .activ-breadcrumbs__link:focus-visible {
	color: var(--wp--preset--color--contrast);
}

.has-page-hero-font-size {
	font-size: clamp(2.5rem, 4.5vw, 5rem);
}

.wp-block-activ-page-hero {
	box-sizing: border-box;
	max-width: none !important;
	width: 100%;
}

:root .is-layout-constrained > .wp-block-activ-page-hero {
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
	width: calc(100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px)) !important;
}

@media (min-width: 1024px) {
	.activ-page-hero__headline,
	.activ-page-hero__content > .wp-block-heading,
	.has-page-hero-font-size {
		font-size: 5rem;
	}
}

@media (max-width: 1023px) {
	.activ-page-hero__shell {
		padding-block: calc(var(--activ-header-height) + var(--wp--preset--spacing--4)) var(--wp--preset--spacing--15);
	}

	.activ-page-hero .activ-breadcrumbs {
		margin-bottom: calc(var(--wp--preset--spacing--10) * 2);
	}

	.activ-page-hero__ellipse--1 {
		height: 22rem;
		left: -8rem;
		top: -4rem;
		width: 22rem;
	}

	.activ-page-hero__ellipse--2 {
		height: 32rem;
		left: auto;
		right: -10rem;
		width: 32rem;
	}
}

/* Hide hero content on first paint — removed by entrance.js before reveal. */
.activ-page-hero.activ-hero--entrance-pending :is(
	.activ-page-hero__content > .activ-page-hero__headline,
	.activ-page-hero__content > .activ-page-hero__subhead,
	.activ-page-hero__content > .wp-block-heading,
	.activ-page-hero__content > .wp-block-paragraph,
	.activ-page-hero__content > .wp-block-buttons,
	.activ-page-hero__content > .wp-block-button
) {
	opacity: 0;
	transform: translate3d(0, 1.5rem, 0);
}

.activ-page-hero.activ-hero--entrance-pending .activ-page-hero__content > .activ-breadcrumbs .activ-breadcrumbs__item {
	opacity: 0;
	transform: translate3d(-1.5rem, 0, 0);
}

.activ-page-hero__word {
	display: inline-block;
}

.activ-page-hero__letter {
	display: inline-block;
}

@keyframes activ-page-hero-enter {
	from {
		opacity: 0;
		transform: translate3d(0, 1.5rem, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes activ-page-hero-enter-right {
	from {
		opacity: 0;
		transform: translate3d(-1.5rem, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes activ-page-hero-enter-letter {
	from {
		opacity: 0;
		transform: translate3d(0, 0.35em, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.activ-page-hero.activ-hero--animate-ready .activ-hero__enter {
		opacity: 0;
		transform: translate3d(0, 1.5rem, 0);
	}

	.activ-page-hero.activ-hero--animate-ready .activ-breadcrumbs__item.activ-hero__enter {
		transform: translate3d(-1.5rem, 0, 0);
	}

	.activ-page-hero.activ-hero--animate-ready .activ-page-hero__letter.activ-hero__enter {
		transform: translate3d(0, 0.35em, 0);
	}

	/* Headline wrapper stays put once letters take over the reveal. */
	.activ-page-hero.activ-hero--animate-ready :is(
		.activ-page-hero__headline,
		.activ-page-hero__content > .wp-block-heading
	) {
		opacity: 1;
		transform: none;
	}

	.activ-page-hero.activ-hero--animate-ready .activ-hero__enter.activ-hero__enter--visible {
		animation: activ-page-hero-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	.activ-page-hero.activ-hero--animate-ready .activ-breadcrumbs__item.activ-hero__enter.activ-hero__enter--visible {
		animation-name: activ-page-hero-enter-right;
	}

	.activ-page-hero.activ-hero--animate-ready .activ-page-hero__letter.activ-hero__enter.activ-hero__enter--visible {
		animation: activ-page-hero-enter-letter 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
}

@media (prefers-reduced-motion: reduce) {
	.activ-page-hero .activ-hero__enter,
	.activ-page-hero.activ-hero--entrance-pending :is(
		.activ-page-hero__content > .activ-breadcrumbs .activ-breadcrumbs__item,
		.activ-page-hero__content > .activ-page-hero__headline,
		.activ-page-hero__content > .activ-page-hero__subhead,
		.activ-page-hero__content > .wp-block-heading,
		.activ-page-hero__content > .wp-block-paragraph,
		.activ-page-hero__content > .wp-block-buttons,
		.activ-page-hero__content > .wp-block-button
	) {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}