/* Homepage composition only. Reuse foundation and component tokens. */
.fr-home-hero {
	--fr-hero-grid: clamp(4.25rem, 8vw, 7.5rem);
	background-color: var(--fr-color-hero-paper);
	background-image:
		linear-gradient(rgb(27 28 27 / 11%) var(--fr-rule-width), transparent var(--fr-rule-width)),
		linear-gradient(90deg, rgb(27 28 27 / 11%) var(--fr-rule-width), transparent var(--fr-rule-width)),
		radial-gradient(circle at 50% 42%, rgb(255 253 247 / 44%), transparent 58%);
    background-position: 0 0, 0 0, center;
    background-size: var(--fr-hero-grid) var(--fr-hero-grid), var(--fr-hero-grid) var(--fr-hero-grid), auto;
    border-bottom: var(--fr-rule-width) solid var(--fr-color-rule);
    border-top: var(--fr-rule-width) solid var(--fr-color-rule);
    min-height: clamp(32rem, 54vw, 48rem);
    overflow: hidden;
    position: relative;
}

.fr-home-hero::after {
	background-image: radial-gradient(rgb(54 48 40 / 22%) .45px, transparent .65px);
	background-size: 4px 4px;
	content: "";
	inset: 0;
	mix-blend-mode: multiply;
	opacity: .12;
	pointer-events: none;
	position: absolute;
}

.fr-home-hero__canvas {
	height: clamp(32rem, 54vw, 48rem);
	position: relative;
}

.fr-home-hero__content {
	height: 100%;
	position: relative;
}

.fr-home-hero__marker-frame {
	height: 100%;
	left: 50%;
	max-width: 90rem;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	width: 100%;
	z-index: 4;
}

.fr-home-hero__disc {
	background: var(--fr-color-vermilion);
	border-radius: 50%;
	height: clamp(17rem, 31vw, 29rem);
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: clamp(17rem, 31vw, 29rem);
	z-index: 1;
}

.fr-home-hero__disc::before {
	border: var(--fr-rule-width) solid rgb(16 17 16 / 42%);
	border-radius: inherit;
	content: "";
	inset: 7%;
	position: absolute;
}

.fr-home-hero__mark {
	color: var(--fr-color-ink);
	height: 1.5rem;
	position: absolute;
	width: 1.5rem;
	z-index: 4;
}

.fr-home-hero__mark::before,
.fr-home-hero__mark::after {
	background: currentColor;
	content: "";
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.fr-home-hero__mark::before { height: var(--fr-rule-width); width: 100%; }
.fr-home-hero__mark::after { height: 100%; width: var(--fr-rule-width); }
.fr-home-hero__mark--top-left { left: var(--fr-space-12); top: var(--fr-space-6); }
.fr-home-hero__mark--top-right { right: var(--fr-space-12); top: var(--fr-space-6); }
.fr-home-hero__mark--bottom-left { bottom: var(--fr-space-6); left: var(--fr-space-12); }
.fr-home-hero__mark--bottom-right { bottom: var(--fr-space-6); right: var(--fr-space-12); }

.fr-home-hero__title {
	color: var(--fr-color-ink-strong);
	font-family: var(--fr-font-display);
	font-size: clamp(4.5rem, 8.75vw, 9.25rem);
	font-weight: var(--fr-weight-black);
	left: 50%;
	letter-spacing: -.06em;
	line-height: .82;
	margin: 0;
	position: absolute;
	top: 50%;
	text-transform: uppercase;
	transform: translate(-50%, -56%);
	width: min(100%, 68rem);
	z-index: 2;
}

.fr-home-hero__title span { display: block; text-align: center; white-space: nowrap; }

.fr-home-hero__vial {
	bottom: clamp(5.6rem, 7vw, 7.2rem);
	display: block;
	height: auto;
	left: 50%;
	max-height: 68%;
	max-width: 15.5rem;
	object-fit: contain;
	position: absolute;
	transform: translateX(-50%);
	width: min(19vw, 15.5rem);
	z-index: 3;
}

.fr-home-hero__label {
	color: var(--fr-color-ink-strong);
	font-family: var(--fr-font-data);
	font-size: var(--fr-text-xs);
	font-weight: var(--fr-weight-bold);
	letter-spacing: .1em;
	line-height: 1.35;
	margin: 0;
	max-width: 13rem;
	position: absolute;
	text-transform: uppercase;
	z-index: 4;
}

.fr-home-hero__label--top-left { left: calc(var(--fr-page-gutter) + var(--fr-space-8)); top: var(--fr-space-12); }
.fr-home-hero__label--top-right { right: calc(var(--fr-page-gutter) + var(--fr-space-8)); text-align: right; top: var(--fr-space-12); }
.fr-home-hero__label--bottom-left { bottom: var(--fr-space-12); left: calc(var(--fr-page-gutter) + var(--fr-space-8)); }
.fr-home-hero__label--bottom-right { bottom: var(--fr-space-12); right: calc(var(--fr-page-gutter) + var(--fr-space-8)); text-align: right; }
.fr-home-hero__cta { bottom: var(--fr-space-8); left: 50%; position: absolute; transform: translateX(-50%); white-space: nowrap; z-index: 5; }

@media (max-width: 47.99rem) {
	.fr-home-hero { --fr-hero-grid: 4.5rem; min-height: 28rem; }
	.fr-home-hero__canvas { height: 28rem; }
	.fr-home-hero__marker-frame { width: calc(100% - (2 * var(--fr-space-6))); }
	.fr-home-hero__mark--top-left { left: 0; top: var(--fr-space-4); }
	.fr-home-hero__mark--top-right { right: 0; top: var(--fr-space-4); }
	.fr-home-hero__mark--bottom-left { bottom: var(--fr-space-4); left: 0; }
	.fr-home-hero__mark--bottom-right { bottom: var(--fr-space-4); right: 0; }
	.fr-home-hero__title { font-size: clamp(3.2rem, 16vw, 5.25rem); line-height: .83; transform: translate(-50%, -57%); width: 100%; }
	.fr-home-hero__title span { white-space: normal; }
	.fr-home-hero__vial { bottom: 4.9rem; max-width: 11rem; max-height: 65%; width: 39vw; }
	.fr-home-hero__label { font-size: .625rem; letter-spacing: .075em; max-width: 8.7rem; }
	.fr-home-hero__label--top-left { left: var(--fr-space-6); top: var(--fr-space-8); }
	.fr-home-hero__label--top-right { right: var(--fr-space-6); top: var(--fr-space-8); }
	.fr-home-hero__label--bottom-left, .fr-home-hero__label--bottom-right { display: none; }
	.fr-home-hero__cta { bottom: var(--fr-space-4); font-size: var(--fr-text-xs); min-height: 2.7rem; }
}