.wpd-page-hero {
	padding: clamp(120px, 15vw, 150px) 0 clamp(60px, 8vw, 70px);
	position: relative;
	overflow: hidden;
	background: var(--paper);
}

.wpd-page-hero .page-hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		radial-gradient(ellipse at top left, rgba(14, 62, 43, 0.04) 0%, transparent 60%),
		radial-gradient(ellipse at bottom right, rgba(14, 62, 43, 0.04) 0%, transparent 60%);
}

[data-theme="dark"] .wpd-page-hero .page-hero-bg {
	background-image:
		radial-gradient(ellipse at top left, rgba(198, 242, 78, 0.06) 0%, transparent 60%),
		radial-gradient(ellipse at bottom right, rgba(198, 242, 78, 0.04) 0%, transparent 60%);
}

.wpd-page-hero .page-hero-grid-lines {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, var(--rule-strong) 1px, transparent 1.5px);
	background-size: 32px 32px;
	mask-image:
		radial-gradient(ellipse at top left, #000 10%, transparent 70%),
		radial-gradient(ellipse at bottom right, #000 10%, transparent 70%);
	-webkit-mask-image:
		radial-gradient(ellipse at top left, #000 10%, transparent 70%),
		radial-gradient(ellipse at bottom right, #000 10%, transparent 70%);
	opacity: 0.6;
}

[data-theme="dark"] .wpd-page-hero .page-hero-grid-lines {
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1.5px);
	opacity: 1;
}

.wpd-page-hero .wrap {
	position: relative;
	z-index: 1;
}

.wpd-page-hero .page-hero-copy {
	max-width: 860px;
	margin: 0;
	text-align: left;
}

.wpd-page-hero .page-hero-breadcrumb {
	font-family: var(--font-mono);
	font-size: 15px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 28px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.wpd-page-hero .page-hero-breadcrumb a {
	color: var(--ink-3);
}

.wpd-page-hero h1 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(34px, 5vw, 50px);
	line-height: 0.96;
	color: var(--forest);
	margin: 14px 0 28px;
}

.wpd-page-hero h1 .it {
	font-style: italic;
	color: var(--lime);
}

.wpd-page-hero .page-hero-sub {
	color: var(--ink-2);
	font-size: 17px;
	line-height: 1.65;
	max-width: 800px;
	margin: 0 0 36px;
}

.wpd-page-hero .page-hero-ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}