:root {
    --primary: #d4a959;
    /* Gold/Champagne */
    --dark: #0a0a0a;
    --gray-dark: #1a1a1a;
    --gray-light: #f5f5f5;
    --text: #ffffff;
    --text-muted: #a0a0a0;
    --font-main: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Playfair Display', 'Times New Roman', Times, serif;
    --transition: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-fast: 0.35s;
    --motion-med: 0.55s;
    --motion-slow: 0.8s;
    --radius: 10px;
    --radius-tile: 30px;
    --radius-tile-open: 38px;
    --radius-pill: 999px;
    --page-gutter: max(clamp(1.5rem, 4vw, 2.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --content-max: 120rem;
    --editorial-max: 116rem;
    --rail-max: 144rem;
    --stage-max: 190rem;
}

.text-primary {
    color: var(--primary);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    max-width: 100%;
}

/* clip (not hidden) so the body never becomes its own scroll container —
   on phones that caused the page to jump when the scroll direction flips */
body {
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: var(--font-main);
    background-color: var(--dark);
    color: var(--text);
    line-height: 1.6;
    max-width: 100%;
}

body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--dark);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: var(--radius);
    border: 2px solid var(--dark);
}

::-webkit-scrollbar-thumb:hover {
    background: #b8913f;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--dark);
}

.container {
    width: calc(100% - var(--page-gutter) - var(--page-gutter));
    max-width: var(--content-max);
    margin: 0 auto;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 2rem 0;
    transition: 0.5s var(--transition);
}

.navbar.scrolled {
    background: rgba(10, 10, 10, 0.95);
    padding: 1rem 0;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    position: relative;
    z-index: 1100;
    display: flex;
    align-items: center;
    text-decoration: none;
    max-width: 100%;
}

.logo-img {
    height: 80px;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
    transition: 0.8s ease-out;
}

.navbar.scrolled .logo-img {
    height: 60px;
}

.logo-link:hover .logo-img {
    filter: drop-shadow(0 0 25px rgba(212, 169, 89, 0.6)) brightness(1.1);
    transform: scale(1.02);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
}

.nav-links a:not(.btn-primary):hover {
    color: var(--primary);
}

.btn-primary {
    background: var(--primary);
    background: linear-gradient(135deg, #e0bb76 0%, #d4a959 50%, #b8913f 100%);
    color: var(--dark) !important;
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600 !important;
    position: relative;
    overflow: hidden;
    transition: 0.4s var(--transition);
    box-shadow: 0 4px 15px rgba(212, 169, 89, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 169, 89, 0.5);
    background: linear-gradient(135deg, #ecd08f 0%, #e0bb76 50%, #d4a959 100%);
}

.nav-drawer {
    display: flex;
    align-items: center;
}

.nav-drawer__kicker {
    display: none;
}

/* A quiet, always accessible language choice, including on narrow phones. */
.navbar .nav-drawer { margin-left: auto; }
.language-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 20px;
    order: 2;
    position: relative;
    z-index: 1100;
    flex-shrink: 0;
}
.language-switch a {
    padding: 10px 5px;
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: .04em;
    text-decoration: none;
}
.language-switch a[aria-current="page"],
.language-switch a:hover { color: var(--primary); }
.language-switch a:focus-visible { outline: 1px solid var(--primary); outline-offset: 2px; }
.navbar .burger { order: 3; }
@media (min-width: 1101px) {
    .navbar > .container { column-gap: 24px; }
    .language-switch { margin-left: 0; }
    .navbar .nav-links a { white-space: nowrap; }
}
@media (min-width: 1101px) and (max-width: 1300px) {
    .navbar .nav-links { gap: 16px; }
    .navbar .logo-link { max-width: 270px; }
}
@media (max-width: 1100px) {
    .language-switch { margin-left: auto; margin-right: 10px; }
    .navbar .logo-link { max-width: calc(100% - 122px); }
}
.contact-page .language-switch { margin-left: auto; margin-right: 12px; order: 0; }
@media (max-width: 600px) {
    body.contact-page .navbar .container { gap: 6px; }
    .contact-page .navbar .logo-link { max-width: calc(100% - 152px); }
    .contact-page .navbar .logo-img { max-width: 100%; height: auto; }
    .contact-page .language-switch { margin-right: 0; }
    .contact-page .navbar .btn-primary { font-size: 12px; padding: 10px; }
}

.burger {
    display: none;
    position: relative;
    z-index: 1100;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid rgba(212, 169, 89, 0.38);
    border-radius: var(--radius);
    background: rgba(10, 10, 10, 0.42);
    color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

.burger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}

.burger__box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 1.2rem;
    height: 0.9rem;
    margin: 0 auto;
}

.burger__box span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    transform-origin: center;
    transition: transform 0.35s var(--transition), opacity 0.2s ease;
}

.burger.is-open {
    background: rgba(212, 169, 89, 0.12);
}

.burger.is-open .burger__box span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.burger.is-open .burger__box span:nth-child(2) {
    opacity: 0;
}

.burger.is-open .burger__box span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    /* Top clears the fixed navbar; bottom reserves the scroll-indicator lane.
       Both are viewport-relative so a short screen does not get a tall hero — a
       fixed lane here pushes the tiles below the fold on 768px-high laptops. */
    padding: clamp(5.5rem, 9svh, 7.5rem) var(--page-gutter) clamp(3.5rem, 10svh, 9.5rem);
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-bg__plate,
.hero-bg__glimpse {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-bg > picture,
.atelier-visual > picture {
    display: contents;
}

.hero-bg__plate {
    object-fit: cover;
    filter: brightness(0.4);
    animation: heroReveal 2.5s var(--transition) forwards;
    transition: filter 0.7s ease, opacity 0.7s ease;
}

.hero-bg__glimpse {
    background-size: cover;
    background-position: center;
    opacity: 0;
    filter: brightness(0.32) saturate(1.08);
    transform: scale(1.06);
    transition: opacity 0.8s ease, transform 6s linear;
    pointer-events: none;
}

.hero.is-glimpsing .hero-bg__plate {
    filter: brightness(0.18);
}

.hero.is-glimpsing .hero-bg__glimpse {
    opacity: 1;
    transform: scale(1);
}

.hero-content {
    width: 100%;
    max-width: 120rem;
    margin: 0 auto;
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 6.5vw, 4.75rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.highlight {
    font-style: italic;
    color: var(--primary);
}

.hero p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    max-width: 600px;
    color: #d4d4d4;
    margin-bottom: 1.25rem;
}

.hero-invite {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    color: var(--primary);
    letter-spacing: 0.02em;
    margin-bottom: 2rem !important;
}

/* Hero Tiles — shiny gold squircles that bloom open into a photo on hover */
.hero-tiles {
    --tile-w: 248px;
    --tile-h: 86px;
    --tile-w-open: 304px;
    /* continuous, so there is no height at which an open tile suddenly overflows */
    --tile-h-open: clamp(168px, 28vh, 248px);
    /* one place to retune the whole motion feel */
    --ease-out: var(--transition);
    --ease-spring: var(--transition);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.9rem, 2.6vw, 2.5rem);
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* Give the three destinations a little more air only when the viewport has it. */
@media (min-width: 100rem) {
    .hero-tiles {
        width: clamp(62rem, 55vw, 68rem);
        margin-right: auto;
        margin-left: auto;
        justify-content: space-between;
        gap: 0;
    }
}

/* The reserved slot never resizes, so nothing around the tile shifts */
.hero-tile {
    position: relative;
    width: var(--tile-w-open);
    height: var(--tile-h-open);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* the vanishing point for the cursor tilt; JS writes --rx / --ry here */
    perspective: 900px;
    --rx: 0deg;
    --ry: 0deg;
    --press: 1;
}

.hero-tile__surface {
    position: absolute;
    width: var(--tile-w);
    height: var(--tile-h);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    /* closed state: the house gold, same fill as .btn-main */
    background: linear-gradient(135deg, #e0bb76 0%, #d4a959 50%, #b8913f 100%);
    border: 1px solid rgba(120, 90, 30, 0.35);
    /* squircle */
    border-radius: var(--radius-tile);
    box-shadow:
        0 4px 15px rgba(212, 169, 89, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    /* closing: quick, no delays, so pulling the mouse away feels instant */
    transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--press));
    transition:
        width 0.55s var(--ease-out),
        height 0.5s var(--ease-out),
        border-radius 0.5s var(--ease-out),
        border-color 0.45s ease,
        background-color 0.45s ease,
        box-shadow 0.55s var(--ease-out),
        /* long enough to smooth the pointer, short enough to still feel attached */
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: width, height, transform;
}

/* While the pointer is actually driving the tilt, shorten the smoothing so the
   tile tracks the cursor instead of trailing behind it. */
.hero-tile.is-tilting .hero-tile__surface {
    transition:
        width 0.55s var(--ease-out),
        height 0.5s var(--ease-out),
        border-radius 0.5s var(--ease-out),
        border-color 0.45s ease,
        background-color 0.45s ease,
        box-shadow 0.55s var(--ease-out),
        transform 0.12s linear;
}

.hero-tile__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    /* parallax: JS nudges these a few px opposite the tilt */
    background-position: calc(50% + var(--px, 0px)) calc(50% + var(--py, 0px));
    opacity: 0;
    transform: scale(1.28);
    /* dark enough to read on, light enough to see the photo */
    filter: brightness(0.5) contrast(1.08) saturate(1.06);
    transition:
        opacity 0.4s ease,
        transform 0.6s var(--ease-out),
        background-position 0.3s var(--ease-out);
    z-index: 0;
}

.hero-tile.is-tilting .hero-tile__media {
    transition:
        opacity 0.4s ease,
        transform 0.6s var(--ease-out),
        background-position 0.12s linear;
}

/* Extra veil behind the label only, so the text always has contrast */
.hero-tile__veil {
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 70%),
        linear-gradient(to top, rgba(10, 10, 10, 0.7) 0%, rgba(10, 10, 10, 0) 55%);
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.hero-tile__label {
    position: relative;
    z-index: 2;
    /* dark text on the gold, exactly like the other gold buttons */
    color: var(--dark);
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    text-align: center;
    padding: 0 1rem;
    white-space: nowrap;
    text-shadow: none;
    transition:
        font-size 0.5s var(--ease-out),
        letter-spacing 0.5s var(--ease-out),
        transform 0.5s var(--ease-out),
        color 0.35s ease,
        text-shadow 0.4s ease;
}

/* Idle: the 8s house shine that already runs on .btn-main / .btn-primary */
.hero-tile__surface::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: translateX(-100%);
    animation: btnShine 8s infinite;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Hover: a gold sheen that sweeps across as the tile opens */
.hero-tile__surface::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(105deg, transparent 35%, rgba(212, 169, 89, 0.3) 50%, transparent 65%);
    transform: translateX(-130%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s var(--ease-out), opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {

    .hero-tile:hover .hero-tile__surface,
    .hero-tile:focus-visible .hero-tile__surface {
        width: var(--tile-w-open);
        height: var(--tile-h-open);
        border-radius: var(--radius-tile-open);
        background-color: #0d0d0f;
        border-color: rgba(212, 169, 89, 0.6);
        box-shadow:
            0 26px 60px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(212, 169, 89, 0.18),
            0 0 42px rgba(212, 169, 89, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0);
        /* opening: width leads, height follows with a touch of spring — the
           small offset is what stops it reading as one stiff box-resize */
        transition:
            width 0.62s var(--ease-out),
            height 0.86s var(--ease-spring) 0.07s,
            border-radius 0.8s var(--ease-out),
            border-color 0.5s ease,
            background-color 0.35s ease 0.12s,
            box-shadow 0.8s var(--ease-out);
    }

    .hero-tile:hover .hero-tile__media,
    .hero-tile:focus-visible .hero-tile__media {
        opacity: 1;
        transform: scale(1);
        transition:
            opacity 0.55s ease 0.1s,
            transform 1.25s var(--ease-out);
    }

    .hero-tile:hover .hero-tile__veil,
    .hero-tile:focus-visible .hero-tile__veil {
        opacity: 1;
        transition: opacity 0.55s ease 0.1s;
    }

    .hero-tile:hover .hero-tile__label,
    .hero-tile:focus-visible .hero-tile__label {
        font-size: 1.15rem;
        letter-spacing: 3.5px;
        color: #f0d9a8;
        text-shadow:
            0 0 12px rgba(212, 169, 89, 0.85),
            0 0 34px rgba(212, 169, 89, 0.45),
            0 2px 10px rgba(0, 0, 0, 0.95);
        transition:
            font-size 0.7s var(--ease-spring) 0.14s,
            letter-spacing 0.7s var(--ease-spring) 0.14s,
            transform 0.7s var(--ease-spring) 0.14s,
            color 0.3s ease 0.1s,
            text-shadow 0.5s ease 0.14s;
    }

    /* the looping gold shine belongs to the closed state only */
    .hero-tile:hover .hero-tile__surface::before,
    .hero-tile:focus-visible .hero-tile__surface::before {
        opacity: 0;
    }

    .hero-tile:hover .hero-tile__surface::after,
    .hero-tile:focus-visible .hero-tile__surface::after {
        transform: translateX(130%);
        opacity: 1;
        transition: transform 1s var(--ease-out) 0.05s, opacity 0.3s ease;
    }
}

/* Phones have no hover, so the tiles stay open as photo doors */
@media (hover: none) {
    .hero-tile__surface {
        background: #0d0d0f;
        border-color: rgba(212, 169, 89, 0.55);
        box-shadow:
            0 16px 36px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(212, 169, 89, 0.16);
    }

    .hero-tile__media {
        opacity: 1;
        transform: scale(1.04);
    }

    .hero-tile__veil {
        opacity: 1;
    }

    .hero-tile__label {
        color: #f0d9a8;
        text-shadow:
            0 0 12px rgba(212, 169, 89, 0.7),
            0 2px 10px rgba(0, 0, 0, 0.95);
    }

    .hero-tile__surface::before {
        opacity: 0;
    }
}

.hero-tile:focus-visible {
    outline: none;
}

.hero-tile:active {
    --press: 0.975;
}

@media (prefers-reduced-motion: reduce) {

    .hero-tile__surface,
    .hero-tile__media,
    .hero-tile__veil,
    .hero-tile__label,
    .hero-tile__surface::before,
    .hero-tile__surface::after,
    .hero-tile:hover .hero-tile__surface,
    .hero-tile:hover .hero-tile__media,
    .hero-tile:hover .hero-tile__veil,
    .hero-tile:hover .hero-tile__label,
    .scroll-indicator {
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        animation: none !important;
    }

    /* the cursor tilt is pure motion — drop it entirely */
    .hero-tile {
        --rx: 0deg !important;
        --ry: 0deg !important;
    }

    .hero-tile__media {
        --px: 0px !important;
        --py: 0px !important;
    }
}

.btn-main {
    text-decoration: none;
    background: var(--primary);
    background: linear-gradient(135deg, #e0bb76 0%, #d4a959 50%, #b8913f 100%);
    color: var(--dark);
    padding: 1.2rem 2.5rem;
    font-weight: 600;
    border-radius: var(--radius);
    transition: 0.4s var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(212, 169, 89, 0.3);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-main:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(212, 169, 89, 0.4);
    background: linear-gradient(135deg, #ecd08f 0%, #e0bb76 50%, #d4a959 100%);
}

/* Shine Effect */
.btn-primary::after,
.btn-main::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateX(-100%);
    animation: btnShine 8s infinite;
    pointer-events: none;
}

@keyframes btnShine {
    0% {
        transform: translateX(-100%);
    }

    15% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.btn-ghost {
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text);
    padding: 1.2rem 2.5rem;
    font-weight: 600;
    border-radius: var(--radius);
    transition: 0.4s var(--transition);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
}

.btn-text {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    padding: 0.8rem 1.8rem;
    border: 1px solid rgba(212, 169, 89, 0.3);
    border-radius: var(--radius);
    transition: 0.4s var(--transition);
    gap: 0.5rem;
    margin-top: 2rem;
}

.btn-text:hover {
    border-color: var(--primary);
    background: rgba(212, 169, 89, 0.05);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(212, 169, 89, 0.1);
}

.btn-outline {
    display: inline-block;
    text-decoration: none;
    background: var(--primary);
    color: var(--dark);
    border: 1px solid var(--primary);
    padding: 0.8rem 1.8rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    transition: 0.3s var(--transition);
    margin-top: 1.5rem;
    cursor: pointer;
    font-family: inherit;
}

.btn-outline:hover {
    background: transparent;
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(212, 169, 89, 0.2);
}

/* Sections */
.section {
    padding: 5rem 0;
    scroll-margin-top: 120px;
}

.dark {
    background: var(--gray-dark);
}

.light-gray {
    background: var(--gray-dark);
}

.subtitle {
    display: block;
    color: var(--primary);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 3px;
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

/* Shared editorial opening for the three primary offer sections. */
.editorial-intro {
    position: relative;
    z-index: 7;
    padding: clamp(7rem, 10vw, 9rem) var(--page-gutter) clamp(3.5rem, 6vw, 5.5rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 8%, rgba(212, 169, 89, 0.1), transparent 34%),
        #080808;
    border-bottom: 1px solid rgba(212, 169, 89, 0.2);
}

.editorial-intro::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 169, 89, 0.78) 45%);
}

.editorial-intro__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(16rem, 0.8fr) minmax(24rem, 1.2fr);
    align-items: center;
    gap: clamp(2rem, 3vw, 4rem);
    width: 100%;
    max-width: var(--editorial-max);
    margin: 0 auto;
}

.editorial-intro__heading,
.editorial-intro__copy,
.grid-2 > *,
.contact-wrapper > *,
.footer-grid > * {
    min-width: 0;
}

.editorial-intro__heading h2 {
    max-width: 32rem;
    margin: 0;
    font-size: clamp(2.25rem, 4.4vw, 4rem);
    line-height: 1.06;
}

.editorial-intro__copy {
    max-width: 48rem;
    margin-top: 0;
    padding-left: clamp(1rem, 1.5vw, 2rem);
    border-left: 1px solid rgba(212, 169, 89, 0.42);
    color: #d5d5d5;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.85;
}

@media (min-width: 901px) {
    .editorial-intro__inner {
        row-gap: 0;
    }

    .editorial-intro__heading {
        display: contents;
    }

    .editorial-intro__heading .subtitle {
        grid-column: 1;
        grid-row: 1;
    }

    .editorial-intro__heading h2 {
        grid-column: 1;
        grid-row: 2;
    }

    .editorial-intro__copy {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
    }
}

.editorial-intro__copy strong {
    color: var(--primary);
    font-weight: 600;
    white-space: nowrap;
}

h2,
h3 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 2rem;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(2.5rem, 3vw, 4rem);
    align-items: center;
}

.image-box {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 3 / 2;
    background: #111;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: 0.8s var(--transition);
    display: block;
}

.image-box:hover img {
    transform: scale(1.05);
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
}

.service-card {
    background: #111;
    padding: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius);
    transition: transform 0.3s var(--transition), background 0.3s, border-color 0.3s;
}

.service-card h3 {
    font-family: var(--font-main);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.service-card:hover {
    background: #151515;
    border-color: var(--primary);
    transform: translateY(-10px);
}

.card-icon {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: rgba(212, 169, 89, 0.2);
    margin-bottom: 1.5rem;
}

.service-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.card-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1.5rem;
}

.card-list li {
    font-size: 0.85rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    transition: 0.3s var(--transition);
    cursor: default;
    display: block;
    /* Ensure transform works correctly */
}

.card-list li:hover {
    transform: translateX(10px);
    filter: brightness(1.2);
    text-shadow: 0 0 10px rgba(212, 169, 89, 0.3);
}

/* Destinations Grid */
.destinations-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 4rem;
}

.dest-item {
    appearance: none;
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    background: #111;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.35s var(--transition), transform 0.35s var(--transition);
}

.dest-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.55);
    transition: transform 0.7s var(--transition), filter 0.4s ease;
}

.dest-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.28) 45%, transparent 72%);
    pointer-events: none;
}

.dest-item:hover,
.dest-item:focus-visible {
    border-color: var(--primary);
    transform: translateY(-3px);
}

.dest-item:hover img,
.dest-item:focus-visible img {
    filter: brightness(0.75);
    transform: scale(1.05);
}

.dest-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.dest-item span {
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.85rem;
    z-index: 1;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
}

/* Lookbook — one cinematic stage per door */
.atelier {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: #050505;
    scroll-margin-top: 0;
    overflow-x: hidden;
    overflow-x: clip;
}

.atelier-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: min(78svh, 860px);
    overflow: hidden;
    scroll-margin-top: 0;
}

.atelier-visual {
    --ax: 0px;
    --ay: 0px;
    position: absolute;
    inset: -3%;
    transform: translate3d(var(--ax), var(--ay), 0);
    transition: transform 0.5s ease-out;
}

.atelier-visual__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 0.7s ease;
    filter: brightness(0.55) saturate(1.05);
}

.atelier-visual__img.is-active {
    opacity: 1;
}

.atelier.is-entering .atelier-visual__img.is-active {
    animation: atelierEnter 1.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes atelierEnter {
    from {
        opacity: 0;
        transform: scale(1.16);
        filter: brightness(0.2) saturate(1.05);
    }

    to {
        opacity: 1;
        transform: scale(1);
        filter: brightness(0.55) saturate(1.05);
    }
}

.atelier-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 5, 5, 0.82) 0%, rgba(5, 5, 5, 0.42) 42%, rgba(5, 5, 5, 0.12) 100%),
        linear-gradient(to top, rgba(5, 5, 5, 0.88) 0%, transparent 38%);
    pointer-events: none;
}

.atelier-panel {
    position: relative;
    z-index: 2;
    width: calc(100% - var(--page-gutter) - var(--page-gutter));
    max-width: var(--content-max);
    margin: 0 auto;
    padding: clamp(6.5rem, 12svh, 8.5rem) 0 8rem;
}

.atelier-panel > * {
    max-width: 36rem;
}

.atelier-index {
    font-family: var(--font-heading);
    color: var(--primary);
    letter-spacing: 0.12em;
    font-size: 0.95rem;
    margin: 0 0 1rem;
}

.atelier-title {
    font-size: clamp(2.4rem, 5.5vw, 4.4rem);
    line-height: 1.05;
    min-height: 2.2em;
    margin-bottom: 1.25rem;
}

.atelier-body {
    color: #d8d8d8;
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 34rem;
    min-height: 5.1em;
}

.atelier-body p + p,
.atelier-list {
    margin-top: 1rem;
}

.atelier-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1.25rem;
    padding: 0;
}

.atelier-list li {
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.78rem;
    font-weight: 600;
}

.atelier-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.atelier-arrow {
    position: absolute;
    top: 46%;
    z-index: 3;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(212, 169, 89, 0.45);
    background: rgba(10, 10, 10, 0.35);
    color: var(--primary);
    display: grid;
    place-items: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: 0.3s ease;
}

.atelier-arrow svg {
    width: 22px;
    height: 22px;
}

.atelier-arrow:hover,
.atelier-arrow:focus-visible {
    background: var(--primary);
    color: var(--dark);
    border-color: var(--primary);
}

.atelier-arrow:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.atelier-nav {
    display: contents;
}

.atelier-prev {
    left: max(1.5rem, calc((100% - var(--rail-max)) / 2 + 1rem));
}

.atelier-next {
    right: max(1.5rem, calc((100% - var(--rail-max)) / 2 + 1rem));
}

/* When there is no side lane outside the content, keep both controls together
   on the empty side of the image instead of covering the destination copy. */
@media (min-width: 769px) and (max-width: 132rem) {
    .atelier-prev {
        left: auto;
        right: 5rem;
    }

    .atelier-next {
        right: 1rem;
    }
}

.atelier-rail-wrap {
    --atelier-card-w: 138px;
    --atelier-card-h: calc(var(--atelier-card-w) * 4 / 3);
    position: relative;
    z-index: 2;
    width: calc(100% - var(--page-gutter) - var(--page-gutter));
    max-width: var(--rail-max);
    margin: -5.5rem auto 0;
    padding: 0 0 1.75rem;
    min-height: calc(var(--atelier-card-h) + 1.3rem + 4px);
    overflow: hidden;
}

.atelier-rail {
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.5rem;
    padding: 0.4rem 0.15rem 0.9rem;
    scrollbar-width: none;
}

.atelier-rail::-webkit-scrollbar {
    display: none;
    height: 0;
}

.atelier-scrollbar {
    position: absolute;
    right: 0.15rem;
    bottom: 0.55rem;
    left: 0.15rem;
    height: 5px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.16);
    cursor: pointer;
    touch-action: none;
}

.atelier-scrollbar__thumb {
    display: block;
    width: 25%;
    min-width: 48px;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #b8913f, #e0bb76);
    box-shadow: 0 0 10px rgba(212, 169, 89, 0.35);
    transform: translate3d(0, 0, 0);
    cursor: grab;
}

.atelier-scrollbar:active .atelier-scrollbar__thumb {
    cursor: grabbing;
}

.atelier-scrollbar.is-disabled {
    opacity: 0.5;
    cursor: default;
}

.atelier-scrollbar:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}

.atelier-card {
    appearance: none;
    position: relative;
    flex: 0 0 var(--atelier-card-w);
    width: var(--atelier-card-w);
    height: var(--atelier-card-h);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    background: #111;
    color: #fff;
    cursor: pointer;
    scroll-snap-align: center;
    transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.atelier-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.55);
    transition: transform 0.6s ease, filter 0.35s ease;
}

.atelier-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 5, 5, 0.9) 0%, transparent 55%);
}

.atelier-card span {
    position: absolute;
    left: 0.65rem;
    right: 0.55rem;
    bottom: 0.6rem;
    z-index: 1;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    line-height: 1.2;
    text-align: left;
}

.atelier-card.is-current {
    border-color: var(--primary);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
    transform: translateY(-6px) scale(1.03);
    z-index: 1;
}

.atelier-card.is-current img,
.atelier-card:hover img {
    filter: brightness(0.78);
    transform: scale(1.06);
}

@media (hover: hover) and (pointer: fine) {
    .atelier-card:hover {
        transform: translateY(-4px) scale(1.02);
    }

    .atelier-card.is-current:hover {
        transform: translateY(-6px) scale(1.03);
    }
}

.atelier-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg__glimpse,
    .atelier-visual__img,
    .atelier.is-entering .atelier-visual__img.is-active {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* House — six organ pipes. Not a book, not a rail. */
.house {
    --house-ease: var(--transition);
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    background: #030303;
    scroll-margin-top: 0;
    overflow: hidden;
}

.house-legend {
    position: absolute;
    top: clamp(5.6rem, 11svh, 7.4rem);
    left: 4.2%;
    z-index: 6;
    max-width: 22rem;
    pointer-events: none;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.55s var(--house-ease), transform 0.7s var(--house-ease);
    text-shadow: 0 10px 40px rgba(0, 0, 0, 0.75);
}

.house-legend h2 {
    font-size: clamp(2.1rem, 4.4vw, 3.6rem);
    line-height: 1.05;
    margin: 0.35rem 0 0.85rem;
}

.house-legend__hint {
    color: #d0d0d0;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.house-legend__hint em {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--primary);
    font-weight: 700;
}

.house.has-active .house-legend {
    opacity: 0;
    transform: translate3d(0, -18px, 0);
}

.house-floor {
    display: flex;
    width: 100%;
    max-width: var(--stage-max);
    margin: 0 auto;
    height: 100vh;
    height: 100svh;
    isolation: isolate;
    scroll-margin-top: 0;
}

.house-pipe {
    --px: 0px;
    --py: 0px;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
    color: #fff;
    outline: none;
    box-shadow: inset -1px 0 0 rgba(212, 169, 89, 0.18);
    contain: paint;
    transition:
        flex-grow 0.68s var(--house-ease),
        box-shadow 0.35s ease;
}

.house-pipe:last-child {
    box-shadow: none;
}

.house.has-active .house-pipe:not(.is-active) {
    flex-grow: 0.58;
    min-width: 5.1rem;
}

.house-pipe.is-active {
    flex-grow: 5.4;
    z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(212, 169, 89, 0.42);
}

.house-pipe__media {
    position: absolute;
    inset: -8%;
    background: #030303;
}

.house-pipe__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.46;
    transform: scale(1.18) translate3d(var(--px), var(--py), 0);
    backface-visibility: hidden;
    transition: opacity 0.35s ease, transform 0.72s var(--house-ease);
}

.house-pipe.is-active .house-pipe__media img {
    opacity: 0.72;
    transform: scale(1.05) translate3d(var(--px), var(--py), 0);
}

.house-pipe__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(3, 3, 3, 0.22) 0%, transparent 28%, rgba(3, 3, 3, 0.55) 72%, rgba(3, 3, 3, 0.88) 100%),
        linear-gradient(90deg, rgba(3, 3, 3, 0.55) 0%, transparent 42%);
    transition: opacity 0.6s ease;
}

.house-pipe.is-active .house-pipe__shade {
    background:
        linear-gradient(180deg, rgba(3, 3, 3, 0.12) 0%, transparent 34%, rgba(3, 3, 3, 0.42) 68%, rgba(3, 3, 3, 0.82) 100%),
        linear-gradient(90deg, rgba(3, 3, 3, 0.38) 0%, transparent 55%);
}

.house-pipe__grain {
    display: none;
}

.house-pipe__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(28rem circle at 50% 42%, rgba(212, 169, 89, 0.18), transparent 52%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

.house-pipe.is-active .house-pipe__glow {
    opacity: 1;
}

.house-pipe__rule {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--primary) 18%, var(--primary) 82%, transparent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.85s var(--house-ease) 0.05s;
}

.house-pipe.is-active .house-pipe__rule {
    transform: scaleY(1);
}

.house-pipe__no {
    position: absolute;
    right: 0.15rem;
    bottom: -0.12em;
    z-index: 2;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(4.2rem, 8.6vw, 9.2rem);
    line-height: 0.78;
    color: transparent;
    -webkit-text-stroke: 1px rgba(212, 169, 89, 0.28);
    letter-spacing: -0.04em;
    pointer-events: none;
    transition: color 0.55s ease, font-size 0.8s var(--house-ease), -webkit-text-stroke-color 0.55s ease, transform 0.7s var(--house-ease), opacity 0.4s ease;
}

.house.has-active .house-pipe:not(.is-active) .house-pipe__no {
    font-size: clamp(2.4rem, 3.2vw, 3.2rem);
    opacity: 0.55;
}

.house-pipe.is-active .house-pipe__no {
    font-size: clamp(5.4rem, 9vw, 9.2rem);
    color: rgba(212, 169, 89, 0.16);
    -webkit-text-stroke-color: rgba(212, 169, 89, 0.7);
    transform: translate3d(-8%, -6%, 0);
}

.house-pipe__spine {
    position: absolute;
    left: 0.95rem;
    bottom: 1.7rem;
    z-index: 3;
    margin: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-heading);
    font-size: clamp(0.95rem, 1.15vw, 1.15rem);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #f3ead8;
    transition: opacity 0.4s ease, letter-spacing 0.7s var(--house-ease), transform 0.7s var(--house-ease);
}

.house-pipe.is-active .house-pipe__spine {
    opacity: 0;
    letter-spacing: 0.62em;
    transform: rotate(180deg) translateY(-18px);
}

.house-pipe__copy {
    position: absolute;
    left: clamp(1.6rem, 4vw, 3.4rem);
    right: 8%;
    bottom: 11%;
    z-index: 4;
    max-width: 28rem;
    opacity: 0;
    transform: translate3d(-28px, 10px, 0);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.house-pipe.is-active .house-pipe__copy {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition:
        opacity 0.55s ease 0.18s,
        transform 0.75s var(--house-ease) 0.12s;
}

.house-pipe__kicker {
    display: block;
    color: var(--primary);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 600;
    margin-bottom: 0.65rem;
}

.house-pipe__copy h3 {
    font-size: clamp(1.85rem, 3.4vw, 3.15rem);
    line-height: 1.05;
    margin-bottom: 0.85rem;
    clip-path: inset(0 100% 0 0);
}

.house-pipe.is-active .house-pipe__copy h3 {
    animation: houseReveal 0.85s var(--house-ease) 0.16s both;
}

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

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

.house-pipe__copy p {
    color: #e4e4e4;
    font-size: 1.02rem;
    line-height: 1.65;
    margin-bottom: 1.1rem;
}

.house-pipe__copy ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.1rem;
    padding: 0;
    margin: 0 0 1.4rem;
}

.house-pipe__copy li {
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(10px);
}

.house-pipe.is-active .house-pipe__copy li {
    animation: houseLine 0.5s ease forwards;
}

.house-pipe.is-active .house-pipe__copy li:nth-child(1) {
    animation-delay: 0.28s;
}

.house-pipe.is-active .house-pipe__copy li:nth-child(2) {
    animation-delay: 0.38s;
}

.house-pipe.is-active .house-pipe__copy li:nth-child(3) {
    animation-delay: 0.48s;
}

@keyframes houseLine {
    to {
        opacity: 1;
        transform: none;
    }
}

.house-pipe__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #fff;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(212, 169, 89, 0.55);
    padding-bottom: 0.28rem;
    transition: color 0.3s ease, border-color 0.3s ease, letter-spacing 0.35s ease;
}

.house-pipe__cta::after {
    content: '→';
    color: var(--primary);
    transition: transform 0.35s var(--house-ease);
}

.house-pipe__cta:hover,
.house-pipe__cta:focus-visible {
    color: var(--primary);
    border-color: var(--primary);
}

.house-pipe__cta:hover::after,
.house-pipe__cta:focus-visible::after {
    transform: translateX(6px);
}

.house-pipe:focus-visible {
    z-index: 3;
}

.house-legend {
    animation: houseLegendIn 1s var(--house-ease) both;
}

.house.is-inview .house-pipe,
.house.is-entering .house-pipe {
    animation: houseRise 0.95s var(--house-ease) both;
}

.house.is-inview .house-pipe:nth-child(1),
.house.is-entering .house-pipe:nth-child(1) {
    animation-delay: 0.04s;
}

.house.is-inview .house-pipe:nth-child(2),
.house.is-entering .house-pipe:nth-child(2) {
    animation-delay: 0.12s;
}

.house.is-inview .house-pipe:nth-child(3),
.house.is-entering .house-pipe:nth-child(3) {
    animation-delay: 0.2s;
}

.house.is-inview .house-pipe:nth-child(4),
.house.is-entering .house-pipe:nth-child(4) {
    animation-delay: 0.28s;
}

.house.is-inview .house-pipe:nth-child(5),
.house.is-entering .house-pipe:nth-child(5) {
    animation-delay: 0.36s;
}

.house.is-inview .house-pipe:nth-child(6),
.house.is-entering .house-pipe:nth-child(6) {
    animation-delay: 0.44s;
}

@keyframes houseRise {
    from {
        transform: translate3d(0, 10%, 0);
        opacity: 0.2;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .house-legend {
        position: relative;
        top: auto;
        left: auto;
        padding: 5.8rem var(--page-gutter) 1rem;
        max-width: none;
        opacity: 1 !important;
        transform: none !important;
    }

    .house-legend h2 {
        font-size: clamp(1.85rem, 8vw, 2.45rem);
        margin: 0.2rem 0 0.45rem;
    }

    .house-legend__hint {
        display: none;
    }

    .house {
        min-height: 0;
    }

    .house-floor {
        flex-direction: column;
        height: auto;
    }

    .house-pipe {
        flex: 0 0 auto;
        height: 4.6rem;
        min-height: 4.6rem;
        box-shadow: inset 0 -1px 0 rgba(212, 169, 89, 0.18);
        transition: height 0.6s var(--house-ease), box-shadow 0.3s ease;
    }

    .house.has-active .house-pipe:not(.is-active) {
        flex-grow: 0;
        height: 4.4rem;
        min-height: 4.4rem;
    }

    .house-pipe.is-active {
        flex-grow: 0;
        height: auto;
        min-height: 22rem;
    }

    .house-pipe__spine {
        writing-mode: horizontal-tb;
        transform: none;
        left: var(--page-gutter);
        bottom: 1rem;
        letter-spacing: 0.22em;
    }

    .house-pipe.is-active .house-pipe__spine {
        display: none;
    }

    .house-pipe__no {
        font-size: 2.6rem;
        right: 0.8rem;
        bottom: 0.15rem;
    }

    .house-pipe__copy {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        max-width: none;
        padding: 2.4rem var(--page-gutter) 1.3rem;
    }

    .house-pipe:not(.is-active) .house-pipe__media img {
        opacity: 0.62;
    }

    .house-pipe__copy h3 {
        font-size: clamp(1.55rem, 7vw, 2.1rem);
    }

    .house-pipe:not(.is-active) .house-pipe__copy {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .house-pipe,
    .house-pipe__media img,
    .house-pipe__copy,
    .house-pipe__spine,
    .house-pipe__no,
    .house-pipe__rule,
    .house-pipe__glow,
    .house-legend {
        transition: none !important;
        animation: none !important;
    }

    .house.is-inview .house-pipe,
    .house.is-entering .house-pipe,
    .house-pipe.is-active .house-pipe__media img,
    .house-pipe.is-active .house-pipe__copy h3,
    .house-pipe.is-active .house-pipe__copy li {
        animation: none !important;
    }

    .house-pipe__media img,
    .house-pipe.is-active .house-pipe__media img {
        transform: none;
    }

    .house-pipe__copy h3 {
        clip-path: none;
    }

    .house-pipe__copy li {
        opacity: 1;
        transform: none;
    }
}

/* Repertoire — one night, three movements. Not a rail, not a house. */
.repertoire {
    --rep-ease: var(--transition);
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    background: #050505;
    scroll-margin-top: 0;
    overflow: hidden;
}

.repertoire-stage {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    scroll-margin-top: 0;
}

.repertoire-visual {
    --px: 52%;
    --py: 42%;
    position: absolute;
    inset: 0;
}

.repertoire-visual__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--px) var(--py);
    opacity: 0;
    filter: brightness(0.5) saturate(0.95);
    transform: scale(1.12);
    transition: opacity 0.85s var(--rep-ease), filter 0.8s ease, object-position 1.2s var(--rep-ease), transform 8s linear;
}

.repertoire-visual__img.is-shown {
    opacity: 1;
}

.repertoire[data-mood="acts"] .repertoire-visual__img.is-shown {
    filter: brightness(0.58) saturate(1.06);
}

.repertoire[data-mood="tours"] .repertoire-visual__img.is-shown {
    filter: brightness(0.5) saturate(0.82) contrast(1.1);
}

.repertoire[data-mood="team"] .repertoire-visual__img.is-shown {
    filter: brightness(0.62) saturate(1.08);
}

.repertoire.is-inview .repertoire-visual__img.is-shown,
.repertoire.is-entering .repertoire-visual__img.is-shown {
    transform: scale(1.04);
}

.repertoire-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0.72) 38%, rgba(5, 5, 5, 0.18) 72%, rgba(5, 5, 5, 0.35) 100%),
        linear-gradient(180deg, rgba(5, 5, 5, 0.35) 0%, transparent 28%, rgba(5, 5, 5, 0.55) 100%);
    pointer-events: none;
}

.repertoire-grain {
    position: absolute;
    inset: 0;
    opacity: 0.14;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.repertoire-bill {
    position: relative;
    z-index: 2;
    width: calc(100% - var(--page-gutter) - var(--page-gutter));
    max-width: var(--content-max);
    margin: 0 auto;
    padding: clamp(6.5rem, 12svh, 8.5rem) 0 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
}

.repertoire-bill > .subtitle,
.repertoire-bill > .repertoire-kicker,
.repertoire-bill > .repertoire-lead,
.repertoire-bill > .repertoire-copy,
.repertoire-bill > .repertoire-acts {
    width: min(42rem, 100%);
}

.repertoire-kicker {
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    line-height: 1.08;
    margin: 0.3rem 0 1rem;
}

.repertoire-lead {
    color: #d2d2d2;
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 32rem;
    margin-bottom: 1.8rem;
}

.repertoire-copy {
    position: relative;
    min-height: 13.5rem;
    margin-bottom: 0.4rem;
}

.repertoire-panel {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.repertoire-panel.is-current {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.repertoire-panel h3 {
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    line-height: 1.1;
    min-height: 1.2em;
    margin: 0 0 0.75rem;
}

.repertoire-panel p {
    color: #dedede;
    font-size: 1.02rem;
    line-height: 1.65;
    margin: 0 0 0.9rem;
    max-width: 30rem;
    min-height: 3.3em;
}

.repertoire-panel ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.1rem;
    padding: 0;
    margin: 0;
    min-height: 1.2em;
}

.repertoire-panel li {
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.72rem;
    font-weight: 600;
}

.repertoire-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.4rem;
    padding: 1.15rem 0 0;
    border-top: 1px solid rgba(212, 169, 89, 0.28);
}

.repertoire-act {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(212, 169, 89, 0.28);
    color: #d8d8d8;
    font: inherit;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    line-height: 1;
    min-height: 2.75rem;
    padding: 0.75rem 1rem 0.7rem;
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.repertoire-act span {
    color: var(--primary);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
}

.repertoire-act.is-current,
.repertoire-act:hover,
.repertoire-act:focus-visible {
    color: #fff;
    border-color: var(--primary);
    background: rgba(212, 169, 89, 0.08);
}

.repertoire-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    align-self: flex-start;
    margin-top: 2rem;
    color: #fff;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(212, 169, 89, 0.55);
    padding-bottom: 0.28rem;
    transition: color 0.3s ease, border-color 0.3s ease, letter-spacing 0.35s ease;
}

.repertoire-cta::after {
    content: '→';
    color: var(--primary);
    transition: transform 0.35s var(--rep-ease);
}

.repertoire-cta:hover,
.repertoire-cta:focus-visible {
    color: var(--primary);
    border-color: var(--primary);
}

.repertoire-cta:hover::after,
.repertoire-cta:focus-visible::after {
    transform: translateX(6px);
}

.repertoire-act:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}

@media (max-width: 900px) {
    .editorial-intro {
        padding: 6.5rem var(--page-gutter) 3.5rem;
    }

    .editorial-intro__inner {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .editorial-intro__heading h2 {
        font-size: clamp(2rem, 7.5vw, 3rem);
    }

    .editorial-intro__copy {
        margin-top: 0;
        padding: 1.4rem 0 0;
        border-top: 1px solid rgba(212, 169, 89, 0.42);
        border-left: 0;
        line-height: 1.75;
    }

    .repertoire {
        min-height: 0;
        overflow-x: hidden;
        overflow-x: clip;
        overflow-y: visible;
    }

    .repertoire-visual {
        position: relative;
        height: 12.5rem;
        min-height: 220px;
    }

    .repertoire-veil {
        background:
            linear-gradient(180deg, transparent 35%, rgba(5, 5, 5, 0.55) 100%),
            linear-gradient(90deg, rgba(5, 5, 5, 0.25), transparent 50%);
    }

    .repertoire-bill {
        width: 100%;
        max-width: none;
        margin: 0;
        min-height: 0;
        padding: 1.8rem var(--page-gutter) 3.2rem;
    }

    .repertoire-bill > .subtitle,
    .repertoire-bill > .repertoire-kicker,
    .repertoire-bill > .repertoire-lead,
    .repertoire-bill > .repertoire-copy,
    .repertoire-bill > .repertoire-acts {
        width: 100%;
    }

    .repertoire-kicker {
        font-size: clamp(1.7rem, 7vw, 2.3rem);
    }

    .repertoire-lead {
        margin-bottom: 1.4rem;
    }

    .repertoire-copy {
        min-height: 0;
    }

    .repertoire-panel {
        position: relative;
        inset: auto;
        display: none;
    }

    .repertoire-panel.is-current {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .repertoire-kicker {
        overflow-wrap: break-word;
        line-height: 1.15;
    }

    .repertoire-panel ul {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .repertoire-acts {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .repertoire-act {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.65rem;
        min-width: 0;
        width: 100%;
        min-height: 2.85rem;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        text-align: left;
    }

    .repertoire-act span {
        font-size: 0.72rem;
        flex: 0 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .repertoire-visual__img,
    .repertoire-panel,
    .repertoire-cta {
        transition: none !important;
        transform: none !important;
    }
}

/* Activities cards — kept for design-system surfaces */
.activities-flex {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2.5rem;
    margin-bottom: 2rem;
}

.act-card {
    border-left: 2px solid var(--primary);
    padding-left: 2rem;
    transition: 0.4s var(--transition);
    cursor: default;
}

.act-card:hover {
    border-left-width: 6px;
    padding-left: 2.5rem;
    background: rgba(212, 169, 89, 0.05);
}

.act-card h5 {
    font-family: var(--font-main);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--primary);
    transition: 0.3s var(--transition);
}

.act-card:hover h5 {
    filter: brightness(1.2);
    transform: translateX(5px);
}

.act-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
    transition: 0.3s var(--transition);
}

.act-card:hover p {
    color: var(--text);
    transform: translateX(5px);
}

/* Work List */
.way-we-work-box {
    background: var(--gray-dark);
    padding: clamp(2.5rem, 3vw, 4rem);
    border-radius: var(--radius);
}

.work-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 4rem;
    margin-top: 4rem;
}

.work-list li {
    padding-left: 4.5rem;
    position: relative;
    font-size: 1.15rem;
    min-height: 48px;
    display: flex;
    align-items: center;
    transition: 0.3s var(--transition);
}

.work-list li:hover {
    color: var(--primary);
}

.work-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.5s var(--transition);
    filter: drop-shadow(0 0 10px rgba(212, 169, 89, 0.1));
    animation: iconFloat 4s ease-in-out infinite;
}

.work-list li:nth-child(even)::before {
    animation-delay: -2s;
}

.work-list li:hover::before {
    transform: translateY(-50%) scale(1.15) rotate(5deg);
    filter: drop-shadow(0 0 15px rgba(212, 169, 89, 0.4));
}

@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(-50%);
    }

    50% {
        transform: translateY(-65%);
    }
}

.work-list li.hour::before {
    background-image: url('img/icons/hour.webp');
}

.work-list li.creative::before {
    background-image: url('img/icons/creative.webp');
}

.work-list li.budget::before {
    background-image: url('img/icons/budget.webp');
}

.work-list li.komunikace::before {
    background-image: url('img/icons/komunikace.webp');
}

.work-list li.management::before {
    background-image: url('img/icons/management.webp');
}

.work-list li.delegation::before {
    background-image: url('img/icons/delegation.webp');
}

/* Contact Form */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: clamp(3rem, 3vw, 4rem);
    background: #111;
    padding: clamp(2.5rem, 3vw, 4rem);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.info-list {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.info-item strong {
    display: block;
    color: var(--primary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

.info-item p {
    font-size: 1.1rem;
}

.info-item a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}

.info-item a:hover,
.info-item a:focus-visible {
    color: var(--primary);
}

.info-item p,
.info-item a,
.footer-brand p,
.footer-bottom p,
.footer-legal a {
    overflow-wrap: anywhere;
}

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

.form-group.full-width {
    grid-column: span 2;
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.8rem;
    color: var(--text-muted);
}

.form-status {
    margin: 0 0 1.5rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(212, 169, 89, 0.35);
    color: var(--text);
    background: rgba(212, 169, 89, 0.08);
}

.form-status.is-error {
    border-color: rgba(220, 80, 80, 0.45);
    background: rgba(220, 80, 80, 0.08);
}

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--text);
    padding: 1rem 1.1rem;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1rem;
    transition: 0.3s;
    appearance: none;
}

.form-group select {
    background-image: linear-gradient(45deg, transparent 50%, var(--primary) 50%), linear-gradient(135deg, var(--primary) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.4rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.form-footer {
    margin-top: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

.checkbox-container input {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
}

/* News Grid */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
    align-items: stretch;
}

.news-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 2rem 1.75rem 1.75rem;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
}

.news-item__copy {
    flex: 1 1 auto;
    margin-bottom: 1.75rem;
}

.news-item h4 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    line-height: 1.25;
    margin: 0 0 0.85rem;
}

.news-item p {
    color: var(--text-muted);
    margin: 0;
}

.news-item .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: auto;
    min-height: 2.75rem;
    box-sizing: border-box;
}

/* Custom Dropdown */
.custom-dropdown {
    position: relative;
    width: 100%;
    user-select: none;
}

.dropdown-header {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.2rem 1.5rem;
    border-radius: var(--radius);
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

.dropdown-header:hover {
    border-color: var(--primary);
}

.dropdown-arrow {
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(45deg);
    transition: 0.3s var(--transition);
    margin-bottom: 4px;
}

.custom-dropdown.active .dropdown-arrow {
    transform: rotate(-135deg);
    margin-bottom: -4px;
}

.dropdown-list {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    background: #1a1a1a;
    border: 1px solid rgba(212, 169, 89, 0.2);
    border-radius: var(--radius);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: 0.3s var(--transition);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.custom-dropdown.active .dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-option {
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: 0.2s;
    color: var(--text-muted);
}

.dropdown-option:hover {
    background: rgba(212, 169, 89, 0.1);
    color: var(--primary);
}

.dropdown-option.selected {
    color: var(--primary);
    background: rgba(212, 169, 89, 0.05);
}

/* Animations */
@keyframes imageReveal {
    from {
        opacity: 0;
        transform: scale(1.1);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroReveal {
    from {
        transform: scale(1.08);
    }

    to {
        transform: scale(1);
    }
}

.flex-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 4rem;
}

.news-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.archive-trigger {
    margin-top: 0;
}

.util-trigger {
    cursor: pointer;
    text-decoration: none;
    transition: 0.3s;
}

.util-trigger:hover {
    filter: brightness(1.2);
}

/* Modal & Morphing Animations */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(15px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s var(--transition);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-container {
    background: rgba(15, 15, 15, 0.95);
    width: 90%;
    max-width: 800px;
    padding: 3rem 3rem 1.5rem;
    /* Reduced bottom padding */
    border-radius: var(--radius);
    border: 1px solid rgba(212, 169, 89, 0.2);
    position: relative;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.6s var(--transition), opacity 0.4s ease;
    max-height: 90vh;
    max-height: 90svh;
    max-height: 90dvh;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* Custom Scrollbar for Modal */
.modal-container::-webkit-scrollbar {
    width: 6px;
}

.modal-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius);
}

.modal-container::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: var(--radius);
}

.modal-container::-webkit-scrollbar-thumb:hover {
    background: #b8913f;
}

.modal-overlay.active .modal-container {
    transform: scale(1);
    opacity: 1;
}

.modal-overlay.closing .modal-container {
    transform: translateY(100vh) scale(0.9);
    opacity: 0;
    transition: transform 0.3s var(--transition), opacity 0.2s ease;
}

.modal-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
    z-index: 10;
}

.modal-close:hover {
    background: var(--primary);
    color: var(--dark);
    transform: rotate(90deg);
}

.modal-content h2 {
    margin-top: 1rem;
    font-size: 3rem;
}

.modal-body {
    margin: 2rem 0 1rem;
    /* Reduced bottom margin */
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.8;
}

.modal-body p {
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
}

.modal-overlay.active .modal-body p {
    animation: slideUpFade 0.6s forwards;
}

.modal-overlay.active .modal-body p:nth-child(1) {
    animation-delay: 0.2s;
}

.modal-overlay.active .modal-body p:nth-child(2) {
    animation-delay: 0.3s;
}

.modal-overlay.active .modal-body p:nth-child(3) {
    animation-delay: 0.4s;
}

.modal-footer {
    display: flex;
    justify-content: flex-start;
}

@keyframes slideUpFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Morphing Trigger Styles */
.morph-origin {
    position: fixed;
    background: var(--primary);
    z-index: 1999;
    border-radius: var(--radius);
    transition: all 0.6s var(--transition);
    pointer-events: none;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    /* decorative only — must never intercept the hover of a tile that grows past it */
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Belt and braces: even on a short viewport the indicator steps aside for an open tile */
.hero:has(.hero-tile:hover) .scroll-indicator,
.hero:has(.hero-tile:focus-visible) .scroll-indicator {
    opacity: 0;
    transform: translateX(-50%) translateY(14px);
}

.mouse {
    width: 26px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 13px;
    position: relative;
}

.mouse::after {
    content: '';
    width: 2px;
    height: 8px;
    background: var(--text);
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll 2s infinite;
}

@keyframes scroll {
    0% {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 20px);
        opacity: 0;
    }
}

/* Footer */
.footer {
    padding: 8rem 0 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 6rem;
}

.footer-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    max-width: 100%;
}

.footer-logo-img {
    height: 64px;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

.footer-brand p {
    color: var(--text-muted);
    margin: 1.5rem 0 2rem;
    max-width: 300px;
    font-size: 0.95rem;
}

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

.footer-social a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    position: relative;
    padding-bottom: 2px;
}

.footer-social a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--primary);
    transition: 0.3s;
}

.footer-social a:hover {
    color: var(--primary);
}

.footer-social a:hover::after {
    width: 100%;
}

.footer-col h3 {
    font-family: var(--font-main);
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-bottom: 2rem;
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.footer-col ul li a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    transition: 0.3s;
    display: inline-block;
}

.footer-col ul li a:hover {
    color: var(--primary);
    transform: translateX(5px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.footer-legal {
    display: flex;
    gap: 2rem;
    padding-right: 4.5rem;
}

.footer-legal a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: 0.3s;
    position: relative;
}

.footer-legal a:hover {
    color: var(--primary);
}

.site-credit {
    padding: 2rem 0 0.5rem;
    text-align: center;
    line-height: 1;
}

.site-credit a {
    display: inline-block;
    padding: 0.5rem;
    color: #201e1a;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-decoration: none;
}

.site-credit a:hover,
.site-credit a:focus-visible {
    color: var(--primary);
}

.site-credit a:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 3px;
}

/* Utility Modal Refinements */
#utility-modal .modal-container {
    max-width: 600px;
}

#utility-modal .modal-body {
    padding-bottom: 2rem;
}

/* News Archive Styles */
.archive-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
}

.archive-item {
    border-left: 2px solid rgba(212, 169, 89, 0.2);
    padding-left: 2rem;
    transition: 0.3s;
}

.archive-item:hover {
    border-color: var(--primary);
}

.archive-item strong {
    display: block;
    color: var(--primary);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
}

.archive-item p {
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* Business Content Styling */
.modal-body h3 {
    color: var(--primary);
    font-size: 1.2rem;
    margin: 2rem 0 1rem;
    font-family: var(--font-heading);
    opacity: 0;
    transform: translateY(20px);
}

.modal-overlay.active .modal-body h3 {
    animation: slideUpFade 0.6s forwards;
    animation-delay: 0.3s;
}

.modal-body em {
    color: var(--primary);
    font-style: normal;
}

.modal-body .made-by {
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-top: 0.5rem;
}

.modal-body .made-by strong {
    color: var(--primary);
    font-weight: 600;
}

.modal-body .made-by a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.modal-body .made-by a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 1200px) {
    .hero-tiles {
        --tile-w: 214px;
        --tile-h: 74px;
        --tile-w-open: 244px;
        --tile-h-open: clamp(140px, 23vh, 196px);
    }

    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .contact-wrapper {
        gap: 3rem;
        padding: 4rem;
    }

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

@media (max-width: 1100px) {
    .hero-tiles {
        --tile-w: 178px;
        --tile-h: 70px;
        --tile-w-open: 202px;
        --tile-h-open: clamp(136px, 22svh, 168px);
    }

    .navbar {
        padding: 1rem 0;
    }

    .burger {
        display: grid;
        place-items: center;
    }

    .nav-drawer {
        position: fixed;
        inset: 0;
        z-index: 1090;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        min-height: 100svh;
        padding: calc(6.5rem + env(safe-area-inset-top)) var(--page-gutter) calc(2rem + env(safe-area-inset-bottom));
        background:
            linear-gradient(180deg, rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.97) 100%);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        transform: translate3d(100%, 0, 0);
        visibility: hidden;
        pointer-events: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: transform 0.5s var(--transition), visibility 0.5s;
    }

    .nav-drawer.is-open {
        transform: none;
        visibility: visible;
        pointer-events: auto;
    }

    .nav-drawer__kicker {
        display: block;
        margin: 0 0 1.25rem;
        color: var(--primary);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.28em;
        text-transform: uppercase;
    }

    .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: min(100%, 34rem);
        margin: 0 auto;
    }

    .nav-links li {
        opacity: 0;
        transform: translate3d(1.25rem, 0, 0);
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .nav-links li:last-child {
        border-bottom: 0;
    }

    .nav-drawer.is-open .nav-links li {
        animation: navLinkFade 0.5s var(--transition) both;
    }

    .nav-drawer.is-open .nav-links li:nth-child(1) { animation-delay: 0.08s; }
    .nav-drawer.is-open .nav-links li:nth-child(2) { animation-delay: 0.14s; }
    .nav-drawer.is-open .nav-links li:nth-child(3) { animation-delay: 0.2s; }
    .nav-drawer.is-open .nav-links li:nth-child(4) { animation-delay: 0.26s; }
    .nav-drawer.is-open .nav-links li:nth-child(5) { animation-delay: 0.32s; }
    .nav-drawer.is-open .nav-links li:nth-child(6) { animation-delay: 0.38s; }

    .nav-links a {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 1rem 0;
        font-family: var(--font-heading);
        font-size: clamp(2rem, 8vw, 3.1rem);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: 0;
        text-transform: none;
    }

    .nav-links a.btn-primary {
        width: auto;
        margin-top: 1.6rem;
        margin-bottom: 0.4rem;
        padding: 0.9rem 1.6rem;
        font-family: var(--font-main);
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        justify-content: center;
    }

    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

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

    .news-item {
        padding: 1.5rem 1.25rem 1.35rem;
    }

    .grid-2,
    .news-grid,
    .work-list,
    .contact-wrapper,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .grid-2 {
        gap: 2.5rem;
    }

    .way-we-work-box {
        padding: 2.25rem 1.5rem;
    }

    .work-list {
        gap: 2rem;
        margin-top: 2.5rem;
    }

    .image-box {
        aspect-ratio: 16 / 10;
    }

    .footer-grid {
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .footer-legal {
        flex-wrap: wrap;
        gap: 0.75rem 1.5rem;
        padding-right: 0;
    }

    .flex-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .archive-trigger {
        width: fit-content;
        text-align: center;
        margin-top: 1rem;
    }

    .logo-img {
        height: 50px;
        max-width: 100%;
        /* Smaller logo on mobile */
    }

    .footer-logo-img {
        height: 54px;
    }

    .logo-link {
        max-width: min(62vw, 230px);
    }

    .footer-logo-link {
        max-width: min(75vw, 260px);
    }

    .navbar.scrolled .logo-img {
        height: 40px;
    }

    .section {
        padding: 4rem 0;
        scroll-margin-top: 80px;
    }

    .modal-container {
        padding: 2rem;
        width: 95%;
    }

    .modal-content h2 {
        font-size: 2rem;
    }

    .modal-close {
        top: 1rem;
        right: 1rem;
    }

    .contact-wrapper {
        gap: 3rem;
        padding: 2rem;
    }

}

/* Below 768px three tiles can no longer share a row without wrapping 2+1,
   so they become a full-width stack. No hover here, so open size == closed size. */
@media (max-width: 768px) {
    .destinations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .atelier {
        min-height: 0;
    }

    .atelier-stage {
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .atelier-panel {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 6.2rem var(--page-gutter) 1.25rem;
    }

    .atelier-title {
        min-height: 1.15em;
        font-size: clamp(1.85rem, 8vw, 2.45rem);
        margin-bottom: 0.85rem;
    }

    .atelier-body {
        min-height: 0;
        font-size: 0.98rem;
    }

    .atelier-actions {
        margin-top: 1.25rem;
        gap: 0.9rem;
    }

    .atelier-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 3;
        padding: 0.15rem var(--page-gutter) 0.95rem;
    }

    .atelier-arrow {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        width: 42px;
        height: 42px;
    }

    .atelier-prev,
    .atelier-next {
        left: auto;
        right: auto;
    }

    .atelier-rail-wrap {
        --atelier-card-w: min(42vw, 148px);
        width: 100%;
        max-width: none;
        margin-top: 0;
        padding: 0 0 1.2rem;
        min-height: calc(var(--atelier-card-h) + 1.1rem + 4px);
    }

    .atelier-rail {
        padding-inline: var(--page-gutter);
        scroll-padding-inline: var(--page-gutter);
    }

    .atelier-scrollbar {
        right: var(--page-gutter);
        bottom: 0.5rem;
        left: var(--page-gutter);
    }

    .atelier-card {
        scroll-snap-align: center;
    }

    .hero-tiles {
        --tile-w: 100%;
        --tile-h: 70px;
        --tile-w-open: 100%;
        --tile-h-open: 70px;
        flex-direction: column;
        width: 100%;
        max-width: 420px;
        gap: 0.9rem;
        margin-top: 0.5rem;
    }

    .hero-tile {
        width: 100%;
    }

    .hero-tile__label {
        font-size: 0.9rem;
        letter-spacing: 2px;
    }

    .hero {
        /* the scroll indicator is hidden below 600px and nothing can open, so
           the reserved bottom lane is no longer needed */
        padding: 6rem var(--page-gutter) 4rem;
    }
}

/* Genuinely short viewports (landscape phones, short laptop windows). The open
   height is already handled by the clamp above; this is about the indicator and
   the closed button, which do not scale on their own. */
@media (min-width: 769px) and (max-height: 620px) {
    .hero-tiles {
        --tile-h: 64px;
        /* lower floor than the main clamp — a landscape phone has no room for 136px */
        --tile-h-open: clamp(104px, 26svh, 136px);
    }

    .scroll-indicator {
        display: none;
    }
}

@media (max-width: 600px) {
    .logo-link {
        max-width: min(64vw, 200px);
    }

    .logo-img {
        height: 44px;
    }

    .navbar.scrolled .logo-img {
        height: 36px;
    }

    .footer-logo-img {
        height: 48px;
    }

    .container {
        padding: 0;
    }

    .way-we-work-box {
        padding: 1.5rem var(--page-gutter);
    }

    .work-list li {
        padding-left: 3.75rem;
    }

    .work-list li::before {
        width: 40px;
        height: 40px;
    }

    .contact-wrapper {
        gap: 2rem;
        padding: 1.5rem var(--page-gutter);
    }

    .hero h1 {
        font-size: 2.5rem;
        /* Explicit smaller size for very small screens */
    }

    .hero-invite {
        font-size: 1.05rem;
        max-width: 18rem;
        margin-left: auto;
        margin-right: auto;
    }

    .btn-main,
    .btn-primary {
        width: 100%;
        text-align: center;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .service-card {
        padding: 2rem;
    }

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

    .form-group.full-width {
        grid-column: span 1;
    }

    .form-footer {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
    }

    .footer-col {
        text-align: left;
    }

    .destinations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .dest-item span {
        font-size: 0.92rem;
        left: 0.6rem;
        right: 0.6rem;
        bottom: 0.6rem;
    }

    .scroll-indicator {
        display: none;
    }

    .modal-container {
        width: 92%;
        padding: 1.25rem;
    }

    .modal-content h2 {
        font-size: 1.7rem;
    }

    .scroll-top-btn {
        right: 1rem;
        bottom: 1rem;
        bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* Scroll to Top Button */
.scroll-top-btn {
    position: fixed;
    bottom: 3rem;
    right: 3rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: 0.4s var(--transition);
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background: var(--primary);
    color: var(--dark);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(212, 169, 89, 0.3);
}

.scroll-top-btn svg {
    transition: 0.3s var(--transition);
}

.scroll-top-btn:hover svg {
    transform: translateY(-2px);
}

/* A fixed 50px control masks form fields and accordion controls on compact
   screens. Native page scrolling remains available, so remove the obstruction. */
@media (max-width: 2200px) {
    .scroll-top-btn {
        display: none;
    }
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Short viewports (landscape phones, small laptop windows): the hero headline
   would otherwise push the tiles below the fold, so tighten the type instead. */
@media (max-height: 620px) {
    .hero {
        /* the floors of the fluid padding are too generous down here; the fixed
           navbar is only ~82px tall at this size, so that is all the top needs */
        padding: 5.2rem var(--page-gutter) 1.5rem;
    }

    .hero h1 {
        font-size: clamp(1.9rem, 5.5vw, 2.9rem);
        margin-bottom: 0.6rem;
    }

    .hero p {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
    }

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

@media (max-height: 620px) and (max-width: 768px) {
    .hero-tiles {
        --tile-h: 56px;
        --tile-h-open: 56px;
        gap: 0.6rem;
    }

    .hero-tile__label {
        font-size: 0.8rem;
        letter-spacing: 1.5px;
    }
}

/* ==========================================================================
   About Us — heritage story, bronze medallion, approach & reasons
   ========================================================================== */

.about {
    position: relative;
    background: #080808;
    scroll-margin-top: 0;
}

.about h3 {
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: 1.06;
    margin-bottom: 1.75rem;
}

.about h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text);
}

/* Reveal — only armed once JS is known to be able to bring things back. */
.about.is-armed [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity 0.7s var(--transition) var(--d, 0s),
        transform 0.9s var(--transition) var(--d, 0s);
}

.about.is-armed [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* --- Story ------------------------------------------------------------- */

.about-story {
    position: relative;
    padding: clamp(5rem, 9vw, 8rem) var(--page-gutter);
    background:
        radial-gradient(ellipse 55% 60% at 22% 38%, rgba(212, 169, 89, 0.09), transparent 70%),
        #080808;
}

.about-story__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
    max-width: var(--editorial-max);
    margin: 0 auto;
}

.about-story__copy > p {
    max-width: 42rem;
    margin-bottom: 1.4rem;
    color: #cfcfcf;
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.85;
}

/* EP + Beyond */
.about-name {
    position: relative;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
    margin-top: clamp(1rem, 2vw, 2rem);
    padding: clamp(1.75rem, 3.5vw, 3.25rem);
    overflow: hidden;
    border: 1px solid rgba(212, 169, 89, 0.2);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(212, 169, 89, 0.08), rgba(255, 255, 255, 0.01) 55%);
}

.about-name::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 200, 0.07) 50%, transparent 65%);
    transform: translateX(-100%);
    transition: transform 1.4s var(--transition);
    pointer-events: none;
}

.about-name:hover::after {
    transform: translateX(100%);
}

.about-name__lead {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 2.1rem);
    line-height: 1.25;
    font-style: italic;
    color: #efefef;
}

.about-name__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.25rem);
}

.about-name__part--beyond {
    padding-left: clamp(1.5rem, 2.5vw, 2.25rem);
    border-left: 1px solid rgba(212, 169, 89, 0.25);
}

.about-name__word {
    display: block;
    margin-bottom: 0.9rem;
    font-family: var(--font-heading);
    font-size: clamp(3rem, 5vw, 4.6rem);
    font-weight: 700;
    /* The gradient paints only inside this box: leave room for italic descenders. */
    line-height: 1.2;
    padding-bottom: 0.08em;
    background: linear-gradient(135deg, #f4dea8 0%, #d4a959 45%, #9a7232 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.about-name__part--beyond .about-name__word {
    font-style: italic;
}

.about-name__part p {
    color: #bdbdbd;
    font-size: 0.97rem;
    line-height: 1.7;
}

.about-name__part strong {
    color: var(--primary);
    font-weight: 600;
}

/* --- Medallion stage --------------------------------------------------- */

.medal-stage {
    position: relative;
    display: grid;
    grid-template-columns: 100%;
    justify-items: center;
    align-self: center;
    width: 100%;
    max-width: min(30rem, 62vh);
    margin: 0 auto;
}

.medal-stage > * {
    grid-area: 1 / 1;
    align-self: center;
}

.medal-stage__aura {
    width: 100%;
    transform: scale(1.18);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 169, 89, 0.2) 0%, rgba(212, 169, 89, 0.06) 36%, transparent 66%);
    pointer-events: none;
}

.medal-stage__orbit {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    pointer-events: none;
}

.medal-stage__ring {
    fill: none;
    stroke: rgba(212, 169, 89, 0.45);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.medal-stage__ring--inner {
    stroke: rgba(212, 169, 89, 0.32);
}

.medal-stage__shadow {
    z-index: 1;
    width: 66%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.85) 30%, transparent 70%);
    filter: blur(18px);
    transform: translate3d(0, 22px, 0);
    will-change: transform;
    pointer-events: none;
}

.medal {
    --thick: 16px;
    position: relative;
    z-index: 2;
    display: block;
    width: 74%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    perspective: 1100px;
    -webkit-tap-highlight-color: transparent;
}

.medal:focus-visible {
    outline: 1px solid var(--primary);
    outline-offset: 14px;
}

.medal__body {
    position: absolute;
    inset: 0;
    display: block;
    transform-style: preserve-3d;
    will-change: transform;
}

.medal__face,
.medal__edge {
    position: absolute;
    inset: 0;
    display: block;
}

/* The medallion's own alpha cuts the faces; overlays and the edge are
   clipped to its traced outline (no mask images, so it renders everywhere). */
.medal {
    --medal-outline: polygon(99.1% 50.4%, 99.1% 52.5%, 99.0% 54.6%, 98.9% 56.8%, 98.6% 58.9%, 98.5% 61.1%, 97.8% 63.1%, 97.2% 65.2%, 96.5% 67.2%, 95.8% 69.2%, 94.8% 71.2%, 94.0% 73.1%, 92.7% 74.9%, 91.6% 76.7%, 90.6% 78.6%, 89.4% 80.4%, 87.8% 81.9%, 86.4% 83.5%, 84.9% 85.0%, 83.4% 86.5%, 81.7% 87.8%, 80.1% 89.2%, 78.3% 90.4%, 76.5% 91.6%, 74.7% 92.6%, 72.7% 93.5%, 70.9% 94.6%, 68.9% 95.4%, 66.8% 95.8%, 64.8% 96.6%, 62.8% 97.1%, 60.7% 97.5%, 58.7% 97.9%, 56.6% 98.1%, 54.5% 98.4%, 52.4% 98.6%, 50.3% 98.4%, 48.2% 98.5%, 46.1% 98.3%, 44.0% 97.8%, 41.9% 97.7%, 39.8% 97.5%, 37.8% 96.9%, 35.8% 96.2%, 33.8% 95.7%, 31.7% 95.1%, 29.8% 94.3%, 27.9% 93.4%, 26.1% 92.2%, 24.2% 91.3%, 22.3% 90.3%, 20.6% 89.0%, 18.9% 87.8%, 17.2% 86.4%, 15.7% 85.0%, 14.2% 83.4%, 12.7% 81.9%, 11.4% 80.2%, 10.2% 78.5%, 8.9% 76.7%, 7.8% 74.9%, 6.6% 73.1%, 5.8% 71.1%, 4.9% 69.2%, 4.1% 67.2%, 3.4% 65.2%, 2.7% 63.1%, 2.3% 61.0%, 1.9% 58.9%, 1.3% 56.8%, 1.1% 54.7%, 0.8% 52.5%, 0.8% 50.4%, 0.8% 48.2%, 1.0% 46.1%, 1.2% 43.9%, 1.7% 41.8%, 2.2% 39.7%, 3.0% 37.7%, 3.5% 35.6%, 4.3% 33.6%, 5.5% 31.8%, 6.2% 29.8%, 7.5% 28.1%, 8.6% 26.3%, 10.1% 24.8%, 11.3% 23.1%, 12.6% 21.4%, 14.2% 20.1%, 15.7% 18.7%, 16.8% 16.9%, 18.6% 15.8%, 20.2% 14.5%, 21.3% 12.6%, 22.3% 10.5%, 23.9% 9.0%, 25.8% 8.0%, 27.6% 6.8%, 29.5% 5.8%, 31.5% 5.1%, 33.5% 4.3%, 35.5% 3.5%, 37.6% 2.9%, 39.6% 2.3%, 41.8% 2.1%, 43.9% 1.7%, 46.0% 1.4%, 48.1% 1.3%, 50.3% 1.4%, 52.4% 1.3%, 54.6% 1.3%, 56.7% 1.5%, 58.8% 1.8%, 60.9% 2.3%, 63.0% 2.8%, 65.1% 3.4%, 67.2% 4.0%, 69.1% 4.9%, 71.1% 5.7%, 73.0% 6.8%, 74.9% 7.7%, 76.8% 8.8%, 78.5% 10.1%, 79.4% 12.4%, 80.7% 14.1%, 82.2% 15.5%, 83.9% 16.7%, 85.5% 18.1%, 87.0% 19.5%, 88.4% 21.1%, 89.6% 22.8%, 90.9% 24.5%, 92.0% 26.3%, 93.2% 28.0%, 94.2% 29.9%, 95.0% 31.8%, 96.1% 33.7%, 96.6% 35.8%, 97.2% 37.8%, 97.8% 39.8%, 98.4% 41.9%, 98.7% 44.0%, 98.9% 46.1%, 99.1% 48.2%);
}

.medal__edge,
.medal__relief,
.medal__sheen,
.medal__glare {
    -webkit-clip-path: var(--medal-outline);
    clip-path: var(--medal-outline);
}

.medal__face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(calc(var(--thick) / 2));
}

.medal__face--back {
    transform: rotateY(180deg) translateZ(calc(var(--thick) / 2));
}

.medal__face img {
    display: block;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Milled edge: silhouettes stacked between the faces give the coin depth. */
.medal__edge {
    background: linear-gradient(160deg, #c49a74 0%, #7a5440 38%, #3f2a1e 62%, #94705a 100%);
    transform: translateZ(calc(var(--z) * var(--thick)));
}

/* Directional glints — each layer lights the relief from one side. */
.medal__relief {
    position: absolute;
    inset: 0;
    background: url('img/about/medal-light.webp') no-repeat;
    background-size: 200% 200%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.medal__relief { opacity: 0.22; }
.medal__relief--l { background-position: 0 0; }
.medal__relief--r { background-position: 100% 0; }
.medal__relief--t { background-position: 0 100%; }
.medal__relief--b { background-position: 100% 100%; }

/* A broad reflection band that sweeps as the metal turns, and a hot spot
   that follows the light. The inner layers only ever move by transform. */
.medal__sheen,
.medal__glare {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.medal__sheen {
    mix-blend-mode: overlay;
}

.medal__glare {
    mix-blend-mode: screen;
}

.medal__sheen > span,
.medal__glare > span {
    position: absolute;
    will-change: transform;
}

.medal__sheen > span {
    top: -20%;
    bottom: -20%;
    left: -50%;
    width: 200%;
    background: linear-gradient(105deg,
            transparent 38%,
            rgba(255, 228, 180, 0.35) 46%,
            rgba(255, 249, 235, 0.9) 50%,
            rgba(255, 228, 180, 0.35) 54%,
            transparent 62%);
}

.medal__sheen > .medal__glint {
    background: linear-gradient(105deg,
            transparent 42%,
            rgba(255, 236, 200, 0.45) 48%,
            rgba(255, 252, 244, 1) 50%,
            rgba(255, 236, 200, 0.45) 52%,
            transparent 58%);
    transform: translate3d(-60%, 0, 0);
}

.medal__glare > span {
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 250, 238, 0.55) 0%, rgba(255, 226, 170, 0.18) 16%, transparent 42%);
}

/* Engraved lettering on the reverse. */
.medal__engraving {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2em;
    font-family: var(--font-heading);
    font-size: clamp(0.8rem, 1.5vw, 1.35rem);
    font-weight: 700;
    text-align: center;
    color: rgba(58, 34, 18, 0.78);
    text-shadow:
        0 1px 0 rgba(255, 226, 180, 0.45),
        0 -1px 0 rgba(20, 10, 4, 0.35);
    pointer-events: none;
}

.medal__engraving-kicker,
.medal__engraving-line {
    font-family: var(--font-main);
    font-size: 0.62em;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
}

.medal__engraving-year {
    font-size: 3.1em;
    line-height: 1;
}

.medal__engraving-rule {
    width: 34%;
    height: 2px;
    margin: 0.5em 0;
    background: rgba(58, 34, 18, 0.55);
    box-shadow: 0 1px 0 rgba(255, 226, 180, 0.4);
}

.medal__engraving-name {
    font-size: 1.45em;
    font-style: italic;
}

/* --- Approach ---------------------------------------------------------- */

.about-approach {
    padding: clamp(5rem, 9vw, 8rem) var(--page-gutter);
}

.about-approach__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(3rem, 6vw, 7rem);
    align-items: center;
    max-width: var(--editorial-max);
    margin: 0 auto;
}

.about-approach__head > p {
    color: #c9c9c9;
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.85;
}

.about-approach__image {
    margin-top: 2.5rem;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

.about-approach__image::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(212, 169, 89, 0.25);
    border-radius: inherit;
    pointer-events: none;
}

.about-pillars {
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-pillar {
    position: relative;
    display: grid;
    grid-template-columns: clamp(3.4rem, 5vw, 5rem) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    padding: clamp(2rem, 3vw, 2.75rem) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.about-pillar:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.about-pillar::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--primary), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.9s var(--transition);
}

.about-pillar__no {
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 4vw, 3.8rem);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, #f4dea8 0%, #d4a959 45%, #9a7232 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.75;
    align-self: center;
    display: flex;
    align-items: center;
    transition: opacity 0.6s var(--transition);
}

.about-pillar h4 {
    margin-bottom: 0.65rem;
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    transition: color 0.4s var(--transition);
}

.about-pillar p {
    color: #b7b7b7;
    line-height: 1.75;
}

.about-pillar > div {
    transition: transform 0.6s var(--transition);
}

@media (hover: hover) and (pointer: fine) {
    .about-pillar:hover::before {
        transform: scaleX(1);
    }

    .about-pillar:hover .about-pillar__no {
        opacity: 1;
    }

    .about-pillar:hover h4 {
        color: var(--primary);
    }

    .about-pillar:hover > div {
        transform: translateX(6px);
    }
}

/* --- Why us ------------------------------------------------------------ */

.about-why {
    padding: clamp(5rem, 9vw, 8rem) var(--page-gutter) clamp(5.5rem, 10vw, 9rem);
    border-top: 1px solid rgba(212, 169, 89, 0.14);
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%, rgba(212, 169, 89, 0.1), transparent 72%),
        #0b0b0b;
}

.about-why__inner {
    max-width: var(--editorial-max);
    margin: 0 auto;
}

.about-why__head {
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
    text-align: center;
}

.about-why__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    border: 1px solid rgba(212, 169, 89, 0.16);
    border-radius: var(--radius);
}

.about-reason {
    position: relative;
    padding: clamp(2rem, 2.6vw, 2.75rem);
    background: #0b0b0b;
    box-shadow: 0 0 0 1px rgba(212, 169, 89, 0.16);
    transition: background 0.6s var(--transition);
}

.about-reason::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    transform: scaleX(0);
    transition: transform 0.9s var(--transition);
}

.about-reason__figure {
    display: block;
    margin-bottom: 1.4rem;
    font-family: var(--font-heading);
    font-size: clamp(3rem, 4.6vw, 4.6rem);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, #f4dea8 0%, #d4a959 45%, #9a7232 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.about-reason__figure sup {
    font-size: 0.5em;
    vertical-align: 0.8em;
}

.about-reason__figure--word {
    font-size: clamp(2.3rem, 3.3vw, 3.3rem);
    font-style: italic;
    padding-top: 0.2em;
}

.about-reason h4 {
    margin-bottom: 0.7rem;
    font-size: clamp(1.15rem, 1.4vw, 1.35rem);
}

.about-reason p {
    color: #b3b3b3;
    font-size: 0.97rem;
    line-height: 1.7;
}

@media (hover: hover) and (pointer: fine) {
    .about-reason:hover {
        background: linear-gradient(180deg, #16120b 0%, #0b0b0b 70%);
    }

    .about-reason:hover::before {
        transform: scaleX(1);
    }
}

.about-why__cta {
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
    text-align: center;
}

/* --- Contact copy ------------------------------------------------------ */

/* The copy column grew taller than the form; keep the form centred on it. */
@media (min-width: 901px) {
    .contact-wrapper > .contact-form {
        align-self: center;
    }
}

.contact-info > p {
    margin-bottom: 1rem;
    color: #c4c4c4;
    line-height: 1.75;
}

.contact-info > .contact-motto {
    margin: -0.5rem 0 1.5rem;
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 2vw, 1.65rem);
    font-weight: 700;
    line-height: 1.35;
    color: #f2f2f2;
}

.contact-link {
    color: var(--primary);
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: rgba(212, 169, 89, 0.4);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.3s ease;
}

.contact-link:hover,
.contact-link:focus-visible {
    text-decoration-color: var(--primary);
}

/* --- About responsive -------------------------------------------------- */

@media (max-width: 1100px) {
    .about-why__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .about-story__inner,
    .about-approach__inner,
    .about-name {
        grid-template-columns: minmax(0, 1fr);
    }

    .medal-stage {
        max-width: 25rem;
    }

}

@media (max-width: 600px) {

    .about-name__pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-name__part--beyond {
        padding: 1.5rem 0 0;
        border-top: 1px solid rgba(212, 169, 89, 0.25);
        border-left: 0;
    }

    .about-why__grid {
        grid-template-columns: minmax(0, 1fr);
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    .about-why__head {
        margin-bottom: 1.5rem;
        text-align: left;
    }

    .about-reason {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr);
        gap: 0.45rem 1rem;
        padding: 1.25rem 0;
        border-top: 1px solid rgba(212, 169, 89, 0.2);
        box-shadow: none;
        background: transparent;
    }

    .about-reason__figure,
    .about-reason__figure--word {
        grid-row: 1 / span 2;
        margin: 0;
        padding: 0;
        font-size: clamp(1.35rem, 5.7vw, 1.8rem);
        line-height: 1.2;
    }

    .about-reason h4 {
        margin: 0;
        font-size: 1rem;
        line-height: 1.35;
    }

    .about-reason p {
        grid-column: 2;
        font-size: 0.85rem;
        line-height: 1.55;
    }

    .about-why__cta {
        margin-top: 1.5rem;
    }

    #contact .contact-wrapper {
        padding: 0;
        gap: 1.75rem;
        border: 0;
        background: transparent;
    }

    .contact-info h2 {
        margin-bottom: 1.25rem;
        font-size: clamp(1.75rem, 7.5vw, 2.5rem);
        line-height: 1.15;
    }

    .contact-info > .contact-motto {
        margin: 0 0 1rem;
        font-size: 1.1rem;
    }

    .contact-info > p {
        margin-bottom: 0.8rem;
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .contact-info .info-list {
        gap: 0.65rem;
        margin-top: 1.25rem;
    }

    .contact-info .info-item {
        display: grid;
        grid-template-columns: 3.5rem minmax(0, 1fr);
        align-items: baseline;
        gap: 0.75rem;
    }

    .contact-info .info-item strong {
        margin: 0;
        font-size: 0.65rem;
        letter-spacing: 1px;
    }

    .contact-info .info-item p {
        font-size: 0.9rem;
    }

    .contact-form .form-grid {
        gap: 1.1rem;
    }

    .contact-form .form-group label {
        margin-bottom: 0.45rem;
    }

    .contact-form .form-group input {
        min-height: 48px;
        padding: 0.7rem 0.85rem;
    }

    .medal-stage {
        max-width: 21rem;
    }
}

/* Dedicated contact details: the enquiry form intentionally has no address. */
.contact-page-main { padding-top: 180px; min-height: 100svh; }
.contact-page-main .container { max-width: 900px; }
.contact-page-main h1 { font-size: clamp(42px, 8vw, 80px); }
.contact-page-main address { font-style: normal; line-height: 1.8; }
.contact-page-main .info-list { margin-block: 32px; }
.contact-details-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; margin-top: 36px; }
.contact-section-title { font-family: var(--font-main); font-size: .75rem; font-weight: 600; line-height: 1.6; letter-spacing: 2px; text-transform: uppercase; color: var(--primary); margin-bottom: 22px; }
.contact-company-name { font-size: 1.15rem; }
.contact-company-brand { color: var(--text-muted); font-size: .95rem; margin-top: 6px; }
.contact-details-grid .info-list { margin: 24px 0 0; gap: 24px; }
.contact-details-grid #get-in-touch + .info-list { margin-top: 0; }
.contact-company-ids { display: grid; gap: 4px; margin-top: 24px; font-size: .95rem; }
.contact-company-ids div { display: flex; gap: 10px; }
.contact-company-ids dt { color: var(--text-muted); }
.contact-closing { margin: 40px 0 28px; padding-top: 28px; border-top: 1px solid rgba(212, 169, 89, .2); max-width: 720px; }
.contact-closing p { line-height: 1.8; }
.contact-closing em { color: var(--primary); }
.contact-closing .contact-destinations { margin-top: 16px; font-size: .9rem; }
.contact-destinations em { color: var(--text-muted); }
@media (max-width: 700px) { .contact-details-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 28px; } .contact-section-title { margin-bottom: 16px; } .contact-closing { margin-top: 32px; } }
.contact-page .navbar .btn-primary { text-decoration: none; }
.contact-page-back { margin-top: 28px; }
@media (max-width: 600px) { .contact-page .navbar .container { gap: 16px; } .contact-page .logo-img { max-width: 210px; height: auto; } .contact-page .btn-primary { padding: 10px 12px; } .contact-page-main { padding-top: 140px; } }