/* Centred brand and a 4 / 3 desktop navigation split. Kept separate from page CSS. */
html body #main-header.nf-cinematic-header.nf-centred-header {
    --nf-header-gutter: clamp(28px, 3.6vw, 68px);
    --nf-centred-header-height: 96px;
    --nf-header-nav-height: 40px;
    --nf-header-nav-offset: 32px;
    --nf-header-brand-width: 128px;
    --nf-header-brand-height: 76px;
    --nf-header-logo-height: 64px;
    --nf-header-utility-top: 8px;
    --nf-header-utility-height: 32px;
    --nf-header-cta-font: 11px;
    --nf-header-link-font: 12px;
    min-height: 0 !important;
    transform: translate3d(0, 0, 0) !important;
    transition: transform 200ms ease, background-color 160ms ease !important;
}

html body #main-header.nf-cinematic-header.nf-centred-header.is-header-compact {
    --nf-centred-header-height: 88px;
    --nf-header-nav-height: 40px;
    --nf-header-brand-width: 120px;
    --nf-header-brand-height: 72px;
    --nf-header-logo-height: 60px;
    --nf-header-utility-top: 8px;
    --nf-header-utility-height: 30px;
    --nf-header-cta-font: 11px;
    --nf-header-link-font: 12px;
}

html body #main-header.nf-cinematic-header.nf-centred-header.is-header-hidden {
    transform: translate3d(0, -100%, 0) !important;
    pointer-events: none;
}

html body #main-header.nf-cinematic-header.nf-centred-header.is-header-hidden:focus-within {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto;
}

html body #main-header.nf-cinematic-header.nf-centred-header::before,
html body #main-header.nf-cinematic-header.nf-centred-header::after {
    display: none !important;
    background: none !important;
    content: none !important;
}

html body #main-header.nf-cinematic-header.nf-centred-header.transparent-header {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body #main-header.nf-cinematic-header.nf-centred-header.scrolled-header {
    border: 0 !important;
    background: #fff !important;
    box-shadow: 0 3px 18px rgba(23, 19, 15, .07) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html body #main-header.nf-cinematic-header.nf-centred-header.scrolled-header :is(.nf-cinematic-nav-link, .vt-pill-item, .nf-header-language-trigger, .nf-header-language-trigger > span, .nf-mobile-language-trigger, .nf-mobile-language-trigger > span, .vt-mobile-toggle) {
    color: #17130f !important;
    -webkit-text-fill-color: #17130f !important;
}

html body #main-header.nf-cinematic-header.nf-centred-header.scrolled-header .vt-header-brand .logo-img {
    filter: brightness(0) !important;
}

html body #main-header.nf-cinematic-header.nf-centred-header.scrolled-header :is(.nf-cinematic-nav-link, .vt-pill-item):hover,
html body #main-header.nf-cinematic-header.nf-centred-header.scrolled-header .nf-cinematic-nav-link[aria-current="page"] {
    color: #8c4f16 !important;
    -webkit-text-fill-color: #8c4f16 !important;
}

html body #main-header.nf-cinematic-header.nf-centred-header :is(a, button):focus-visible {
    outline: 2px solid #efb158 !important;
    outline-offset: 4px !important;
}

#mobile-menu .nf-mobile-plan-cta {
    border-radius: 0 !important;
}

@media (min-width: 1200px) {
    html body #main-header.nf-cinematic-header.nf-centred-header {
        height: var(--nf-centred-header-height) !important;
        border: 0 !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .nf-header-main-row {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 152px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 24px !important;
        width: calc(100% - var(--nf-header-gutter) * 2) !important;
        max-width: 1664px !important;
        height: var(--nf-centred-header-height) !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
        direction: ltr;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .nf-header-topbar {
        position: absolute !important;
        inset: var(--nf-header-utility-top) 0 auto !important;
        display: block !important;
        height: var(--nf-header-utility-height) !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        pointer-events: none;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .nf-header-topbar-inner {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: calc(100% - var(--nf-header-gutter) * 2) !important;
        max-width: 1664px !important;
        height: var(--nf-header-utility-height) !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .nf-header-contact,
    html body #main-header.nf-cinematic-header.nf-centred-header .nf-header-utilities > .nf-header-theme {
        display: none !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .nf-header-utilities {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 18px !important;
        width: auto !important;
        height: var(--nf-header-utility-height) !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: auto;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .nf-header-language {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        margin: 0 !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .nf-header-language-trigger {
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        height: var(--nf-header-utility-height) !important;
        padding: 0 2px !important;
        font-size: 11px !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .nf-header-language-trigger > img {
        width: 17px !important;
        height: 12px !important;
        flex-basis: 17px !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .nf-header-plan-cta {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 110px !important;
        height: var(--nf-header-utility-height) !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 1px solid #efb158 !important;
        border-radius: 0 !important;
        background: #efb158 !important;
        color: #17130f !important;
        -webkit-text-fill-color: #17130f !important;
        font: 600 var(--nf-header-cta-font)/1.1 var(--nf-font-body) !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .nf-header-plan-cta:hover {
        border-color: #f5c578 !important;
        background: #f5c578 !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header :is(.nf-header-left-nav, .nf-header-right-nav) {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        min-width: 0 !important;
        height: var(--nf-header-nav-height) !important;
        margin: var(--nf-header-nav-offset) 0 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .nf-header-left-nav {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-content: flex-start !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .nf-header-left-nav .vt-nav-pill,
    html body #main-header.nf-cinematic-header.nf-centred-header .nf-header-right-nav {
        display: flex !important;
        align-items: center !important;
        gap: clamp(20px, 2.3vw, 40px) !important;
        height: var(--nf-header-nav-height) !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .nf-header-right-nav {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-content: flex-end !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header :is(.nf-cinematic-nav-link, .vt-pill-item) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        height: var(--nf-header-nav-height) !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        font: 500 var(--nf-header-link-font)/1.2 var(--nf-font-body) !important;
        letter-spacing: 0 !important;
        text-decoration: none !important;
        text-transform: none !important;
        white-space: nowrap !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header :is(.nf-cinematic-nav-link, .vt-pill-item):hover,
    html body #main-header.nf-cinematic-header.nf-centred-header .nf-cinematic-nav-link[aria-current="page"] {
        color: #efb158 !important;
        -webkit-text-fill-color: #efb158 !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .vt-header-brand {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: static !important;
        inset: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: var(--nf-header-brand-width) !important;
        height: var(--nf-header-brand-height) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .vt-header-brand > a {
        display: block !important;
        width: var(--nf-header-brand-width) !important;
        height: var(--nf-header-brand-height) !important;
        overflow: hidden;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .vt-header-brand .logo-img {
        position: static !important;
        inset: auto !important;
        display: block !important;
        width: var(--nf-header-brand-width) !important;
        max-width: var(--nf-header-brand-width) !important;
        height: var(--nf-header-logo-height) !important;
        max-height: none !important;
        margin: calc((var(--nf-header-brand-height) - var(--nf-header-logo-height)) / 2) 0 !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: none !important;
        transition: none !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .vt-pill-dropdown {
        top: var(--nf-centred-header-height) !important;
        max-height: calc(100dvh - var(--nf-centred-header-height) - 20px) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .nf-header-mobile-actions {
        display: none !important;
    }
}

@media (max-width: 1199px) {
    html body #main-header.nf-cinematic-header.nf-centred-header {
        --nf-centred-header-height: 72px;
        --nf-header-brand-width: 104px;
        --nf-header-brand-height: 54px;
        --nf-header-logo-height: 54px;
        height: var(--nf-centred-header-height) !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header.is-header-compact {
        --nf-centred-header-height: 64px;
        --nf-header-brand-width: 92px;
        --nf-header-brand-height: 46px;
        --nf-header-logo-height: 46px;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .nf-header-main-row {
        grid-template-rows: minmax(0, 1fr) !important;
        height: var(--nf-centred-header-height) !important;
        min-height: 0 !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header :is(.nf-header-topbar, .nf-header-left-nav, .nf-header-right-nav) {
        display: none !important;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .vt-header-brand,
    html body #main-header.nf-cinematic-header.nf-centred-header .vt-header-brand > a {
        width: var(--nf-header-brand-width) !important;
        height: var(--nf-header-brand-height) !important;
        overflow: visible;
    }

    html body #main-header.nf-cinematic-header.nf-centred-header .vt-header-brand .logo-img {
        display: block !important;
        width: var(--nf-header-brand-width) !important;
        max-width: var(--nf-header-brand-width) !important;
        height: var(--nf-header-logo-height) !important;
        max-height: none !important;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: none !important;
        transition: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body #main-header.nf-cinematic-header.nf-centred-header,
    html body #main-header.nf-cinematic-header.nf-centred-header::before {
        transition: none !important;
    }
}
