/* ==========================================================================
   Wazo — shared layer for every public page
   Header, language switcher, footer, phone dock and the page components the
   redesigned pages share (cover, sections, arches, rails, index, closing).
   Page-specific layouts live in home.css, accommodation.css, venues.css,
   contact.css and content.css. Tokens are in variables.css; button motion in
   buttons.css. Class names are wz-* except the header/footer/language
   switcher, which keep the names their templates already use.
   ========================================================================== */

/* --- Page shell ------------------------------------------------------------ */

.wz-skip {
    position: fixed;
    inset: 0.75rem auto auto 0.75rem;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    background-color: var(--wz-navy);
    color: #fff;
    font-weight: 600;
    translate: 0 -200%;
    transition: translate 0.2s ease;
}

.wz-skip:focus {
    translate: 0 0;
    outline: 3px solid var(--wz-turq-light);
    outline-offset: 2px;
}

.wz-main {
    overflow-x: clip;
}

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

.wz-section {
    padding-block: clamp(4.5rem, 9vw, 8rem);
}

.wz-section--paper {
    background-color: var(--wz-paper);
}

.wz-section--sand {
    background-color: var(--wz-sand);
}

.wz-section--navy {
    --focus: var(--wz-turq-light);

    background-color: var(--wz-navy-deep);
    color: #fff;
}

.wz-section--navy .wz-h2,
.wz-section--navy .wz-h3 {
    color: #fff;
}

.wz-section--navy .wz-lead,
.wz-section--navy .wz-text {
    color: rgba(255, 255, 255, 0.84);
}

.wz-section--navy .wz-eyebrow {
    color: var(--wz-turq-light);
}

/* Teal on sand is 4.3:1; navy keeps the small label above 4.5:1. */
.wz-section--sand .wz-eyebrow {
    color: var(--wz-navy-2);
}

/* --- Type ------------------------------------------------------------------ */

.wz-h2 {
    margin: 0 0 1.5rem;
    font-family: var(--wz-display);
    font-weight: 300;
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    line-height: 1.04;
    letter-spacing: -0.018em;
    color: var(--wz-navy);
    text-wrap: balance;
}

.wz-h3 {
    margin: 0 0 0.6rem;
    font-family: var(--wz-display);
    font-weight: 400;
    font-size: clamp(1.55rem, 2.4vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: -0.018em;
    color: var(--wz-navy);
    text-wrap: balance;
}

.wz-lead {
    max-width: 40rem;
    margin: 0;
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    line-height: 1.8;
    color: var(--wz-muted);
}

.wz-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--wz-muted);
}

.wz-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wz-teal-ink);
}

.wz-eyebrow::before {
    content: "";
    flex-shrink: 0;
    width: 2.25rem;
    height: 1px;
    background-color: currentColor;
}

/* --- Header ------------------------------------------------------------------
   One header for every page: transparent over the photograph at the top,
   solid navy-on-white once the page scrolls (site.js toggles .is-top; the
   <noscript> rule in head.php pins the solid values when JS is off). The
   tokens are custom properties so both states share a single ruleset. */

.site-header {
    --wz-nav-fg: #fff;
    --wz-nav-bg: transparent;
    --wz-nav-line: transparent;
    --wz-logo-filter: brightness(0) invert(1);
    --wz-pill-line: rgba(255, 255, 255, 0.42);

    position: fixed;
    inset: 0 0 auto;
    z-index: 60;
}

.site-header:not(.is-top) {
    --wz-nav-fg: var(--color-navy);
    --wz-nav-bg: rgba(255, 255, 255, 0.94);
    --wz-nav-line: rgba(0, 62, 112, 0.12);
    --wz-logo-filter: none;
    --wz-pill-line: rgba(0, 41, 74, 0.28);
}

.site-nav {
    position: relative;
    background-color: var(--wz-nav-bg);
    border-bottom: 1px solid var(--wz-nav-line);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.site-header:not(.is-top) .site-nav {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.site-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    max-width: calc(var(--wz-max) + 2 * var(--wz-gutter));
    margin-inline: auto;
    padding: 0.75rem var(--wz-gutter);
}

.site-nav__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 44px;
}

.site-nav__brand img {
    display: block;
    width: auto;
    height: 36px;
    filter: var(--wz-logo-filter);
    transition: filter 0.3s ease;
}

.site-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.site-nav__toggle-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 20px;
}

.site-nav__toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background-color: var(--wz-nav-fg);
    transition: background-color 0.3s ease;
}

/* On a phone the language pill sits beside the menu button. */
.site-nav__tools {
    order: 1;
    margin-inline-start: auto;
}

/* Phone menu: a white panel under the bar. Closed, its links leave the Tab
   order and the accessibility tree (visibility), after the fade. */
.site-nav__menu {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    padding: var(--space-4) var(--wz-gutter);
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--transition-base),
                transform var(--transition-base),
                visibility 0s linear 0.2s;
}

.site-nav__menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity var(--transition-base),
                transform var(--transition-base),
                visibility 0s linear 0s;
}

.site-nav__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.site-nav__links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding-inline: var(--space-3);
    border-inline-start: 3px solid transparent;
    border-radius: 0 12px 12px 0;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--color-navy);
    transition: background-color 0.2s ease;
}

.site-nav__links a:hover {
    background-color: rgba(0, 41, 74, 0.05);
}

.site-nav__links a.is-active {
    border-inline-start-color: var(--color-turquoise);
    background-color: rgba(37, 170, 225, 0.1);
    font-weight: 700;
}

.mobile-menu__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-block-start: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

.mobile-menu__contact a {
    display: flex;
    align-items: center;
    min-height: 44px;
    overflow-wrap: anywhere;
    color: var(--wz-muted);
}

/* On a phone the booking button sits right under the links, above the language
   list and the phone numbers, so it is on screen when the menu opens. */
.site-nav__cta {
    align-self: stretch;
}

/* The full desktop nav (7 links + CTA + language pill) needs about 1240px
   in the longest language (es, Montserrat being a wide face), so below 1280px
   the hamburger menu is used instead. */
@media (min-width: 1280px) {
    .site-nav__inner {
        padding-block: 1rem;
    }

    .site-nav__brand img {
        height: 42px;
    }

    .site-nav__toggle,
    .mobile-menu__contact,
    .mobile-menu__lang {
        display: none;
    }

    .site-nav__menu {
        position: static;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        order: 1;
        gap: 1.5rem;
        max-height: none;
        overflow-y: visible;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        transition: none;
    }

    .site-nav__tools {
        order: 2;
        margin-inline-start: 0;
    }

    .site-nav__links {
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
        gap: 1.25rem;
    }

    .site-nav__links li {
        flex-shrink: 0;
    }

    .site-nav__links a {
        display: inline;
        min-height: auto;
        padding: 0 0 8px;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        background: none;
        color: var(--wz-nav-fg);
        font-size: 0.8125rem;
        white-space: nowrap;
        transition: opacity 0.2s ease, color 0.3s ease;
    }

    .site-nav__links a.is-active {
        border-bottom-color: var(--color-turquoise);
        background: none;
        font-weight: 700;
    }

    .site-nav__links a:not(.is-active):hover {
        background: none;
        opacity: 0.72;
    }

    .site-nav__cta {
        align-self: center;
        flex-shrink: 0;
        padding: 0.75rem 1.35rem;
    }
}

/* --- Language switcher ------------------------------------------------------
   A <details> disclosure (templates/components/language-switcher.php). Closed:
   an outlined pill showing the active code and a chevron. Open: the pill
   inverts to white, so it reads as the tab of the white panel hanging beneath
   it. The panel opens leftwards from the right edge, above the header and
   hero, and no ancestor clips overflow. */

.lang-switch {
    position: relative;
    z-index: 30;
    flex-shrink: 0;
}

.lang-switch__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 34px;
    padding: 0.375rem 0.75rem 0.375rem 0.9rem;
    border: 1px solid var(--wz-pill-line);
    border-radius: var(--radius-full);
    color: var(--wz-nav-fg);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    list-style: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--transition-base),
                border-color var(--transition-base),
                color var(--transition-base);
}

.lang-switch__button::-webkit-details-marker {
    display: none;
}

/* The visible pill is compact; this extends the tap target to ~46px tall. */
.lang-switch__button::after {
    content: "";
    position: absolute;
    inset: -6px -4px;
}

.lang-switch__button:hover {
    border-color: var(--color-turquoise-light);
    background-color: rgba(255, 255, 255, 0.08);
}

.lang-switch[open] .lang-switch__button {
    border-color: var(--color-white);
    background-color: var(--color-white);
    color: var(--color-navy);
}

.lang-switch__chevron {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--transition-base);
}

.lang-switch[open] .lang-switch__chevron {
    transform: translateY(2px) rotate(-135deg);
}

.lang-switch__panel {
    position: absolute;
    inset-inline: auto 0;
    top: calc(100% + 0.625rem);
    min-width: 13rem;
    max-width: calc(100vw - 2rem);
    margin: 0;
    padding: 0.375rem;
    list-style: none;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 22px 44px -14px rgba(0, 41, 74, 0.4),
                0 2px 8px rgba(0, 41, 74, 0.1);
    transform-origin: right top;
    animation: lang-panel-in 0.2s ease-out;
}

.lang-switch__panel li {
    animation: lang-option-in 0.22s ease-out backwards;
    animation-delay: calc(var(--i, 0) * 28ms + 40ms);
}

@keyframes lang-panel-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }
}

@keyframes lang-option-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

.lang-switch__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding-inline: 0.75rem;
    border-radius: var(--radius-md);
    color: var(--color-navy);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: background-color var(--transition-base);
}

.lang-switch__option:hover,
.lang-switch__option:focus-visible {
    background-color: rgba(37, 170, 225, 0.1);
}

.lang-switch__option:focus-visible {
    outline: 2px solid var(--color-navy);
    outline-offset: -2px;
}

.lang-switch__option[aria-current] {
    background-color: rgba(37, 170, 225, 0.14);
    font-weight: 700;
}

.lang-switch__name {
    flex: 1;
}

.lang-switch__abbr {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--wz-muted);
}

/* A radio-style ring on every row, filled with a check on the selected one,
   so the choice never depends on colour alone. */
.lang-switch__mark {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1.5px solid rgba(0, 41, 74, 0.28);
    border-radius: 50%;
    transition: border-color var(--transition-base),
                background-color var(--transition-base);
}

.lang-switch__option:hover .lang-switch__mark {
    border-color: var(--color-turquoise);
}

.lang-switch__option[aria-current] .lang-switch__mark {
    border-color: var(--color-navy);
    background-color: var(--color-navy);
}

/* The path's bounding box is centred on the viewBox and the round-capped
   stroke grows evenly around it, so the grid centring above puts the check
   dead-centre in the circle; an SVG has no font baseline. */
.lang-switch__check {
    display: block;
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--color-white);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Phone menu: all four languages as large tap targets. */
.mobile-menu__lang {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-block-start: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.mobile-menu__lang-label {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--wz-muted);
}

.mobile-menu__lang-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-menu__lang-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding-inline: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-navy);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    transition: background-color var(--transition-base),
                border-color var(--transition-base),
                color var(--transition-base);
}

.mobile-menu__lang-link:hover {
    border-color: var(--color-turquoise);
    background-color: rgba(37, 170, 225, 0.08);
}

.mobile-menu__lang-link[aria-current] {
    border-color: var(--color-navy);
    background-color: var(--color-navy);
    color: var(--color-white);
}

.mobile-menu__lang-link[aria-current]::before {
    content: "";
    width: 4px;
    height: 8px;
    margin-block-end: 3px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

@media (min-width: 640px) {
    .mobile-menu__lang-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1280px) {
    .mobile-menu__lang {
        display: none;
    }

    .lang-switch__button {
        min-height: 30px;
        padding-block: 0.3125rem;
    }

    .lang-switch__button::after {
        inset: -4px;
    }
}

/* --- Page cover ---------------------------------------------------------------
   The first block of every inner page: a full-bleed photograph under the
   transparent header, the page title in the title face, one clear action. The
   photo settles once on load (the wrapper animates, so the parallax GSAP adds
   to the image itself never collides with a CSS scale). */

.wz-cover {
    --focus: var(--wz-turq-light);

    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: max(520px, 78svh);
    padding-top: 7.5rem;
    overflow: hidden;
    background-color: var(--wz-navy-deep);
    color: #fff;
}

.wz-cover--short {
    min-height: max(440px, 60svh);
}

.wz-cover__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    animation: wz-settle 2.4s var(--wz-ease) both;
}

.wz-cover__image {
    position: absolute;
    top: -8%;
    left: 0;
    width: 100%;
    height: 116%;
    object-fit: cover;
    object-position: var(--focal, 50% 50%);
}

.wz-cover__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(0, 27, 50, 0.74) 0%, rgba(0, 27, 50, 0.3) 52%, rgba(0, 27, 50, 0.05) 78%),
        linear-gradient(180deg, rgba(0, 27, 50, 0.6) 0%, rgba(0, 27, 50, 0) 32%, rgba(0, 27, 50, 0) 50%, rgba(0, 27, 50, 0.72) 100%);
}

.wz-cover__inner {
    padding-bottom: clamp(2rem, 5vw, 4rem);
}

.wz-cover__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

.wz-cover__eyebrow::before {
    content: "";
    flex-shrink: 0;
    width: 2.25rem;
    height: 1px;
    background-color: var(--wz-turq-light);
}

.wz-cover__title {
    max-width: 14ch;
    margin: 0;
    font-weight: 400;
    font-size: clamp(3rem, 7.6vw, 6.6rem);
    line-height: 0.98;
    letter-spacing: -0.022em;
    font-variation-settings: "opsz" 72;
    text-wrap: balance;
}

.wz-cover__line {
    display: block;
}

.wz-cover__line--alt {
    font-style: italic;
    font-weight: 300;
    letter-spacing: -0.012em;
}

.wz-cover__lead {
    max-width: 34rem;
    margin: 1.6rem 0 0;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.94);
}

.wz-cover__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.5rem;
    margin-top: 2rem;
}

.wz-cover__actions .link-arrow {
    min-height: 44px;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

.wz-cover__eyebrow,
.wz-cover__line,
.wz-cover__lead,
.wz-cover__actions,
.wz-cover__aside {
    animation: wz-rise 0.95s var(--wz-ease) backwards;
}

.wz-cover__eyebrow { animation-delay: 0.05s; }
.wz-cover__line { animation-delay: 0.15s; }
.wz-cover__line--alt { animation-delay: 0.27s; }
.wz-cover__lead { animation-delay: 0.42s; }
.wz-cover__actions { animation-delay: 0.55s; }
.wz-cover__aside { animation-delay: 0.7s; }

@keyframes wz-rise {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
}

@keyframes wz-settle {
    from {
        scale: 1.07;
    }
}

/* Cover aside: on a wide screen a compact panel sits bottom-right, on a phone
   it flows under the actions. Used for the unit switch and the facts. */
.wz-cover__grid {
    display: grid;
    gap: 2rem;
}

.wz-cover__aside {
    align-self: end;
}

@media (min-width: 960px) {
    .wz-cover__grid {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 3rem;
    }
}

/* The two units, as a switch: the current page is solid, the other is one tap
   away. Navy marks the Hôtel, sand the Appart-Hôtel. */
.wz-units-switch {
    display: inline-flex;
    padding: 0.3rem;
    gap: 0.25rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background-color: rgba(0, 27, 50, 0.5);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.wz-units-switch__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.2rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .wz-units-switch__link:not([aria-current]):hover {
        background-color: rgba(255, 255, 255, 0.16);
    }
}

.wz-units-switch__link[aria-current] {
    background-color: var(--wz-cream);
    color: var(--wz-navy);
}

.wz-units-switch__link--hotel[aria-current] {
    background-color: #fff;
}

.wz-units-switch__link--apart[aria-current] {
    background-color: var(--wz-sand);
}

/* Short phones: keep the cover's action on the first screen. */
@media (max-width: 480px) and (max-height: 720px) {
    .wz-cover {
        padding-top: 5.5rem;
    }

    .wz-cover__title {
        font-size: 2.8rem;
    }

    .wz-cover__lead {
        margin-top: 0.9rem;
        font-size: 0.95rem;
        line-height: 1.55;
    }

    .wz-cover__actions {
        margin-top: 1.25rem;
    }
}

/* --- Shared building blocks -------------------------------------------------- */

.wz-split {
    display: grid;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}

@media (min-width: 960px) {
    .wz-split {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }

    .wz-split--flip {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    }

    .wz-split--flip .wz-split__media {
        order: -1;
    }
}

.wz-arch,
.wz-orb,
.wz-frame {
    margin: 0;
    overflow: hidden;
    background-color: var(--wz-sand);
}

.wz-arch {
    border-radius: var(--wz-arch);
}

.wz-arch--down {
    border-radius: var(--wz-arch-down);
}

.wz-orb {
    border-radius: 50%;
}

.wz-frame {
    border-radius: var(--wz-panel);
}

.wz-arch img,
.wz-orb img,
.wz-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A large arch with a small round photo overlapping its corner. */
.wz-duo {
    position: relative;
    padding-bottom: 3rem;
}

.wz-duo__arch {
    width: 82%;
    margin-inline-start: auto;
    aspect-ratio: 4 / 5.2;
}

.wz-duo__orb {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 44%;
    aspect-ratio: 1;
    border: 8px solid var(--wz-cream);
}

.wz-section--paper .wz-duo__orb {
    border-color: var(--wz-paper);
}

.wz-section--sand .wz-duo__orb {
    border-color: var(--wz-sand);
}

.wz-section--navy .wz-duo__orb {
    border-color: var(--wz-navy-deep);
}

.wz-duo--flip .wz-duo__arch {
    margin-inline: 0 auto;
}

.wz-duo--flip .wz-duo__orb {
    inset-inline: auto 0;
}

/* Feature list with a check in a circle. */
.wz-checks {
    display: grid;
    gap: 0.85rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.wz-checks li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--wz-ink);
}

.wz-checks li::before {
    content: "";
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.05rem;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2300294a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.3 5.2 8.5 9 3.8'/%3E%3C/svg%3E") center / 0.8rem no-repeat, var(--wz-turq-light);
}

.wz-section--navy .wz-checks li {
    color: rgba(255, 255, 255, 0.92);
}

.wz-section--navy .wz-checks li::before {
    background-color: var(--wz-turq);
}

/* Two or three figures side by side. */
.wz-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem clamp(1.75rem, 4vw, 3rem);
    margin: 2.5rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--wz-line);
}

.wz-section--navy .wz-stats {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.wz-stats__item {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.35rem;
}

.wz-stats__value {
    margin: 0;
    font-size: clamp(2.6rem, 4.9vw, 4rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--wz-navy);
}

.wz-section--navy .wz-stats__value {
    color: #fff;
}

.wz-stats__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wz-muted);
}

.wz-stats__unit {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--wz-muted);
    margin-left: -10px;
}

.wz-section--navy .wz-stats__unit {
    color: rgba(255, 255, 255, 0.78);
}

.wz-section--navy .wz-stats__label {
    color: rgba(255, 255, 255, 0.78);
}

/* Section heading row: title on the left, an action or control on the right. */
.wz-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.75rem 2rem;
    margin-bottom: 2.75rem;
}

.wz-head__intro {
    max-width: 42rem;
}

.wz-head .wz-h2 {
    margin-bottom: 1rem;
}

/* --- Rail: a swipeable row (rooms, apartments, galleries) --------------------- */

.wz-rail {
    width: 100%;
}

.wz-rail__track {
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0.5rem max(var(--wz-gutter), calc((100% - var(--wz-max)) / 2)) 2rem;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(var(--wz-gutter), calc((100% - var(--wz-max)) / 2));
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.wz-rail__track::-webkit-scrollbar {
    display: none;
}

.wz-rail__controls {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    max-width: calc(var(--wz-max) + 2 * var(--wz-gutter));
    margin-inline: auto;
    padding-inline: var(--wz-gutter);
}

.wz-rail__controls[hidden] {
    display: none;
}

.wz-rail__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--wz-line);
    border-radius: 50%;
    background-color: #fff;
    color: var(--wz-navy);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.wz-rail__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

@media (max-width: 719px) {
    .wz-rail__controls {
        display: none;
    }
}

/* A photograph slide: wide, with its caption underneath in the text face. */
.wz-slide {
    flex: 0 0 min(84vw, 640px);
    scroll-snap-align: start;
}

.wz-slide figure {
    margin: 0;
}

.wz-slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--wz-panel);
    background-color: var(--wz-sand);
}

.wz-slide figcaption {
    margin: 0.85rem 0.25rem 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wz-muted);
}

/* A rail that shows one photograph at a time inside an arch (a venue's photos). */
.wz-stack {
    position: relative;
}

.wz-stack__track {
    display: flex;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    border-radius: inherit;
}

.wz-stack__track::-webkit-scrollbar {
    display: none;
}

.wz-stack__slide {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
}

.wz-stack__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wz-stack {
    width: min(100%, 34rem);
    margin-inline: auto;
}

.wz-stack__frame {
    position: relative;
    aspect-ratio: 4 / 5;
}

.wz-stack__track {
    position: absolute;
    inset: 0;
}

.wz-stack__controls {
    position: absolute;
    inset-inline: 0;
    bottom: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    pointer-events: none;
}

.wz-stack__controls[hidden] {
    display: none;
}

.wz-stack__controls > * {
    pointer-events: auto;
}

.wz-stack__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.94);
    color: var(--wz-navy);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(0, 27, 50, 0.6);
}

.wz-stack__arrow:disabled {
    opacity: 0.45;
    cursor: default;
}

.wz-stack__count {
    min-width: 3.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background-color: rgba(0, 27, 50, 0.72);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* A key figure set on the photos (a meeting room's floor area), top right. */
.wz-stack__badge {
    position: absolute;
    top: clamp(0.75rem, 3%, 1.25rem);
    right: clamp(0.75rem, 3%, 1.25rem);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0.7rem 1.05rem 0.6rem;
    border-radius: 18px;
    background-color: rgba(255, 255, 255, 0.94);
    color: var(--wz-navy);
    box-shadow: 0 10px 24px -12px rgba(0, 27, 50, 0.55);
    text-align: center;
    pointer-events: none;
}

/* Under a plain arch the top corners are curved away: sit inside the curve. */
.wz-stack__badge--arch {
    top: 22%;
    right: 10%;
}

.wz-stack__badge-value {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.wz-stack__badge-unit {
    margin-left: 0.2em;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: normal;
}

.wz-stack__badge-label {
    margin-top: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wz-muted);
}

/* Business center only: the meeting-room photos read better wider (a room
   is a wide space), so the photo column grows and the frame is square and
   tall; the ~3:2 photos fill it edge to edge (object-fit: cover, no bands),
   trimmed at the sides. */
.page-business-center .wz-feature[id^="business-center-room"] .wz-stack {
    width: 100%;
    max-width: 46rem;
}

.page-business-center .wz-feature[id^="business-center-room"] .wz-stack__frame {
    aspect-ratio: 1 / 1;
}

/* The narrower text column would otherwise wrap the figures onto 2 rows. */
.page-business-center .wz-feature[id^="business-center-room"] .wz-stats {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1.5rem clamp(1rem, 2vw, 2rem);
}

/* Figures pinned to the top of their column (the item stacks bottom-up), so
   they share one line even when a label or a unit wraps onto two. */
.page-business-center .wz-feature[id^="business-center-room"] .wz-stats__item {
    justify-content: flex-end;
}

.page-business-center .wz-feature[id^="business-center-room"] .wz-stats__value {
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
}

@media (min-width: 960px) {
    .page-business-center .wz-feature[id^="business-center-room"] .wz-split {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }

    .page-business-center .wz-feature[id^="business-center-room"] .wz-split--flip {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }
}

/* --- Section pieces shared by several pages ------------------------------------- */

.wz-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.wz-feature__note {
    margin-top: 1.75rem;
}

/* A row of pill links to what lies further down (a venue, an activity, a blog
   category). */
.wz-jump {
    padding-block: 1.25rem;
    background-color: var(--wz-paper);
    border-bottom: 1px solid var(--wz-line);
}

.wz-jump__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wz-jump__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.25rem;
    border: 1px solid rgba(0, 41, 74, 0.28);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wz-navy);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, scale 0.1s ease;
}

@media (hover: hover) and (pointer: fine) {
    .wz-jump__link:hover {
        border-color: var(--wz-navy);
        background-color: var(--wz-navy);
        color: #fff;
    }
}

.wz-jump__link:active {
    scale: 0.96;
}

.wz-jump__link[aria-current] {
    border-color: var(--wz-navy);
    background-color: var(--wz-navy);
    color: #fff;
}

/* A form beside the words that introduce it (contact, business quote). */
.wz-formsec__grid {
    display: grid;
    gap: 3rem;
    align-items: start;
}

@media (min-width: 960px) {
    .wz-formsec__grid {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: clamp(3rem, 6vw, 6rem);
    }

    .wz-formsec__intro {
        position: sticky;
        top: 7rem;
    }
}

.wz-formcard {
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--wz-line);
    border-radius: var(--wz-panel);
    background-color: var(--wz-paper);
    box-shadow: 0 34px 60px -44px rgba(0, 41, 74, 0.45);
}

.wz-formcard .form {
    max-width: none;
    margin-top: 1.75rem;
}

.wz-formcard .wz-h3 {
    margin-bottom: 0.5rem;
}

.wz-contact-list {
    margin: 2.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
    color: var(--wz-ink);
}

.wz-contact-list li {
    padding-block: 0.85rem;
    border-top: 1px solid var(--wz-line);
    overflow-wrap: anywhere;
}

.wz-contact-list li:last-child {
    border-bottom: 1px solid var(--wz-line);
}

.wz-contact-list__label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wz-teal-ink);
}

.wz-contact-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--wz-navy);
    text-decoration: underline;
    text-decoration-color: rgba(0, 41, 74, 0.3);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s ease;
}

.wz-contact-list a:hover,
.wz-contact-list a:focus-visible {
    text-decoration-color: var(--wz-turq);
}

/* --- Index: large rows that each lead somewhere real ---------------------------- */

.wz-explore {
    padding-block: clamp(4rem, 8vw, 7rem) clamp(5rem, 10vw, 9rem);
}

.wz-index {
    margin: 3rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--wz-line);
}

.wz-index__item {
    border-bottom: 1px solid var(--wz-line);
}

.wz-index__link {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    grid-template-areas:
        "thumb title arrow"
        "thumb text arrow";
    align-items: center;
    gap: 0.25rem 1.25rem;
    padding: 1.25rem 0;
    color: var(--wz-navy);
}

.wz-index__thumb {
    grid-area: thumb;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 999px 999px 16px 16px;
    background-color: var(--wz-sand);
}

.wz-index__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--wz-ease);
}

.wz-index__title {
    grid-area: title;
    font-family: var(--wz-display);
    font-size: clamp(1.5rem, 3.2vw, 2.75rem);
    font-weight: 300;
    line-height: 1.06;
    letter-spacing: -0.015em;
    transition: translate 0.4s var(--wz-ease);
}

.wz-index__text {
    grid-area: text;
    max-width: 30rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--wz-muted);
}

.wz-index__arrow {
    grid-area: arrow;
    position: relative;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--wz-line);
    border-radius: 50%;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.wz-index__arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    translate: -65% -50%;
    rotate: 45deg;
    transition: color 0.25s ease, translate 0.3s var(--wz-ease);
}

@media (hover: hover) and (pointer: fine) {
    .wz-index__link:hover .wz-index__thumb img {
        transform: scale(1.07);
    }

    .wz-index__link:hover .wz-index__title {
        translate: 0.6rem 0;
    }

    .wz-index__link:hover .wz-index__arrow {
        background-color: var(--wz-navy);
        border-color: var(--wz-navy);
        color: #fff;
    }

    .wz-index__link:hover .wz-index__arrow::after {
        translate: -35% -50%;
    }
}

.wz-index__link:focus-visible .wz-index__arrow {
    background-color: var(--wz-navy);
    color: #fff;
}

@media (min-width: 900px) {
    .wz-index__link {
        grid-template-columns: 132px minmax(0, 1.1fr) minmax(0, 1fr) 3.5rem;
        grid-template-areas: "thumb title text arrow";
        gap: 2rem;
        padding: 1.75rem 0;
    }
}

/* --- Closing block: both booking paths again, and a human way to ask first ---- */

.wz-closing {
    --focus: var(--wz-turq-light);

    padding-block: clamp(5rem, 11vw, 10rem);
    background-color: var(--wz-navy-deep);
    color: #fff;
}

.wz-closing__grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

.wz-closing__photo {
    width: min(100%, 26rem);
    aspect-ratio: 4 / 5;
    justify-self: center;
    background-color: var(--wz-navy);
}

@media (min-width: 960px) {
    .wz-closing__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }

    .wz-closing__photo {
        justify-self: end;
    }
}

.wz-closing__title {
    max-width: 15ch;
    margin-bottom: 1.25rem;
    font-size: clamp(2.7rem, 6vw, 5.2rem);
    color: #fff;
}

.wz-closing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2.25rem;
}

.wz-closing__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 2rem;
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}

.wz-closing__contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.wz-closing__contact a:hover,
.wz-closing__contact a:focus-visible {
    color: #fff;
    text-decoration-color: var(--wz-turq-light);
}

/* --- Phone reservation dock ------------------------------------------------------
   Once the page's own booking action has scrolled away, the header offers no
   reservation button on a phone, so the dock keeps both units one tap away and
   steps aside near the closing block and the footer (site.js). */

.wz-dock {
    position: fixed;
    inset: auto 0 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--wz-line);
    box-shadow: 0 -12px 28px -18px rgba(0, 41, 74, 0.35);
    visibility: hidden;
    translate: 0 110%;
    transition: translate 0.4s var(--wz-ease), visibility 0s linear 0.4s;
}

.wz-dock.is-visible {
    visibility: visible;
    translate: 0 0;
    transition: translate 0.4s var(--wz-ease), visibility 0s;
}

.wz-dock__label {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wz-navy);
}

.wz-dock__btn {
    flex: 1;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
}

@media (max-width: 380px) {
    .wz-dock__label {
        display: none;
    }
}

@media (min-width: 1024px) {
    .wz-dock {
        display: none;
    }
}

/* --- Accommodation detail (templates/pages/accommodation-detail.php) -------------- */

.wz-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.wz-amenities__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 5.5rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--wz-muted);
}

/* The pools label carries its own line breaks ("2 …\n1 …\n1 …"). */
.wz-amenities__item--pools {
    white-space: pre-line;
}

.wz-amenities__icon {
    width: 28px;
    height: 28px;
    stroke: var(--wz-teal-ink);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wz-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wz-photo-grid__item {
    aspect-ratio: 4 / 3;
    margin: 0;
}

.wz-photo-grid__item a {
    display: block;
    width: 100%;
    height: 100%;
}

.wz-photo-grid__item img {
    transition: transform 0.35s ease;
}

.wz-photo-grid__item a:hover img {
    transform: scale(1.04);
}

/* --- Photo lightbox (templates/components/photo-lightbox.php) --------------------- */

.wz-photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

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

.wz-photo-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 20, 38, 0.9);
}

.wz-photo-lightbox__dialog {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.wz-photo-lightbox__image {
    max-width: min(1100px, 90vw);
    max-height: 85vh;
    border-radius: var(--radius-md);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

.wz-photo-lightbox__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background-color: #fff;
    color: var(--wz-navy);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.wz-photo-lightbox__close:hover {
    background-color: var(--wz-navy);
    color: #fff;
}

.wz-photo-lightbox__arrow {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 1;
}

.wz-photo-lightbox__arrow--prev {
    left: var(--space-3);
}

.wz-photo-lightbox__arrow--next {
    right: var(--space-3);
}

.wz-photo-lightbox__count {
    position: absolute;
    bottom: var(--space-3);
    left: 50%;
    translate: -50% 0;
    min-width: 3.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background-color: rgba(0, 27, 50, 0.72);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
}

@media (max-width: 640px) {
    .wz-photo-lightbox__arrow {
        width: 36px;
        height: 36px;
    }

    .wz-photo-lightbox__arrow--prev {
        left: var(--space-2);
    }

    .wz-photo-lightbox__arrow--next {
        right: var(--space-2);
    }
}

/* --- Contact map (full-bleed, no .wz-container) ------------------------------------ */

.wz-map {
    display: block;
}

.wz-map__frame {
    display: block;
    width: 100%;
    height: clamp(320px, 45vw, 480px);
    border: 0;
}

/* --- Menu card lightbox (public/menu.php in an iframe) ---------------------------- */

.wz-menu-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

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

.wz-menu-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 20, 38, 0.82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: wz-menu-lightbox-fade 0.2s ease;
}

.wz-menu-lightbox__dialog {
    position: relative;
    width: min(720px, 100%);
    height: min(860px, 100%);
    animation: wz-menu-lightbox-pop 0.25s var(--wz-ease);
}

.wz-menu-lightbox__frame {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius-md);
    background-color: #15181c;
    box-shadow: 0 30px 60px -20px rgba(0, 20, 38, 0.6);
}

.wz-menu-lightbox__close {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background-color: #fff;
    color: var(--wz-navy);
    font-size: 1.5rem;
    line-height: 1;
    box-shadow: 0 8px 20px -6px rgba(0, 20, 38, 0.45);
    cursor: pointer;
}

.wz-menu-lightbox__close:hover {
    background-color: var(--wz-navy);
    color: #fff;
}

@keyframes wz-menu-lightbox-fade {
    from { opacity: 0; }
}

@keyframes wz-menu-lightbox-pop {
    from {
        opacity: 0;
        scale: 0.96;
    }
}

@media (max-width: 480px) {
    .wz-menu-lightbox {
        padding: var(--space-2);
    }

    .wz-menu-lightbox__close {
        top: 0.5rem;
        right: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wz-menu-lightbox__backdrop,
    .wz-menu-lightbox__dialog {
        animation: none;
    }
}

/* --- Footer --------------------------------------------------------------------- */

.site-footer {
    --focus: var(--wz-turq-light);

    background-color: var(--wz-navy);
    color: var(--color-white);
}

.site-footer__inner {
    padding-block: clamp(3.5rem, 7vw, 5.5rem) var(--space-4);
}

.site-footer__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6) var(--space-5);
    padding-bottom: var(--space-6);
}

.site-footer__about {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.site-footer__logo {
   /* width: auto;*/
    height: 44px;
    /* logo.png is navy-on-transparent, made for the white nav — inverted so it
       reads on the footer's navy background. */
    filter: brightness(0) invert(1);
}

.site-footer__tagline {
    margin: 0;
    max-width: 34ch;
    font-size: 0.875rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
}

/* Same colour as the footer background, on request: the link stays in the
   page but is not seen. */
.site-footer__netlinking {
    align-self: flex-start;
    font-size: 0.875rem;
    color: var(--wz-navy);
}

.site-footer__heading {
    margin: 0 0 var(--space-3);
    font-family: var(--font-family-base);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wz-turq-light);
}

.site-footer__list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.875rem;
}

.site-footer__list a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: rgba(255, 255, 255, 0.82);
    transition: color 0.2s ease;
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
    color: var(--color-white);
    text-decoration: underline;
    text-decoration-color: var(--wz-turq-light);
    text-underline-offset: 4px;
}

.site-footer__list li {
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, 0.82);
}

.site-footer__cta {
    align-self: flex-start;
    min-height: 44px;
    margin-top: var(--space-4);
    padding-inline: 1.5rem;
}

.site-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    text-align: center;
}

.site-footer__text,
.site-footer__legal,
.site-footer__credit {
    margin: 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.78);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}

.site-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: rgba(255, 255, 255, 0.84);
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.site-footer__legal span {
    align-self: center;
    color: rgba(255, 255, 255, 0.4);
}

.site-footer__legal .site-footer__legal-pending {
    color: rgba(255, 255, 255, 0.62);
}

.site-footer__credit a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: rgba(255, 255, 255, 0.84);
}

.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Touch: footer links are full-size targets. */
@media (max-width: 1023px) {
    .site-footer__list a,
    .site-footer__legal a,
    .site-footer__credit a {
        min-height: 44px;
    }
}

@media (min-width: 768px) {
    .site-footer__columns {
        grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
    }
}

@media (min-width: 1024px) {
    .site-footer__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }
}

/* --- Reduced motion: keep every state and colour, drop the movement ------------- */

@media (prefers-reduced-motion: reduce) {
    .wz-cover__media,
    .wz-cover__eyebrow,
    .wz-cover__line,
    .wz-cover__lead,
    .wz-cover__actions,
    .wz-cover__aside,
    .lang-switch__panel,
    .lang-switch__panel li {
        animation: none;
    }

    .wz-index__title,
    .wz-index__thumb img,
    .wz-dock {
        transition: none;
        translate: none;
    }
}