.hero {
	position: relative;
	min-height: 620px;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	color: var(--white);
}

/* Match the header's edge inset so the hero text lines up with the
   logo above it, instead of the wider generic .container gutter. */
.hero .container {
	width: min(100% - var(--edge-inset), var(--container));
}

.hero-background,
.hero-overlay {
	position: absolute;
	inset: 0;
}

.hero-background img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-overlay {
	background: linear-gradient(
		100deg,
		var(--dark) 0%,
		color-mix(in srgb, var(--dark) 78%, transparent) 32%,
		color-mix(in srgb, var(--dark) 35%, transparent) 60%,
		color-mix(in srgb, var(--dark) 10%, transparent) 100%
	);
}

.hero-content {
	position: relative;
	z-index: 2;
	max-width: 760px;
	padding: 90px 0 80px;
	/* A touch more breathing room than the header's edge inset, so the
	   heading doesn't sit flush against the logo above it. */
	margin-left: var(--hero-text-offset, 48px);
}

.hero .section-tag {
	color: var(--secondary);
}

.hero h1 {
	color: var(--white);
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	margin: 15px 0 25px;
}

.hero p {
	color: var(--white);
	font-size: 1.2rem;
	max-width: 650px;
	margin-bottom: 35px;
}

.hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

@media (max-width: 768px) {

	.hero-content {
		margin-left: 0;
	}

}

@media (max-width: 575px) {

	.hero {
		min-height: 540px;
	}

	.hero-content {
		padding: 70px 0 50px;
	}

	.hero-buttons {
		flex-direction: column;
		align-items: flex-start;
	}

}