.htv-hero {
	position: relative;
	min-height: 607px;
	color: var(--siliteh-color-midnight-navy);
	background: var(--siliteh-color-ghost-white);
}

.htv-hero__image,
.htv-hero__overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.htv-hero__image {
	object-fit: cover;
	object-position: center;
}

/* The current desktop, tablet and mobile Figma heroes use the photo directly. */
.htv-hero__overlay {
	background: none;
}

.htv-hero__inner {
	position: relative;
	z-index: 1;
	width: min(1320px, calc(100% - 80px));
	margin-inline: auto;
	padding-top: 64px;
}

.htv-hero .home-eyebrow {
	font-weight: 800;
	line-height: 1;
}

.htv-hero h1 {
	width: 827px;
	max-width: 100%;
	min-height: 281px;
	margin: 24px 0;
	font-size: var(--siliteh-font-h1);
	font-weight: 500;
	letter-spacing: -2.16px;
	line-height: 1.3;
}

.htv-hero__description {
	width: 624px;
	max-width: 100%;
	margin: 0 0 44px;
	font-size: var(--siliteh-font-body-medium);
	line-height: 1.25;
}

/* Longer translations cross dark photo areas; keep their text readable. */
html[lang^="pl"] .htv-hero h1,
html[lang^="ru"] .htv-hero h1,
html[lang^="pl"] .htv-hero__description,
html[lang^="ru"] .htv-hero__description {
	position: relative;
	z-index: 0;
}

html[lang^="pl"] .htv-hero h1::before,
html[lang^="ru"] .htv-hero h1::before,
html[lang^="pl"] .htv-hero__description::before,
html[lang^="ru"] .htv-hero__description::before {
	position: absolute;
	z-index: -1;
	inset: -8px;
	border-radius: var(--siliteh-radius-card);
	background: var(--siliteh-color-ghost-white-94);
	content: "";
}

@media (max-width: 1024px) {
	.htv-hero {
		min-height: 698px;
	}

	.htv-hero h1 {
		width: 100%;
		max-width: 754px;
		min-height: 0;
	}

	.htv-hero__description {
		/* Figma's full-width copy crosses dark photography and fails AA contrast. */
		width: 480px;
	}
}

/* Shorter measures keep intermediate-width text inside the light photo area. */
@media (max-width: 767px) {
	.htv-hero h1 {
		max-width: 335px;
		font-size: 44px;
		letter-spacing: -1.32px;
		line-height: 1.3;
	}

	.htv-hero__description {
		width: 282px;
	}
}

@media (max-width: 600px) {
	.htv-hero {
		min-height: 610px;
	}

	.htv-hero__inner {
		width: calc(100% - 40px);
		padding-top: 64px;
	}

	.htv-hero h1 {
		font-size: 44px;
		letter-spacing: -1.32px;
		line-height: 1.3;
	}

	.htv-hero__description {
		width: 282px;
		max-width: 100%;
		margin-bottom: 24px;
	}
}