/*
     * Design tokens (--ndn-*) are declared in the central design-system CSS
     * (developercode-core plugin → assets/css/ndn-design-system.css) at
     * html:root level, so they are authoritative everywhere. This header
     * only consumes them via var(), nothing more.
     */

    /* =========================================================
       HEADER SHELL
       Non-sticky. On body.home the header is an absolute
       transparent overlay over the reveria-hero-advanced widget;
       on other pages it sits normally in document flow.
       Either way the header scrolls away with the page.
       ========================================================= */
    .ndn-header {
        position: relative;
        z-index: 900;
        background: var(--ndn-surface);
        box-shadow: var(--ndn-shadow-sm);
    }
    .ndn-header__main { padding: 14px 0; }
    .ndn-header__container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 32px;
        display: flex;
        align-items: center;
        gap: 24px;
    }

    /* ── Transparent overlay header for any page that starts with a hero
       (home + all pages with body.ndn-has-hero auto-added in functions) ── */
    body.home .ndn-header,
    body.ndn-has-hero .ndn-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: transparent;
        box-shadow: none;
    }
    body.home .ndn-header .ndn-header__logo-text,
    body.home .ndn-header .ndn-header__nav-link,
    body.home .ndn-header .ndn-header__mobile-toggle span,
    body.ndn-has-hero .ndn-header .ndn-header__logo-text,
    body.ndn-has-hero .ndn-header .ndn-header__nav-link,
    body.ndn-has-hero .ndn-header .ndn-header__mobile-toggle span {
        color: #ffffff;
    }
    body.home .ndn-header .ndn-header__logo-img,
    body.ndn-has-hero .ndn-header .ndn-header__logo-img { filter: brightness(0) invert(1); }
    body.home .ndn-header .ndn-header__mobile-toggle,
    body.ndn-has-hero .ndn-header .ndn-header__mobile-toggle {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: none;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    body.home .ndn-header .ndn-header__mobile-toggle:hover,
    body.ndn-has-hero .ndn-header .ndn-header__mobile-toggle:hover {
        background: rgba(255, 255, 255, 0.18);
        border-color: #ffffff;
    }
    body.home .ndn-header .ndn-header__mobile-toggle span,
    body.ndn-has-hero .ndn-header .ndn-header__mobile-toggle span { background: #ffffff; }
    body.home .ndn-header .ndn-header__nav-link:hover,
    body.home .ndn-header .ndn-header__nav-link:focus-visible,
    body.ndn-has-hero .ndn-header .ndn-header__nav-link:hover,
    body.ndn-has-hero .ndn-header .ndn-header__nav-link:focus-visible {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
    }
    body.home .ndn-header .ndn-header__nav-link.is-active,
    body.ndn-has-hero .ndn-header .ndn-header__nav-link.is-active {
        color: #ffffff;
    }
    body.home .ndn-header .ndn-header__nav-link.is-active::after,
    body.ndn-has-hero .ndn-header .ndn-header__nav-link.is-active::after {
        background: var(--ndn-accent);
    }

    /* =========================================================
       TOP BAR
       ========================================================= */
    .ndn-topbar {
        color: var(--ndn-white);
        font-size: 13px;
        transition: background-color var(--ndn-t);
    }
    /* Transparent on home hero — keeps white text readable on dark hero bg */
    body.home .ndn-header:not(.is-scrolled) .ndn-topbar {
        background: transparent;
    }
    body.home .ndn-header:not(.is-scrolled) .ndn-topbar__divider {
        background: rgba(255, 255, 255, 0.28);
    }
    .ndn-topbar__container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 8px 32px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 24px;
        flex-wrap: wrap;
    }
    .ndn-topbar__group {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .ndn-topbar__item {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--ndn-white);
        text-decoration: none;
        font-weight: 500;
        letter-spacing: 0.01em;
        transition: opacity var(--ndn-t);
    }
    .ndn-topbar__item--link:hover { opacity: 0.82; }
    .ndn-topbar__item svg { width: 14px; height: 14px; color: var(--ndn-accent); flex-shrink: 0; }
    .ndn-topbar__divider { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.22); }
    .ndn-topbar__google { gap: 6px; }
    .ndn-topbar__stars { color: #fbbc04; display: inline-flex; gap: 1px; }
    .ndn-topbar__stars svg { width: 11px; height: 11px; fill: currentColor; color: #fbbc04; }
    .ndn-topbar__rating { font-weight: 700; }
    .ndn-topbar__label { color: rgba(255, 255, 255, 0.82); }
    @media (max-width: 900px) {
        .ndn-topbar { display: none; }
    }

    /* =========================================================
       LOGO
       ========================================================= */
    .ndn-header__logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: var(--ndn-primary);
        flex-shrink: 0;
    }
    .ndn-header__logo-img {
        display: block;
        height: 52px;
        width: auto;
        transition: height var(--ndn-t);
    }
    .ndn-header__logo-text {
        font-family: "Times New Roman", Times, serif;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1.1;
    }
    .ndn-header__logo-text em {
        display: block;
        font-size: 11px;
        font-weight: 500;
        font-style: normal;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ndn-accent);
        margin-top: 2px;
    }

    /* =========================================================
       PRIMARY NAV
       ========================================================= */
    .ndn-header__nav {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-left: auto;
    }
    .ndn-header__nav-list {
        display: flex;
        align-items: center;
        gap: 2px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .ndn-header__nav-item { position: relative; list-style: none; }
    .ndn-header__nav-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 11px 14px;
        font-family: 'Jost', 'DM Sans', sans-serif;
        font-size: 14.5px;
        font-weight: 600;
        color: var(--ndn-primary);
        text-decoration: none;
        border-radius: 10px;
        white-space: nowrap;
        transition: color var(--ndn-t), background-color var(--ndn-t);
    }
    .ndn-header__nav-link:hover,
    .ndn-header__nav-link:focus-visible {
        color: var(--ndn-accent-dark);
        background: var(--ndn-accent-soft);
        outline: none;
    }
    .ndn-header__nav-link.is-active {
        color: var(--ndn-accent-dark);
    }
    .ndn-header__nav-link.is-active::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 4px;
        height: 2px;
        border-radius: 2px;
        background: var(--ndn-accent);
    }
    .ndn-caret {
        width: 11px;
        height: 11px;
        transition: transform var(--ndn-t);
    }
    .ndn-header__nav-item.has-children:hover .ndn-caret,
    .ndn-header__nav-item.has-children:focus-within .ndn-caret { transform: rotate(180deg); }

    /* =========================================================
       ACTIONS (CTA + mobile toggle)
       ========================================================= */
    .ndn-header__actions {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }
    .ndn-header__cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 22px;
        border-radius: 999px;
        background: var(--ndn-accent);
        color: #ffffff !important;
        font-family: 'DM Sans', 'Jost', sans-serif;
        font-size: 14.5px;
        font-weight: 700;
        text-decoration: none;
        letter-spacing: 0.01em;
        box-shadow: 0 10px 24px -8px rgba(200, 164, 106, 0.55);
        transition: background-color var(--ndn-t), transform var(--ndn-t), box-shadow var(--ndn-t);
    }
    .ndn-header__cta:hover,
    .ndn-header__cta:focus-visible {
        background: var(--ndn-primary);
        transform: translateY(-2px);
        box-shadow: 0 14px 30px -8px rgba(26, 26, 26, 0.6);
        outline: none;
    }
    .ndn-header__cta svg { width: 15px; height: 15px; }

    /* ── Unique mobile toggle — branded pill with gold dot indicator
       + premium hamburger→X morph. Accent border matches NDN palette. ── */
    .ndn-header__mobile-toggle {
        display: none;
        position: relative;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border: 1.5px solid var(--ndn-accent);
        background: var(--ndn-white);
        cursor: pointer;
        padding: 0;
        border-radius: 14px;
        box-shadow: 0 6px 16px -8px rgba(169, 131, 74, 0.45);
        transition: background-color var(--ndn-t), border-color var(--ndn-t),
                    box-shadow var(--ndn-t), transform var(--ndn-t);
        -webkit-tap-highlight-color: transparent;
    }
    .ndn-header__mobile-toggle::after {
        /* tiny gold status dot — "online" feel, disappears when open */
        content: "";
        position: absolute;
        top: 8px;
        right: 8px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--ndn-accent);
        box-shadow: 0 0 0 2px var(--ndn-white), 0 0 10px rgba(200, 164, 106, 0.8);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .ndn-header__mobile-toggle:hover,
    .ndn-header__mobile-toggle:focus-visible {
        background: var(--ndn-accent-soft);
        border-color: var(--ndn-accent-dark);
        box-shadow: 0 10px 22px -8px rgba(169, 131, 74, 0.65);
        outline: none;
    }
    .ndn-header__mobile-toggle:active { transform: scale(0.96); }

    /* Hamburger bars sit in a fixed 22x16 box, centered */
    .ndn-header__mobile-toggle span {
        display: block;
        position: absolute;
        left: 50%;
        width: 22px;
        height: 2px;
        background: var(--ndn-primary);
        border-radius: 2px;
        transform-origin: center;
        transition: transform 0.35s cubic-bezier(0.68, -0.4, 0.27, 1.5),
                    top 0.25s ease 0.1s,
                    opacity 0.2s ease,
                    background-color var(--ndn-t),
                    width 0.25s ease;
        margin-left: -11px;
    }
    .ndn-header__mobile-toggle span:nth-child(1) { top: 16px; }
    .ndn-header__mobile-toggle span:nth-child(2) { top: 23px; width: 16px; }
    .ndn-header__mobile-toggle span:nth-child(3) { top: 30px; }

    .ndn-header__mobile-toggle.is-active { background: var(--ndn-accent); border-color: var(--ndn-accent-dark); }
    .ndn-header__mobile-toggle.is-active::after { opacity: 0; transform: scale(0); }
    .ndn-header__mobile-toggle.is-active span { background: #ffffff; transition-delay: 0s, 0s, 0s, 0s, 0s; }
    .ndn-header__mobile-toggle.is-active span:nth-child(1) { top: 23px; transform: rotate(45deg); }
    .ndn-header__mobile-toggle.is-active span:nth-child(2) { opacity: 0; width: 22px; }
    .ndn-header__mobile-toggle.is-active span:nth-child(3) { top: 23px; transform: rotate(-45deg); }

    /* =========================================================
       MEGAMENU — premium, icon-rich, image CTA
       ========================================================= */
    .ndn-megamenu {
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        width: min(1220px, 96vw);
        background: var(--ndn-surface);
        border-radius: 22px;
        box-shadow:
            0 40px 90px -30px rgba(26, 26, 26, 0.35),
            0 18px 40px -20px rgba(169, 131, 74, 0.18);
        border: 1px solid var(--ndn-border);
        padding: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                    visibility 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 50;
        overflow: hidden;
    }
    /* Gold top accent line on the panel */
    .ndn-megamenu::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, var(--ndn-accent) 30%, var(--ndn-accent-dark) 70%, transparent 100%);
        z-index: 2;
    }
    .ndn-header__nav-item.has-children:hover .ndn-megamenu,
    .ndn-header__nav-item.has-children:focus-within .ndn-megamenu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    .ndn-megamenu__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr)) 1.25fr;
        gap: 0;
    }
    @media (max-width: 1180px) {
        .ndn-megamenu__grid { grid-template-columns: repeat(2, 1fr); }
        .ndn-megamenu__column--cta { grid-column: 1 / -1; }
    }

    .ndn-megamenu__column {
        padding: 28px 24px 26px;
        position: relative;
    }
    .ndn-megamenu__column + .ndn-megamenu__column {
        border-left: 1px solid var(--ndn-border);
    }

    .ndn-megamenu__group-title {
        font-family: var(--ndn-font-heading);
        font-size: 11px;
        font-weight: 700;
        color: var(--ndn-accent-dark);
        letter-spacing: 0.16em;
        text-transform: uppercase;
        margin: 0 0 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .ndn-megamenu__group-title::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, var(--ndn-border), transparent);
    }

    .ndn-megamenu__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .ndn-megamenu__item { list-style: none; }
    .ndn-megamenu__link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 12px;
        color: var(--ndn-text-main);
        text-decoration: none;
        font-size: 14.5px;
        font-weight: 500;
        transition: background-color var(--ndn-transition),
                    color var(--ndn-transition),
                    transform var(--ndn-transition);
    }
    .ndn-megamenu__link:hover,
    .ndn-megamenu__link:focus-visible {
        background: var(--ndn-surface-soft);
        color: var(--ndn-accent-dark);
        transform: translateX(3px);
        outline: none;
    }
    .ndn-megamenu__icon {
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: var(--ndn-surface-soft);
        color: var(--ndn-accent-dark);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--ndn-border);
        transition: background-color var(--ndn-transition),
                    color var(--ndn-transition),
                    border-color var(--ndn-transition),
                    transform var(--ndn-transition);
    }
    .ndn-megamenu__icon svg {
        width: 18px;
        height: 18px;
        stroke-width: 1.6;
    }
    .ndn-megamenu__link:hover .ndn-megamenu__icon,
    .ndn-megamenu__link:focus-visible .ndn-megamenu__icon {
        background: var(--ndn-accent-dark);
        color: #ffffff;
        border-color: var(--ndn-accent-dark);
        transform: rotate(-3deg) scale(1.05);
    }
    .ndn-megamenu__title { line-height: 1.3; }

    /* ── CTA column with image ── */
    .ndn-megamenu__column--cta {
        padding: 0;
        border-left: 1px solid var(--ndn-border);
        position: relative;
        min-height: 420px;
        background: var(--ndn-text-main);
        color: var(--ndn-surface);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .ndn-megamenu__cta-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
        transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .ndn-megamenu__column--cta:hover .ndn-megamenu__cta-image {
        transform: scale(1.05);
    }
    .ndn-megamenu__cta-overlay {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(180deg, rgba(26, 26, 26, 0.1) 0%, rgba(26, 26, 26, 0.75) 55%, rgba(26, 26, 26, 0.94) 100%),
            radial-gradient(ellipse at 85% 15%, rgba(200, 164, 106, 0.25) 0%, transparent 60%);
        z-index: 1;
    }
    .ndn-megamenu__cta-body {
        position: relative;
        z-index: 2;
        margin-top: auto;
        padding: 28px 26px;
    }
    .ndn-megamenu__cta-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 4px 11px;
        border-radius: 999px;
        background: rgba(200, 164, 106, 0.2);
        color: #e9d5b6;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        margin-bottom: 12px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .ndn-megamenu__cta-eyebrow::before {
        content: "";
        width: 5px; height: 5px;
        border-radius: 50%;
        background: var(--ndn-accent);
        box-shadow: 0 0 0 3px rgba(200, 164, 106, 0.25);
    }
    .ndn-megamenu__cta-title {
        font-family: var(--ndn-font-heading);
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2;
        color: #ffffff;
        margin: 0 0 10px;
        letter-spacing: -0.01em;
    }
    .ndn-megamenu__cta-desc {
        font-size: 13.5px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.8);
        margin: 0 0 18px;
    }
    .ndn-megamenu__cta-actions {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .ndn-megamenu__cta-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 12px;
        color: #ffffff;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all var(--ndn-transition);
    }
    .ndn-megamenu__cta-link:hover,
    .ndn-megamenu__cta-link:focus-visible {
        background: rgba(200, 164, 106, 0.95);
        border-color: transparent;
        color: #1A1A1A;
        transform: translateX(4px);
        outline: none;
    }
    .ndn-megamenu__cta-link svg {
        width: 16px; height: 16px;
        margin-left: auto;
        transition: transform var(--ndn-transition);
    }
    .ndn-megamenu__cta-link:hover svg { transform: translateX(3px); }
    .ndn-megamenu__cta-link--primary {
        background: var(--ndn-accent-dark);
        border-color: transparent;
    }
    .ndn-megamenu__cta-link--primary:hover {
        background: #ffffff;
        color: var(--ndn-text-main);
    }

    /* =========================================================
       MOBILE DRAWER
       ========================================================= */
    .ndn-mobile__overlay {
        position: fixed;
        inset: 0;
        background: rgba(26, 26, 26, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--ndn-t), visibility var(--ndn-t);
        z-index: 9998;
    }
    .ndn-mobile__overlay.is-active { opacity: 1; visibility: visible; }
    .ndn-mobile {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(380px, 92vw);
        background: var(--ndn-white);
        z-index: 9999;
        transform: translateX(100%);
        transition: transform var(--ndn-t);
        display: flex;
        flex-direction: column;
        box-shadow: -20px 0 60px -10px rgba(0, 0, 0, 0.25);
    }
    .ndn-mobile.is-active { transform: translateX(0); }
    .ndn-mobile__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 22px;
        border-bottom: 1px solid var(--ndn-border);
    }
    .ndn-mobile__logo {
        font-family: "Times New Roman", Times, serif;
        font-size: 18px;
        font-weight: 700;
        color: var(--ndn-primary);
        text-decoration: none;
    }
    .ndn-mobile__close {
        width: 36px;
        height: 36px;
        border: none;
        background: transparent;
        border-radius: 10px;
        cursor: pointer;
        color: var(--ndn-primary);
    }
    .ndn-mobile__close svg { width: 20px; height: 20px; }

    /* ── Quick-actions bar pinned to bottom of drawer — prominent go-to CTAs
       Three 56px-tall pills: Bel / WhatsApp / Boek. The drawer uses a flex
       column layout; .ndn-mobile__nav has flex:1 so this block is pushed
       against the bottom edge regardless of nav length. ── */
    .ndn-mobile__quick-actions {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
        background: linear-gradient(0deg, var(--ndn-accent-soft) 0%, rgba(246, 242, 236, 0) 100%);
        border-top: 1px solid var(--ndn-border);
        flex-shrink: 0;
    }
    .ndn-mobile__quick-btn {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 56px;
        padding: 8px 6px;
        border-radius: 12px;
        background: var(--ndn-white);
        border: 1px solid var(--ndn-border);
        color: var(--ndn-primary);
        font-family: 'DM Sans', 'Jost', sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-decoration: none;
        text-align: center;
        transition: transform var(--ndn-t), box-shadow var(--ndn-t),
                    background-color var(--ndn-t), border-color var(--ndn-t),
                    color var(--ndn-t);
        -webkit-tap-highlight-color: transparent;
    }
    .ndn-mobile__quick-btn svg {
        width: 18px;
        height: 18px;
        color: var(--ndn-accent-dark);
        transition: color var(--ndn-t);
    }
    .ndn-mobile__quick-btn:hover,
    .ndn-mobile__quick-btn:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px -10px rgba(169, 131, 74, 0.5);
        border-color: var(--ndn-accent);
        outline: none;
    }
    .ndn-mobile__quick-btn:active { transform: translateY(0) scale(0.97); }

    /* "Boek" stands out as the primary action — filled gold */
    .ndn-mobile__quick-btn--book {
        background: var(--ndn-accent);
        border-color: var(--ndn-accent-dark);
        color: #ffffff;
        box-shadow: 0 8px 18px -8px rgba(200, 164, 106, 0.55);
    }
    .ndn-mobile__quick-btn--book svg { color: #ffffff; }
    .ndn-mobile__quick-btn--book:hover,
    .ndn-mobile__quick-btn--book:focus-visible {
        background: var(--ndn-primary);
        border-color: var(--ndn-primary);
        color: #ffffff;
    }
    .ndn-mobile__quick-btn--book:hover svg { color: #ffffff; }

    .ndn-mobile__nav {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 12px 14px;
    }
    .ndn-mobile__list { list-style: none; margin: 0; padding: 0; }
    .ndn-mobile__item {
        border-bottom: 1px solid var(--ndn-border);
    }
    .ndn-mobile__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 10px;
        font-family: 'DM Sans', 'Jost', sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: var(--ndn-primary);
        text-decoration: none;
    }
    .ndn-mobile__link--cta {
        color: var(--ndn-accent-dark);
    }
    .ndn-mobile__toggle {
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 14px 10px;
        width: 100%;
        text-align: left;
    }
    .ndn-mobile__chevron {
        width: 16px;
        height: 16px;
        transition: transform var(--ndn-t);
        color: var(--ndn-accent);
    }
    .ndn-mobile__item.is-open .ndn-mobile__chevron { transform: rotate(180deg); }
    .ndn-mobile__sub {
        display: none;
        list-style: none;
        margin: 0 0 12px;
        padding: 0 0 0 4px;
    }
    .ndn-mobile__item.is-open .ndn-mobile__sub { display: block; }
    .ndn-mobile__sub-group {
        padding: 6px 0 10px;
    }
    .ndn-mobile__sub-title {
        display: block;
        padding: 6px 10px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ndn-accent-dark);
    }
    .ndn-mobile__sub-link {
        display: block;
        padding: 9px 10px;
        font-size: 14.5px;
        font-weight: 500;
        color: var(--ndn-text-muted);
        text-decoration: none;
        border-radius: var(--ndn-radius);
    }
    .ndn-mobile__sub-link:hover,
    .ndn-mobile__sub-link:focus-visible {
        background: var(--ndn-accent-soft);
        color: var(--ndn-accent-dark);
        outline: none;
    }
    /* =========================================================
       RESPONSIVE
       ========================================================= */
    @media (max-width: 1200px) {
        .ndn-header__nav-link { padding: 10px 11px; font-size: 14px; }
    }
    @media (max-width: 1024px) {
        .ndn-header__nav { display: none; }
        .ndn-header__mobile-toggle { display: inline-flex; }
        /* Push actions (toggle + CTA) all the way to the right once the
           nav is hidden — without this they'd sit flush against the logo. */
        .ndn-header__actions { gap: 8px; margin-left: auto; }
        .ndn-header__cta { padding: 10px 16px; font-size: 13.5px; }
    }
    /* ≤720px — CTA is redundant (drawer exposes a prominent Boek button).
       Keep header lean: logo on left, hamburger pinned right. */
    @media (max-width: 720px) {
        .ndn-header__cta { display: none; }
        .ndn-header__actions { gap: 0; margin-left: auto; }
    }
    @media (max-width: 560px) {
        .ndn-header__container { padding: 0 18px; }
        .ndn-header__logo-img { height: 44px; }
        .ndn-header__mobile-toggle { width: 44px; height: 44px; border-radius: 12px; }
        .ndn-header__mobile-toggle::after { top: 6px; right: 6px; }
    }
    /* Drawer quick-action buttons — shrink labels on tiny phones */
    @media (max-width: 360px) {
        .ndn-mobile__quick-actions { padding: 12px 14px; gap: 6px; }
        .ndn-mobile__quick-btn { font-size: 11px; min-height: 52px; }
    }