.home-hero {
	position: relative;
	display: grid;
	min-height: clamp(560px, calc(100svh - 76px), 820px);
	scroll-margin-top: 76px;
	background:
		var(--hero-image, linear-gradient(135deg, #20394f, #102333)),
		linear-gradient(135deg, #20394f, #0d1d2c 72%);
	background-position: center;
	background-size: cover;
	color: var(--color-white);
	overflow: hidden;
}

.home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 32%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 42%);
	z-index: 1;
	pointer-events: none;
}

.home-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 18% 22%, rgba(58, 124, 165, 0.22), transparent 34%),
		linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 100%),
		linear-gradient(0deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 100%);
	background-size: auto, 88px 88px, 88px 88px;
	mix-blend-mode: screen;
	opacity: 0.18;
	pointer-events: none;
	z-index: 1;
}

.home-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.home-hero.has-hero-video {
	background:
		radial-gradient(circle at 72% 28%, rgba(58, 124, 165, 0.22), transparent 34%),
		linear-gradient(135deg, #20394f 0%, #102333 58%, #0d1d2c 100%);
}

.home-hero.has-hero-video .home-hero__video {
	opacity: 0;
	transform: scale(1.012);
	transition:
		opacity 0.9s ease,
		transform 1.2s ease;
}

.home-hero.has-hero-video.is-video-ready .home-hero__video {
	opacity: 1;
	transform: scale(1);
}

.home-hero__loader {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	align-items: end;
	padding:
		0 max(16px, calc((100vw - var(--container)) / 2))
		clamp(24px, 4vw, 48px);
	pointer-events: none;
	opacity: 1;
	transition:
		opacity 0.6s ease,
		visibility 0.6s ease;
}

.home-hero.is-video-ready .home-hero__loader,
.home-hero.is-video-unavailable .home-hero__loader {
	visibility: hidden;
	opacity: 0;
}

.home-hero__loader-line {
	position: relative;
	display: block;
	width: min(220px, 38vw);
	height: 2px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
}

.home-hero__loader-line::after {
	position: absolute;
	inset: 0;
	width: 42%;
	border-radius: inherit;
	background:
		linear-gradient(90deg, rgba(243, 112, 33, 0.1), rgba(243, 112, 33, 0.95), rgba(255, 255, 255, 0.65));
	animation: homeHeroLoader 1.35s ease-in-out infinite;
	content: "";
}

@keyframes homeHeroLoader {
	0% {
		transform: translateX(-110%);
	}

	100% {
		transform: translateX(260%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-hero.has-hero-video .home-hero__video,
	.home-hero__loader {
		transition: none;
	}

	.home-hero__loader-line::after {
		width: 100%;
		animation: none;
		opacity: 0.55;
		transform: translateX(0);
	}
}

.home-hero__body {
	display: grid;
	align-items: end;
	position: relative;
	z-index: 2;
	width: min(100% - 32px, var(--container));
	margin-inline: auto;
	padding-block: clamp(92px, 12vw, 150px) clamp(28px, 4.5vw, 54px);
}

.home-hero__content {
	position: relative;
	isolation: isolate;
	display: grid;
	gap: clamp(18px, 3vw, 28px);
	max-width: 760px;
}

.home-hero__content::before {
	position: absolute;
	inset: clamp(-28px, -3vw, -18px) clamp(-52px, -5vw, -24px);
	z-index: -1;
	background:
		radial-gradient(ellipse at 42% 55%, rgba(0, 0, 0, calc(var(--hero-overlay-strong, 0.34) * 0.72)) 0%, rgba(0, 0, 0, calc(var(--hero-overlay-mid, 0.22) * 0.58)) 46%, rgba(0, 0, 0, 0) 76%);
	content: "";
	pointer-events: none;
}

.home-hero h1 {
	max-width: 760px;
	margin: 0;
	font-size: clamp(3rem, 8vw, 6.6rem);
	line-height: 1.08;
	letter-spacing: 0;
	text-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
}

.home-hero h1 .no-break {
	white-space: nowrap;
}

.home-hero .lead {
	max-width: 620px;
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	text-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.home-hero .button-row {
	margin-top: 4px;
}

@media (max-width: 767px) {
	.home-hero.has-hero-video {
		background:
			radial-gradient(circle at 70% 18%, rgba(58, 124, 165, 0.22), transparent 36%),
			linear-gradient(135deg, #20394f 0%, #102333 58%, #0d1d2c 100%);
	}

	.home-hero__loader {
		padding: 0 28px 24px;
	}

	.home-hero__loader-line {
		width: min(168px, 48vw);
	}
}
