@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../images/inter-roman-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../images/inter-roman-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../images/inter-roman-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../images/inter-roman-latin.woff2") format("woff2");
}

:root {
    --black: #000000;
    --white: #FFFFFF;
    --yellow: #F6E500;
    --yellow-hover: #DDC400;
    --map-kobe: #1A5FC6;
    /* Blauabstufungen aus #1A57C6; Prozentwerte als Vollfarben auf Weiß. */
    --map-kobe-light: #4879D1;
    --map-kobe-lighter: #769ADD;
    --gray-90: #1A1A1A;
    --gray-80: #333333;
    --gray-60: #666666;
    --gray-40: #999999;
    --gray-20: #CCCCCC;
    --content-width: 1240px;
    /* Globale Schriftrollen, fluid von 320 bis 1440 px. Quelle: tools/generate-typography-tokens.mjs. */
    --h1: clamp(2.000000rem, calc(1.589286rem + 2.053571vw), 3.437500rem);
    --h2: clamp(1.750000rem, calc(1.625000rem + 0.625000vw), 2.187500rem);
    --h3: clamp(1.125000rem, calc(1.089286rem + 0.178571vw), 1.250000rem);
    --body-subline: clamp(1.125000rem, calc(0.821429rem + 1.517857vw), 2.187500rem);
    --body-subheadline: clamp(2.000000rem, calc(1.767857rem + 1.160714vw), 2.812500rem);
    --body-standard: clamp(1.000000rem, calc(0.964286rem + 0.178571vw), 1.125000rem);
    --body-medium: clamp(0.875000rem, calc(0.839286rem + 0.178571vw), 1.000000rem);
    --body-small: clamp(0.750000rem, calc(0.714286rem + 0.178571vw), 0.875000rem);
    --body-meta: clamp(0.687500rem, calc(0.669643rem + 0.089286vw), 0.750000rem);
    --hero-content-width: 1600px;
    --utility-height: 34px;
    --primary-height: 50px;
    --mobile-header: 50px;
    --font: "Inter", sans-serif;
    /* Genau neun fluide Abstandsstufen; Skalenparameter in tools/generate-spacing-tokens.mjs. */
    --space-2xs: clamp(0.123457rem, calc(0.113853rem + 0.048017vw), 0.161870rem);
    --space-xs: clamp(0.185185rem, calc(0.164022rem + 0.105816vw), 0.269838rem);
    --space-s: clamp(0.277778rem, calc(0.234767rem + 0.215053vw), 0.449820rem);
    --space-m: clamp(0.416667rem, calc(0.333371rem + 0.416479vw), 0.749850rem);
    --space-l: clamp(0.625000rem, calc(0.468750rem + 0.781250vw), 1.250000rem);
    --space-xl: clamp(0.937500rem, calc(0.650937rem + 1.432813vw), 2.083750rem);
    --space-2xl: clamp(1.406250rem, calc(0.889410rem + 2.584202vw), 3.473611rem);
    --space-3xl: clamp(2.109375rem, calc(1.189091rem + 4.601419vw), 5.790510rem);
    --space-4xl: clamp(3.164063rem, calc(1.541883rem + 8.110897vw), 9.652780rem);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body {
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--white);
    background: var(--black);
    font-family: var(--font);
    font-size: var(--body-standard);
    line-height: 1.65;
    font-weight: 400;
    /* Schräge Texte aus den normalen Inter-Schnitten synthetisieren. */
    font-synthesis: style;
    -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; overscroll-behavior: none; }
button { color: inherit; font: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; font-style: oblique; overflow-wrap: anywhere; }
h1 { font-size: var(--h1); line-height: 1.18; letter-spacing: -.025em; }
h2 { font-size: var(--h2); line-height: 1.25; letter-spacing: -.015em; }
h3 { font-size: var(--h3); line-height: 1.25; }
.body-subline { font-size: var(--body-subline); font-weight: 400; font-style: oblique; line-height: 1.3; }
.body-subheadline { font-size: var(--body-subheadline); font-weight: 400; font-style: normal; line-height: 1.25; }
.body-standard { font-size: var(--body-standard); font-weight: 400; font-style: normal; line-height: 1.65; }
.body-medium { font-size: var(--body-medium); font-weight: 400; font-style: normal; line-height: 1.5; }
.body-small { font-size: var(--body-small); font-weight: 400; font-style: normal; line-height: 1.5; }
.body-meta { font-size: var(--body-meta); font-weight: 400; font-style: normal; line-height: 1.5; }
strong, b, .text-bold { font-weight: 700; }
em, i, .text-oblique { font-style: oblique; }
img, svg { display: block; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Einmalige Scroll-Einblendung; ohne JavaScript bleibt der Inhalt sichtbar. */
[data-reveal-sequence] > span { display: inline-block; max-width: 100%; }
:where(.reveal-ready:not([data-reveal-sequence])) {
    opacity: 0;
    transform: translate3d(0, var(--space-xl), 0);
}
:where(.reveal-ready[data-reveal-sequence] > span) {
    opacity: 0;
    transform: translate3d(calc(0px - var(--space-xl)), 0, 0);
}
:where(.reveal-ready.reveal-from-left:not(.is-visible)) { transform: translate3d(calc(0px - var(--space-l)), 0, 0); }
:where(.reveal-ready.reveal-from-right:not(.is-visible)) { transform: translate3d(var(--space-l), 0, 0); }
:where(.reveal-ready.is-visible:not([data-reveal-sequence]), .reveal-ready.is-visible[data-reveal-sequence] > span) {
    opacity: 1;
    transform: none;
    transition: opacity 450ms ease-out, transform 1200ms cubic-bezier(.22, .61, .36, 1);
    transition-delay: 150ms;
}
:where(.reveal-ready.is-visible[data-reveal-sequence] > span:nth-child(2)) { transition-delay: 650ms; }
:where(.reveal-ready.is-visible[data-reveal-sequence] > span:nth-child(3)) { transition-delay: 1150ms; }
@media (prefers-reduced-motion: reduce), print {
    :where(.reveal-ready:not([data-reveal-sequence]), .reveal-ready[data-reveal-sequence] > span) {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.site-header {
    position: fixed;
    z-index: 10;
    inset: 0 0 auto;
    height: calc(var(--utility-height) + var(--primary-height));
}
.desktop-header { height: 100%; }
.utility-bar {
    position: relative;
    z-index: 3;
    height: var(--utility-height);
    background: var(--black);
}
.utility-navigation, .inline-utility {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    white-space: nowrap;
}
.utility-navigation {
    position: absolute;
    top: 50%;
    right: var(--space-2xl);
    transform: translateY(-50%);
}
.utility-contact, .mobile-utility__item--contact { color: inherit; text-decoration: none; }
.utility-contact:focus-visible, .mobile-utility__item--contact:focus-visible { outline: 2px solid var(--yellow); outline-offset: var(--space-2xs); }
.utility-divider { width: 1px; height: 20px; background: rgb(255 255 255 / 72%); }
.utility-language { display: inline-flex; align-items: center; gap: var(--space-s); }
.utility-language > span { color: var(--yellow); }
.utility-language svg:first-child { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.utility-language svg:last-child { width: 10px; height: 10px; fill: none; stroke: var(--yellow); stroke-linecap: square; stroke-linejoin: miter; stroke-width: 2; }

.primary-bar {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--primary-height);
    padding: 0 var(--space-2xl);
    overflow: hidden;
    background: var(--black);
}
.brand-block { position: relative; z-index: 2; display: flex; align-items: center; flex: 0 0 auto; height: 100%; }
.brand-block, .mobile-brand { color: inherit; text-decoration: none; }
.brand-block:focus-visible, .mobile-brand:focus-visible { outline: 2px solid var(--yellow); outline-offset: calc(0px - var(--space-2xs)); }
.logo-wrap { position: relative; display: flex; align-items: center; flex: 0 0 auto; height: 100%; }
.logo-wrap img { width: 170px; height: auto; }
.company-name { display: flex; flex-direction: column; justify-content: center; white-space: nowrap; }
.brand-block .company-name > span { line-height: 1.1; }
.primary-navigation { position: relative; z-index: 2; height: 100%; min-width: 0; margin-left: auto; }
.primary-navigation ul, .mobile-menu ul { display: flex; align-items: center; padding: 0; margin: 0; list-style: none; }
.primary-navigation ul { justify-content: flex-end; gap: var(--space-2xl); }
.primary-navigation li { white-space: nowrap; }
.primary-navigation > ul { height: 100%; }
.primary-navigation > ul > li { position: relative; display: flex; align-items: center; height: 100%; }
.navigation-item { display: inline-flex; align-items: center; gap: var(--space-s); }
a.navigation-item { min-height: 44px; color: inherit; text-decoration: none; }
.navigation-toggle { padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.primary-navigation .navigation-toggle { min-height: 44px; }
.primary-navigation > ul > li:hover > .navigation-item, .mobile-menu .navigation-item:hover, .navigation-item.is-current { color: var(--yellow); }
.navigation-toggle[aria-expanded="true"] > svg { transform: rotate(180deg); }
.primary-navigation .navigation-submenu { position: absolute; top: 100%; right: calc(0px - var(--space-l)); display: block; width: max-content; min-width: 180px; max-height: calc(100svh - var(--utility-height) - var(--primary-height)); padding: var(--space-m) 0; overflow-y: auto; background: var(--black); }
.navigation-submenu a { display: block; padding: var(--space-m) var(--space-l); color: var(--white); text-decoration: none; }
.navigation-submenu a:hover { color: var(--black); background: var(--yellow); }
.navigation-toggle:focus-visible, a.navigation-item:focus-visible, .navigation-submenu a:focus-visible { outline: 2px solid var(--yellow); outline-offset: calc(0px - var(--space-2xs)); }
.navigation-submenu a:hover:focus-visible { outline-color: var(--black); }
.site-header .navigation-submenu[hidden] { display: none; }
.navigation-item > svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.inline-utility { display: none; }

/* Folie 2: schwarze Utility-Zeile; Verlauf ausschließlich rechts der gelben Schräge. */
.site-header--slide-2 {
    --utility-height: clamp(34px, 1.65vw, 42px);
    --primary-height: clamp(50px, 2.45vw, 64px);
}
.site-header--slide-2 .logo-wrap img { width: clamp(170px, 7.3vw, 190px); }
.site-header--slide-2 .primary-bar::before {
    position: absolute; z-index: 0; inset: 0;
    background: var(--gray-90);
    clip-path: polygon(48.9% 0, 100% 0, 100% 100%, calc(48.9% - var(--slide-2-run)) 100%);
    content: "";
}
.site-header--slide-2 .primary-bar::after {
    position: absolute; z-index: 1; top: 0; left: 48.9%; width: var(--slide-2-length); height: 3px;
    background: var(--yellow); content: ""; transform: rotate(127.9deg); transform-origin: left center;
}
.site-header--slide-2 .primary-bar {
    --slide-2-run: clamp(39px, 1.91vw, 50px);
    --slide-2-length: clamp(63.4px, 3.1vw, 81.1px);
}
.site-header--slide-2 .brand-block { width: 47.5%; padding-right: var(--space-2xl); }
.site-header--slide-2 .company-name,
.site-header--slide-4 .company-name,
.site-header--slide-5 .company-name {
    padding-left: var(--space-l); margin-left: var(--space-l); border-left: 1px solid rgb(255 255 255 / 68%);
}

/* Folie 3: gelbe Schräge am Logo; durchgehend schwarzer Hauptheader. */
.page-slide-3 {
    --utility-height: clamp(34px, 1.65vw, 42px);
    --primary-height: clamp(66px, calc(2.45vw + 16px), 80px);
}
.site-header--slide-3 .utility-bar { background: var(--gray-90); }
/* Das Untermenü darf über den Header ragen; die Markenschräge bleibt am Logo beschnitten. */
.site-header--slide-3 .primary-bar { overflow: visible; }
.site-header--slide-3 .logo-wrap img { width: clamp(170px, 7.3vw, 190px); }
.site-header--slide-3 .primary-navigation ul { gap: var(--space-xl); }
.site-header--slide-3 .brand-block { width: 47%; padding-right: var(--space-l); }
.site-header--slide-3 .logo-wrap {
    --diagonal-run: calc(var(--primary-height) * 1.73205);
    width: calc(clamp(170px, 7.3vw, 190px) + var(--diagonal-run) + 20px);
    overflow: hidden;
}
.site-header--slide-3 .logo-wrap::after {
    position: absolute;
    z-index: 0;
    right: calc(var(--diagonal-run) + var(--space-m));
    bottom: 0;
    width: 100px;
    height: 200px;
    border-right: 2px solid var(--yellow);
    background: var(--black);
    content: "";
    transform: rotate(60deg);
    transform-origin: 100% 100%;
}
.site-header--slide-3 .logo-wrap img { position: relative; z-index: 1; }
.site-header--slide-3 .company-name { margin-left: var(--space-m); }

/* Folie 4: kompakter zweizeiliger Header. */
.site-header--slide-4 .utility-bar { background: var(--gray-90); }
.site-header--slide-4 .brand-block, .site-header--slide-5 .brand-block { width: 45%; }
.site-header--slide-4 .primary-navigation ul { gap: var(--space-3xl); }

/* Folie 5: eigenständige Utility-Zeile mit gelber Unterkante. */
.site-header--slide-5 {
    --slide-5-utility-height: clamp(34px, 1.65vw, 42px);
    --slide-5-primary-height: clamp(76px, 3.2vw, 84px);
    height: calc(var(--slide-5-utility-height) + var(--slide-5-primary-height));
}
.site-header--slide-5 .utility-bar {
    height: var(--slide-5-utility-height); border-bottom: 2px solid var(--yellow);
    background: var(--gray-90);
}
.site-header--slide-5 .primary-bar { height: var(--slide-5-primary-height); }
.site-header--slide-5 .primary-navigation ul { gap: var(--space-3xl); }

/* Folie 6: sämtliche Inhalte in einer schwarzen Zeile. */
.site-header--slide-6 { height: 84px; }
.site-header--slide-6 .utility-bar { display: none; }
.site-header--slide-6 .primary-bar { height: 84px; gap: var(--space-l); }
.site-header--slide-6 .logo-wrap img { width: 170px; }
.site-header--slide-6 .company-name { padding-left: var(--space-l); margin-left: var(--space-l); border-left: 1px solid rgb(255 255 255 / 68%); }
.site-header--slide-6 .primary-navigation ul { gap: var(--space-xl); }
.site-header--slide-6 .inline-utility {
    display: flex;
    margin-left: var(--space-2xs);
    transform: translateY(calc(0px - var(--space-2xs)));
}

/* Gemeinsamer Footer; die bestehende Markenpalette bleibt unverändert. */
.site-footer {
    padding-top: var(--space-l);
    color: var(--white);
    background: var(--black);
}
.site-footer__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-l);
    /* Unteren Freiraum der bisher mittig ausgerichteten 132-px-Zeile beibehalten. */
    min-height: calc((132px + 1px + 1lh) / 2 + var(--space-l));
    padding: var(--space-l) var(--space-2xl) var(--space-xl);
    border-top: 1px solid var(--yellow);
}
.site-footer__copyright { margin: 0; }
.footer-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-l) var(--space-2xl);
    padding: 0;
    margin: 0;
    list-style: none;
}
.footer-navigation li { white-space: nowrap; }
.footer-navigation a { color: inherit; text-decoration: none; }
.footer-navigation a:focus-visible { outline: 2px solid var(--yellow); outline-offset: var(--space-2xs); }

.hero { position: relative; height: 100svh; min-height: 480px; overflow: hidden; isolation: isolate; }
.hero-media, .hero-media img, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media { z-index: -2; }
.hero-media img {
    object-fit: cover;
    object-position: right center;
}
.hero-shade { z-index: -1; background: linear-gradient(90deg, rgb(0 0 0 / 20%) 0%, transparent 44%); pointer-events: none; }
.hero-content { position: absolute; top: calc(var(--utility-height) + var(--primary-height) + var(--space-4xl)); left: max(var(--space-l), calc((100vw - var(--hero-content-width)) / 2)); max-width: min(52vw, 760px); }
.hero-content p { margin: var(--space-3xl) 0 0; }
.mobile-header, .mobile-utility-bar, .mobile-menu { display: none; }

@media (max-width: 1200px) {
    .site-header, .site-header--slide-5, .site-header--slide-6 { height: var(--mobile-header); }
    .mobile-layout--utility-bar .site-header {
        height: calc(var(--mobile-header) + 28px);
    }
    .desktop-header { display: none; }
    .mobile-layout--utility-bar .mobile-utility-bar {
        position: relative;
        z-index: 13;
        display: block;
        height: 28px;
        background: var(--gray-90);
    }
    .mobile-layout--utility-bar .site-header--slide-5 .mobile-utility-bar {
        border-bottom: 2px solid var(--yellow);
    }
    .mobile-layout--compact .site-header--slide-5 .mobile-header {
        border-top: 2px solid var(--yellow);
    }
    .mobile-layout--utility-bar .mobile-utility-bar .utility-navigation {
        right: var(--space-l);
    }
    .mobile-header {
        position: relative; z-index: 12; display: flex; align-items: center; justify-content: space-between;
        height: var(--mobile-header); padding: 0 var(--space-m); background: var(--black);
    }
    .site-header--slide-2 .mobile-header { overflow: hidden; }
    .mobile-brand { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
    .mobile-brand::after { position: absolute; top: 50%; right: 0; left: 0; height: 44px; transform: translateY(-50%); content: ""; }
    .mobile-brand-divider { display: none; }
    .mobile-divider { display: none; }
    .site-header--slide-2 .mobile-brand { flex: 0 1 auto; }
    .site-header--slide-2 .mobile-brand .company-name { flex: 0 1 auto; }
    .site-header--slide-2 .mobile-divider {
        position: relative;
        z-index: 0;
        display: block;
        align-self: stretch;
        flex: 1 1 auto;
        min-width: 0;
        overflow: visible;
    }
    .site-header--slide-2 .mobile-divider::before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: min(84px, calc(100% + 55px));
        height: 2px;
        background: var(--yellow);
        content: "";
        pointer-events: none;
        transform: translate(-50%, -50%) rotate(-52.1deg);
        transform-origin: center;
    }
    .mobile-brand,
    .menu-toggle { position: relative; z-index: 1; }
    .site-header--slide-3 .mobile-brand .company-name {
        padding-left: 0;
        margin-left: 0;
        border-left: 0;
    }
    .site-header--slide-3 .mobile-brand-divider {
        position: relative;
        display: block;
        align-self: stretch;
        flex: 0 0 38px;
    }
    .site-header--slide-3 .mobile-brand-divider::before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 40px;
        height: 2px;
        background: var(--yellow);
        content: "";
        pointer-events: none;
        transform: translate(-50%, -50%) rotate(-30deg);
        transform-origin: center;
    }
    .mobile-brand > img { flex: 0 0 auto; width: clamp(102px, 15vw, 116px); height: auto; }
    .mobile-brand .company-name { flex: 1 1 auto; min-width: 0; padding-left: var(--space-m); margin-left: var(--space-m); border-left: 1px solid rgb(255 255 255 / 58%); }
    /* Auf ausdrücklichen Wunsch vorerst unveränderter mobiler Firmenblock. */
    .mobile-brand .company-name { line-height: 1.05; }
    .mobile-brand .company-name strong { font-size: 12px; font-weight: 500; }
    .mobile-brand .company-name span { margin-top: var(--space-2xs); font-size: 10px; }
    .menu-toggle {
        display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer;
    }
    .menu-toggle { flex: 0 0 auto; width: 44px; height: 44px; margin-left: var(--space-m); }
    .menu-toggle svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-linecap: square; stroke-width: 1.8; }
    .menu-icon__line {
        transform-box: fill-box;
        transform-origin: center;
        transition: transform 220ms ease, opacity 160ms ease;
    }
    .menu-toggle[aria-expanded="true"] .menu-icon__line--top { transform: translateY(6px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] .menu-icon__line--middle { opacity: 0; transform: scaleX(0); }
    .menu-toggle[aria-expanded="true"] .menu-icon__line--bottom { transform: translateY(-6px) rotate(-45deg); }
    .menu-toggle:focus-visible { outline: 2px solid var(--yellow); outline-offset: var(--space-2xs); }
    .mobile-menu {
        position: fixed; z-index: 11; top: var(--mobile-header); right: 0; bottom: 0; display: flex;
        flex-direction: column; width: 100%; padding: var(--space-xl) var(--space-l) var(--space-xl); overflow-y: auto;
        visibility: hidden; background: var(--black); box-shadow: -16px 0 36px rgb(0 0 0 / 34%);
        transform: translateX(100%); transition: transform 220ms ease, visibility 220ms step-end;
    }
    .mobile-layout--utility-bar .mobile-menu {
        top: calc(var(--mobile-header) + 28px);
    }
    .mobile-menu[aria-hidden="false"] { visibility: visible; transform: translateX(0); transition: transform 220ms ease, visibility 0ms step-start; }
    .mobile-menu ul { align-items: stretch; flex-direction: column; margin-top: 0; }
    .mobile-menu li {
        padding: var(--space-l) var(--space-2xs); border-bottom: 1px solid var(--yellow);
    }
    .mobile-menu .navigation-item { display: flex; width: 100%; }
    .mobile-menu .navigation-item > svg { margin-left: auto; }
    .mobile-menu .navigation-submenu li { padding: 0; border: 0; }
    .mobile-utility {
        font-size: var(--body-medium);
        display: flex;
        align-items: stretch;
        flex-direction: column;
        margin-top: var(--space-3xl);
        padding: 0 var(--space-xs);
    }
    .mobile-utility__item {
        display: flex;
        align-items: center;
        gap: var(--space-m);
        min-height: 72px;
        padding: 0 var(--space-2xs);
    }
    .mobile-utility__item--language {
        color: var(--yellow);
        border-bottom: 1px solid var(--yellow);
    }
    .mobile-utility__item--contact { color: var(--white); }
    .mobile-utility__item > svg {
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.7;
    }
    .mobile-utility__item--language > svg:last-child {
        width: 10px;
        height: 10px;
        margin-left: auto;
        transform: rotate(-90deg);
    }
    .hero { height: 100svh; min-height: 420px; }
    .hero-media img {
        height: calc(100% + 50px);
        object-position: calc(100% + 600px) bottom;
    }
    .hero-shade { background: linear-gradient(90deg, rgb(0 0 0 / 42%) 0%, rgb(0 0 0 / 8%) 66%, transparent 100%); }
    .hero-content { top: calc(var(--mobile-header) + var(--space-4xl)); max-width: min(78vw, 520px); }
    .hero-content p { max-width: none; white-space: nowrap; }
}

@media (max-width: 800px) {
    .site-footer__inner {
        align-items: center;
        flex-direction: column-reverse;
        min-height: 0;
        text-align: center;
    }
    .footer-navigation ul { justify-content: center; }
}

@media (max-width: 1200px) {
    .site-header--slide-3 .mobile-header { overflow: clip; }
    .site-header--slide-3 .mobile-brand { align-self: stretch; }
    .site-header--slide-3 .mobile-brand-divider { flex-basis: calc(var(--mobile-header) * 1.732 + var(--space-m) * 2); }
    .site-header--slide-3 .mobile-brand-divider::before { width: calc(var(--mobile-header) * 2); }
}

@media (max-width: 520px) {
    :root { --mobile-header: 72px; }
    .site-header--slide-3 .mobile-brand-divider { flex-basis: calc(var(--mobile-header) * 0.52057 + var(--space-m) * 2); }
    .site-header--slide-3 .mobile-brand-divider::before {
        top: 0;
        width: 2px;
        height: 100%;
        transform: translateX(-50%) skewX(-27.5deg);
    }
    .mobile-brand > img { width: 104px; }
    .mobile-brand .company-name { max-width: none; white-space: normal; line-height: 1.1; }
    .mobile-brand .company-name strong, .mobile-brand .company-name span { font-size: var(--body-meta); letter-spacing: normal; }
    .hero-media img {
        height: calc(100% + 50px);
        object-position: calc(100% + 600px) bottom;
    }
    .hero-content { max-width: calc(100% - var(--space-l) - var(--space-l)); }
}

@media (max-width: 350px) {
    .site-header--slide-3 .mobile-brand > img { width: 90px; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu,
    .menu-icon__line { transition: none; }
}