/**
 * Header and hero presentation layer.
 * All visual values use the centrally managed MarcLitz.de tokens and type roles.
 */

:root {
	--ml-color-brand: #000C3A;
	--ml-color-bg: #0A0A0B;
	--ml-color-white: #FFFFFF;
	--ml-font-headline: inherit;
	--ml-font-body: inherit;
	--ml-font-meta: inherit;
	--ml-size-hero-desktop: 168px;
	--ml-size-hero-tablet: 100px;
	--ml-size-hero-mobile: 50px;
	--ml-size-h2-desktop: 72px;
	--ml-size-h2-tablet: 54px;
	--ml-size-h2-mobile: 40px;
	--ml-size-h3-desktop: 48px;
	--ml-size-h3-tablet: 36px;
	--ml-size-h3-mobile: 28px;
	--ml-size-body-desktop: 16px;
	--ml-size-body-tablet: 16px;
	--ml-size-body-mobile: 16px;
	--ml-size-meta-desktop: 12px;
	--ml-size-meta-tablet: 12px;
	--ml-size-meta-mobile: 11px;
	--ml-color-hero: var(--ml-color-white);
	--ml-color-h2: var(--ml-color-white);
	--ml-color-h3: var(--ml-color-white);
	--ml-color-body: var(--ml-color-white);
	--ml-color-meta: var(--ml-color-white);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: var(--ml-color-bg, #0A0A0B);
}

body {
	margin: 0;
	min-width: 0;
	background: var(--ml-color-bg, #0A0A0B);
	color: var(--ml-color-body, var(--ml-color-white, #FFFFFF));
	font-family: var(--ml-font-body, inherit);
	font-size: var(--ml-size-body-mobile, 16px);
	font-weight: 400;
}

h2,
h3 {
	margin: 0;
	font-family: var(--ml-font-headline, inherit);
	font-weight: 600;
}

h2 {
	color: var(--ml-color-h2, var(--ml-color-white, #FFFFFF));
	font-size: var(--ml-size-h2-mobile, 40px);
}

h3 {
	color: var(--ml-color-h3, var(--ml-color-white, #FFFFFF));
	font-size: var(--ml-size-h3-mobile, 28px);
}

strong,
b {
	font-weight: 600;
}

img,
video,
iframe {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--ml-color-white, #FFFFFF);
	outline-offset: 4px;
}

.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.site-shell,
.site-main {
	min-height: 100dvh;
	background: var(--ml-color-bg, #0A0A0B);
}

.site-background {
	min-height: 100dvh;
	transition: filter 560ms cubic-bezier(0.22, 1, 0.36, 1), opacity 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-legal-open {
	overflow: hidden;
}

body.is-legal-open .site-background {
	filter: blur(7px);
	opacity: 0.42;
	pointer-events: none;
}

.site-header {
	position: absolute;
	z-index: 2;
	inset: 0 0 auto;
	background: linear-gradient(var(--ml-color-bg, #0A0A0B), transparent);
	animation: header-arrive 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.site-header::after {
	position: absolute;
	inset: auto 1rem 0;
	block-size: 1px;
	background: var(--ml-color-white, #FFFFFF);
	content: "";
	transform: scaleX(0.18);
	transform-origin: left center;
	animation: header-rule-arrive 760ms 100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.site-header__inner {
	display: grid;
	grid-template-columns: 4.25rem minmax(0, 1fr);
	align-items: center;
	min-block-size: 5.25rem;
	gap: 0.75rem;
	padding-inline: 1rem;
}

.site-header__links {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0.25rem 0.8rem;
	justify-self: end;
}

.site-brand {
	display: block;
	inline-size: 4rem;
	block-size: 3rem;
	transform-origin: left center;
	animation: logo-arrive 650ms 100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.site-brand--asset-missing {
	visibility: hidden;
}

.site-brand__mark {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	background-color: var(--ml-color-white, #FFFFFF);
	-webkit-mask-image: url("../images/brand/logo.svg");
	mask-image: url("../images/brand/logo.svg");
	-webkit-mask-position: left center;
	mask-position: left center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.site-navigation-toggle,
.site-header__contact,
.hero__contact {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	font-family: var(--ml-font-meta, inherit);
	font-size: var(--ml-size-meta-mobile, 11px);
	line-height: 1;
	letter-spacing: 0.11em;
	text-decoration: none;
	text-transform: uppercase;
}

.site-navigation-toggle {
	grid-column: 2;
	justify-self: end;
	gap: 0.35rem;
	padding-inline: 0.75rem;
	border: 0;
	background: transparent;
	color: inherit;
	color: var(--ml-color-meta, var(--ml-color-white, #FFFFFF));
	cursor: pointer;
}

.site-navigation-toggle,
.site-header__contact,
.site-navigation__list a,
.hero__eyebrow,
.hero__contact {
	color: var(--ml-color-meta, var(--ml-color-white, #FFFFFF));
}

.site-navigation-toggle__line {
	display: block;
	inline-size: 1.25rem;
	block-size: 1px;
	background: var(--ml-color-white, #FFFFFF);
}

.site-header__contact {
	position: relative;
	padding-inline: 0.25rem;
	border: 0;
	text-decoration: none;
}

.site-header__legal {
	font-family: var(--ml-font-meta, inherit);
	font-size: var(--ml-size-meta-mobile, 11px);
	letter-spacing: 0.11em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	opacity: 0.58;
	transition: opacity 180ms ease;
}

.site-header__legal:hover,
.site-header__legal:focus-visible {
	opacity: 1;
}

.site-header__legal.is-unassigned {
	cursor: default;
}

.site-header__contact::after {
	position: absolute;
	inset: auto 0 0.7rem;
	block-size: 1px;
	background: var(--ml-color-white, #FFFFFF);
	opacity: 0.62;
	content: "";
	transform: scaleX(0.55);
	transform-origin: left center;
	transition: transform 220ms ease;
}

.site-header__contact:hover::after,
.site-header__contact:focus-visible::after {
	transform: scaleX(1);
}

.site-navigation {
	position: absolute;
	inset: 100% 1rem auto;
	display: none;
	border-block: 1px solid var(--ml-color-white, #FFFFFF);
	background: var(--ml-color-bg, #0A0A0B);
}

.site-navigation.is-open {
	display: block;
}

.site-navigation__list,
.hero__services {
	padding: 0;
	margin: 0;
	list-style: none;
}

.site-navigation__list a {
	display: block;
	padding: 1rem 0;
	font-family: var(--ml-font-meta, inherit);
	font-size: var(--ml-size-meta-mobile, 11px);
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.hero {
	--ml-hero-rail-space: 11.5rem;
	--ml-hero-safe-area: 2.5rem;
	--ml-hero-panel-clearance: 1.5rem;
	position: relative;
	display: grid;
	min-block-size: max(42rem, 100svh);
	overflow: clip;
	isolation: isolate;
	background: var(--ml-color-bg, #0A0A0B);
}

.hero__media {
	position: absolute;
	z-index: -1;
	inset: 0 0 var(--ml-hero-rail-space);
	background: var(--ml-color-bg, #0A0A0B);
}

.hero__motif {
	position: absolute;
	inset-block: 25% 1.25rem;
	inset-inline-end: 1.25rem;
	display: block;
	inline-size: 58%;
	block-size: calc(75% - 1.25rem);
	object-fit: contain;
	object-position: right center;
}

.hero[data-hero-state]:not([data-hero-state="overview"]) .hero__motif {
	display: none;
}

.hero__motif.is-hero-content-exiting {
	animation-duration: 300ms;
}

.hero__motif.is-hero-content-entering {
	transition: opacity 460ms cubic-bezier(0.22, 1, 0.36, 1), transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__media::before,
.hero__media::after {
	position: absolute;
	content: "";
	pointer-events: none;
}

.hero__media::before {
	inset: 17% 1rem 1rem;
	border: 1px solid var(--ml-color-white, #FFFFFF);
	opacity: 0.16;
	transform: scaleX(0.94);
	transform-origin: left center;
	animation: frame-arrive 900ms 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__media::after {
	inset: auto 1rem 1rem auto;
	inline-size: 32%;
	block-size: 1px;
	background: var(--ml-color-white, #FFFFFF);
	opacity: 0.42;
	transform: scaleX(0);
	transform-origin: right center;
	animation: frame-rule-arrive 820ms 440ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__inner {
	display: grid;
	grid-template-rows: var(--ml-hero-safe-area) minmax(0, 1fr) auto;
	min-block-size: max(42rem, 100svh);
	padding: 7.5rem 1rem 1.25rem;
}

.hero__identity {
	display: flex;
	align-items: flex-start;
	position: relative;
	z-index: 1;
}

.hero__eyebrow {
	position: relative;
	margin: 0;
	padding-inline-start: 1.1rem;
	font-family: var(--ml-font-meta, inherit);
	color: var(--ml-color-meta, var(--ml-color-white, #FFFFFF));
	font-size: var(--ml-size-meta-mobile, 11px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.hero__eyebrow::before {
	position: absolute;
	inset: 0.42em auto auto 0;
	inline-size: 0.6rem;
	block-size: 1px;
	background: var(--ml-color-white, #FFFFFF);
	opacity: 0.58;
	content: "";
}

.hero__headline-group {
	display: flex;
	min-block-size: 0;
	align-items: center;
	padding-block: clamp(3rem, 9svh, 7rem);
}

.hero__headline-stage {
	position: relative;
	inline-size: 100%;
	min-block-size: 0;
}

.hero__title {
	max-inline-size: 9.5ch;
	margin: 0;
	font-family: var(--ml-font-headline, inherit);
	color: var(--ml-color-hero, var(--ml-color-white, #FFFFFF));
	font-size: var(--ml-size-hero-mobile, 50px);
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.055em;
	text-wrap: balance;
}

.hero__title-mask {
	display: block;
	padding-block: 0.08em 0.2em;
	padding-inline: 0.08em;
	margin-inline: -0.08em;
	line-height: 1.08;
	overflow: visible;
}

.hero__title-placeholder {
	display: block;
	line-height: 1.08;
	clip-path: inset(0 0 100% 0);
	transform: translateY(104%);
	animation: hero-mask-reveal 820ms 160ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero.is-initial-title-motion-complete .hero__title-placeholder {
	clip-path: none;
	transform: none;
	animation: none;
}

.hero[data-hero-state]:not([data-hero-state="overview"]) .hero__title {
	display: none;
}

.hero__state-panel {
	position: relative;
	z-index: 0;
	min-block-size: 1px;
	padding-block-start: var(--ml-hero-panel-clearance);
}

.hero__state-panel[hidden] {
	display: none !important;
}

.hero__contact-panel[hidden] {
	display: none !important;
}

.hero__service-view[hidden],
.hero__reference-view[hidden] {
	display: none !important;
}

.hero__reference[hidden] {
	display: none !important;
}

.hero__service-view {
	min-block-size: 100%;
	font-family: var(--ml-font-body, inherit);
}

.hero__contact-panel {
	position: relative;
	z-index: 0;
	min-block-size: 1px;
	padding-block-start: var(--ml-hero-panel-clearance);
	font-family: var(--ml-font-body, inherit);
}

.hero__contact-state {
	display: grid;
	gap: 2rem;
	min-inline-size: 0;
}

.hero__contact-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	min-inline-size: 0;
}

.hero__contact-title {
	margin: 0;
	font-family: var(--ml-font-headline, inherit);
	font-size: var(--ml-size-h2-mobile, 42px);
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.035em;
}

.hero__contact-form {
	min-inline-size: 0;
	font-family: var(--ml-font-body, inherit);
}

.hero__contact-form .wpforms-container {
	max-inline-size: none;
	margin: 0;
}

.hero__contact-form .wpforms-form {
	display: grid;
	gap: 0.5rem;
}

.hero__contact-form .wpforms-field {
	padding: 0;
}

.hero__contact-form .wpforms-field-label,
.hero__contact-form .wpforms-field-sublabel {
	margin-block-end: 0.45rem;
	font-family: var(--ml-font-meta, inherit);
	font-size: var(--ml-size-meta-mobile, 11px);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hero__contact-form .wpforms-required-label,
.hero__contact-form .wpforms-error {
	color: var(--ml-color-white, #FFFFFF);
}

.hero__contact-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea) {
	inline-size: 100%;
	min-block-size: 2.9rem;
	padding: 0.75rem 0;
	border: 0;
	border-block-end: 1px solid color-mix(in srgb, var(--ml-color-white, #FFFFFF) 58%, transparent);
	border-radius: 0;
	background: transparent;
	color: var(--ml-color-white, #FFFFFF);
	font: inherit;
}

.hero__contact-form textarea {
	min-block-size: 7rem;
	resize: vertical;
}

.hero__contact-form :is(input, select, textarea)::placeholder {
	color: color-mix(in srgb, var(--ml-color-white, #FFFFFF) 52%, transparent);
	opacity: 1;
}

.hero__contact-form :is(input, select, textarea):focus {
	border-color: var(--ml-color-white, #FFFFFF);
	outline: 1px solid var(--ml-color-white, #FFFFFF);
	outline-offset: 0.25rem;
}

.hero__contact-form :is(.wpforms-field-checkbox, .wpforms-field-radio) ul {
	display: grid;
	gap: 0.55rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.hero__contact-form :is(.wpforms-field-checkbox, .wpforms-field-radio) label {
	font: inherit;
}

.hero__contact-form input[type="checkbox"],
.hero__contact-form input[type="radio"] {
	accent-color: var(--ml-color-white, #FFFFFF);
}

.hero__contact-form .wpforms-field-description,
.hero__contact-form .wpforms-error {
	margin-block-start: 0.45rem;
	font-family: var(--ml-font-meta, inherit);
	font-size: var(--ml-size-meta-mobile, 11px);
	letter-spacing: 0.05em;
}

.hero__contact-form .wpforms-submit-container {
	padding: 0;
}

.hero__contact-form button[type="submit"] {
	min-inline-size: 12rem;
	min-block-size: 2.9rem;
	padding: 0.75rem 0;
	border: 1px solid var(--ml-color-white, #FFFFFF);
	border-inline: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ml-color-white, #FFFFFF);
	font-family: var(--ml-font-meta, inherit);
	font-size: var(--ml-size-meta-mobile, 11px);
	letter-spacing: 0.11em;
	text-transform: uppercase;
	cursor: pointer;
}

.hero__contact-form button[type="submit"]:hover,
.hero__contact-form button[type="submit"]:focus-visible {
	padding-inline: 0.75rem;
	outline: 1px solid var(--ml-color-white, #FFFFFF);
	outline-offset: 0.25rem;
}

.hero__contact-form .wpforms-confirmation-container-full {
	border: 1px solid var(--ml-color-white, #FFFFFF);
	border-radius: 0;
	background: transparent;
	color: var(--ml-color-white, #FFFFFF);
}

.legal-overlay[hidden],
.legal-overlay__document[hidden] {
	display: none !important;
}

.legal-overlay {
	position: fixed;
	z-index: 20;
	inset: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: visibility 0ms linear 620ms, opacity 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-legal-open .legal-overlay {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition-delay: 0ms;
}

.legal-overlay__wash {
	position: absolute;
	inset: 0;
	background: rgb(10 10 11 / 0.26);
	pointer-events: none;
}

.legal-overlay__scroller {
	position: relative;
	block-size: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
	padding: clamp(1.25rem, 4vw, 4rem) clamp(1rem, 6vw, 7rem) clamp(3rem, 8vw, 7rem);
}

.legal-overlay__inner {
	inline-size: min(100%, 76rem);
	margin-inline: auto;
	filter: blur(7px);
	opacity: 0;
	transition: filter 620ms cubic-bezier(0.22, 1, 0.36, 1), opacity 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-legal-open .legal-overlay__inner {
	filter: blur(0);
	opacity: 1;
}

.legal-overlay__back,
.legal-overlay__switcher button {
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ml-color-white, #FFFFFF);
	font-family: var(--ml-font-meta, inherit);
	font-size: var(--ml-size-meta-mobile, 11px);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.legal-overlay__back {
	position: sticky;
	top: 0;
	z-index: 1;
	display: inline-flex;
	gap: 0.7rem;
	align-items: center;
	min-block-size: 2.75rem;
	padding: 0.75rem 0;
	margin-block-end: 1.5rem;
	box-shadow: 0 0 1.25rem 0.75rem rgb(10 10 11 / 0.74);
}

.legal-overlay__back > span:first-child {
	font-family: var(--ml-font-headline, inherit);
	font-size: 1.2rem;
	font-weight: 600;
	transition: transform 180ms ease;
}

.legal-overlay__back:hover > span:first-child,
.legal-overlay__back:focus-visible > span:first-child {
	transform: translateX(-0.25rem);
}

.legal-overlay__back:focus-visible,
.legal-overlay__switcher button:focus-visible,
.legal-overlay__content a:focus-visible {
	outline: 1px solid var(--ml-color-white, #FFFFFF);
	outline-offset: 0.35rem;
}

.legal-overlay__switcher {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	padding-block-end: 1.5rem;
	border-block-end: 1px solid color-mix(in srgb, var(--ml-color-white, #FFFFFF) 36%, transparent);
}

.legal-overlay__switcher button {
	padding: 0;
	opacity: 0.54;
	transition: opacity 180ms ease;
}

.legal-overlay__switcher button:hover,
.legal-overlay__switcher button:focus-visible,
.legal-overlay__switcher button[aria-current="page"] {
	opacity: 1;
}

.legal-overlay__document {
	max-inline-size: 70ch;
	padding-block: clamp(2.5rem, 7vw, 6rem);
	color: var(--ml-color-white, #FFFFFF);
	font-family: var(--ml-font-body, inherit);
	font-size: clamp(1rem, 1.05vw, 1.125rem);
	line-height: 1.65;
	transition: filter 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.legal-overlay.is-switching .legal-overlay__document:not([hidden]) {
	filter: blur(5px);
	opacity: 0;
}

.legal-overlay__document h1,
.legal-overlay__document h2,
.legal-overlay__document h3,
.legal-overlay__document h4 {
	margin: 2.5em 0 0.7em;
	color: var(--ml-color-white, #FFFFFF);
	font-family: var(--ml-font-headline, inherit);
	font-weight: 600;
	line-height: 0.94;
	letter-spacing: -0.03em;
}

.legal-overlay__document h1 {
	margin-block-start: 0;
	font-size: clamp(3.25rem, 8vw, 7rem);
}

.legal-overlay__document h2 {
	font-size: clamp(2.25rem, 5vw, 4.5rem);
}

.legal-overlay__document h3 {
	font-size: clamp(1.75rem, 3vw, 2.75rem);
}

.legal-overlay__document h4 {
	font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.legal-overlay__document :is(p, ul, ol, blockquote, table) {
	margin: 0 0 1.25rem;
}

.legal-overlay__document :is(ul, ol) {
	padding-inline-start: 1.25rem;
}

.legal-overlay__document li + li {
	margin-block-start: 0.45rem;
}

.legal-overlay__document blockquote {
	padding-inline-start: 1rem;
	border-inline-start: 1px solid var(--ml-color-white, #FFFFFF);
	color: color-mix(in srgb, var(--ml-color-white, #FFFFFF) 78%, transparent);
}

.legal-overlay__document a {
	color: var(--ml-color-white, #FFFFFF);
	text-decoration-color: color-mix(in srgb, var(--ml-color-white, #FFFFFF) 58%, transparent);
	text-underline-offset: 0.18em;
}

.legal-overlay__document strong {
	font-weight: 600;
}

.legal-overlay__document table {
	display: block;
	max-inline-size: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.legal-overlay__document :is(th, td) {
	padding: 0.75rem;
	border: 1px solid color-mix(in srgb, var(--ml-color-white, #FFFFFF) 34%, transparent);
	text-align: start;
	vertical-align: top;
}

.hero__service-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	min-inline-size: 0;
}

.hero__service-information {
	min-inline-size: 0;
}

.hero__service-title,
.hero__service-content-title {
	margin: 0;
	font-family: var(--ml-font-headline, inherit);
	font-size: var(--ml-size-h2-mobile, 42px);
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.035em;
}

.hero__service-content-title {
	text-wrap: balance;
}

.hero__service-description {
	max-inline-size: 46rem;
	margin-block: 1.25rem 0;
}

.hero__service-description > :first-child {
	margin-block-start: 0;
}

.hero__service-description > :last-child {
	margin-block-end: 0;
}

.hero__service-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0;
	max-inline-size: 56rem;
	padding: 0;
	margin: 1.5rem 0 0;
	list-style: none;
	font-family: var(--ml-font-meta, inherit);
	font-size: var(--ml-size-meta-mobile, 11px);
	letter-spacing: 0.09em;
	line-height: 1.5;
	text-transform: uppercase;
}

.hero__service-terms li {
	display: inline-flex;
	align-items: center;
}

.hero__service-terms li:not(:last-child)::after {
	padding-inline: 0.55rem;
	color: var(--ml-color-white, #FFFFFF);
	content: "·";
	opacity: 0.58;
}

.hero__references-entry,
.hero__service-back {
	display: inline-flex;
	gap: 1rem;
	align-items: center;
	min-block-size: 2.75rem;
	padding: 0.75rem 0;
	border: 0;
	border-block-end: 1px solid var(--ml-color-white, #FFFFFF);
	background: transparent;
	color: var(--ml-color-white, #FFFFFF);
	font-family: var(--ml-font-meta, inherit);
	font-size: var(--ml-size-meta-mobile, 11px);
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

.hero__references-entry > span:last-child,
.hero__service-back > span {
	font-family: var(--ml-font-headline, inherit);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 0.5;
	transition: transform 180ms ease;
}

.hero__references-entry:hover > span:last-child,
.hero__references-entry:focus-visible > span:last-child {
	transform: translateX(0.3rem);
}

.hero__service-back:hover > span,
.hero__service-back:focus-visible > span {
	transform: translateX(-0.3rem);
}

.hero__references-entry:focus-visible,
.hero__service-back:focus-visible {
	outline: 1px solid var(--ml-color-white, #FFFFFF);
	outline-offset: 0.35rem;
}

.hero__reference-deck {
	display: grid;
	gap: 1rem;
	max-inline-size: 100%;
	font-family: var(--ml-font-body, inherit);
}

.hero__reference-kicker,
.hero__reference-meta,
.hero__reference-meta-line,
.hero__reference-navigation {
	margin: 0;
	font-family: var(--ml-font-meta, inherit);
	font-size: var(--ml-size-meta-mobile, 11px);
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.hero__reference {
	display: grid;
	gap: 1rem;
}

.hero__reference-copy {
	min-inline-size: 0;
}

.hero__reference-side {
	display: grid;
	gap: 0.75rem;
	min-inline-size: 0;
}

.hero__reference-title {
	margin: 0;
	font-family: var(--ml-font-headline, inherit);
	font-size: var(--ml-size-h3-mobile, 28px);
	font-weight: 600;
	line-height: 0.95;
}

.hero__reference-meta-line {
	margin-block-start: 0.65rem;
	color: var(--ml-color-meta, var(--ml-color-white, #FFFFFF));
}

.hero__reference-description {
	margin-block-start: 0.9rem;
}

.hero__reference-description > :first-child {
	margin-block-start: 0;
}

.hero__reference-description > :last-child {
	margin-block-end: 0;
}

.hero__reference-media {
	min-inline-size: 0;
}

.hero__reference-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: 0.5rem 0.75rem;
	margin: 0;
	font-family: var(--ml-font-meta, inherit);
	font-size: var(--ml-size-meta-mobile, 11px);
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.hero__reference-facts div {
	display: grid;
	gap: 0.2rem;
}

.hero__reference-facts dt {
	color: var(--ml-color-meta, var(--ml-color-white, #FFFFFF));
	opacity: 0.58;
}

.hero__reference-facts dd {
	margin: 0;
	color: var(--ml-color-white, #FFFFFF);
}

.hero__reference-media img,
.hero__reference-media video {
	inline-size: 100%;
	block-size: auto;
}

.hero__reference-navigation {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.hero__reference-navigation button {
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	border: 0;
	background: transparent;
	color: var(--ml-color-white, #FFFFFF);
	font: inherit;
	cursor: pointer;
}

.hero__overview-control {
	min-block-size: 2.75rem;
	padding: 0.75rem 0;
	border: 0;
	border-block: 1px solid var(--ml-color-white, #FFFFFF);
	background: transparent;
	color: var(--ml-color-white, #FFFFFF);
	font-family: var(--ml-font-meta, inherit);
	font-size: var(--ml-size-meta-mobile, 11px);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.hero__closing {
	display: grid;
	gap: 1.5rem;
	align-items: end;
}

.hero__services {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	max-inline-size: 42rem;
	font-family: var(--ml-font-meta, inherit);
	font-size: var(--ml-size-meta-mobile, 11px);
	font-weight: 400;
	letter-spacing: 0.09em;
	line-height: 1.25;
	text-transform: uppercase;
}

.hero__services li {
	position: relative;
}

.hero__services li::before {
	position: absolute;
	inset: 0.55rem auto 0.45rem 0;
	inline-size: 1px;
	background: var(--ml-color-white, #FFFFFF);
	content: "";
	opacity: 0.42;
}

.hero__service-index {
	flex: 0 0 auto;
	color: var(--ml-color-white, #FFFFFF);
	opacity: 0.55;
}

.hero__service-label {
	color: var(--ml-color-white, #FFFFFF);
}

.hero__service-control {
	position: relative;
	display: flex;
	gap: 0.7rem;
	align-items: baseline;
	inline-size: 100%;
	min-block-size: 2.75rem;
	padding: 0.8rem 0.7rem 0.55rem 0.9rem;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.hero__service-control::after {
	position: absolute;
	inset: auto 0.7rem 0.3rem 0.9rem;
	block-size: 1px;
	background: var(--ml-color-white, #FFFFFF);
	content: "";
	opacity: 0.62;
	transform: scaleX(0.2);
	transform-origin: left center;
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__service-control:hover::after,
.hero__service-control:focus-visible::after,
.hero__service-control[aria-selected="true"]::after {
	transform: scaleX(1);
}

.hero__service-control:focus-visible {
	/* The existing active line is the visible focus treatment for these controls. */
	outline: 0;
}

.hero.is-content-transitioning [data-hero-state],
.hero.is-content-transitioning [data-hero-overview],
.hero.is-content-transitioning [data-hero-show-references],
.hero.is-content-transitioning [data-hero-show-service],
.hero.is-content-transitioning [data-reference-previous],
.hero.is-content-transitioning [data-reference-next] {
	pointer-events: none;
}

.is-hero-content-exiting,
.is-hero-content-enter-ready,
.is-hero-content-entering {
	pointer-events: none;
	will-change: opacity, transform;
}

.is-hero-content-exiting {
	animation: hero-content-exit 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.is-hero-content-enter-ready {
	opacity: 0;
	transform: translateY(1.5rem);
}

.is-hero-content-entering {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1), transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__contact {
	min-inline-size: 10.5rem;
	justify-self: start;
	gap: 1.7rem;
	padding: 1.08rem 0 1.03rem;
	border-block: 1px solid var(--ml-color-white, #FFFFFF);
	border-inline: 0;
	background: transparent;
	color: var(--ml-color-meta, var(--ml-color-white, #FFFFFF));
	font-size: calc(var(--ml-size-meta-mobile, 11px) + 1px);
	transition: color 180ms ease, padding-inline 180ms ease;
}

.hero__contact::before {
	inline-size: 0.7rem;
	block-size: 0.7rem;
	background: var(--ml-color-white, #FFFFFF);
	content: "";
	opacity: 0.72;
	transition: transform 180ms ease;
}

.hero__contact-arrow {
	font-family: var(--ml-font-headline, inherit);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 0.5;
	transition: transform 180ms ease;
}

.hero__contact:hover,
.hero__contact:focus-visible {
	padding-inline: 0.75rem;
	color: var(--ml-color-white, #FFFFFF);
}

.hero__contact:hover::before,
.hero__contact:focus-visible::before {
	transform: scale(1.35);
}

.hero__contact:hover .hero__contact-arrow,
.hero__contact:focus-visible .hero__contact-arrow {
	transform: translateX(0.3rem);
}

@keyframes header-arrive {
	from {
		clip-path: inset(0 0 100% 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes header-rule-arrive {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(0.18);
	}
}

@keyframes logo-arrive {
	from {
		opacity: 0;
		transform: scale(0.92);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes frame-arrive {
	from {
		opacity: 0;
		transform: scaleX(0.86);
	}

	to {
		opacity: 0.16;
		transform: scaleX(1);
	}
}

@keyframes frame-rule-arrive {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

@keyframes hero-mask-reveal {
	0% {
		clip-path: inset(0 0 100% 0);
		transform: translateY(104%);
	}

	82% {
		clip-path: inset(0 0 0 0);
		transform: translateY(0);
	}

	100% {
		clip-path: none;
		transform: translateY(0);
	}
}

@keyframes hero-content-exit {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(-0.625rem);
	}
}

@media (max-width: 39.999rem) {
	.hero,
	.hero__inner {
		/* Keeps room for the three-line title and closing rail without expanding tall phone viewports unnecessarily. */
		min-block-size: clamp(39rem, 100svh, 42rem);
	}

	.is-hero-content-enter-ready {
		transform: translateY(1rem);
	}
}

@media (max-width: 39.999rem) and (orientation: portrait) {
	.hero[data-hero-state="overview"],
	.hero:not([data-hero-state]),
	.hero[data-hero-state="overview"] .hero__inner,
	.hero:not([data-hero-state]) .hero__inner {
		min-block-size: clamp(38rem, 100svh, 39rem);
	}
}

@media (max-width: 60rem) and (max-height: 31rem) and (orientation: landscape) {
	.hero[data-hero-state="overview"],
	.hero:not([data-hero-state]) {
		--ml-hero-safe-area: 2.5rem;
		block-size: 34rem;
		min-block-size: 34rem;
	}

	.hero[data-hero-state="overview"] .hero__inner,
	.hero:not([data-hero-state]) .hero__inner {
		block-size: 100%;
		min-block-size: 0;
		padding: 7.5rem 1.25rem 1.25rem;
	}

	.hero[data-hero-state="overview"] .hero__headline-group,
	.hero:not([data-hero-state]) .hero__headline-group {
		padding-block: 1rem;
		padding-inline-start: 1.25rem;
	}

	.hero[data-hero-state="overview"] .hero__title,
	.hero:not([data-hero-state]) .hero__title {
		font-size: clamp(3.5rem, 8.2vw, 4.25rem);
	}

	.hero[data-hero-state="overview"] .hero__motif,
	.hero:not([data-hero-state]) .hero__motif {
		inline-size: 48%;
	}
}

@media (min-width: 40rem) {
	.hero {
		--ml-hero-rail-space: 7.5rem;
		--ml-hero-safe-area: 3rem;
		--ml-hero-panel-clearance: 1.75rem;
		block-size: max(42rem, 100svh);
		min-block-size: 0;
	}

	.hero__inner {
		block-size: 100%;
		min-block-size: 0;
	}

	.hero__headline-group,
	.hero__headline-stage,
	.hero__state-panel,
	.hero__contact-panel,
	.hero__reference-deck,
	.hero__service-view,
	.hero__reference-view {
		min-block-size: 0;
	}

	.hero__headline-group,
	.hero__headline-stage {
		block-size: 100%;
	}

	.hero__state-panel {
		block-size: 100%;
	}

	.hero__contact-panel {
		block-size: 100%;
		padding-block-end: var(--ml-hero-panel-clearance);
	}

	.hero__reference-deck {
		grid-template-rows: minmax(0, 1fr);
		block-size: 100%;
		gap: 0.75rem;
	}

	.hero__service-view,
	.hero__reference-view {
		block-size: 100%;
	}

	.hero__state-panel:not([hidden]) {
		display: block;
		padding-block-end: var(--ml-hero-panel-clearance);
	}

	.hero__state-panel:not([hidden]) .hero__reference-deck {
		--ml-reference-panel-inset: clamp(0.75rem, 1.25vw, 1.5rem);
		justify-self: start;
		inline-size: min(calc(100% - var(--ml-reference-panel-inset)), 92rem);
		margin-inline-start: var(--ml-reference-panel-inset);
		block-size: 100%;
	}

	.hero__state-panel:not([hidden]) .hero__service-view {
		--ml-reference-panel-inset: clamp(0.75rem, 1.25vw, 1.5rem);
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		grid-template-rows: minmax(0, 1fr) auto;
		inline-size: min(calc(100% - var(--ml-reference-panel-inset)), 92rem);
		margin-inline-start: var(--ml-reference-panel-inset);
	}

	.hero__contact-panel:not([hidden]) .hero__contact-state {
		--ml-contact-panel-inset: clamp(0.75rem, 1.25vw, 1.5rem);
		display: grid;
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		grid-template-rows: minmax(0, 1fr) auto;
		inline-size: min(calc(100% - var(--ml-contact-panel-inset)), 92rem);
		block-size: 100%;
		margin-inline-start: var(--ml-contact-panel-inset);
	}

	.hero__contact-copy {
		grid-column: 1;
		grid-row: 2;
		align-self: end;
		max-inline-size: 40rem;
		padding-block-end: 5rem;
	}

	.hero__contact-form {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		justify-self: end;
		inline-size: min(100%, 42rem);
		min-block-size: 0;
		margin-block-start: calc(-1 * (var(--ml-hero-panel-clearance) + 1rem));
		padding-block-start: 0;
		overflow: visible;
	}

	.hero__contact-title {
		font-size: var(--ml-size-h2-tablet, 54px);
	}

	.hero__contact-form .wpforms-field-container {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 0.5rem 1.25rem;
	}

	/* WPForms assigns its own size classes; the contact stage owns field widths. */
	.hero__contact-form .wpforms-container {
		margin: 0 !important;
	}

	.hero__contact-form .wpforms-field {
		margin: 0 !important;
		min-inline-size: 0;
		padding: 0 !important;
	}

	.hero__contact-form .wpforms-field-name .wpforms-field-row {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}

	.hero__contact-form .wpforms-field-name .wpforms-field-row-block {
		inline-size: 100% !important;
		max-inline-size: none !important;
		padding: 0 !important;
		margin: 0 !important;
		float: none !important;
		clear: none !important;
	}

	.hero__contact-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select) {
		inline-size: 100% !important;
		max-inline-size: none !important;
		min-block-size: 2.625rem !important;
		padding-block: 0.45rem !important;
		background: transparent !important;
		color: var(--ml-color-white, #FFFFFF) !important;
	}

	.hero__contact-form textarea {
		inline-size: 100% !important;
		max-inline-size: none !important;
		box-sizing: border-box !important;
		block-size: 5.75rem !important;
		min-block-size: 5.75rem !important;
		background: transparent !important;
		color: var(--ml-color-white, #FFFFFF) !important;
	}

	.hero__contact-form .wpforms-field-label {
		margin-block-end: 0.25rem !important;
		color: var(--ml-color-white, #FFFFFF) !important;
	}

	.hero__contact-form .wpforms-field-sublabel {
		margin-block-start: 0.25rem !important;
		margin-block-end: 0 !important;
		color: var(--ml-color-white, #FFFFFF) !important;
		font-size: 10px !important;
	}

	.hero__contact-form .wpforms-field-description {
		margin-block-start: 0.2rem !important;
		line-height: 1.2;
	}

	.hero__contact-form .wpforms-submit-container {
		margin-block-start: 0.35rem !important;
	}

	.hero__contact-form button[type="submit"] {
		min-block-size: 2.625rem;
	}

	.hero__service-content {
		grid-column: 1;
		grid-row: 2;
		align-self: end;
		max-inline-size: 40rem;
		padding-block-end: 5rem;
	}

	.hero__service-information {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		max-inline-size: 68rem;
		padding-block: 1rem;
	}

	.hero__service-description--long {
		column-count: 2;
		column-gap: clamp(1.5rem, 4vw, 4rem);
		max-inline-size: 68rem;
	}

	.hero__service-description--long p {
		break-inside: avoid;
	}

	body {
		font-size: var(--ml-size-body-tablet, 16px);
	}

	h2 {
		font-size: var(--ml-size-h2-tablet, 54px);
	}

	h3 {
		font-size: var(--ml-size-h3-tablet, 36px);
	}

	.site-navigation-toggle,
	.site-header__contact,
	.site-navigation__list a,
	.hero__eyebrow,
	.site-header__legal,
	.hero__overview-control,
	.hero__references-entry,
	.hero__service-back {
		font-size: var(--ml-size-meta-tablet, 12px);
	}

	.hero__title {
		font-size: var(--ml-size-hero-tablet, 100px);
	}

	.hero__service-title,
	.hero__service-content-title {
		font-size: var(--ml-size-h2-tablet, 54px);
	}

	.hero__service-terms {
		font-size: var(--ml-size-meta-tablet, 12px);
	}

	.hero__reference-kicker,
	.hero__reference-meta,
	.hero__reference-meta-line,
	.hero__reference-navigation {
		font-size: var(--ml-size-meta-tablet, 12px);
	}

	.hero__reference-title {
		font-size: var(--ml-size-h3-tablet, 36px);
	}

	.hero__reference {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		block-size: 100%;
		min-block-size: 0;
		align-items: stretch;
		gap: clamp(1.25rem, 2.5vw, 2.5rem);
	}

	.hero__reference-copy {
		display: flex;
		flex-direction: column;
		align-self: end;
		max-inline-size: 40rem;
		gap: 0.9rem;
		padding-block-end: 5rem;
	}

	.hero__contact-copy {
		padding-block-end: 7.5rem;
	}

	.hero__contact-form {
		inline-size: min(100%, 44rem);
	}

	.hero__contact-form .wpforms-field-container {
		gap: 0.5rem 1rem;
	}

	.hero__contact-form #wpforms-58-field_1-container,
	.hero__contact-form #wpforms-58-field_3-container,
	.hero__contact-form #wpforms-58-field_4-container {
		grid-column: 1 / -1;
	}

	.hero__contact-form #wpforms-58-field_1-container {
		grid-row: 1;
	}

	.hero__contact-form #wpforms-58-field_6-container {
		grid-column: 1;
		grid-row: 2;
	}

	.hero__contact-form #wpforms-58-field_2-container {
		grid-column: 2;
		grid-row: 2;
	}

	.hero__contact-form #wpforms-58-field_3-container {
		grid-row: 3;
	}

	.hero__contact-form #wpforms-58-field_4-container {
		grid-row: 4;
	}

	.hero__contact-form #wpforms-58-field_1-container .wpforms-field-row {
		inline-size: 100% !important;
		max-inline-size: none !important;
	}

	.hero__contact-form #wpforms-58-field_1-container .wpforms-field-row-block {
		min-inline-size: 0;
		inline-size: 100% !important;
		max-inline-size: none !important;
	}

	.hero__contact-form #wpforms-58-field_1-container .wpforms-field-row-block:nth-child(1) {
		grid-column: 1;
	}

	.hero__contact-form #wpforms-58-field_1-container .wpforms-field-row-block:nth-child(2) {
		grid-column: 2;
	}

	.hero__reference-copy .hero__overview-control {
		align-self: start;
	}

	.hero__reference-copy .hero__reference-kicker,
	.hero__reference-copy .hero__reference-title,
	.hero__reference-copy .hero__reference-meta-line,
	.hero__reference-copy .hero__reference-description {
		margin-block: 0;
	}

	.hero__reference-description--long {
		column-count: 2;
		column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
	}

	.hero__reference-description--long p {
		break-inside: avoid;
	}

	.hero__reference-side {
		display: grid;
		align-content: center;
		align-self: stretch;
		justify-self: start;
		inline-size: 84%;
		padding-block-end: 6rem;
	}

	.hero__reference-media {
		display: grid;
		place-items: center;
		inline-size: 100%;
		block-size: auto;
		max-block-size: none;
	}

	.hero__reference-media img,
	.hero__reference-media video {
		inline-size: 100%;
		block-size: 100%;
		object-fit: contain;
	}

	.site-header::after {
		inset-inline: 2rem;
	}

	.site-header__inner {
		grid-template-columns: 5rem minmax(0, 1fr);
		min-block-size: 6rem;
		padding-inline: 2rem;
	}

	.site-brand {
		inline-size: 4.75rem;
		block-size: 3.5625rem;
	}

	.hero__media::before {
		inset: 16% 2rem 1.25rem;
	}

	.hero__motif {
		inset-block: 21% 1.25rem;
		inset-inline-end: 7%;
		inline-size: 52%;
		block-size: calc(79% - 1.25rem);
	}

	.hero__media::after {
		inset-inline-end: 2rem;
	}

	.hero__inner {
		padding: 9.5rem 2rem 2rem;
	}

	.hero__closing {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 2rem;
	}

	.hero__services {
		max-inline-size: none;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		font-size: var(--ml-size-meta-tablet, 12px);
	}

	.hero__contact {
		min-inline-size: 14.5rem;
		font-size: calc(var(--ml-size-meta-tablet, 12px) + 1px);
	}
}

@media (min-width: 64rem) {
	/* Keep the contact grid independent from the installation-specific WPForms field IDs. */
	.hero__contact-form .wpforms-field-name:has(.wpforms-field-row-block:nth-child(2)),
	.hero__contact-form .wpforms-field-textarea,
	.hero__contact-form .wpforms-field-checkbox,
	.hero__contact-form .wpforms-field-gdpr-checkbox {
		grid-column: 1 / -1;
	}

	.hero__contact-form .wpforms-field-name:has(.wpforms-field-row-block:nth-child(2)) .wpforms-field-row {
		inline-size: 100% !important;
		max-inline-size: none !important;
	}

	.hero__contact-form .wpforms-field-name:has(.wpforms-field-row-block:nth-child(2)) .wpforms-field-row::before,
	.hero__contact-form .wpforms-field-name:has(.wpforms-field-row-block:nth-child(2)) .wpforms-field-row::after {
		content: none;
		display: none;
	}

	.hero {
		--ml-hero-rail-space: 8rem;
		--ml-hero-safe-area: 3.5rem;
		--ml-hero-panel-clearance: 2rem;
	}

	body {
		font-size: var(--ml-size-body-desktop, 16px);
	}

	h2 {
		font-size: var(--ml-size-h2-desktop, 72px);
	}

	h3 {
		font-size: var(--ml-size-h3-desktop, 48px);
	}

	.site-navigation-toggle,
	.site-header__contact,
	.site-navigation__list a,
	.hero__eyebrow,
	.site-header__legal,
	.hero__overview-control,
	.hero__references-entry,
	.hero__service-back {
		font-size: var(--ml-size-meta-desktop, 12px);
	}

	.site-header::after {
		inset-inline: 3rem;
	}

	.site-header__inner {
		grid-template-columns: 5.75rem minmax(0, 1fr);
		min-block-size: 6.75rem;
		padding-inline: 3rem;
	}

	.site-brand {
		inline-size: 5.25rem;
		block-size: 3.9375rem;
	}

	.site-navigation-toggle {
		display: none;
	}

	.site-navigation {
		position: static;
		display: block;
		justify-self: end;
		border: 0;
		background: transparent;
	}

	.site-navigation__list {
		display: flex;
		align-items: center;
		gap: 1.25rem;
	}

	.site-navigation__list a {
		padding: 0.75rem 0;
	}

	.hero__media::before {
		inset: 15% 3rem 1.5rem;
	}

	.hero__motif {
		inset-block: 17% 1.5rem;
		inset-inline-end: 9%;
		inline-size: 48%;
		block-size: calc(83% - 1.5rem);
	}

	.hero__media::after {
		inset-inline-end: 3rem;
	}

	.hero__inner {
		padding: 10.5rem 3rem 2.75rem;
	}

	.hero__headline-group {
		align-items: center;
		padding-block: 2rem;
	}

	.hero__title {
		max-inline-size: 10.5ch;
		font-size: var(--ml-size-hero-desktop, 168px);
	}

	.hero__service-title,
	.hero__service-content-title {
		font-size: var(--ml-size-h2-desktop, 72px);
	}

	.hero__service-terms {
		font-size: var(--ml-size-meta-desktop, 12px);
	}

	.hero__reference-kicker,
	.hero__reference-meta,
	.hero__reference-meta-line,
	.hero__reference-navigation {
		font-size: var(--ml-size-meta-desktop, 12px);
	}

	.hero__reference-title {
		font-size: var(--ml-size-h3-desktop, 48px);
	}

	.hero__reference {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	}

	.hero__reference-media {
		inline-size: 100%;
	}

	.hero__reference-side {
		inline-size: 82%;
		padding-block-end: 10rem;
		transform: translateY(-3rem);
	}

	.hero__reference-copy {
		padding-block-end: 7.5rem;
	}

	.hero__service-content {
		padding-block-end: 7.5rem;
	}

	.hero__services {
		font-size: var(--ml-size-meta-desktop, 12px);
	}

	.hero__contact {
		min-inline-size: 15rem;
		font-size: calc(var(--ml-size-meta-desktop, 12px) + 1px);
	}

	.legal-overlay__scroller {
		padding-block: 3.5rem 6rem;
	}

	.legal-overlay__back,
	.legal-overlay__switcher button {
		font-size: var(--ml-size-meta-desktop, 12px);
	}
}

@media (max-width: 39.999rem) {
	.legal-overlay__scroller {
		padding: 1rem 1rem 3rem;
	}

	.legal-overlay__back {
		margin-block-end: 1rem;
	}

	.legal-overlay__document {
		padding-block: 2rem 3rem;
		line-height: 1.58;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-background,
	.legal-overlay,
	.legal-overlay__inner,
	.legal-overlay__document {
		transition: none !important;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}