/* Self-hosted Variable Fonts (ehem. Google Fonts) */
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope/manrope-latin.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope/manrope-latin-ext.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-02FF, U+0300-0303, U+0306-030A, U+030C-0323, U+0326-032F, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond/cormorant-garamond-latin.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond/cormorant-garamond-latin-ext.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-02FF, U+0300-0303, U+0306-030A, U+030C-0323, U+0326-032F, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --brg-950: #041a13;
    --brg-900: #07261c;
    --brg-800: #0b3d2e;
    --brg-700: #15553f;
    --cream-100: #f9f5ec;
    --cream-200: #f2ebdd;
    --stone-500: #7b7f74;
    --ink: #102019;
    --gold: #b08d57;
    --gold-strong: #8f6d3b;

    --max-width: 1340px;
    --gutter: clamp(1rem, 2.4vw, 2rem);
    --section-space: clamp(3.5rem, 8vw, 7rem);

    --radius-lg: clamp(1rem, 1.7vw, 1.45rem);
    --radius-md: 0.9rem;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --fast: 220ms;
    --mid: 420ms;
}

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    background: var(--brg-800);
    scroll-behavior: smooth;
    scroll-padding-top: 5.8rem;
}

html.snap-scroll-enabled {
    scroll-behavior: auto;
    scroll-padding-top: 0;
    scroll-snap-type: y proximity;
}

html.snap-scroll-enabled.nav-scroll-animating {
    scroll-snap-type: none;
}

body {
    margin: 0;
    background: var(--brg-800);
    color: var(--ink);
    font-family: 'Manrope', sans-serif;
    line-height: 1.5;
    overflow-x: clip;
    text-rendering: optimizeLegibility;
}

a,
button {
    color: inherit;
}

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

img,
picture,
video,
canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 6000;
    background: var(--gold);
    color: var(--brg-950);
    border-radius: 0.45rem;
    padding: 0.45rem 0.7rem;
    text-decoration: none;
}

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(193, 160, 98, 0.45);
    border-radius: 0.35rem;
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 5100;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--gold), #f4d39b);
}

.top-aurora {
    position: absolute;
    top: -10%;
    left: 50%;
    width: 100vw;
    width: 100dvw;
    transform: translateX(-50%);
    height: clamp(280px, 52vh, 520px);
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.92;
    filter: blur(8px) saturate(132%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 48%, rgba(0, 0, 0, 0.42) 78%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 48%, rgba(0, 0, 0, 0.42) 78%, transparent 100%);
}

.container {
    width: min(var(--max-width), calc(100% - (2 * var(--gutter))));
    margin-inline: auto;
}

.section {
    position: relative;
    padding-block: var(--section-space);
    scroll-margin-top: 5.9rem;
}

html.snap-scroll-enabled .snap-section {
    min-height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

html.snap-scroll-enabled .snap-section {
    scroll-margin-top: 0;
}

.section-kicker,
.eyebrow {
    margin: 0 0 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    font-size: clamp(0.74rem, 1vw, 0.88rem);
    color: var(--gold);
}

h1,
h2,
h3 {
    margin: 0;
    line-height: 1;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.5rem, 6.8vw, 5.6rem);
}

h2 {
    font-size: clamp(2rem, 5vw, 4.1rem);
    line-height: 1.12;
}

h3 {
    font-size: clamp(1.35rem, 2.1vw, 1.85rem);
}

p {
    margin: 0;
    font-size: clamp(1rem, 1.24vw, 1.16rem);
    line-height: 1.58;
}

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 5000;
    pointer-events: none;
}

.nav-shell {
    --glass-x: 50%;
    --glass-y: 42%;
    --shell-pad-x: 0.78rem;
    position: relative;
    overflow: hidden;
    margin-top: 0.75rem;
    min-height: 3.7rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.86rem;
    align-items: center;
    padding: 0.5rem var(--shell-pad-x);
    border: 1px solid rgba(249, 245, 236, 0.24);
    border-radius: 999px;
    background:
        radial-gradient(120% 180% at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 58%),
        linear-gradient(125deg, rgba(7, 30, 24, 0.64), rgba(10, 53, 44, 0.44) 50%, rgba(6, 28, 24, 0.68));
    backdrop-filter: blur(18px) saturate(150%) contrast(112%);
    -webkit-backdrop-filter: blur(18px) saturate(150%) contrast(112%);
    pointer-events: auto;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(134, 207, 186, 0.14),
        0 12px 28px rgba(0, 0, 0, 0.24);
    transition: background var(--mid) var(--ease), transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease), border-color var(--mid) var(--ease);
    isolation: isolate;
}

.nav-shell::before,
.nav-shell::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: inherit;
}

.nav-shell::before {
    inset: 0;
    background:
        radial-gradient(120% 100% at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.1) 34%, rgba(255, 255, 255, 0) 64%),
        linear-gradient(116deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 28%, rgba(73, 157, 106, 0.16) 58%, rgba(59, 137, 36, 0.12) 74%, rgba(255, 255, 255, 0.04) 100%),
        radial-gradient(120% 110% at 20% -10%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 56%);
    opacity: 0.56;
    mix-blend-mode: screen;
    z-index: -1;
}

.nav-shell::after {
    display: none;
}

.nav-shell > * {
    position: relative;
    z-index: 2;
}

body.scrolled .nav-shell {
    background:
        radial-gradient(120% 180% at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 58%),
        linear-gradient(125deg, rgba(6, 32, 24, 0.84), rgba(11, 61, 46, 0.62) 52%, rgba(6, 32, 24, 0.88));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(134, 207, 186, 0.16),
        0 12px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(249, 245, 236, 0.3);
    transform: translateY(-0.04rem);
}

.brand {
    display: inline-flex;
    align-items: center;
    grid-column: 1;
}

.brand img {
    width: clamp(34px, 4.4vw, 56px);
    height: auto;
}

.mobile-section-wheel {
    display: none;
}

.menu-toggle {
    display: none;
    grid-column: 3;
    justify-self: end;
    margin-left: auto;
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid rgba(249, 245, 236, 0.26);
    border-radius: 999px;
    background: rgba(249, 245, 236, 0.08);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.24rem;
}

.menu-toggle span {
    width: 1.2rem;
    height: 2px;
    background: var(--cream-100);
    transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}

.primary-nav {
    position: relative;
    grid-column: 2;
    justify-self: center;
    max-width: calc(100vw - 280px);
    padding: 0.2rem 0.62rem 0.52rem;
    border-radius: 999px;
    background: transparent;
    overflow-x: auto;
    scrollbar-width: none;
}

.primary-nav::-webkit-scrollbar {
    display: none;
}

.primary-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: clamp(0.86rem, 1.8vw, 1.64rem);
    align-items: center;
}

.nav-mobile-cta {
    display: none;
}

.primary-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.34rem;
    padding-inline: 0.14rem;
    font-size: clamp(0.72rem, 0.88vw, 0.84rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(249, 245, 236, 0.84);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a[aria-current='true'] {
    color: var(--cream-100);
    transform: translateY(-1px);
}

.nav-indicator {
    position: absolute;
    bottom: 0.18rem;
    left: 0;
    width: 1rem;
    height: 2px;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(90deg, var(--gold), #f1d7a0);
    transition: transform var(--mid) var(--ease), width var(--mid) var(--ease), opacity var(--mid) var(--ease);
}

.nav-indicator.is-visible {
    opacity: 1;
}

.hero {
    position: relative;
    min-height: 100svh;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: clip;
    color: var(--cream-100);
}

.hero-video,
.hero-bg-overlay {
    position: absolute;
    inset: 0;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    will-change: transform;
}

.hero-bg-overlay {
    background:
        radial-gradient(circle at 16% 10%, rgba(176, 141, 87, 0.2), transparent 34%),
        linear-gradient(124deg, rgba(4, 26, 19, 0.3), rgba(11, 61, 46, 0.15) 44%, rgba(4, 26, 19, 0.3));
    will-change: transform;
}

/* ── Timed frost overlay ── */
.hero-frost {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(4, 26, 19, 0.7) 0%, rgba(4, 26, 19, 0.85) 50%, rgba(4, 26, 19, 0.95) 100%);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1),
                backdrop-filter 1.8s cubic-bezier(0.22, 1, 0.36, 1),
                -webkit-backdrop-filter 1.8s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.hero.is-frosted .hero-frost {
    opacity: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-grid {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;
    justify-items: center;
    min-height: 100svh;
    width: 100%;
}

.hero-content {
    position: relative;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0;
    margin-top: -2rem;
}

.hero-content .hero-logo {
    margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.hero-content .hero-buttons {
    margin-top: clamp(2rem, 3.5vw, 3rem);
}

/* ── Hero logo ── */
.hero-logo {
    width: clamp(160px, 16vw, 240px);
    height: auto;
    opacity: 0;
    transform: translateY(2rem) scale(0.85);
    filter: blur(8px);
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
                transform 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
                filter 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.hero.is-frosted .hero-logo {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.hero-title {
    font-size: clamp(2.4rem, 4.8vw, 4.4rem);
    color: var(--cream-100);
    letter-spacing: -0.02em;
    line-height: 0.94;
    hyphens: none;
    overflow-wrap: normal;
    text-wrap: balance;
    text-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
}

.hero-title em {
    font-style: normal;
    color: var(--gold);
}

.hero-title .shimmer {
    display: inline-block;
    background: linear-gradient(
        90deg,
        #9a7b4a 0%,
        #c9a96a 30%,
        #e8cfa0 50%,
        #c9a96a 70%,
        #9a7b4a 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer-text 4s ease-in-out infinite;
}

.js .hero-title .shimmer {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.6) translateZ(0);
    filter: blur(20px);
    transition: opacity 2.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 3s cubic-bezier(0.16, 1, 0.3, 1),
                filter 2.6s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s;
    transition-delay: 1.9s;
}

.hero.is-frosted .hero-title .shimmer {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateZ(0);
    filter: blur(0);
}

.hero-claim-logo {
    display: block;
    width: clamp(320px, 58vw, 820px);
    max-width: 100%;
    height: auto;
    aspect-ratio: 3840 / 802;
    margin-inline: auto;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.34));
}

/* ── Hero entrance choreography ── */
.hero-line {
    display: block;
}

/* Logo: dezente goldene Glow-Aura */
.js .hero-reveal {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.25) translateZ(0);
    filter: blur(16px);
    transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 2.6s cubic-bezier(0.16, 1, 0.3, 1),
                filter 2.2s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s;
    transition-delay: calc(var(--i) * 0.6s);
}

.hero.is-frosted .hero-reveal {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateZ(0);
    filter: blur(0);
}

.js .hero-content .hero-buttons {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero.is-frosted .hero-content .hero-buttons {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.1s;
}

/* ── Hero scroll dissolve ── */
.hero-content {
    transition: opacity 0.1s linear, filter 0.1s linear;
}

.hero-text {
    font-size: clamp(1.03rem, 1.2vw, 1.22rem);
    line-height: 1.52;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    width: 100%;
}

.hero-buttons .btn {
    display: inline-flex;
    justify-content: center;
    padding: 0.85rem 2.4rem;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    min-height: 3rem;
    box-shadow: 0 8px 28px rgba(176, 141, 87, 0.32);
}

.hero-buttons .btn:hover,
.hero-buttons .btn:focus-visible {
    box-shadow: 0 12px 36px rgba(176, 141, 87, 0.46);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.62rem 1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-1px);
}

.btn-solid {
    background: var(--gold);
    color: var(--brg-950);
}

.btn-outline {
    background: transparent;
    color: inherit;
    border-color: currentColor;
}

.hero-actions {
    --hero-actions-gap: 0.6rem;
    position: relative;
    z-index: 2;
    isolation: isolate;
    overflow: visible;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: var(--hero-actions-gap) 2rem;
    width: fit-content;
}

.hero-actions li {
    position: relative;
    overflow: visible;
    border: none;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0.5rem 0;
    text-align: left;
}

.hero-actions strong {
    display: block;
    color: var(--gold);
    font-size: clamp(0.9rem, 1.2vw, 1.04rem);
}

.hero-actions strong.hero-actions-boost {
    font-size: clamp(1rem, 1.35vw, 1.16rem);
    line-height: 1.1;
}

.hero-actions li > span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.81rem;
    line-height: 1.35;
}

.hero-actions-live {
    position: relative;
    z-index: 4;
    overflow: visible;
    display: grid;
    align-content: center;
    justify-items: start;
    text-align: left;
}

.hero-actions-live strong {
    display: block;
    font-size: clamp(1.08rem, 1.6vw, 1.36rem);
    color: var(--gold);
    line-height: 1.05;
    transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}

.hero-actions-live-copy {
    position: static;
    width: 100%;
    margin-top: 0.2rem;
    font-size: 0.81rem;
    line-height: 1.3;
    color: var(--cream-100);
}

.hero-actions-live-message {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 0.22rem, 0);
    transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease), visibility var(--mid) var(--ease);
}

.hero-actions-live-message-default {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
}

.hero-actions-live-trigger {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
    text-align: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline dotted rgba(249, 245, 236, 0.38);
    text-underline-offset: 0.14em;
    transition: color var(--fast) var(--ease), text-decoration-color var(--fast) var(--ease);
}

.hero-actions-live-trigger:hover,
.hero-actions-live-trigger:focus-visible {
    color: #fff;
    text-decoration-color: rgba(249, 245, 236, 0.78);
    outline: none;
}

.hero-actions-live-message-detail {
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    top: 0.6rem;
    bottom: 0.6rem;
    display: grid;
    align-content: center;
    justify-items: start;
    font-size: 0.7rem;
    line-height: 1.12;
    white-space: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.hero-actions-live-message-detail .hero-actions-live-line {
    display: block;
    white-space: nowrap;
}

.hero-actions-live-emphasis {
    color: var(--gold);
    font-weight: 600;
}

.hero-actions-live:hover,
.hero-actions-live:focus-within,
.hero-actions-live.is-open {
    z-index: 7002;
}

.hero-actions-live:hover:not(.is-open) strong,
.hero-actions-live:focus-within strong,
.hero-actions-live.is-open strong {
    opacity: 0;
    transform: translate3d(0, -0.18rem, 0);
}

.hero-actions-live:hover:not(.is-open) .hero-actions-live-message-default,
.hero-actions-live:focus-within .hero-actions-live-message-default,
.hero-actions-live.is-open .hero-actions-live-message-default {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -0.28rem, 0);
}

.hero-actions-live:hover:not(.is-open) .hero-actions-live-message-detail,
.hero-actions-live:focus-within .hero-actions-live-message-detail,
.hero-actions-live.is-open .hero-actions-live-message-detail {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
}

@media (hover: none) {
    .hero-actions-live:hover:not(.is-open) strong {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .hero-actions-live:hover:not(.is-open) .hero-actions-live-message-default {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0, 0, 0);
    }

    .hero-actions-live:hover:not(.is-open) .hero-actions-live-message-detail {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(0, 0.28rem, 0);
    }
}

.editorial-band {
    padding: clamp(0.45rem, 1.2vw, 1.15rem) 0;
    border-top: 1px solid rgba(16, 32, 25, 0.08);
    border-bottom: 1px solid rgba(16, 32, 25, 0.08);
    background: var(--cream-200);
}

.editorial-band p {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.3rem, 2.5vw, 2rem);
    color: var(--brg-800);
    text-align: center;
}

.editorial-band-counter {
    text-align: center;
}

.editorial-band-counter-claim {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.05rem, 2.5vw, 2rem);
    color: var(--brg-800);
}

.editorial-band-counter-claim strong {
    color: var(--gold);
}

.editorial-band-counter-claim strong:not([data-live-views]) {
    background: linear-gradient(
        90deg,
        #9a7b4a 0%,
        #c9a96a 30%,
        #e8cfa0 50%,
        #c9a96a 70%,
        #9a7b4a 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer-text 4s ease-in-out infinite;
}

@keyframes shimmer-text {
    0%, 100% { background-position: 100% 50%; }
    50% { background-position: 0% 50%; }
}

.editorial-band-counter-claim strong[data-live-views] {
    display: inline-block;
    min-width: 1.6ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
}


.editorial-band-swap {
    position: relative;
    display: grid;
    align-items: center;
    justify-items: center;
    overflow: hidden;
}

.editorial-band-swap-item {
    grid-area: 1 / 1;
    pointer-events: none;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.4s ease;
}

.editorial-band-swap-item.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.editorial-band-swap-item.is-leaving {
    transform: translateY(-100%);
    opacity: 0;
}

.editorial-band-counter-live {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--brg-600, rgba(16, 32, 25, 0.55));
}

.services {
    background: var(--cream-100);
}

/* Inhalt der Leistungen-Sektion vertikal mittig im Viewport statt top-bündig */
html.snap-scroll-enabled .services.snap-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-head {
    max-width: 64ch;
    margin-bottom: clamp(1.3rem, 2.8vw, 2rem);
}

.section-head h2 {
    margin-bottom: 0.75rem;
    color: var(--brg-900);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2.2vw, 1.7rem);
}

.service-card {
    --media-parallax-y: 0px;
    --media-parallax-r: 0deg;
    --media-parallax-s: 1;
    --service-hover-lift: 0px;
    position: relative;
    border-radius: var(--radius-lg);
    border: none;
    overflow: clip;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translate3d(0, calc(var(--media-parallax-y) + var(--service-hover-lift)), 0) rotate(var(--media-parallax-r)) scale(var(--media-parallax-s));
    transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
    will-change: transform;
}

.service-card::before {
    display: none;
}

.service-card > * {
    position: relative;
    z-index: 1;
}

.service-card:hover {
    --service-hover-lift: -3px;
    box-shadow: none;
    border-color: transparent;
}

.service-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(180deg, #000 14%, transparent 96%);
    mask-image: linear-gradient(180deg, #000 14%, transparent 96%);
    transform: scale(1);
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover img {
    transform: scale(1.045);
}

/* Gestaffelte Entrance der Leistungs-Karten beim Scrollen */
.js .service-card:not(.is-revealed) > * {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
}

.js .service-card.is-revealed > * {
    animation: service-rise 950ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.js .service-card.is-revealed:nth-child(2) > * {
    animation-delay: 140ms;
}

.js .service-card.is-revealed:nth-child(3) > * {
    animation-delay: 280ms;
}

.js .service-card.is-revealed:nth-child(4) > * {
    animation-delay: 420ms;
}

@keyframes service-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.service-card div {
    padding: 1.55rem 1.04rem 1.12rem;
}

.service-card h3 {
    margin-bottom: 0.5rem;
    color: var(--gold);   /* Karten-Titel in Gold — gleicher Ton wie die Sektions-Kicker */
}

.methodology {
    background: #efe7d7;
}

.methodology-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1rem, 2.8vw, 2rem);
    align-items: start;
}

@media (min-width: 1025px) {
    .methodology,
    .about,
    .works {
        display: grid;
        align-items: center;
    }

    .methodology .methodology-grid,
    .about .about-grid {
        min-height: calc(100svh - (2 * var(--section-space)));
        align-items: center;
    }

    .works .container {
        min-height: calc(100svh - (2 * var(--section-space)));
        display: grid;
        align-items: center;
    }

    .works-panel {
        width: min(1180px, 100%);
        justify-self: center;
    }
}

.methodology-intro {
    display: grid;
    gap: 0.8rem;
}

.methodology-intro h2 {
    color: var(--brg-900);
}

.methodology-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.64rem;
}

.methodology-list li {
    --media-parallax-y: 0px;
    --media-parallax-r: 0deg;
    --media-parallax-s: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: start;
    border: 1px solid rgba(7, 38, 28, 0.16);
    border-radius: var(--radius-md);
    background: rgba(249, 245, 236, 0.8);
    padding: 0.8rem 0.85rem;
    transform: translate3d(0, var(--media-parallax-y), 0) rotate(var(--media-parallax-r)) scale(var(--media-parallax-s));
    transition: transform var(--mid) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
    will-change: transform;
}

.methodology-list span {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--cream-100);
    background: var(--brg-800);
}

.methodology-list h3 {
    margin-bottom: 0.32rem;
    color: var(--brg-900);
}

.works {
    position: relative;
    overflow: clip;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(18, 90, 70, 0.24), transparent 58%),
        radial-gradient(110% 90% at 100% 100%, rgba(145, 115, 58, 0.2), transparent 62%),
        var(--brg-950);
    color: var(--cream-100);
}

.works .container {
    position: relative;
}

/* Bühne um die Glass-Card: Anker für die Retro-Kamera dahinter */
.works-stage {
    position: relative;
    width: min(1180px, 100%);
    margin-inline: auto;
    justify-self: center;
}

/* Retro-Kamera ganz unten links in der Sektion, vom Rand angeschnitten */
.works-camera {
    position: absolute;
    left: 0;
    bottom: 0;
    width: clamp(330px, 37vw, 600px);
    height: auto;
    z-index: 0;
    pointer-events: none;
    --works-cam-y: 0px;
    transform: translate3d(-20%, calc(12% + var(--works-cam-y)), 0);
    filter: brightness(1.08) drop-shadow(0 26px 46px rgba(0, 0, 0, 0.5));
}

@media (max-width: 780px) {
    .works-camera {
        display: none;
    }
}

.section-head-light h2 {
    color: var(--cream-100);
}

.section-head-light p {
    color: rgba(249, 245, 236, 0.88);
}

.works-panel {
    --media-parallax-y: 0px;
    --media-parallax-r: 0deg;
    --media-parallax-s: 1;
    position: relative;
    overflow: hidden;
    transform: translate3d(0, var(--media-parallax-y), 0) rotate(var(--media-parallax-r)) scale(var(--media-parallax-s));
    transition: transform var(--mid) var(--ease), border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
    will-change: transform;
    border-radius: calc(var(--radius-lg) + 0.32rem);
    border: 1px solid rgba(249, 245, 236, 0.24);
    background:
        linear-gradient(155deg, rgba(249, 245, 236, 0.14), rgba(249, 245, 236, 0.06) 30%, rgba(4, 26, 19, 0.44) 100%);
    backdrop-filter: blur(14px) saturate(132%);
    -webkit-backdrop-filter: blur(14px) saturate(132%);
    padding: clamp(0.92rem, 2vw, 1.56rem);
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(0.9rem, 2vw, 1.5rem);
    width: min(1180px, 100%);
    margin-inline: auto;
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.works-panel > * {
    position: relative;
    z-index: 2;
}

.service-card,
.hero-panel,
.works-panel,
.contact-panel,
.contact-meta-item {
    --spot-x: 50%;
    --spot-y: 50%;
}

.service-card::after,
.hero-panel::after,
.works-panel::after,
.contact-panel::after,
.contact-meta-item::after {
    content: '';
    position: absolute;
    inset: -0.5px;
    border-radius: inherit;
    padding: 1.25px;
    pointer-events: none;
    background:
        radial-gradient(84% 84% at var(--spot-x) var(--spot-y), rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.28) 32%, rgba(255, 255, 255, 0) 72%);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    opacity: 0;
    z-index: 3;
    transition: opacity 640ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card.is-pointer-near::after,
.hero-panel.is-pointer-near::after,
.works-panel.is-pointer-near::after,
.contact-panel.is-pointer-near::after,
.contact-meta-item.is-pointer-near::after,
.service-card:hover::after,
.hero-panel:hover::after,
.works-panel:hover::after,
.contact-panel:hover::after,
.contact-meta-item:hover::after,
.service-card:focus-within::after,
.hero-panel:focus-within::after,
.works-panel:focus-within::after,
.contact-panel:focus-within::after,
.contact-meta-item:focus-within::after {
    opacity: 0.88;
}

.hero-panel::after {
    transition-duration: 860ms;
}

.hero-panel.is-pointer-near::after,
.hero-panel:hover::after,
.hero-panel:focus-within::after {
    opacity: 0.48;
}

.works-intro {
    margin: 0;
    display: grid;
    align-content: center;
    gap: 0.7rem;
    text-align: left;
}

.works-intro p {
    max-width: 36ch;
}

.works-carousel {
    --works-frame-size: min(100%, 432px);
    position: relative;
    width: min(100%, 540px);
    margin-inline: auto;
    padding: 0;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.works-carousel::before {
    content: none;
}

.works-viewport {
    --film-rail-h: clamp(1.15rem, 3vw, 1.5rem);
    position: relative;
    z-index: 1;
    width: var(--works-frame-size);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0.6rem;
    border: 1px solid rgba(249, 245, 236, 0.18);
    background: linear-gradient(180deg, rgba(10, 16, 13, 0.97), rgba(4, 9, 7, 0.97));
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding-block: var(--film-rail-h);
    padding-inline: 0;
    max-width: 100%;
    margin-inline: auto;
    touch-action: pan-y;
}

/* Perforation oben und unten — der Film läuft horizontal, wie die Slides.
   Die Leisten stehen seitlich über (im Viewport geclippt), damit sie beim
   Transport per transform verschoben werden können, ohne Lücken zu reißen. */
.works-viewport::before,
.works-viewport::after {
    content: '';
    position: absolute;
    left: -102px;
    right: -102px;
    height: var(--film-rail-h);
    z-index: 9;
    pointer-events: none;
    background-color: #060a08;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='26' viewBox='0 0 34 26'%3E%3Crect x='9.5' y='7' width='15' height='12' rx='3' fill='%23f9f5ec' fill-opacity='0.78'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: center;
    background-size: 34px auto;
}

.works-viewport::before {
    top: 0;
    border-bottom: 1px solid rgba(249, 245, 236, 0.14);
}

.works-viewport::after {
    bottom: 0;
    border-top: 1px solid rgba(249, 245, 236, 0.14);
}

/* Filmtransport: die Perforation zieht beim Slidewechsel eased mit */
.works-viewport:has(.works-slide.is-exit-to-left)::before,
.works-viewport:has(.works-slide.is-exit-to-left)::after {
    animation: works-perf-left 640ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}

.works-viewport:has(.works-slide.is-exit-to-right)::before,
.works-viewport:has(.works-slide.is-exit-to-right)::after {
    animation: works-perf-right 640ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}

@keyframes works-perf-left {
    from { transform: translateX(102px); }
    to { transform: translateX(0); }
}

@keyframes works-perf-right {
    from { transform: translateX(-102px); }
    to { transform: translateX(0); }
}

/* Edge-Print wie auf echtem Negativrand */
.works-edgeprint {
    position: absolute;
    left: 0.95rem;
    bottom: calc(var(--film-rail-h, 1.3rem) + 0.42rem);
    z-index: 8;
    pointer-events: none;
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(249, 245, 236, 0.4);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

@media (max-width: 640px) {
    .works-edgeprint {
        display: none;
    }
}

.works-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Vignette im Projektorfenster */
.works-track::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: radial-gradient(105% 105% at 50% 50%, transparent 56%, rgba(0, 0, 0, 0.52) 100%);
}

/* Laufendes Filmkorn über dem Frame */
.works-track::after {
    content: '';
    position: absolute;
    inset: -8%;
    z-index: 6;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    opacity: 0.32;
    animation: works-grain 0.5s steps(3) infinite;
}

/* Ruhende (unsichtbare) Slides halten keine teuren Blur-Layer */
.works-slide:not(.is-active):not(.is-enter-from-right):not(.is-enter-from-left):not(.is-exit-to-left):not(.is-exit-to-right) .work-bleed {
    visibility: hidden;
}

@keyframes works-grain {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-2.4%, 1.8%); }
    100% { transform: translate(1.8%, -2.2%); }
}

/* Filmtransport als echter Push: alter Frame schiebt raus, neuer schiebt nahtlos
   aus der Gegenrichtung rein — synchron zur Perforation (gleiche Dauer & Kurve).
   Blur nur während des Übergangs — ruhende Slides bleiben filterfrei (GPU-Last). */
.works-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translate3d(102%, 0, 0);
    pointer-events: none;
    z-index: 2;
    transition:
        opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 640ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 640ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.works-slide.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    pointer-events: auto;
    z-index: 4;
}

/* Enter-Zustände springen ohne Übergang an ihre Startkante — sonst fegt der
   neue Frame beim Zurückblättern erst sichtbar von rechts nach links */
.works-slide.is-enter-from-right:not(.is-active) {
    opacity: 1;
    transform: translate3d(102%, 0, 0);
    filter: blur(4px);
    z-index: 3;
    transition: none;
}

.works-slide.is-enter-from-left:not(.is-active) {
    opacity: 1;
    transform: translate3d(-102%, 0, 0);
    filter: blur(4px);
    z-index: 3;
    transition: none;
}

.works-slide.is-exit-to-left {
    opacity: 1;
    transform: translate3d(-102%, 0, 0);
    filter: blur(4px);
    pointer-events: none;
    z-index: 2;
}

.works-slide.is-exit-to-right {
    opacity: 1;
    transform: translate3d(102%, 0, 0);
    filter: blur(4px);
    pointer-events: none;
    z-index: 2;
}

.works-slide[aria-hidden='true'] {
    pointer-events: none;
}

/* Ruhende Slides springen ohne Übergang in ihre Warteposition zurück,
   sonst zieht der alte Frame nach dem Cleanup sichtbar durchs Bild */
.works-slide[aria-hidden='true']:not(.is-active):not(.is-enter-from-right):not(.is-enter-from-left):not(.is-exit-to-left):not(.is-exit-to-right) {
    transition: none;
}

.works-slide .work-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    transform: none;
    transition: none;
    will-change: auto;
}

.work-item {
    --media-parallax-y: 0px;
    --media-parallax-r: 0deg;
    --media-parallax-s: 1;
    --work-hover-lift: 0px;
    position: relative;
    margin: 0;
    display: grid;
    place-items: center;
    padding: clamp(0.2rem, 0.7vw, 0.38rem);
    overflow: clip;
    border-radius: var(--radius-md);
    border: 1px solid rgba(249, 245, 236, 0.24);
    background: rgba(249, 245, 236, 0.08);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
    transform: translate3d(0, calc(var(--media-parallax-y) + var(--work-hover-lift)), 0) rotate(var(--media-parallax-r)) scale(var(--media-parallax-s));
    transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease), border-color var(--mid) var(--ease);
    will-change: transform;
}

.work-item-wide {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.works-slide .work-item:not(.work-item-wide) {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.work-item::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        linear-gradient(164deg, rgba(249, 245, 236, 0.14), rgba(249, 245, 236, 0) 28%),
        linear-gradient(0deg, rgba(4, 26, 19, 0.46), rgba(4, 26, 19, 0) 42%);
    opacity: 0.66;
    transition: opacity var(--mid) var(--ease);
}

.works-slide .work-item::before {
    content: none;
}

.work-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: none;
    transition: filter var(--mid) var(--ease);
    filter: saturate(1.03) contrast(1.02);
    border-radius: calc(var(--radius-md) - 0.22rem);
    background: rgba(3, 17, 13, 0.6);
}

.works-slide .work-item img {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    transition: none;
}

/* Ambilight: das Motiv füllt als unscharfer Schein den ganzen Frame */
.works-slide .work-item img.work-bleed {
    position: absolute;
    inset: -4%;
    z-index: 0;
    width: 108%;
    height: 108%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: blur(16px) saturate(1.15) brightness(0.5);
    -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, rgba(0, 0, 0, 0.92) 26%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.16) 100%);
    mask-image: radial-gradient(120% 120% at 50% 50%, rgba(0, 0, 0, 0.92) 26%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.16) 100%);
    transform: none;
    transition: none;
}

.works-slide.is-active .work-item img {
    transform: translate3d(0, 0, 0) scale(1);
}

.works-slide.is-enter-from-right:not(.is-active) .work-item img {
    transform: translate3d(0, 0, 0) scale(1);
}

.works-slide.is-enter-from-left:not(.is-active) .work-item img {
    transform: translate3d(0, 0, 0) scale(1);
}

.works-slide.is-exit-to-left .work-item img {
    transform: translate3d(0, 0, 0) scale(1);
}

.works-slide.is-exit-to-right .work-item img {
    transform: translate3d(0, 0, 0) scale(1);
}

.work-item:hover {
    --work-hover-lift: 0px;
    border-color: rgba(249, 245, 236, 0.36);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

.works-slide .work-item:hover {
    border-color: transparent;
    box-shadow: none;
}

.work-item:hover img {
    filter: saturate(1.08) contrast(1.04);
}

.works-slide .work-item:hover img:not(.work-bleed) {
    filter: none;
    border-color: rgba(249, 245, 236, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.work-item:hover::before {
    opacity: 0.46;
}

.works-slide .work-item:hover::before {
    opacity: 0;
}

.works-slide figcaption {
    position: absolute;
    right: clamp(0.54rem, 1vw, 0.8rem);
    bottom: clamp(0.48rem, 0.9vw, 0.76rem);
    margin: 0;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(249, 245, 236, 0.78);
    text-align: right;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
    opacity: 0;
    transform: translate3d(0, 4px, 0);
    transition:
        opacity 300ms cubic-bezier(0.2, 0.8, 0.2, 1) 80ms,
        transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1) 80ms;
}

.works-slide.is-enter-from-right:not(.is-active) figcaption {
    transform: translate3d(0, 4px, 0);
}

.works-slide.is-enter-from-left:not(.is-active) figcaption {
    transform: translate3d(0, 4px, 0);
}

.works-slide.is-exit-to-left figcaption {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
    transition-delay: 0ms;
}

.works-slide.is-exit-to-right figcaption {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
    transition-delay: 0ms;
}

.works-slide.is-active figcaption {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.works-nav {
    --works-nav-parallax-y: 0px;
    --works-nav-parallax-z: 0px;
    --works-nav-parallax-scale: 1;
    --works-nav-hover-z: 0px;
    --works-nav-hover-scale-bonus: 0;
    position: absolute;
    top: calc(50% - 0.62rem);
    z-index: 2;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 999px;
    border: 1px solid rgba(249, 245, 236, 0.4);
    background:
        linear-gradient(155deg, rgba(249, 245, 236, 0.24), rgba(249, 245, 236, 0.08) 42%, rgba(4, 26, 19, 0.44) 100%);
    color: var(--cream-100);
    font-size: 1.5rem;
    line-height: 1;
    transform: translate3d(
        0,
        calc(-50% + var(--works-nav-parallax-y)),
        calc(var(--works-nav-parallax-z) + var(--works-nav-hover-z))
    ) scale(calc(var(--works-nav-parallax-scale) + var(--works-nav-hover-scale-bonus)));
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    transition:
        transform var(--mid) var(--ease),
        background var(--fast) var(--ease),
        border-color var(--fast) var(--ease),
        box-shadow var(--fast) var(--ease);
    will-change: transform;
    --spot-x: 50%;
    --spot-y: 50%;
}

.works-nav::before {
    content: none;
}

.works-nav::after {
    content: '';
    position: absolute;
    inset: -0.5px;
    border-radius: inherit;
    padding: 1.25px;
    pointer-events: none;
    background:
        radial-gradient(86% 86% at var(--spot-x) var(--spot-y), rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.32) 32%, rgba(255, 255, 255, 0) 72%);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    opacity: 0;
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.works-nav[disabled] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.works-nav-prev {
    left: max(0.12rem, calc(50% - (var(--works-frame-size) / 2) - 2.2rem));
}

.works-nav-next {
    right: max(0.12rem, calc(50% - (var(--works-frame-size) / 2) - 2.2rem));
}

.works-nav:hover,
.works-nav:focus-visible {
    --works-nav-hover-z: 14px;
    --works-nav-hover-scale-bonus: 0.06;
    border-color: rgba(249, 245, 236, 0.56);
    background:
        linear-gradient(155deg, rgba(249, 245, 236, 0.3), rgba(249, 245, 236, 0.12) 42%, rgba(4, 26, 19, 0.5) 100%);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        inset 0 -1px 0 rgba(255, 255, 255, 0.16);
}

.works-nav.is-pointer-near::after,
.works-nav:hover::after,
.works-nav:focus-visible::after {
    opacity: 1;
}

.works-nav:active {
    --works-nav-hover-z: 8px;
    --works-nav-hover-scale-bonus: 0.02;
}

.works-dots {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 0.44rem;
    margin-top: 0.58rem;
}

.works-dot {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    border: 0;
    background: rgba(249, 245, 236, 0.42);
    transition: width var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.works-dot:hover,
.works-dot:focus-visible {
    transform: scale(1.08);
    background: rgba(249, 245, 236, 0.74);
}

.works-dot.is-active {
    width: 1.9rem;
    background: var(--gold);
}
.about {
    background: var(--cream-100);
}

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1rem, 2.8vw, 2rem);
    align-items: center;
}

.about-image {
    margin: 0;
}

.about-image img {
    width: 100%;
    min-height: clamp(320px, 43vw, 560px);
    object-fit: cover;
    border-radius: 0;
    will-change: transform;
}

.about-copy {
    --media-parallax-y: 0px;
    --media-parallax-s: 1;
    display: grid;
    gap: 0.8rem;
    transform: translate3d(0, var(--media-parallax-y), 0) scale(var(--media-parallax-s));
    transition: transform var(--mid) var(--ease);
    will-change: transform;
}

.about-copy h2 {
    color: var(--brg-900);
}

.contact-inline {
    margin-top: 0.3rem;
    text-transform: uppercase;
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    letter-spacing: 0.08em;
    color: var(--gold-strong);
}

.contact-inline a {
    color: var(--brg-800);
    text-decoration: none;
}

.contact-inline a:hover,
.contact-inline a:focus-visible {
    color: var(--gold-strong);
}

.contact {
    position: relative;
    overflow: clip;
    perspective: 1200px;
    background:
        radial-gradient(circle at 14% 10%, rgba(73, 157, 106, 0.3), transparent 34%),
        radial-gradient(circle at 88% 88%, rgba(14, 40, 33, 0.55), transparent 38%),
        linear-gradient(164deg, #071f18, #0b3d2e 46%, #08291f);
    color: var(--cream-100);
}

.contact::before {
    content: '';
    position: absolute;
    inset: -28% -14% auto;
    height: 72%;
    pointer-events: none;
    background:
        radial-gradient(56% 48% at 18% 18%, rgba(152, 228, 189, 0.26), rgba(152, 228, 189, 0) 72%),
        radial-gradient(46% 42% at 82% 8%, rgba(73, 157, 106, 0.24), rgba(73, 157, 106, 0) 70%);
    mix-blend-mode: screen;
    opacity: 0.56;
    filter: blur(34px);
    z-index: 1;
}

.contact-panel {
    position: relative;
    z-index: 2;
    overflow: hidden;
    transform-origin: center center;
    will-change: transform, box-shadow;
    border-radius: clamp(1.2rem, 2.2vw, 1.9rem);
    border: 1px solid rgba(249, 245, 236, 0.26);
    background:
        linear-gradient(155deg, rgba(249, 245, 236, 0.12), rgba(249, 245, 236, 0.05) 34%, rgba(4, 26, 19, 0.44) 100%);
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
    max-width: min(1180px, 100%);
    margin-inline: auto;
    padding: clamp(1.1rem, 2.4vw, 2rem);
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(1rem, 2.4vw, 2.2rem);
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.contact-panel > :not(.contact-owl) {
    position: relative;
    z-index: 2;
}

.contact-intro {
    display: grid;
    align-content: start;
    gap: clamp(0.72rem, 1.35vw, 1.04rem);
}

.contact-owl {
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(340px, 44vw, 600px);
    height: auto;
    opacity: 0.2;
    pointer-events: none;
    z-index: 1;
    transform: translate3d(6%, 2%, 0);
}

.contact-panel h2 {
    margin-bottom: 0.2rem;
    color: var(--cream-100);
}

.contact-actions {
    margin-top: 0.45rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.contact .btn-outline {
    border-color: rgba(249, 245, 236, 0.72);
    background: rgba(4, 26, 19, 0.22);
}

.contact .btn-outline:hover,
.contact .btn-outline:focus-visible {
    background: rgba(249, 245, 236, 0.14);
}

.contact-meta {
    margin: 0;
    padding: 0;
    display: grid;
    align-content: stretch;
    grid-auto-rows: 1fr;
    gap: 0.64rem;
}

.contact-meta-item {
    --media-parallax-y: 0px;
    --media-parallax-r: 0deg;
    --media-parallax-s: 1;
    --meta-hover-lift: 0px;
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: center;
    gap: 0.32rem;
    padding: 0.78rem 0.9rem;
    border: 1px solid rgba(249, 245, 236, 0.18);
    border-radius: 0.92rem;
    background: rgba(4, 26, 19, 0.34);
    transform: translate3d(0, calc(var(--media-parallax-y) + var(--meta-hover-lift)), 0) rotate(var(--media-parallax-r)) scale(var(--media-parallax-s));
    transition: transform var(--mid) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
    will-change: transform;
}

.contact-meta-item:hover {
    --meta-hover-lift: -2px;
    border-color: rgba(249, 245, 236, 0.3);
}

.contact-meta-item span {
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: rgba(249, 245, 236, 0.72);
}

.contact-meta-item a,
.contact-meta-item strong {
    display: block;
    text-decoration: none;
    color: var(--cream-100);
    font-size: clamp(1.02rem, 1.2vw, 1.2rem);
    line-height: 1.34;
    font-weight: 600;
}

.contact-meta-item a:hover,
.contact-meta-item a:focus-visible {
    color: #f8ddb2;
}

.contact-meta-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.15rem;
}

.contact-meta-item .contact-meta-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    border: 1px solid rgba(249, 245, 236, 0.25);
    background: rgba(249, 245, 236, 0.06);
    color: var(--cream-100);
    transition:
        color var(--fast) var(--ease),
        border-color var(--fast) var(--ease),
        background var(--fast) var(--ease),
        transform var(--fast) var(--ease);
}

.contact-meta-item .contact-meta-links a:hover,
.contact-meta-item .contact-meta-links a:focus-visible {
    color: #f8ddb2;
    border-color: rgba(185, 154, 80, 0.7);
    background: rgba(185, 154, 80, 0.14);
    transform: translateY(-2px);
}

.contact-meta-links svg {
    display: block;
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.site-footer {
    background: var(--cream-200);
    color: var(--brg-900);
    padding: 2.3rem 0 2.8rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.site-footer h2 {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
}

.site-footer p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
}

.site-footer p a {
    color: inherit;
    text-decoration: none;
}

.site-footer p a:hover,
.site-footer p a:focus-visible {
    text-decoration: underline;
}

.footer-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.62rem;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem;
    padding: 0.42rem 0.78rem;
    border-radius: 999px;
    border: 1px solid rgba(7, 38, 28, 0.2);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brg-900);
    background: rgba(7, 38, 28, 0.03);
    transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
    transform: translateY(-1px);
    background: rgba(7, 38, 28, 0.08);
    border-color: rgba(7, 38, 28, 0.3);
}

.footer-locale-switch {
    margin-top: 0.22rem;
    font-size: 0.9rem;
    color: rgba(7, 38, 28, 0.84);
}

.footer-locale-switch strong {
    font-weight: 800;
    color: var(--brg-900);
}

.footer-locale-switch .locale-current {
    font-weight: 700;
    color: var(--brg-900);
}

.footer-locale-switch a {
    font-weight: 400;
}

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 5200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(4, 26, 19, 0.92);
}

.video-modal.is-open {
    display: flex;
}

.video-dialog {
    position: relative;
    width: min(100%, 860px);
    border-radius: 1rem;
    overflow: clip;
    border: 1px solid rgba(249, 245, 236, 0.2);
    background: linear-gradient(160deg, rgba(7, 38, 28, 0.96), rgba(11, 61, 46, 0.86));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.video-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 340px;
}

.video-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-preview > div {
    display: grid;
    align-content: center;
    gap: 0.82rem;
    padding: 1.3rem;
    color: var(--cream-100);
}

.video-preview h3 {
    font-size: clamp(1.4rem, 2.4vw, 2.1rem);
    color: var(--gold);
}

.video-close {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 999px;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--cream-100);
    background: rgba(4, 26, 19, 0.85);
}

body.video-open {
    overflow: hidden;
}

.legal-page {
    background:
        radial-gradient(circle at 16% 12%, rgba(74, 155, 104, 0.15), transparent 42%),
        radial-gradient(circle at 82% 2%, rgba(176, 141, 87, 0.14), transparent 36%),
        linear-gradient(180deg, #041a13 0%, #07261c 36%, #0a2d22 100%);
    color: var(--cream-100);
}

.legal-main {
    padding-top: clamp(6.4rem, 10vw, 8.6rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.legal-section {
    padding-block: 0;
}

.legal-wrapper {
    display: grid;
    gap: clamp(0.8rem, 1.6vw, 1.24rem);
}

.legal-card {
    padding: clamp(1.2rem, 2vw, 1.8rem);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(249, 245, 236, 0.18);
    background:
        linear-gradient(132deg, rgba(6, 30, 24, 0.84), rgba(8, 46, 36, 0.7) 62%, rgba(5, 27, 21, 0.86));
    backdrop-filter: blur(14px) saturate(128%);
    -webkit-backdrop-filter: blur(14px) saturate(128%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 18px 34px rgba(0, 0, 0, 0.22);
}

.legal-card-intro {
    background:
        linear-gradient(125deg, rgba(9, 37, 30, 0.9), rgba(14, 58, 46, 0.74) 54%, rgba(9, 37, 30, 0.92)),
        radial-gradient(circle at 78% 22%, rgba(176, 141, 87, 0.2), transparent 46%);
}

.legal-card h1 {
    margin: 0 0 0.7rem;
    font-size: clamp(2rem, 4.8vw, 3.25rem);
}

.legal-card h2 {
    margin: 0 0 0.64rem;
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
}

.legal-card h3 {
    margin: 1rem 0 0.35rem;
    font-size: clamp(1.1rem, 2.3vw, 1.35rem);
    letter-spacing: 0;
    color: var(--cream-200);
}

.legal-card p {
    font-size: clamp(0.97rem, 1.18vw, 1.08rem);
    color: rgba(249, 245, 236, 0.94);
}

.legal-card p + p {
    margin-top: 0.65rem;
}

.legal-card a {
    color: var(--cream-100);
}

.legal-card a:hover,
.legal-card a:focus-visible {
    color: #f4d39b;
}

.legal-meta {
    margin-top: 1rem;
    color: rgba(249, 245, 236, 0.72);
    font-size: 0.92rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.legal-footer {
    margin-top: 0;
}

@media (min-width: 1025px) {
    .brand {
        margin-left: clamp(0.22rem, 0.7vw, 0.64rem);
    }

}

@media (max-width: 1080px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy,
    .hero-panel {
        max-width: 100%;
    }

    .hero-title {
        font-size: clamp(1.7rem, 7.2vw, 3.4rem);
        line-height: 1.05;
    }

    .hero-line {
        margin-bottom: 0.3em;
    }

    .hero-line:last-child {
        margin-bottom: 0;
    }

    .hero-logo {
        width: clamp(130px, 36vw, 170px);
    }

    .hero-claim-logo {
        width: min(86vw, 480px);
    }

    .hero-frost {
        background: linear-gradient(180deg, rgba(4, 26, 19, 0.55) 0%, rgba(4, 26, 19, 0.72) 50%, rgba(4, 26, 19, 0.9) 100%);
    }

    .hero-content .hero-logo {
        margin-bottom: clamp(1.6rem, 5vw, 2.4rem);
    }

    .hero-content .hero-buttons {
        margin-top: clamp(1.6rem, 5vw, 2.4rem);
    }

    .hero-content {
        margin-top: -3rem;
    }

    .hero-buttons .btn {
        padding: 0.75rem 2rem;
        font-size: 0.75rem;
        min-height: 2.8rem;
    }

    .editorial-band {
        padding: clamp(0.8rem, 3vw, 1.2rem) 0;
    }

    .editorial-band p,
    .editorial-band-counter-claim {
        font-size: clamp(0.88rem, 4.2vw, 1.1rem);
        line-height: 1.45;
        padding: 0 0.5rem;
    }

    .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .works-panel {
        grid-template-columns: 1fr;
    }

    .works-intro {
        max-width: min(640px, 100%);
    }

    .works-carousel {
        width: min(100%, 486px);
    }

    .works-nav {
        width: 2.6rem;
        height: 2.6rem;
        font-size: 1.35rem;
    }
    .methodology-grid {
        grid-template-columns: 1fr;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .contact-panel {
        grid-template-columns: 1fr;
    }

    .contact-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-owl {
        width: clamp(300px, 56vw, 480px);
        opacity: 0.18;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .legal-main {
        padding-top: clamp(6rem, 12vw, 7.2rem);
    }
}

@media (max-width: 860px) {
    body.nav-open {
        overflow: hidden;
    }

    .nav-shell {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .nav-shell {
        overflow: visible;
    }

    .mobile-section-wheel {
        position: relative;
        grid-column: 2;
        justify-self: center;
        display: grid;
        place-items: center;
        width: min(58vw, 16.8rem);
        height: 1.84rem;
        perspective: 1120px;
        transform-style: preserve-3d;
        --wheel-duration: 820ms;
        --wheel-depth: 30px;
        --wheel-tilt: 78deg;
        --wheel-yaw: 12deg;
        overflow: hidden;
        pointer-events: none;
    }

    .mobile-section-wheel-item {
        position: absolute;
        inset: 0;
        z-index: 4;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.115em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: rgba(249, 245, 236, 0.94);
        font-size: 0.63rem;
        font-weight: 800;
        line-height: 1.84rem;
        backface-visibility: hidden;
        transform-style: preserve-3d;
        transform-origin: 50% 50% calc(var(--wheel-depth) * -1);
        will-change: transform, opacity;
    }

    .wheel-current {
        transform: translateY(0) rotateX(0deg) rotateY(0deg) translateZ(var(--wheel-depth));
        opacity: 1;
    }

    .wheel-incoming {
        transform: translateY(0) rotateX(0deg) rotateY(0deg) translateZ(var(--wheel-depth));
        opacity: 0;
    }

    .mobile-section-wheel.is-rolling.dir-down .wheel-current {
        animation: wheel-current-down var(--wheel-duration) var(--ease) both;
    }

    .mobile-section-wheel.is-rolling.dir-down .wheel-incoming {
        animation: wheel-incoming-down var(--wheel-duration) var(--ease) both;
    }

    .mobile-section-wheel.is-rolling.dir-up .wheel-current {
        animation: wheel-current-up var(--wheel-duration) var(--ease) both;
    }

    .mobile-section-wheel.is-rolling.dir-up .wheel-incoming {
        animation: wheel-incoming-up var(--wheel-duration) var(--ease) both;
    }

    @keyframes wheel-current-down {
        0% {
            transform: translateY(0) rotateX(0deg) rotateY(0deg) translateZ(var(--wheel-depth));
            opacity: 1;
        }
        100% {
            transform: translateY(-108%) rotateX(var(--wheel-tilt)) rotateY(var(--wheel-yaw)) translateZ(var(--wheel-depth));
            opacity: 0;
        }
    }

    @keyframes wheel-incoming-down {
        0% {
            transform: translateY(108%) rotateX(calc(var(--wheel-tilt) * -1)) rotateY(calc(var(--wheel-yaw) * -1)) translateZ(var(--wheel-depth));
            opacity: 0;
        }
        100% {
            transform: translateY(0) rotateX(0deg) rotateY(0deg) translateZ(var(--wheel-depth));
            opacity: 1;
        }
    }

    @keyframes wheel-current-up {
        0% {
            transform: translateY(0) rotateX(0deg) rotateY(0deg) translateZ(var(--wheel-depth));
            opacity: 1;
        }
        100% {
            transform: translateY(108%) rotateX(calc(var(--wheel-tilt) * -1)) rotateY(calc(var(--wheel-yaw) * -1)) translateZ(var(--wheel-depth));
            opacity: 0;
        }
    }

    @keyframes wheel-incoming-up {
        0% {
            transform: translateY(-108%) rotateX(var(--wheel-tilt)) rotateY(var(--wheel-yaw)) translateZ(var(--wheel-depth));
            opacity: 0;
        }
        100% {
            transform: translateY(0) rotateX(0deg) rotateY(0deg) translateZ(var(--wheel-depth));
            opacity: 1;
        }
    }

    .menu-toggle {
        display: inline-flex;
        margin-right: 0;
    }

    .primary-nav {
        position: absolute;
        grid-column: 1 / -1;
        top: calc(100% + 0.42rem);
        left: calc((var(--shell-pad-x) + 1px) * -1);
        right: auto;
        max-width: none;
        width: calc(100% + ((var(--shell-pad-x) + 1px) * 2));
        box-sizing: border-box;
        border-radius: 1rem;
        border: 1px solid rgba(249, 245, 236, 0.16);
        background: rgba(4, 26, 19, 0.96);
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateY(-6px);
        transition: max-height var(--mid) var(--ease), opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
    }

    .primary-nav.is-open {
        max-height: 24rem;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .primary-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0.14rem;
        padding: 0.4rem 0.58rem;
    }

    .primary-nav a {
        display: flex;
        width: 100%;
        min-height: 2.35rem;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-bottom: 1px solid rgba(249, 245, 236, 0.08);
    }

    .primary-nav li:last-child:not(.nav-mobile-cta) a {
        border-bottom: 0;
    }

    .nav-mobile-cta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.42rem;
        padding-top: 0.4rem;
        padding-bottom: 0.16rem;
    }

    .nav-mobile-cta a {
        min-height: 2.35rem;
        justify-content: center;
        border: 1px solid rgba(249, 245, 236, 0.28);
        border-radius: 999px;
        background: rgba(249, 245, 236, 0.08);
        border-bottom: 1px solid rgba(249, 245, 236, 0.28);
    }

    .nav-mobile-cta a:hover,
    .nav-mobile-cta a:focus-visible {
        background: rgba(249, 245, 236, 0.16);
        transform: translateY(0);
    }

    .nav-indicator {
        display: none;
    }

    .menu-toggle.is-active span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .menu-toggle.is-active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.is-active span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .hero {
        padding-top: clamp(6.9rem, 18vw, 8.6rem);
        padding-bottom: clamp(2.8rem, 10vw, 4.2rem);
    }

    .hero-grid {
        min-height: clamp(560px, 82svh, 760px);
        align-items: center;
    }

    .hero-copy,
    .hero-panel {
        width: min(92vw, 580px);
        max-width: min(92vw, 580px);
    }

    .hero-copy {
        gap: 1rem;
        text-align: center;
    }

    .hero-panel {
        margin-top: 0;
    }

    .hero-text {
        margin-inline: auto;
        max-width: 36ch;
    }

    .hero-video {
        transform: scale(1.1);
        object-position: calc(50% - 100px) 36%;
        filter: saturate(1.08) contrast(1.02);
    }

    .hero-bg-overlay {
        background:
            radial-gradient(circle at 16% 12%, rgba(176, 141, 87, 0.22), transparent 42%),
            linear-gradient(124deg, rgba(4, 26, 19, 0.56), rgba(11, 61, 46, 0.2) 48%, rgba(4, 26, 19, 0.72));
    }

    .hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-actions-live {
        justify-items: center;
        text-align: center;
    }

    .hero-actions-live-copy {
        justify-items: center;
    }
    .hero-actions-live-message-detail {
        justify-items: center;
        text-align: center;
    }

    .contact-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 0.5rem;
    }

    .contact-actions .btn {
        width: 100%;
        min-width: 0;
        justify-content: center;
        text-align: center;
    }

    .service-grid {
        grid-template-columns: 1fr;
        gap: clamp(1rem, 3.8vw, 1.28rem);
    }

    .service-card {
        border: none;
        box-shadow: none;
    }

    .service-card img {
        aspect-ratio: 16 / 10;
    }

    .service-card div {
        padding: 1.08rem 1.08rem 1.22rem;
    }

    .service-card h3 {
        margin-bottom: 0.56rem;
    }

    .works-panel {
        padding: clamp(0.72rem, 2.6vw, 1.04rem);
        gap: 0.8rem;
    }

    .works-carousel {
        width: min(100%, 470px);
    }

    .works-slide {
        padding: 0;
    }

    .works-slide figcaption {
        font-size: 0.68rem;
        letter-spacing: 0.11em;
    }

    .works-nav {
        display: none;
    }

    .works-dots {
        margin-top: 0.5rem;
    }
    .video-preview {
        grid-template-columns: 1fr;
    }

    .contact-meta {
        grid-template-columns: 1fr;
    }

    .contact-meta-item {
        padding: 0.72rem 0.8rem;
    }

    .contact-owl {
        width: 260px;
        right: 0;
        bottom: 0;
        opacity: 0.14;
        transform: translate3d(10%, 5%, 0);
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .legal-main {
        padding-top: clamp(5.6rem, 16vw, 6.6rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .top-aurora {
        display: none;
    }
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .nav-shell,
    .primary-nav,
    .contact-panel {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Touch-Targets (WCAG 2.2): Trefferflaeche vergroessern ohne Optik zu aendern */
.works-dot {
    position: relative;
}

.works-dot::after {
    content: '';
    position: absolute;
    inset: -8px;
}

.footer-grid a,
.contact-meta-item a {
    display: inline-block;
    padding-block: 0.3em;
}