@font-face {
    font-family: "Cormorant Garamond";
    src: url("../assets/fonts/cormorant-garamond-400.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../assets/fonts/cormorant-garamond-500.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../assets/fonts/cormorant-garamond-600.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../assets/fonts/cormorant-garamond-500-italic.ttf") format("truetype");
    font-style: italic;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../assets/fonts/manrope-400.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../assets/fonts/manrope-500.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../assets/fonts/manrope-600.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../assets/fonts/manrope-700.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --petrol-950: #031b1b;
    --petrol-900: #072827;
    --petrol-800: #0c3835;
    --petrol-700: #15514b;
    --gold-300: #e6cf91;
    --gold-400: #d6b766;
    --gold-500: #bd963e;
    --gold-600: #9a7427;
    --cream-50: #fbf8f0;
    --cream-100: #f3ede0;
    --cream-200: #e7dcc8;
    --ink: #152523;
    --muted: #64706c;
    --white: #fffef9;
    --line-dark: rgba(255, 255, 255, 0.16);
    --line-light: rgba(7, 40, 39, 0.14);
    --shadow: 0 28px 80px rgba(3, 27, 27, 0.18);
    --shadow-deep: 0 40px 120px rgba(0, 12, 12, 0.46);
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Manrope", Arial, sans-serif;
    --shell: min(90vw, 1320px);
    --header-height: 112px;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 24px);
    background: var(--petrol-950);
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    color: var(--ink);
    background: var(--cream-50);
    font-family: var(--sans);
    font-size: clamp(0.97rem, 0.9rem + 0.18vw, 1.08rem);
    line-height: 1.75;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.menu-open,
body.lightbox-open {
    overflow: hidden;
}

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

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid var(--gold-400);
    outline-offset: 5px;
}

::selection {
    color: var(--petrol-950);
    background: var(--gold-300);
}

h1,
h2,
h3,
p,
figure {
    margin-top: 0;
}

h1,
h2,
h3 {
    font-family: var(--serif);
    font-weight: 500;
    line-height: 0.95;
    text-wrap: balance;
}

h1 em,
h2 em,
h3 em {
    color: var(--gold-400);
    font-weight: 500;
}

.shell {
    width: var(--shell);
    margin-inline: auto;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    z-index: 10000;
    top: 12px;
    left: 12px;
    padding: 0.7rem 1rem;
    color: var(--petrol-950);
    background: var(--gold-300);
    border-radius: 999px;
    font-weight: 700;
    transform: translateY(-160%);
    transition: transform 180ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* Loader */
.site-loader {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--gold-400);
    background:
        radial-gradient(circle at 50% 45%, rgba(214, 183, 102, 0.12), transparent 28%),
        var(--petrol-950);
    opacity: 1;
    visibility: visible;
    transition: opacity 520ms ease, visibility 0s linear 520ms;
}

.site-loader::after {
    content: "ATELIER ANDREAS JORDAN";
    position: absolute;
    top: calc(50% + 70px);
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.28em;
}

.site-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.no-js .site-loader {
    display: none;
}

.loader-dots {
    --uib-size: 60px;
    --uib-color: var(--gold-400);
    --uib-speed: 1.5s;
    --uib-dot-size: calc(var(--uib-size) * 0.1);
    position: relative;
    width: calc(var(--uib-size) * 0.64);
    height: calc(var(--uib-size) * 0.64);
}

@keyframes loader-jump {
    0%, 100% { transform: translateY(120%); }
    50% { transform: translateY(-120%); }
}

.loader-dot {
    --uib-d1: -0.48;
    --uib-d2: -0.4;
    --uib-d3: -0.32;
    --uib-d4: -0.24;
    --uib-d5: -0.16;
    --uib-d6: -0.08;
    --uib-d7: 0;
    position: absolute;
    right: calc(var(--uib-right) + var(--uib-dot-size) / 2);
    bottom: calc(var(--uib-bottom) + var(--uib-dot-size) / 2);
    width: var(--uib-dot-size);
    height: var(--uib-dot-size);
    animation: loader-jump var(--uib-speed) ease-in-out infinite;
    opacity: var(--uib-scale);
}

.loader-dot::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--uib-color);
    box-shadow: 0 0 15px rgba(214, 183, 102, 0.7);
    transform: scale(var(--uib-scale));
}

.loader-dot:nth-child(1) { --uib-bottom: 24%; --uib-right: -35%; --uib-scale: .94; animation-delay: calc(var(--uib-speed) * var(--uib-d1)); }
.loader-dot:nth-child(2) { --uib-bottom: 16%; --uib-right: -6%; --uib-scale: .96; animation-delay: calc(var(--uib-speed) * var(--uib-d2)); }
.loader-dot:nth-child(3) { --uib-bottom: 8%; --uib-right: 23%; --uib-scale: .98; animation-delay: calc(var(--uib-speed) * var(--uib-d3)); }
.loader-dot:nth-child(4) { --uib-bottom: -1%; --uib-right: 51%; --uib-scale: 1; animation-delay: calc(var(--uib-speed) * var(--uib-d4)); }
.loader-dot:nth-child(5) { --uib-bottom: 38%; --uib-right: -17.5%; --uib-scale: .9; animation-delay: calc(var(--uib-speed) * var(--uib-d2)); }
.loader-dot:nth-child(6) { --uib-bottom: 30%; --uib-right: 10%; --uib-scale: .92; animation-delay: calc(var(--uib-speed) * var(--uib-d3)); }
.loader-dot:nth-child(7) { --uib-bottom: 22%; --uib-right: 39%; --uib-scale: .94; animation-delay: calc(var(--uib-speed) * var(--uib-d4)); }
.loader-dot:nth-child(8) { --uib-bottom: 14%; --uib-right: 67%; --uib-scale: .96; animation-delay: calc(var(--uib-speed) * var(--uib-d5)); }
.loader-dot:nth-child(9) { --uib-bottom: 53%; --uib-right: -.8%; --uib-scale: .86; animation-delay: calc(var(--uib-speed) * var(--uib-d3)); }
.loader-dot:nth-child(10) { --uib-bottom: 44.5%; --uib-right: 27%; --uib-scale: .88; animation-delay: calc(var(--uib-speed) * var(--uib-d4)); }
.loader-dot:nth-child(11) { --uib-bottom: 36%; --uib-right: 55.7%; --uib-scale: .9; animation-delay: calc(var(--uib-speed) * var(--uib-d5)); }
.loader-dot:nth-child(12) { --uib-bottom: 28.7%; --uib-right: 84.3%; --uib-scale: .92; animation-delay: calc(var(--uib-speed) * var(--uib-d6)); }
.loader-dot:nth-child(13) { --uib-bottom: 66.8%; --uib-right: 15%; --uib-scale: .82; animation-delay: calc(var(--uib-speed) * var(--uib-d4)); }
.loader-dot:nth-child(14) { --uib-bottom: 58.8%; --uib-right: 43%; --uib-scale: .84; animation-delay: calc(var(--uib-speed) * var(--uib-d5)); }
.loader-dot:nth-child(15) { --uib-bottom: 50%; --uib-right: 72%; --uib-scale: .86; animation-delay: calc(var(--uib-speed) * var(--uib-d6)); }
.loader-dot:nth-child(16) { --uib-bottom: 42%; --uib-right: 100%; --uib-scale: .88; animation-delay: calc(var(--uib-speed) * var(--uib-d7)); }

/* Header and navigation */
.site-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.site-nav {
    position: relative;
    width: min(94vw, 1480px);
    height: var(--header-height);
    margin-inline: auto;
}

.brand {
    position: absolute;
    z-index: 4;
    top: 21px;
    left: 0;
    display: inline-flex;
    align-items: center;
    width: 305px;
    min-height: 82px;
    padding: 0 98px 0 1rem;
    color: var(--white);
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    text-decoration: none;
    pointer-events: auto;
    transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.brand-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 180px;
}

.brand-atelier {
    margin: 0 0 -0.42rem 0.42rem;
    color: var(--gold-300);
    font-family: var(--serif);
    font-size: 1.88rem;
    font-style: italic;
    line-height: 1;
}

.brand-name {
    font-size: 0.91rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    line-height: 1;
    text-transform: uppercase;
}

.brand-o-wrap {
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    margin-inline: -0.05em 0.01em;
    vertical-align: -0.05em;
}

.brand-o-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
}

.brand-butterfly {
    position: absolute;
    z-index: 1;
    top: 7px;
    right: 7px;
    width: 88px;
    height: 78px;
    object-fit: contain;
    filter: saturate(0.8) brightness(1.12) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
    transform: rotate(6deg);
}

.hamburg,
#bg-move {
    display: none;
}

.nav-panel {
    position: absolute;
    z-index: 3;
    top: 24px;
    right: 0;
    height: 64px;
    padding: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
    box-shadow: 0 15px 45px rgba(0, 14, 14, 0.27), inset 0 1px rgba(255, 255, 255, 0.26);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
    backdrop-filter: blur(22px) saturate(130%);
    pointer-events: auto;
}

.nav-panel::after {
    content: "";
    position: absolute;
    inset: 1px 14% auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
}

.nav-panel-inner,
.nav-panel-inner > ul {
    height: 100%;
}

.nav-panel-inner > ul {
    display: flex;
    align-items: center;
    gap: 0.16rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav-panel .nav-main-link {
    display: grid;
    place-items: center;
    min-height: 50px;
    padding: 0.3rem 1.18rem;
    color: rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.nav-panel .nav-main-link:hover,
.nav-panel .nav-main-link:focus-visible,
.nav-panel .nav-main-link[aria-current="page"] {
    color: var(--petrol-950);
    background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
    box-shadow: 0 7px 20px rgba(189, 150, 62, 0.25);
}

@media (min-width: 821px) {
    .nav-panel .has-submenu:hover > .nav-main-link,
    .nav-panel .has-submenu:focus-within > .nav-main-link,
    .nav-panel .has-submenu.submenu-open > .nav-main-link {
        color: var(--petrol-950);
        background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
        box-shadow: 0 7px 20px rgba(189, 150, 62, 0.25);
    }
}

.nav-item {
    position: relative;
    height: 100%;
}

.has-submenu .nav-main-link {
    padding-right: 2.4rem;
}

.submenu-toggle {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 0.72rem;
    display: grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    padding: 0;
    color: currentColor;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

.submenu-toggle span {
    width: 0.42rem;
    height: 0.42rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 200ms ease;
}

.has-submenu:hover .submenu-toggle,
.has-submenu.is-current .submenu-toggle {
    color: var(--petrol-950);
}

.submenu {
    position: absolute;
    z-index: 10;
    top: calc(100% + 14px);
    left: 50%;
    display: grid;
    width: 258px;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(9, 50, 48, 0.94), rgba(3, 29, 28, 0.91));
    box-shadow: 0 24px 55px rgba(0, 14, 14, 0.34), inset 0 1px rgba(255, 255, 255, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -8px) scale(0.98);
    transform-origin: 50% 0;
    transition: opacity 180ms ease, transform 220ms ease, visibility 0s linear 220ms;
    -webkit-backdrop-filter: blur(24px) saturate(135%);
    backdrop-filter: blur(24px) saturate(135%);
}

.submenu::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 15px;
}

.has-submenu:hover .submenu,
.has-submenu.submenu-open .submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
    transition-delay: 0s;
}

.has-submenu.submenu-open .submenu-toggle span {
    transform: translateY(2px) rotate(225deg);
}

.nav-panel .submenu a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 48px;
    padding: 0.55rem 0.8rem;
    color: rgba(255, 255, 255, 0.84);
    border-radius: 13px;
    font-size: 0.69rem;
    font-weight: 650;
    letter-spacing: 0.09em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.nav-panel .submenu a:hover,
.nav-panel .submenu a:focus-visible {
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(3px);
}

.nav-kicker,
.nav-mobile-contact {
    display: none;
}

.site-header.is-scrolled .brand {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(4, 35, 34, 0.78);
    box-shadow: 0 13px 40px rgba(0, 14, 14, 0.25), inset 0 1px rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.site-header.is-scrolled .nav-panel {
    background: linear-gradient(120deg, rgba(4, 35, 34, 0.84), rgba(7, 40, 39, 0.68));
}

.legal-page .site-header .brand,
.legal-page .site-header .nav-panel {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(4, 35, 34, 0.88);
    box-shadow: 0 13px 40px rgba(0, 14, 14, 0.2), inset 0 1px rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

/* Wide editorial desktop header */
@media (min-width: 821px) {
    .site-header {
        --desktop-header-content: 1480px;
        --desktop-header-edge: max(3vw, calc((100vw - var(--desktop-header-content)) / 2));
        top: 0;
        padding-inline: 0;
    }

    .site-nav {
        width: 100%;
        max-width: none;
        height: 82px;
        padding-inline: 0;
        border-bottom: 1px solid rgba(214, 183, 102, 0.86);
        background:
            linear-gradient(110deg, rgba(255, 255, 255, 0.065), transparent 34%, rgba(255, 255, 255, 0.025) 68%, transparent),
            radial-gradient(circle at 30% -60%, rgba(51, 137, 132, 0.3), transparent 50%),
            linear-gradient(100deg, rgba(3, 31, 31, 0.76), rgba(4, 37, 37, 0.68) 52%, rgba(2, 23, 24, 0.8));
        box-shadow:
            0 16px 42px rgba(0, 14, 14, 0.2),
            inset 0 1px rgba(255, 255, 255, 0.18),
            inset 0 -1px rgba(255, 255, 255, 0.035);
        -webkit-backdrop-filter: blur(24px) saturate(142%);
        backdrop-filter: blur(24px) saturate(142%);
        transition: background 220ms ease, box-shadow 220ms ease;
    }

    .brand {
        top: 0;
        left: var(--desktop-header-edge);
        width: auto;
        min-height: 82px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .brand-copy {
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-start;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        min-width: 0;
        white-space: nowrap;
    }

    .brand-atelier {
        margin: 0 0.42rem 0 0;
        color: var(--gold-300);
        font-family: var(--serif);
        font-size: 1.88rem;
        font-style: italic;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1;
        text-transform: none;
    }

    .brand-name {
        font-size: 1.36rem;
        font-weight: 300;
        letter-spacing: 0.045em;
        line-height: 1;
    }

    .brand-o-wrap {
        width: 1em;
        height: 1em;
        vertical-align: -0.04em;
    }

    .brand-butterfly {
        position: relative;
        top: 7px;
        right: auto;
        flex: 0 0 auto;
        width: 94px;
        height: 84px;
        margin-left: 0.35rem;
        transform: rotate(6deg);
    }

    .nav-panel {
        top: 0;
        right: var(--desktop-header-edge);
        height: 82px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

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

    .nav-panel-inner > ul {
        gap: clamp(1.65rem, 2.7vw, 3.25rem);
    }

    .nav-panel-inner > ul > .nav-item:first-child {
        display: none;
    }

    .nav-panel .nav-main-link {
        min-height: 82px;
        padding: 0;
        color: rgba(255, 255, 255, 0.9);
        border-radius: 0;
        font-size: 0.77rem;
        font-weight: 600;
        letter-spacing: 0.2em;
    }

    .nav-panel .nav-main-link:hover,
    .nav-panel .nav-main-link:focus-visible,
    .nav-panel .nav-main-link[aria-current="page"],
    .nav-panel .has-submenu:hover > .nav-main-link,
    .nav-panel .has-submenu:focus-within > .nav-main-link,
    .nav-panel .has-submenu.submenu-open > .nav-main-link {
        color: var(--gold-300);
        background: transparent;
        box-shadow: none;
    }

    .has-submenu .nav-main-link {
        padding-right: 1.35rem;
    }

    .submenu-toggle {
        right: -0.12rem;
        color: rgba(255, 255, 255, 0.9);
    }

    .has-submenu:hover .submenu-toggle,
    .has-submenu:focus-within .submenu-toggle,
    .has-submenu.submenu-open .submenu-toggle,
    .has-submenu.is-current .submenu-toggle {
        color: var(--gold-300);
    }

    .submenu {
        top: calc(100% + 10px);
    }

    .site-header.is-scrolled .site-nav,
    .legal-page .site-header .site-nav {
        background:
            linear-gradient(110deg, rgba(255, 255, 255, 0.055), transparent 36%, rgba(255, 255, 255, 0.02) 70%, transparent),
            radial-gradient(circle at 30% -60%, rgba(51, 137, 132, 0.22), transparent 50%),
            linear-gradient(100deg, rgba(3, 31, 31, 0.9), rgba(4, 37, 37, 0.86) 52%, rgba(2, 23, 24, 0.92));
        box-shadow:
            0 18px 44px rgba(0, 14, 14, 0.3),
            inset 0 1px rgba(255, 255, 255, 0.14);
    }

    .site-header.is-scrolled .brand,
    .site-header.is-scrolled .nav-panel,
    .legal-page .site-header .brand,
    .legal-page .site-header .nav-panel {
        border: 0;
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (min-width: 821px) and (max-width: 1240px) {
    .site-header {
        --desktop-header-edge: 1.5rem;
    }

    .brand {
        width: auto;
        padding-right: 0;
    }

    .brand-atelier {
        font-size: 1.62rem;
    }

    .brand-name {
        font-size: 0.96rem;
        letter-spacing: 0.04em;
    }

    .brand-butterfly {
        top: 6px;
        width: 86px;
        height: 78px;
    }

    .nav-panel {
        right: var(--desktop-header-edge);
    }

    .nav-panel-inner > ul {
        gap: 1.5rem;
    }

    .nav-panel .nav-main-link {
        font-size: 0.65rem;
        letter-spacing: 0.12em;
    }
}

/* Shared components */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.3rem;
    color: var(--gold-300);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: 1.4;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 36px;
    height: 1px;
    background: currentColor;
}

.eyebrow.dark {
    color: var(--gold-600);
}

.button-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 54px;
    padding: 0.85rem 1.45rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 200ms ease, box-shadow 200ms ease, color 200ms ease, background 200ms ease;
}

.button span {
    font-size: 1rem;
}

/* Einheitliche Pfeil-Icons ohne betriebssystemabhängige Emoji-Darstellung */
.ui-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.ui-icon-arrow-right {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ui-icon-arrow-up-right {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M8 7h9v9' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M8 7h9v9' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ui-icon-arrow-down {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.button:hover {
    transform: translateY(-3px);
}

.button-gold {
    color: var(--petrol-950);
    background: linear-gradient(135deg, #f0dda6, var(--gold-400) 52%, #b7882d);
    box-shadow: 0 14px 40px rgba(189, 150, 62, 0.27), inset 0 1px rgba(255, 255, 255, 0.65);
}

.button-gold:hover {
    box-shadow: 0 20px 52px rgba(189, 150, 62, 0.42), inset 0 1px rgba(255, 255, 255, 0.65);
}

.button-dark {
    color: var(--white);
    background: var(--petrol-950);
    box-shadow: 0 15px 40px rgba(3, 27, 27, 0.22);
}

.button-outline {
    color: var(--petrol-900);
    border-color: rgba(7, 40, 39, 0.3);
    background: rgba(255, 255, 255, 0.28);
}

.button-outline:hover {
    color: var(--white);
    background: var(--petrol-900);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding-block: 0.5rem;
    color: var(--petrol-900);
    border-bottom: 1px solid currentColor;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
}

.text-link span {
    transition: transform 180ms ease;
}

.text-link:hover span {
    transform: translateX(5px);
}

.text-link:hover .ui-icon-arrow-down {
    transform: translateY(4px);
}

.text-link-light {
    color: var(--gold-300);
}

.section {
    position: relative;
    padding-block: clamp(5.5rem, 10vw, 10rem);
}

.section-cream {
    background: var(--cream-50);
}

.section-petrol {
    overflow: hidden;
    color: var(--white);
    background:
        radial-gradient(circle at 78% 18%, rgba(214, 183, 102, 0.1), transparent 28%),
        var(--petrol-900);
}

.section-gold {
    background:
        radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.34), transparent 28%),
        linear-gradient(130deg, #bd963e, #e0c578 52%, #b4862d);
}

.split {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 8rem);
}

.split-copy-wide {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.section-copy h2,
.section-heading h2,
.mini-cta h2,
.contact-teaser h2 {
    margin-bottom: 1.65rem;
    color: var(--petrol-900);
    font-size: clamp(3rem, 5.6vw, 6.6rem);
    letter-spacing: -0.045em;
}

.section-petrol h2,
.section-petrol .section-copy h2 {
    color: var(--white);
}

.section-copy .lead {
    margin-bottom: 1.25rem;
    color: var(--petrol-800);
    font-family: var(--serif);
    font-size: clamp(1.35rem, 1.15rem + 0.7vw, 2rem);
    line-height: 1.35;
}

.section-petrol .lead {
    color: var(--cream-100);
}

.section-copy > p:not(.eyebrow) {
    max-width: 610px;
}

.section-copy .text-link {
    margin-top: 1rem;
}

.section-heading.centered {
    max-width: 900px;
    margin: 0 auto clamp(3rem, 7vw, 6rem);
    text-align: center;
}

.section-heading.centered .eyebrow {
    justify-content: center;
}

.section-heading.centered > p:last-child {
    max-width: 650px;
    margin-inline: auto;
    color: rgba(255, 255, 255, 0.7);
}

.heading-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 3rem;
    margin-bottom: clamp(3rem, 6vw, 6rem);
}

.heading-row > p {
    max-width: 450px;
    margin-bottom: 1.5rem;
    color: var(--muted);
}

/* Home hero */
.hero {
    position: relative;
    isolation: isolate;
    min-height: max(760px, 100svh);
    overflow: hidden;
    color: var(--white);
    background: var(--petrol-950);
}

.hero-media,
.hero-wash {
    position: absolute;
    z-index: -3;
    inset: 0;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 50%;
    filter: saturate(0.75) contrast(1.04) brightness(0.74);
    transform: scale(1.02);
}

.hero-home .hero-media .hero-image-custom {
    object-position: center;
    filter: saturate(0.9) contrast(1.03) brightness(0.9);
    transform: scale(1.01);
}

.hero-wash {
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(3, 27, 27, 0.98) 0%, rgba(4, 31, 30, 0.83) 38%, rgba(3, 27, 27, 0.12) 71%),
        linear-gradient(0deg, rgba(3, 27, 27, 0.82) 0%, transparent 38%),
        radial-gradient(circle at 67% 43%, transparent 0, rgba(11, 67, 62, 0.22) 50%, rgba(3, 27, 27, 0.52));
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: max(760px, 100svh);
    padding-block: calc(var(--header-height) + 5rem) 9rem;
}

.hero-content h1 {
    max-width: 940px;
    margin-bottom: 1.8rem;
    color: var(--white);
    font-size: clamp(4.3rem, 8.2vw, 9.5rem);
    letter-spacing: -0.057em;
    text-shadow: 0 16px 50px rgba(0, 0, 0, 0.22);
}

.hero-content h1 em {
    display: inline-block;
    font-size: 0.82em;
}

.hero-copy {
    max-width: 580px;
    margin-bottom: 2.2rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.2rem);
}

.orbit {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(214, 183, 102, 0.45);
    border-radius: 50%;
    pointer-events: none;
}

.orbit::before,
.orbit::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-300);
    box-shadow: 0 0 25px rgba(214, 183, 102, 0.9);
}

.orbit-one {
    top: -24vw;
    right: -8vw;
    width: 76vw;
    height: 76vw;
    transform: rotate(-24deg);
}

.orbit-one::before { top: 77%; left: 4.2%; }
.orbit-one::after { top: 16%; left: 11%; }

.orbit-two {
    top: 5vw;
    right: 8vw;
    width: 43vw;
    height: 43vw;
    border-color: rgba(255, 255, 255, 0.18);
    transform: rotate(18deg);
}

.orbit-two::before { right: 8%; bottom: 20%; }
.orbit-two::after { display: none; }

.scroll-cue {
    position: absolute;
    z-index: 3;
    bottom: 2.6rem;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.scroll-cue span {
    width: 1px;
    height: 36px;
    background: linear-gradient(var(--gold-400), transparent);
}

.service-ribbon {
    color: var(--white);
    background: var(--petrol-900);
    border-top: 1px solid var(--line-dark);
}

.service-ribbon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.service-ribbon a {
    position: relative;
    display: grid;
    padding: 2.1rem clamp(1rem, 2vw, 2.25rem);
    border-right: 1px solid var(--line-dark);
    text-decoration: none;
    transition: background 220ms ease;
}

.service-ribbon a:first-child {
    border-left: 1px solid var(--line-dark);
}

.service-ribbon a:hover {
    background: rgba(214, 183, 102, 0.09);
}

.service-ribbon strong {
    font-family: var(--serif);
    font-size: clamp(1.35rem, 1.1rem + 0.5vw, 1.8rem);
    font-weight: 500;
}

.service-ribbon small {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.65rem;
    letter-spacing: 0.05em;
}

/* Memory / before after */
.memory-section {
    overflow: hidden;
}

.before-after {
    position: relative;
    min-height: 650px;
}

.image-card {
    position: absolute;
    overflow: hidden;
    margin: 0;
    background: var(--cream-200);
    box-shadow: var(--shadow);
}

.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-card figcaption,
.technical-image figcaption {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    padding: 0.85rem 1rem;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;
    background: rgba(3, 27, 27, 0.56);
    font-size: 0.68rem;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.image-card figcaption span,
.technical-image figcaption span {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--gold-300);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.image-card-main {
    top: 0;
    right: 0;
    width: 77%;
    height: 88%;
}

.image-card-main img {
    object-position: center 55%;
}

.image-card-float {
    z-index: 2;
    bottom: -2%;
    left: 0;
    width: 38%;
    height: 43%;
    border: 10px solid var(--cream-50);
}

.gold-thread {
    position: absolute;
    z-index: 3;
    top: 9%;
    right: -17%;
    width: 52%;
    height: 52%;
    border: 1px solid rgba(189, 150, 62, 0.55);
    border-radius: 50%;
}

/* Atelier collage */
.craft-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 90px 90px;
    pointer-events: none;
}

.craft-collage {
    position: relative;
    display: grid;
    grid-template-columns: 1.12fr 0.62fr 1fr;
    grid-template-rows: 260px 330px;
    gap: 1.3rem;
}

.craft-photo {
    overflow: hidden;
    margin: 0;
}

.craft-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.78) contrast(1.04);
    transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}

.craft-photo:hover img {
    transform: scale(1.035);
}

.craft-photo-tall {
    grid-row: 1 / 3;
}

.craft-photo-wide {
    grid-column: 2 / 4;
    grid-row: 2;
}

.craft-note {
    position: relative;
    padding: 2rem;
    border: 1px solid var(--line-dark);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.craft-note h3 {
    margin: 0 0 0.8rem;
    color: var(--white);
    font-size: 2rem;
}

.craft-note p {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.86rem;
}

/* Editorial home gallery */
.section-gallery,
.all-work,
.b2b-gallery-section {
    background:
        linear-gradient(rgba(7, 40, 39, 0.032) 1px, transparent 1px),
        var(--cream-100);
    background-size: 100% 120px;
}

.editorial-gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 90px;
    gap: 1.35rem;
}

.gallery-piece {
    position: relative;
    overflow: hidden;
    margin: 0;
    background: var(--petrol-900);
    box-shadow: 0 18px 55px rgba(3, 27, 27, 0.12);
}

.gallery-piece > a {
    display: block;
    width: 100%;
    height: 100%;
}

.gallery-piece img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 650ms cubic-bezier(.2,.7,.2,1), filter 650ms ease;
}

.gallery-piece:hover img {
    filter: brightness(0.82);
    transform: scale(1.045);
}

.gallery-piece figcaption {
    position: absolute;
    right: 1.2rem;
    bottom: 1.2rem;
    left: 1.2rem;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    color: var(--white);
    font-family: var(--serif);
    font-size: 1.15rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 250ms ease, transform 250ms ease;
}

.gallery-piece:hover figcaption {
    opacity: 1;
    transform: translateY(0);
}

.gallery-piece-1 { grid-column: 1 / 6; grid-row: span 6; }
.gallery-piece-2 { grid-column: 6 / 10; grid-row: span 4; }
.gallery-piece-3 { grid-column: 10 / 13; grid-row: span 5; }
.gallery-piece-4 { grid-column: 6 / 10; grid-row: span 5; }
.gallery-piece-5 { grid-column: 10 / 13; grid-row: span 4; }
.gallery-piece-6 { grid-column: 1 / 6; grid-row: span 3; }

.center-action {
    display: flex;
    justify-content: center;
    margin-top: 3.5rem;
}

/* Home course & B2B */
.course-teaser {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 760px;
    padding: 0;
    background: var(--gold-400);
}

.course-image {
    min-height: 760px;
    overflow: hidden;
}

.course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.76) contrast(1.05);
}

.course-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(4rem, 8vw, 9rem);
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.25), transparent 32%),
        linear-gradient(135deg, #c49a3b, #dec274);
}

.course-copy .eyebrow {
    color: var(--petrol-900);
}

.course-copy h2 {
    margin-bottom: 1.6rem;
    color: var(--petrol-950);
    font-size: clamp(3.2rem, 5.2vw, 6.4rem);
    letter-spacing: -0.05em;
}

.course-copy h2 em {
    color: var(--cream-50);
}

.course-copy p:not(.eyebrow) {
    max-width: 560px;
    margin-bottom: 2rem;
}

.b2b-teaser {
    isolation: isolate;
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--white);
    background: var(--petrol-950);
}

.b2b-media,
.b2b-overlay {
    position: absolute;
    z-index: -2;
    inset: 0;
}

.b2b-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.b2b-overlay {
    z-index: -1;
    background: linear-gradient(90deg, rgba(3, 27, 27, 0.98), rgba(3, 27, 27, 0.72) 48%, rgba(3, 27, 27, 0.14));
}

.b2b-content h2 {
    max-width: 760px;
    margin-bottom: 1.5rem;
    color: var(--white);
    font-size: clamp(3.5rem, 6.5vw, 7.5rem);
    letter-spacing: -0.05em;
}

.b2b-content p:not(.eyebrow) {
    max-width: 580px;
    color: rgba(255, 255, 255, 0.68);
}

.b2b-content .text-link {
    margin-top: 1.25rem;
}

.contact-teaser {
    overflow: hidden;
    text-align: center;
    background: var(--cream-50);
}

.contact-teaser::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(82vw, 1000px);
    aspect-ratio: 1;
    border: 1px solid rgba(189, 150, 62, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.contact-teaser-inner {
    position: relative;
    z-index: 2;
    max-width: 950px;
}

.contact-teaser .eyebrow {
    justify-content: center;
}

.contact-teaser p:not(.eyebrow) {
    max-width: 630px;
    margin: 0 auto 2.2rem;
    color: var(--muted);
}

.centered-buttons {
    justify-content: center;
}

.contact-butterfly {
    position: absolute;
    right: 8vw;
    bottom: -30px;
    width: min(23vw, 300px);
    opacity: 0.3;
    transform: rotate(-12deg);
}

/* Inner hero */
.inner-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: end;
    min-height: min(820px, 88svh);
    overflow: hidden;
    color: var(--white);
    background: var(--petrol-950);
}

.inner-hero-media,
.inner-hero-overlay {
    position: absolute;
    z-index: -2;
    inset: 0;
}

.inner-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.72) brightness(0.7);
}

.inner-hero-overlay {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(3, 27, 27, 0.96), rgba(3, 27, 27, 0.7) 48%, rgba(3, 27, 27, 0.08)),
        linear-gradient(0deg, rgba(3, 27, 27, 0.75), transparent 48%);
}

.inner-hero-content {
    padding-block: calc(var(--header-height) + 5rem) clamp(5rem, 9vw, 8rem);
}

.inner-hero h1 {
    max-width: 980px;
    margin-bottom: 1.6rem;
    color: var(--white);
    font-size: clamp(4rem, 7.5vw, 8.5rem);
    letter-spacing: -0.055em;
}

.inner-hero-content > p:not(.eyebrow) {
    max-width: 650px;
    margin-bottom: 2.1rem;
    color: rgba(255, 255, 255, 0.72);
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 2.8rem;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.breadcrumbs a {
    color: var(--gold-300);
    text-decoration: none;
}

.breadcrumbs-dark {
    color: var(--muted);
}

.breadcrumbs-dark a {
    color: var(--gold-600);
}

.service-story {
    scroll-margin-top: 96px;
}

.service-split.reverse .section-copy {
    grid-column: 2;
    grid-row: 1;
}

.feature-list {
    display: grid;
    gap: 0;
    max-width: 610px;
    padding: 0;
    margin: 2rem 0 0;
    list-style: none;
    border-top: 1px solid var(--line-light);
}

.feature-list li {
    position: relative;
    padding: 0.85rem 0 0.85rem 1.7rem;
    border-bottom: 1px solid var(--line-light);
    font-size: 0.82rem;
}

.feature-list li::before {
    content: "◇";
    position: absolute;
    left: 0;
    color: var(--gold-500);
}

.feature-list-light {
    border-color: var(--line-dark);
}

.feature-list-light li {
    color: rgba(255, 255, 255, 0.7);
    border-color: var(--line-dark);
}

.stacked-images {
    position: relative;
    min-height: 660px;
}

.stacked-images figure {
    position: absolute;
    overflow: hidden;
    margin: 0;
    box-shadow: var(--shadow);
}

.stacked-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stack-primary {
    top: 0;
    right: 0;
    width: 76%;
    height: 84%;
}

.stack-secondary {
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 45%;
    height: 46%;
    border: 9px solid var(--cream-50);
}

.section-petrol .stack-secondary {
    border-color: var(--petrol-900);
}

.repair-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.repair-pair figure {
    position: relative;
    height: 600px;
    margin: 0;
    overflow: hidden;
}

.repair-pair figure:nth-child(2) {
    margin-top: 3.5rem;
}

.repair-pair img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.repair-pair figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.65rem 1rem;
    color: var(--white);
    background: var(--petrol-900);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2.2rem;
}

.filter-bar button {
    min-height: 44px;
    padding: 0.6rem 1rem;
    color: var(--petrol-800);
    border: 1px solid rgba(7, 40, 39, 0.2);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.filter-bar button:hover,
.filter-bar button.is-active {
    color: var(--white);
    background: var(--petrol-900);
}

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

.work-card {
    margin: 0 0 1rem;
    transition: opacity 250ms ease, transform 250ms ease;
}

.work-card.is-filtered {
    display: none;
}

.work-card a,
.b2b-gallery-item a,
.course-gallery-item a {
    position: relative;
    display: block;
    height: 380px;
    overflow: hidden;
    background: var(--petrol-900);
}

.work-card:nth-child(7n + 2) a,
.work-card:nth-child(7n + 5) a {
    height: 470px;
}

.work-card img,
.b2b-gallery-item img,
.course-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 550ms cubic-bezier(.2,.7,.2,1), filter 550ms ease;
}

.work-card a:hover img,
.b2b-gallery-item a:hover img,
.course-gallery-item a:hover img {
    filter: brightness(0.75);
    transform: scale(1.04);
}

.work-card-action {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--petrol-950);
    border-radius: 50%;
    background: rgba(230, 207, 145, 0.9);
    font-size: 0;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 220ms ease, transform 220ms ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.work-card-action::before,
.work-card-action::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1px;
    border-radius: 1px;
    background: var(--petrol-950);
    transform: translate(-50%, -50%);
}

.work-card-action::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

a:hover .work-card-action,
a:focus-visible .work-card-action {
    opacity: 1;
    transform: scale(1);
}

.work-card figcaption {
    display: flex;
    justify-content: space-between;
    padding-top: 0.65rem;
    color: var(--petrol-800);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mini-cta {
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 120%, rgba(214, 183, 102, 0.25), transparent 28%),
        var(--cream-50);
}

.mini-cta-inner {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 3rem;
}

.mini-cta h2 {
    margin-bottom: 0;
    font-size: clamp(3rem, 5vw, 5.8rem);
}

/* Courses */
.course-hero .inner-hero-media img {
    object-position: center 58%;
}

.course-orbit-card {
    position: relative;
    height: 660px;
}

.course-orbit-card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: var(--shadow);
}

.course-steps {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 12%, rgba(255, 250, 225, 0.42), transparent 25%),
        radial-gradient(circle at 92% 88%, rgba(143, 98, 20, 0.2), transparent 32%),
        linear-gradient(135deg, #e2c982, var(--gold-400) 58%, #c99a3c);
}

.course-steps::before,
.course-steps::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(3, 27, 27, 0.13);
    border-radius: 50%;
    pointer-events: none;
}

.course-steps::before {
    top: -270px;
    right: -190px;
    width: 580px;
    height: 580px;
}

.course-steps::after {
    bottom: -210px;
    left: -150px;
    width: 430px;
    height: 430px;
}

.course-steps .shell {
    position: relative;
    z-index: 1;
}

.course-timeline-heading {
    display: grid;
    justify-items: center;
    max-width: 860px;
    margin: 0 auto clamp(4rem, 7vw, 6.5rem);
    text-align: center;
}

.course-timeline-heading .eyebrow {
    justify-content: center;
    color: rgba(3, 27, 27, 0.72);
}

.course-timeline-heading h2 {
    color: var(--petrol-950);
}

.course-timeline-heading > p {
    max-width: 650px;
    margin: 1.6rem auto 0;
    color: rgba(3, 27, 27, 0.76);
}

.course-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.8rem);
    padding: 0 0 3rem;
    margin: 0;
    list-style: none;
}

.course-timeline::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 34px;
    right: 11%;
    left: 11%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(3, 27, 27, 0.55) 8%, rgba(3, 27, 27, 0.55) 92%, transparent);
}

.course-timeline > li {
    position: relative;
    z-index: 1;
    padding-top: 88px;
}

.timeline-marker {
    position: absolute;
    top: 0;
    left: 50%;
    display: grid;
    place-items: center;
    width: 69px;
    height: 69px;
    color: var(--petrol-950);
    border: 1px solid rgba(3, 27, 27, 0.42);
    border-radius: 50%;
    background: rgba(250, 240, 208, 0.88);
    box-shadow: 0 12px 35px rgba(75, 50, 8, 0.14), inset 0 1px rgba(255, 255, 255, 0.8);
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.timeline-marker i {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--gold-600);
    background: var(--gold-300);
    transform: rotate(45deg);
}

.timeline-card {
    position: relative;
    min-height: 250px;
    padding: clamp(1.5rem, 2.2vw, 2.1rem);
    overflow: hidden;
    color: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px 30px 8px 30px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent 36%),
        rgba(4, 38, 37, 0.93);
    box-shadow: 0 22px 55px rgba(3, 27, 27, 0.2), inset 0 1px rgba(255, 255, 255, 0.17);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
    transition: transform 280ms cubic-bezier(.2,.7,.2,1), box-shadow 280ms ease;
}

.course-timeline > li:nth-child(even) .timeline-card {
    transform: translateY(38px);
}

.course-timeline > li:hover .timeline-card {
    box-shadow: 0 30px 70px rgba(3, 27, 27, 0.3), inset 0 1px rgba(255, 255, 255, 0.2);
    transform: translateY(-6px);
}

.course-timeline > li:nth-child(even):hover .timeline-card {
    transform: translateY(32px);
}

.timeline-card::before {
    content: "";
    position: absolute;
    top: -55px;
    right: -35px;
    width: 130px;
    height: 130px;
    border: 1px solid rgba(214, 183, 102, 0.22);
    transform: rotate(45deg);
}

.timeline-kicker {
    display: block;
    margin-bottom: 2.8rem;
    color: var(--gold-300);
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.timeline-card h3 {
    margin: 0 0 1rem;
    color: var(--white);
    font-size: clamp(1.55rem, 2vw, 2rem);
}

.timeline-card p {
    margin: 0;
    font-size: 0.77rem;
    line-height: 1.72;
}

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

.course-gallery-item {
    margin: 0;
}

.course-gallery-item a {
    height: 300px;
}

.course-gallery-item:nth-child(9n + 1),
.course-gallery-item:nth-child(9n + 6) {
    grid-column: span 2;
}

.course-gallery-item:nth-child(9n + 1) a,
.course-gallery-item:nth-child(9n + 6) a {
    height: 420px;
}

.faq-layout {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: clamp(3rem, 8vw, 9rem);
}

.accordion details {
    border-top: 1px solid var(--line-light);
}

.accordion details:last-child {
    border-bottom: 1px solid var(--line-light);
}

.accordion summary {
    position: relative;
    padding: 1.6rem 3rem 1.6rem 0;
    color: var(--petrol-900);
    cursor: pointer;
    font-family: var(--serif);
    font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.8rem);
    line-height: 1.2;
    list-style: none;
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion summary::after {
    content: "+";
    position: absolute;
    top: 1.4rem;
    right: 0;
    color: var(--gold-600);
    font-family: var(--sans);
}

.accordion details[open] summary::after {
    content: "−";
}

.accordion details p {
    max-width: 700px;
    padding: 0 3rem 1.5rem 0;
    color: var(--muted);
}

/* B2B */
.b2b-hero .inner-hero-media img {
    object-position: 62% center;
}

.precision-grid {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.14;
    background-image: linear-gradient(rgba(230, 207, 145, 0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(230, 207, 145, 0.22) 1px, transparent 1px);
    background-size: 70px 70px;
    -webkit-mask-image: linear-gradient(90deg, transparent 35%, black);
    mask-image: linear-gradient(90deg, transparent 35%, black);
}

.technical-image {
    position: relative;
    height: 620px;
    margin: 0;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.technical-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.capability-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.glass-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 340px;
    padding: 1.7rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.16), 0 30px 70px rgba(0, 15, 15, 0.18);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.glass-card h3 {
    margin: 0 0 1rem;
    color: var(--white);
    font-size: 2.2rem;
}

.glass-card p {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.8rem;
}

.process-layout {
    align-items: start;
}

.process-sticky {
    position: sticky;
    top: 120px;
}

.process-list {
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid var(--line-light);
}

.process-list li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 2rem 0;
    border-bottom: 1px solid var(--line-light);
}

.process-list h3 {
    margin-bottom: 0.7rem;
    color: var(--petrol-900);
    font-size: 2rem;
}

.process-list p {
    margin: 0;
    color: var(--muted);
}

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

.b2b-gallery-item {
    margin: 0;
}

.b2b-gallery-item a {
    height: 330px;
}

.b2b-gallery-item:nth-child(10n + 1),
.b2b-gallery-item:nth-child(10n + 8) {
    grid-column: span 2;
}

.b2b-gallery-item:nth-child(10n + 1) a,
.b2b-gallery-item:nth-child(10n + 8) a {
    height: 440px;
}

/* Contact */
.contact-hero {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    overflow: hidden;
    color: var(--white);
    background: var(--petrol-950);
}

.contact-hero-media,
.contact-hero-overlay {
    position: absolute;
    z-index: -2;
    inset: 0;
}

.contact-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.6) brightness(0.5);
}

.contact-hero-overlay {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(3, 27, 27, 0.96), rgba(3, 27, 27, 0.72)),
        radial-gradient(circle at 80% 20%, rgba(214, 183, 102, 0.18), transparent 35%);
}

.contact-hero-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
    min-height: 100svh;
    padding-block: calc(var(--header-height) + 4rem) 5rem;
}

.contact-intro h1 {
    margin-bottom: 1.5rem;
    color: var(--white);
    font-size: clamp(4rem, 6.4vw, 7.3rem);
    letter-spacing: -0.055em;
}

.contact-intro > p:not(.eyebrow) {
    max-width: 570px;
    color: rgba(255, 255, 255, 0.7);
}

.contact-details {
    display: grid;
    gap: 0;
    margin-top: 2.4rem;
    border-top: 1px solid var(--line-dark);
}

.contact-details > * {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line-dark);
    text-decoration: none;
}

.contact-details > * > span {
    grid-row: 1 / 4;
    color: var(--gold-300);
}

.contact-details small {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.contact-details strong {
    color: var(--white);
    font-weight: 500;
}

.contact-details em {
    color: var(--gold-300);
    font-size: 0.67rem;
    font-style: normal;
}

.glass-panel {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055));
    box-shadow: var(--shadow-deep), inset 0 1px rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(24px) saturate(118%);
    backdrop-filter: blur(24px) saturate(118%);
}

.contact-form-card {
    padding: clamp(2rem, 4.5vw, 4.5rem);
}

.form-heading h2,
.form-success h2 {
    margin-bottom: 1.5rem;
    color: var(--white);
    font-size: clamp(3rem, 4vw, 5rem);
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

.form-field {
    display: grid;
    gap: 0.45rem;
}

.form-field.full,
.privacy-check,
.form-submit {
    grid-column: 1 / -1;
}

.form-field label {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.form-field label span,
.form-field small {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    color: var(--white);
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0;
    outline: 0;
    background: rgba(255, 255, 255, 0.035);
    transition: border-color 180ms ease, background 180ms ease;
}

.form-field input,
.form-field select {
    min-height: 48px;
    padding: 0.5rem;
}

.form-field textarea {
    min-height: 130px;
    padding: 0.75rem 0.5rem;
    resize: vertical;
}

.form-field select option {
    color: var(--ink);
    background: var(--cream-50);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--gold-300);
    background: rgba(255, 255, 255, 0.07);
}

.privacy-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    color: rgba(255, 255, 255, 0.58);
    cursor: pointer;
    font-size: 0.67rem;
    line-height: 1.55;
}

.privacy-check input {
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
    accent-color: var(--gold-400);
}

.privacy-check a {
    color: var(--gold-300);
}

.form-submit {
    justify-self: start;
    margin-top: 0.6rem;
    cursor: pointer;
}

.honeypot {
    position: absolute;
    left: -9999px;
}

.form-errors {
    padding: 1rem 1.2rem;
    margin-bottom: 1.2rem;
    color: #fff4ef;
    border: 1px solid rgba(255, 170, 135, 0.45);
    background: rgba(100, 27, 10, 0.42);
    font-size: 0.76rem;
}

.form-errors ul {
    padding-left: 1.1rem;
    margin-bottom: 0;
}

.form-success {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.form-success > span {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
    color: var(--petrol-950);
    border-radius: 50%;
    background: var(--gold-300);
    font-size: 1.8rem;
}

.form-success p {
    max-width: 520px;
    color: rgba(255, 255, 255, 0.7);
}

/* Legal */
.legal-main {
    min-height: 100svh;
    padding-block: calc(var(--header-height) + 4.5rem) 8rem;
    background: var(--cream-50);
}

.legal-shell {
    max-width: 1040px;
}

.legal-shell > .breadcrumbs {
    margin-bottom: 2.5rem;
}

.legal-content {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 5rem);
    border: 1px solid rgba(188, 143, 54, 0.28);
    border-radius: 2px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.42)),
        rgba(249, 246, 237, 0.88);
    box-shadow: 0 28px 70px rgba(4, 43, 40, 0.1);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.legal-content::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-500), rgba(188, 143, 54, 0.08) 78%);
    content: "";
}

.legal-content > h1:first-child {
    max-width: 100%;
    margin: 0 0 clamp(3rem, 6vw, 5rem);
    color: var(--petrol-900);
    font-size: clamp(3.7rem, 7vw, 7rem);
    line-height: 0.9;
    letter-spacing: -0.05em;
}

.legal-content h2 {
    max-width: 100%;
    padding-top: 2.5rem;
    margin: 3rem 0 1.2rem;
    border-top: 1px solid var(--line-light);
    color: var(--petrol-900);
    font-size: clamp(1.8rem, 3vw, 2.65rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.legal-content > h1:first-child + p,
.legal-content > h2:first-child {
    margin-top: 0;
}

.legal-content h3 {
    margin: 2rem 0 0.6rem;
    color: var(--petrol-800);
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.legal-content p,
.legal-content li {
    color: #485653;
    line-height: 1.8;
}

.legal-content p {
    max-width: 760px;
    margin-block: 0 1.2rem;
}

.legal-content ul,
.legal-content ol {
    max-width: 760px;
    padding-left: 1.35rem;
    margin: 0 0 1.5rem;
}

.legal-content a {
    color: var(--gold-600);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    overflow-wrap: anywhere;
}

.legal-note {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Permanent social links */
.social-dock {
    position: fixed;
    z-index: 900;
    top: 50%;
    right: 0;
    display: grid;
    gap: 0.65rem;
    transform: translateY(-50%);
}

.social-dock-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 0.7rem;
    width: 50px;
    height: 50px;
    padding: 0 0.82rem;
    overflow: hidden;
    color: var(--gold-300);
    border: 1px solid rgba(214, 183, 102, 0.42);
    border-right: 0;
    border-radius: 999px 0 0 999px;
    background: linear-gradient(145deg, rgba(7, 49, 46, 0.92), rgba(2, 28, 27, 0.96));
    box-shadow: 0 14px 34px rgba(0, 20, 19, 0.27), inset 0 1px rgba(255, 255, 255, 0.14);
    text-decoration: none;
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
    transition: width 240ms cubic-bezier(.2,.7,.2,1), color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.social-dock-link:hover,
.social-dock-link:focus-visible {
    width: 168px;
    color: var(--petrol-950);
    border-color: rgba(255, 255, 255, 0.58);
    background: linear-gradient(135deg, #f1dfa9, var(--gold-400) 55%, #aa7d2b);
    transform: none;
}

.social-dock-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.social-dock-icon-fill {
    fill: currentColor;
    stroke: none;
}

.social-dock-label {
    opacity: 0;
    white-space: nowrap;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: translateX(8px);
    transition: opacity 160ms ease 40ms, transform 200ms ease;
}

.social-dock-link:hover .social-dock-label,
.social-dock-link:focus-visible .social-dock-label {
    opacity: 1;
    transform: translateX(0);
}

@media (min-width: 821px) {
    .social-dock:hover .social-dock-link,
    .social-dock:focus-within .social-dock-link {
        width: 168px;
    }

    .social-dock:hover .social-dock-label,
    .social-dock:focus-within .social-dock-label {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 404 */
.error-stage {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 100svh;
    overflow: hidden;
    color: var(--white);
    background: var(--petrol-950);
}

.error-media,
.error-overlay {
    position: absolute;
    z-index: -2;
    inset: 0;
}

.error-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.52) saturate(0.65);
}

.error-overlay {
    z-index: -1;
    background: linear-gradient(90deg, rgba(3, 27, 27, 0.98), rgba(3, 27, 27, 0.74) 52%, rgba(3, 27, 27, 0.18));
}

.error-content {
    position: relative;
    z-index: 2;
    padding-block: calc(var(--header-height) + 4rem) 6rem;
}

.error-code {
    margin: 0;
    color: rgba(230, 207, 145, 0.28);
    font-family: var(--serif);
    font-size: clamp(8rem, 20vw, 20rem);
    line-height: 0.55;
}

.error-content h1 {
    max-width: 940px;
    margin-bottom: 1.5rem;
    color: var(--white);
    font-size: clamp(3.5rem, 7vw, 8rem);
    letter-spacing: -0.05em;
}

.error-content > p:not(.eyebrow, .error-code) {
    max-width: 610px;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.7);
}

.error-orbit {
    position: absolute;
    top: 12%;
    right: -8%;
    width: min(55vw, 760px);
    aspect-ratio: 1;
    border: 1px solid rgba(214, 183, 102, 0.45);
    border-radius: 50%;
}

.error-orbit::before,
.error-orbit::after {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
}

.error-orbit::after {
    inset: 28%;
}

/* Lightbox */
.lightbox {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    padding: clamp(1rem, 3vw, 3rem);
    color: var(--white);
    border: 0;
    background:
        radial-gradient(circle at 50% 12%, rgba(214, 183, 102, 0.12), transparent 32%),
        linear-gradient(145deg, rgba(6, 45, 43, 0.91), rgba(1, 19, 19, 0.96));
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    backdrop-filter: blur(24px) saturate(125%);
}

.lightbox::backdrop {
    background: rgba(1, 15, 15, 0.84);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.lightbox[open] {
    display: grid;
    grid-template-columns: clamp(54px, 7vw, 92px) minmax(0, min(78vw, 1500px)) clamp(54px, 7vw, 92px);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: center;
    gap: 1rem clamp(0.4rem, 1.5vw, 1.5rem);
}

.lightbox img {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    max-width: 100%;
    max-height: calc(100vh - 9rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 28px 100px rgba(0, 0, 0, 0.55), 0 0 55px rgba(214, 183, 102, 0.08);
}

.lightbox-close {
    position: fixed;
    z-index: 2;
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--petrol-950);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: linear-gradient(135deg, #f2dfaa, var(--gold-400));
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.38), 0 0 0 4px rgba(214, 183, 102, 0.18);
    transform: scale(1.05);
}

.lightbox-nav {
    grid-row: 1;
    align-self: center;
    justify-self: center;
    display: grid;
    place-items: center;
    width: clamp(48px, 5vw, 62px);
    height: clamp(48px, 5vw, 62px);
    padding: 0;
    color: var(--gold-300);
    border: 1px solid rgba(214, 183, 102, 0.42);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045));
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.2);
    cursor: pointer;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.lightbox-nav[hidden] {
    display: none;
}

.lightbox-previous {
    grid-column: 1;
}

.lightbox-next {
    grid-column: 3;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
    color: var(--petrol-950);
    border-color: rgba(255, 255, 255, 0.55);
    background: linear-gradient(135deg, #f2dfaa, var(--gold-400));
    transform: scale(1.06);
}

.lightbox-nav > span {
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
}

.lightbox-nav > span::before,
.lightbox-nav > span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
}

.lightbox-nav > span::before {
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: translateY(-50%);
}

.lightbox-nav > span::after {
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: translateY(-50%) rotate(-45deg);
    transform-origin: center;
}

.lightbox-next > span {
    transform: rotate(180deg);
}

.lightbox-meta {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 2rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    line-height: 1.35;
    text-align: center;
}

.lightbox-counter {
    flex: 0 0 auto;
    color: var(--gold-300);
    font-family: var(--serif);
    font-size: 1rem;
}

.lightbox-caption {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Footer */
.site-footer {
    position: relative;
    overflow: hidden;
    padding-top: clamp(4.5rem, 8vw, 8rem);
    color: rgba(255, 255, 255, 0.66);
    background: var(--petrol-950);
}

.footer-shimmer {
    position: absolute;
    top: -200px;
    left: 8%;
    width: 520px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(214, 183, 102, 0.14), transparent 68%);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 0.8fr;
    gap: clamp(2rem, 5vw, 6rem);
    padding-bottom: 5rem;
}

.site-footer .brand {
    position: relative;
    top: auto;
    left: auto;
    width: 305px;
    margin-bottom: 1.8rem;
}

.footer-intro > p {
    max-width: 410px;
}

.footer-title {
    margin-bottom: 1.4rem;
    color: var(--gold-300);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.site-footer address {
    font-style: normal;
}

.site-footer address span {
    color: var(--gold-300);
    font-size: 0.7rem;
}

.footer-grid > div:not(.footer-intro) a {
    display: block;
    padding-block: 0.3rem;
    color: rgba(255, 255, 255, 0.66);
    text-decoration: none;
}

.footer-grid a:hover {
    color: var(--gold-300);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding-block: 1.6rem calc(1.6rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-dark);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-legal {
    display: flex;
    gap: 1.5rem;
}

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

/* Scroll reveal */
.js.reveal-ready .reveal {
    opacity: 0;
    transform: translateY(42px);
    transition: opacity 800ms cubic-bezier(.2,.7,.2,1), transform 800ms cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--reveal-delay, 0ms);
}

.js.reveal-ready .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1120px) {
    :root {
        --shell: min(92vw, 1050px);
    }

    .brand {
        width: 286px;
        min-height: 78px;
        padding-right: 90px;
    }

    .brand-atelier {
        font-size: 1.72rem;
    }

    .brand-name {
        font-size: 0.84rem;
    }

    .brand-butterfly {
        width: 82px;
        height: 72px;
    }

    .brand-copy {
        min-width: 170px;
    }

    .nav-panel .nav-main-link {
        padding-inline: 0.8rem;
        font-size: 0.64rem;
    }

    .nav-panel .has-submenu .nav-main-link {
        padding-right: 2.2rem;
    }

    .split {
        gap: 4rem;
    }

    .craft-collage {
        grid-template-columns: 1fr 0.65fr 0.85fr;
    }

    .work-grid,
    .course-gallery,
    .b2b-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

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

    .footer-grid > div:last-child {
        grid-column: 2;
    }
}

@media (max-width: 820px) {
    .social-dock {
        z-index: 900;
        right: 0;
        gap: 0.5rem;
    }

    .social-dock-link,
    .social-dock-link:hover,
    .social-dock-link:focus-visible {
        width: 42px;
        height: 42px;
        padding: 0;
        justify-content: center;
        transform: none;
    }

    .social-dock-label {
        display: none;
    }

    .social-dock-icon {
        flex-basis: 19px;
        width: 19px;
        height: 19px;
    }

    :root {
        --header-height: 92px;
        --shell: min(91vw, 720px);
    }

    html {
        scroll-padding-top: 80px;
    }

    .site-nav {
        width: 92vw;
        height: var(--header-height);
    }

    .brand {
        top: 15px;
        left: 0;
        width: 255px;
        min-height: 72px;
        padding: 0 78px 0 0.85rem;
    }

    .brand-atelier {
        margin-bottom: 0.02rem;
        font-size: 1.62rem;
    }

    .brand-name {
        font-size: 0.8rem;
        letter-spacing: 0.15em;
    }

    .brand-butterfly {
        top: 6px;
        right: 5px;
        width: 70px;
        height: 63px;
    }

    .brand-copy {
        min-width: 0;
    }

    .hamburg {
        position: fixed;
        z-index: 1003;
        bottom: calc(24px + env(safe-area-inset-bottom));
        left: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        width: 104px;
        height: 58px;
        padding: 0;
        color: var(--petrol-950);
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 35px;
        background: linear-gradient(135deg, #f1dfa9, var(--gold-400) 55%, #aa7d2b);
        box-shadow: 0 15px 45px rgba(0, 18, 18, 0.42), inset 0 1px rgba(255, 255, 255, 0.7);
        cursor: pointer;
        pointer-events: auto;
        transform: translateX(-50%);
        transition: width 300ms cubic-bezier(.2,.7,.2,1), background 220ms ease;
    }

    .hamburg .btn {
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        transition: transform 300ms cubic-bezier(.2,.7,.2,1);
    }

    .hamburg-lines {
        position: relative;
        width: 20px;
        height: 14px;
    }

    .hamburg .line {
        position: absolute;
        left: 0;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--petrol-950);
        transition: top 300ms ease, transform 300ms ease, width 300ms ease;
    }

    .hamburg .line:first-child { top: 3px; }
    .hamburg .line:last-child { top: 10px; }

    .menu-open .hamburg {
        width: 150px;
        background: linear-gradient(135deg, #f3e4b7, var(--gold-400));
    }

    .menu-open .hamburg .btn {
        transform: translateX(-4px);
    }

    .menu-open .hamburg .line {
        top: 6px;
        width: 26px;
    }

    .menu-open .hamburg .line:first-child { transform: rotate(45deg); }
    .menu-open .hamburg .line:last-child { transform: rotate(-45deg); }

    #bg-move {
        position: fixed;
        z-index: 1000;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(0, 15, 15, 0.58);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-105%);
        transition: transform 500ms cubic-bezier(.68,0,.22,1), opacity 350ms ease, visibility 0s linear 500ms;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

    .nav-panel {
        position: fixed;
        z-index: 1001;
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        min-height: min(720px, 84svh);
        padding: 2rem 1.5rem calc(116px + env(safe-area-inset-bottom));
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-width: 1px 0 0;
        border-radius: 0;
        background:
            radial-gradient(circle at 50% 100%, rgba(214, 183, 102, 0.14), transparent 40%),
            rgba(5, 34, 33, 0.96);
        box-shadow: 0 -30px 90px rgba(0, 12, 12, 0.38), inset 0 1px rgba(255, 255, 255, 0.15);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-105%);
        transition: transform 540ms cubic-bezier(.68,0,.22,1), opacity 300ms ease, visibility 0s linear 540ms;
        -webkit-backdrop-filter: blur(24px) saturate(130%);
        backdrop-filter: blur(24px) saturate(130%);
    }

    .menu-open #bg-move,
    .menu-open .nav-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
        transition-delay: 0s;
    }

    .nav-panel-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: min(88vw, 540px);
        height: 100%;
        min-height: calc(min(720px, 84svh) - 150px);
        margin-inline: auto;
    }

    .nav-kicker {
        display: block;
        margin-bottom: 1.3rem;
        color: var(--gold-300);
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-align: center;
        text-transform: uppercase;
    }

    .nav-panel-inner > ul {
        display: grid;
        height: auto;
        gap: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    .nav-panel-inner > ul > li {
        height: auto;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .nav-panel .nav-main-link {
        min-height: 64px;
        color: rgba(255, 255, 255, 0.88);
        border-radius: 0;
        font-family: var(--serif);
        font-size: clamp(1.45rem, 5vw, 2rem);
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
    }

    .nav-panel .nav-main-link:hover,
    .nav-panel .nav-main-link:focus-visible,
    .nav-panel .nav-main-link[aria-current="page"] {
        color: var(--gold-300);
        background: transparent;
        box-shadow: none;
    }

    .nav-panel .nav-main-link[aria-current="page"]::before {
        content: "◇";
        margin-right: 0.8rem;
        color: var(--gold-400);
        font-family: var(--sans);
        font-size: 0.7rem;
    }

    .nav-panel .has-submenu .nav-main-link {
        padding-inline: 3.25rem;
    }

    .submenu-toggle {
        top: 32px;
        right: 0.7rem;
        width: 2.6rem;
        height: 2.6rem;
        color: var(--gold-300);
        border: 1px solid rgba(214, 183, 102, 0.28);
        background: rgba(255, 255, 255, 0.04);
    }

    .has-submenu:hover .submenu-toggle,
    .has-submenu:focus-within .submenu-toggle,
    .has-submenu.is-current .submenu-toggle {
        color: var(--gold-300);
    }

    .submenu {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-height: 0;
        padding: 0 0.7rem;
        border: 0;
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
        box-shadow: none;
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
        pointer-events: none;
        transform: none;
        transition: max-height 300ms cubic-bezier(.2,.7,.2,1), padding 300ms ease, opacity 200ms ease, visibility 0s linear 300ms;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .submenu::before {
        display: none;
    }

    .has-submenu:hover .submenu,
    .has-submenu:focus-within .submenu {
        max-height: 0;
        padding-block: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none;
    }

    .has-submenu.submenu-open .submenu,
    .has-submenu.submenu-open:hover .submenu,
    .has-submenu.submenu-open:focus-within .submenu {
        max-height: 190px;
        padding-block: 0.4rem 0.65rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition-delay: 0s;
    }

    .nav-panel .submenu a {
        justify-content: center;
        min-height: 45px;
        padding: 0.35rem 1rem;
        border-radius: 12px;
        font-family: var(--sans);
        font-size: 0.7rem;
        letter-spacing: 0.09em;
        text-align: center;
    }

    .nav-panel .submenu a:hover,
    .nav-panel .submenu a:focus-visible {
        background: rgba(255, 255, 255, 0.07);
        transform: none;
    }

    .nav-mobile-contact {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        margin-top: 1.5rem;
        color: rgba(255, 255, 255, 0.48);
        font-size: 0.62rem;
        text-align: center;
    }

    .nav-mobile-contact a {
        display: block;
        min-height: auto;
        padding: 0;
        color: var(--gold-300);
        font-family: var(--sans);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.08em;
    }

    .hero,
    .hero-content {
        min-height: max(700px, 100svh);
    }

    .hero-content {
        padding-bottom: 8rem;
    }

    .hero-media img {
        object-position: 63% center;
    }

    .hero-home .hero-media .hero-image-custom {
        object-position: 68% center;
    }

    .hero-wash {
        background: linear-gradient(90deg, rgba(3, 27, 27, 0.96), rgba(3, 27, 27, 0.63)), linear-gradient(0deg, rgba(3, 27, 27, 0.86), transparent 50%);
    }

    .scroll-cue {
        display: none;
    }

    .service-ribbon-grid {
        grid-template-columns: 1fr 1fr;
    }

    .service-ribbon a:nth-child(3) {
        border-left: 1px solid var(--line-dark);
        border-top: 1px solid var(--line-dark);
    }

    .service-ribbon a:nth-child(4) {
        border-top: 1px solid var(--line-dark);
    }

    .split,
    .split-copy-wide,
    .service-split,
    .faq-layout,
    .contact-hero-grid {
        grid-template-columns: 1fr;
    }

    .service-split.reverse .section-copy {
        grid-column: auto;
        grid-row: auto;
    }

    .before-after,
    .stacked-images {
        min-height: 620px;
    }

    .craft-collage {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 390px auto 320px auto;
    }

    .craft-photo-tall {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .craft-photo-wide {
        grid-column: 1 / 3;
        grid-row: 3;
    }

    .editorial-gallery {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 300px;
    }

    .gallery-piece-1,
    .gallery-piece-2,
    .gallery-piece-3,
    .gallery-piece-4,
    .gallery-piece-5,
    .gallery-piece-6 {
        grid-column: auto;
        grid-row: auto;
    }

    .gallery-piece-1,
    .gallery-piece-4 {
        grid-row: span 2;
    }

    .gallery-piece figcaption {
        opacity: 1;
        transform: none;
    }

    .course-teaser {
        grid-template-columns: 1fr;
    }

    .course-image {
        min-height: 560px;
    }

    .b2b-teaser {
        min-height: 650px;
    }

    .heading-row {
        align-items: start;
        flex-direction: column;
        gap: 0;
    }

    .inner-hero {
        min-height: 760px;
    }

    .work-grid,
    .course-gallery,
    .b2b-gallery {
        grid-template-columns: 1fr 1fr;
    }

    .course-timeline-heading {
        margin-bottom: 3.5rem;
    }

    .course-timeline {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        max-width: 680px;
        padding: 0 0 0 84px;
        margin-inline: auto;
    }

    .course-timeline::before {
        top: 34px;
        right: auto;
        bottom: 34px;
        left: 32px;
        width: 1px;
        height: auto;
        background: linear-gradient(180deg, transparent, rgba(3, 27, 27, 0.55) 8%, rgba(3, 27, 27, 0.55) 92%, transparent);
    }

    .course-timeline > li {
        padding-top: 0;
    }

    .timeline-marker {
        top: 50%;
        left: -52px;
        transform: translate(-50%, -50%);
    }

    .timeline-card,
    .course-timeline > li:nth-child(even) .timeline-card {
        min-height: 205px;
        transform: none;
    }

    .course-timeline > li:hover .timeline-card,
    .course-timeline > li:nth-child(even):hover .timeline-card {
        transform: translateY(-4px);
    }

    .process-sticky {
        position: relative;
        top: auto;
    }

    .contact-hero-grid {
        padding-top: calc(var(--header-height) + 5rem);
    }

    .contact-form-card {
        margin-bottom: 4rem;
    }

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

    .footer-intro {
        grid-column: 1 / -1;
    }

    .footer-grid > div:last-child {
        grid-column: auto;
    }
}

@media (max-width: 560px) {
    :root {
        --shell: min(90vw, 500px);
    }

    body {
        line-height: 1.68;
        padding-bottom: 0;
    }

    .lightbox {
        padding: 1rem;
    }

    .lightbox[open] {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 0.8rem;
    }

    .lightbox img {
        grid-column: 1;
        max-width: 100%;
        max-height: calc(100vh - 7.5rem);
    }

    .lightbox-nav {
        position: fixed;
        z-index: 3;
        top: 50%;
        width: 46px;
        height: 46px;
        transform: translateY(-50%);
    }

    .lightbox-nav:hover,
    .lightbox-nav:focus-visible {
        transform: translateY(-50%) scale(1.04);
    }

    .lightbox-previous {
        right: auto;
        left: max(0.65rem, env(safe-area-inset-left));
    }

    .lightbox-next {
        right: max(0.65rem, env(safe-area-inset-right));
        left: auto;
    }

    .lightbox-meta {
        grid-column: 1;
        gap: 0.65rem;
        padding-inline: 0.5rem;
        font-size: 0.64rem;
    }

    .lightbox-close {
        width: 46px;
        height: 46px;
    }

    .section {
        padding-block: 5.2rem;
    }

    .eyebrow {
        font-size: 0.6rem;
    }

    .hero-content h1,
    .inner-hero h1,
    .contact-intro h1,
    .error-content h1 {
        font-size: clamp(3.35rem, 15.2vw, 5.2rem);
    }

    .hero-copy {
        max-width: 92%;
        font-size: 0.92rem;
    }

    .hero-content .button-row,
    .error-content .button-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.8rem;
    }

    .service-ribbon a {
        min-height: 150px;
        padding: 1.35rem;
    }

    .service-ribbon strong {
        font-size: 1.17rem;
    }

    .service-ribbon small {
        font-size: 0.56rem;
        line-height: 1.4;
    }

    .section-copy h2,
    .section-heading h2,
    .mini-cta h2,
    .contact-teaser h2,
    .course-copy h2,
    .b2b-content h2 {
        font-size: clamp(2.9rem, 13vw, 4.5rem);
    }

    .before-after,
    .stacked-images {
        min-height: 470px;
    }

    .image-card-main,
    .stack-primary {
        width: 82%;
        height: 84%;
    }

    .image-card-float,
    .stack-secondary {
        width: 46%;
        height: 42%;
        border-width: 6px;
    }

    .craft-collage {
        display: block;
    }

    .craft-photo,
    .craft-note {
        margin-bottom: 1rem;
    }

    .craft-photo-tall {
        height: 430px;
    }

    .craft-photo-wide {
        height: 270px;
    }

    .craft-note {
        min-height: 230px;
    }

    .editorial-gallery {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: 380px;
    }

    .gallery-piece-1,
    .gallery-piece-4 {
        grid-row: auto;
    }

    .gallery-piece:nth-child(even) {
        height: 300px;
    }

    .course-image {
        min-height: 430px;
    }

    .course-copy {
        padding: 5rem 5vw;
    }

    .b2b-teaser {
        min-height: 630px;
    }

    .contact-butterfly {
        right: -40px;
        width: 190px;
    }

    .inner-hero {
        min-height: 700px;
    }

    .inner-hero-content {
        padding-bottom: 5rem;
    }

    .inner-hero-content > p:not(.eyebrow) {
        font-size: 0.9rem;
    }

    .repair-pair {
        gap: 0.6rem;
    }

    .repair-pair figure {
        height: 420px;
    }

    .work-grid,
    .course-gallery,
    .b2b-gallery {
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem;
    }

    .work-card a,
    .work-card:nth-child(7n + 2) a,
    .work-card:nth-child(7n + 5) a,
    .course-gallery-item a,
    .course-gallery-item:nth-child(9n + 1) a,
    .course-gallery-item:nth-child(9n + 6) a,
    .b2b-gallery-item a,
    .b2b-gallery-item:nth-child(10n + 1) a,
    .b2b-gallery-item:nth-child(10n + 8) a {
        height: 240px;
    }

    .course-gallery-item:nth-child(9n + 1),
    .course-gallery-item:nth-child(9n + 6),
    .b2b-gallery-item:nth-child(10n + 1),
    .b2b-gallery-item:nth-child(10n + 8) {
        grid-column: span 2;
    }

    .course-gallery-item:nth-child(9n + 1) a,
    .course-gallery-item:nth-child(9n + 6) a,
    .b2b-gallery-item:nth-child(10n + 1) a,
    .b2b-gallery-item:nth-child(10n + 8) a {
        height: 330px;
    }

    .work-card figcaption {
        font-size: 0.53rem;
    }

    .work-card-action {
        width: 36px;
        height: 36px;
        opacity: 1;
        transform: none;
    }

    .mini-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .course-orbit-card {
        height: 500px;
    }

    .course-timeline-heading {
        margin-bottom: 3rem;
    }

    .course-timeline {
        gap: 1rem;
        padding-left: 62px;
    }

    .course-timeline::before {
        left: 24px;
    }

    .timeline-marker {
        left: -38px;
        width: 52px;
        height: 52px;
    }

    .timeline-marker i {
        right: 1px;
        bottom: 1px;
        width: 10px;
        height: 10px;
    }

    .timeline-card {
        min-height: 0;
        padding: 1.35rem;
        border-radius: 6px 24px 6px 24px;
    }

    .timeline-kicker {
        margin-bottom: 1.8rem;
    }

    .timeline-card h3 {
        font-size: 1.55rem;
    }

    .glass-card h3 {
        margin-top: 0;
    }

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

    .glass-card {
        min-height: 280px;
    }

    .technical-image {
        height: 480px;
    }

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

    .form-field,
    .form-field.full,
    .privacy-check,
    .form-submit {
        grid-column: auto;
    }

    .contact-form-card {
        padding: 1.5rem;
    }

    .legal-main {
        padding-block: calc(var(--header-height) + 2.5rem) 5rem;
    }

    .legal-shell > .breadcrumbs {
        margin-bottom: 1.8rem;
    }

    .legal-content {
        padding: 1.5rem;
    }

    .legal-content > h1:first-child {
        margin-bottom: 2.5rem;
        font-size: clamp(3rem, 15vw, 4.2rem);
    }

    .legal-content h2 {
        padding-top: 2rem;
        margin-top: 2.4rem;
    }

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

    .footer-intro {
        grid-column: auto;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }

    .error-page .footer-bottom,
    .legal-page .footer-bottom {
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }
}

/* Desktop cursor: direct gold point with a softly delayed Jordan ring */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
    html.has-custom-cursor,
    html.has-custom-cursor body,
    html.has-custom-cursor body * {
        cursor: none !important;
    }

    .custom-cursor-dot,
    .custom-cursor-ring {
        position: fixed;
        z-index: 2147483647;
        top: 0;
        left: 0;
        display: block;
        opacity: 0;
        pointer-events: none;
        will-change: transform;
    }

    /* CCM19 bleibt vollständig aktiv, liegt aber exakt eine Ebene unter dem Cursor. */
    html.has-custom-cursor .ccm-root,
    html.has-custom-cursor .ccm-widget {
        z-index: 2147483646 !important;
    }

    .custom-cursor-dot {
        --cursor-x: -100px;
        --cursor-y: -100px;
        width: 7px;
        height: 7px;
        border: 0;
        border-radius: 50%;
        background: #bc8f36;
        box-shadow: 0 0 12px rgba(188, 143, 54, 0.62);
        transform: translate3d(var(--cursor-x), var(--cursor-y), 0) translate(-50%, -50%);
        transition: opacity 140ms ease, background-color 160ms ease, box-shadow 180ms ease;
    }

    .custom-cursor-dot::before,
    .custom-cursor-dot::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 15px;
        height: 2px;
        border-radius: 2px;
        background: #bc8f36;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.55);
        transition: opacity 150ms ease, transform 180ms ease;
    }

    .custom-cursor-dot::after {
        transform: translate(-50%, -50%) rotate(90deg) scale(0.55);
    }

    .custom-cursor-dot.is-gallery,
    body:has([data-lightbox]:hover) .custom-cursor-dot {
        background: transparent;
        box-shadow: none;
    }

    .custom-cursor-dot.is-gallery::before,
    body:has([data-lightbox]:hover) .custom-cursor-dot::before {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .custom-cursor-dot.is-gallery::after,
    body:has([data-lightbox]:hover) .custom-cursor-dot::after {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(90deg) scale(1);
    }

    .custom-cursor-ring {
        --cursor-x: -100px;
        --cursor-y: -100px;
        width: 49px;
        height: 51px;
        background: url("/assets/images/optimized/root/root-12.webp") center / contain no-repeat;
        filter: drop-shadow(0 4px 8px rgba(0, 18, 18, 0.32));
        transform: translate3d(var(--cursor-x), var(--cursor-y), 0) translate(-50%, -50%);
        transition: opacity 170ms ease, filter 160ms ease;
    }

    .custom-cursor-dot.is-visible,
    .custom-cursor-ring.is-visible {
        opacity: 1;
    }

    .custom-cursor-ring.is-pressed {
        filter: brightness(1.13) drop-shadow(0 5px 12px rgba(188, 143, 54, 0.52));
    }

    body.lightbox-open .custom-cursor-dot,
    body.lightbox-open .custom-cursor-ring {
        opacity: 0;
    }

    html.has-custom-cursor body.lightbox-open .lightbox,
    html.has-custom-cursor body.lightbox-open .lightbox * {
        cursor: auto !important;
    }
}

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

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

    .site-loader {
        display: none;
    }

    .js.reveal-ready .reveal {
        opacity: 1;
        transform: none;
    }
}