:root {
    --hotel-header-height: 131px;
}

.header-stack {
    position: fixed;
    inset: 0 0 auto;
    z-index: 110;
    transform: translate3d(0, 0, 0);
    box-shadow: 0 12px 38px rgba(5, 18, 40, .12);
    transition: transform .46s cubic-bezier(.22, .78, .2, 1), box-shadow .3s ease;
    will-change: transform;
}

.header-stack::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(112deg, rgba(255, 255, 255, .2), transparent 28%, transparent 62%, rgba(255, 255, 255, .12) 76%, transparent);
    mix-blend-mode: soft-light;
}

.header-stack.is-hidden {
    transform: translate3d(0, calc(-100% - 2px), 0);
    box-shadow: none;
    pointer-events: none;
}

.header-stack .topbar {
    background: linear-gradient(90deg, rgba(6, 21, 44, .94), rgba(11, 31, 58, .84), rgba(6, 21, 44, .94));
    border-bottom: 1px solid rgba(177, 138, 67, .3);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    backdrop-filter: blur(20px) saturate(135%);
}

.header-stack .site-header {
    position: relative;
    top: auto;
    background: linear-gradient(110deg, rgba(255, 255, 255, .88), rgba(246, 248, 250, .72) 48%, rgba(255, 255, 255, .86));
    border-bottom: 1px solid rgba(255, 255, 255, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    backdrop-filter: blur(24px) saturate(145%);
}

.header-stack:hover,
.header-stack:focus-within {
    box-shadow: 0 18px 46px rgba(5, 18, 40, .18);
}

.header-stack .main-nav a {
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

.header-edge-hint {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 111;
    width: 66px;
    height: 4px;
    border-radius: 0 0 8px 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, #d0a756 20%, #f2d692 50%, #d0a756 80%, transparent);
    box-shadow: 0 3px 14px rgba(177, 138, 67, .5);
    transition: opacity .25s ease;
}

body.header-is-hidden .header-edge-hint {
    opacity: .9;
    animation: header-hint-glow 2.2s ease-in-out infinite;
}

.hero {
    padding-top: var(--hotel-header-height);
    min-height: max(590px, 100vh);
    min-height: max(590px, 100dvh);
}

@media (min-width: 1600px) {
    .hero {
        min-height: max(690px, 100vh);
        min-height: max(690px, 100dvh);
    }
}

.page-hero {
    padding-top: calc(71px + var(--hotel-header-height));
}

.booking-engine-page {
    padding-top: calc(24px + var(--hotel-header-height));
}

.skip-link {
    z-index: 130;
}

@keyframes header-hint-glow {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

@media (max-width: 740px) {
    :root {
        --hotel-header-height: 109px;
    }

    .page-hero {
        padding-top: calc(52px + var(--hotel-header-height));
    }

    .booking-engine-page {
        padding-top: calc(20px + var(--hotel-header-height));
    }

    .header-stack .site-header {
        background: rgba(255, 255, 255, .88);
    }

    .hero {
        min-height: max(530px, 100vh);
        min-height: max(530px, 100dvh);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-stack,
    .header-edge-hint {
        transition: none;
        animation: none;
    }
}