.nvf-hero {
    --nvf-hero-overlay-color: #000000;
    --nvf-hero-overlay-opacity: 0.38;
    --nvf-hero-gradient-opacity: 0.6;
    --nvf-hero-content-gap: 14px;
    --nvf-hero-content-width: 560px;
    --nvf-hero-compact-content-width: 470px;
    --nvf-hero-compact-min-floor: 560px;
    --nvf-hero-motion-scale: 1.06;
    --nvf-hero-motion-duration: 18s;
    --nvf-hero-header-frame-left: 0px;
    --nvf-hero-header-frame-right: 0px;
    --nvf-hero-header-local-bottom: 0px;
    --nvf-hero-breadcrumb-header-gap: 12px;
    --nvf-hero-breadcrumb-frame-inset: 12px;
    --nvf-hero-breadcrumb-content-gap: 16px;
    --nvf-hero-compact-pad-top: 180px;
    --nvf-hero-compact-pad-right: 64px;
    --nvf-hero-compact-pad-bottom: 42px;
    --nvf-hero-compact-pad-left: 64px;
    --nvf-hero-bottom-center-width: 580px;
    --nvf-hero-bottom-center-offset: 72px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 860px;
    color: #ffffff;
    background: #0b1325;
    border-radius: 0;
}

.nvf-hero,
.nvf-hero * {
    box-sizing: border-box;
}

.nvf-hero__media,
.nvf-hero__overlay {
    position: absolute;
    inset: 0;
}

.nvf-hero__media {
    z-index: 0;
    overflow: hidden;
    background: #0b1325;
}

.nvf-hero .nvf-hero__media-frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    transform-origin: center center;
    will-change: transform;
}

.nvf-hero__video {
    pointer-events: none;
}

.nvf-hero__overlay {
    z-index: 1;
    pointer-events: none;
}

.nvf-hero__overlay::before,
.nvf-hero__overlay::after {
    content: "";
    position: absolute;
    inset: 0;
}

.nvf-hero__overlay::before {
    background: var(--nvf-hero-overlay-color);
    opacity: var(--nvf-hero-overlay-opacity);
}

.nvf-hero--gradient .nvf-hero__overlay::after {
    background: linear-gradient(90deg, rgba(0,0,0,var(--nvf-hero-gradient-opacity)) 0%, rgba(0,0,0,calc(var(--nvf-hero-gradient-opacity) * 0.42)) 36%, rgba(0,0,0,0) 72%);
}

.nvf-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: inherit;
    max-width: 1220px;
    margin: 0 auto;
    padding: 160px 64px 112px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.nvf-hero__content-stack {
    width: 100%;
    max-width: var(--nvf-hero-content-width);
    min-width: 0;
}

.nvf-hero__content {
    width: 100%;
    max-width: 100%;
    text-align: left;
}

.nvf-hero__content > * {
    margin: 0;
}

.nvf-hero__content > * + * {
    margin-top: var(--nvf-hero-content-gap);
}

.nvf-hero__eyebrow {
    color: #ffffff;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.nvf-hero__rating {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;
}

.nvf-hero__rating-stars {
    color: #ffd84d;
    letter-spacing: 0.04em;
    line-height: 1;
    font-size: 12px;
}

.nvf-hero__rating-text {
    color: #ffffff;
    opacity: 0.9;
}

.nvf-hero__title {
    color: #ffffff;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.035em;
    max-width: 12.5em;
}

.nvf-hero__description {
    color: rgba(255,255,255,0.88);
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
    max-width: 44em;
}

.nvf-hero__description p {
    margin: 0;
}

.nvf-hero__description p + p {
    margin-top: 0.75em;
}

.nvf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin-top: calc(var(--nvf-hero-content-gap) + 8px);
}

.nvf-hero__button,
.nvf-hero__secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: transform 220ms ease, background-color 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    -webkit-tap-highlight-color: transparent;
}

.nvf-hero__button:hover,
.nvf-hero__button:focus-visible,
.nvf-hero__secondary-link:hover,
.nvf-hero__secondary-link:focus-visible {
    transform: translateY(-1px);
    text-decoration: none;
}

.nvf-hero__button:focus-visible,
.nvf-hero__secondary-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.nvf-hero__button--primary {
    padding: 15px 30px;
    color: #ffffff;
    background: #b5284d;
    border: 1px solid transparent;
    box-shadow: 0 14px 30px rgba(0,0,0,0.16);
}

.nvf-hero__button--primary:hover,
.nvf-hero__button--primary:focus-visible {
    color: #ffffff;
    background: #8f1e3e;
}

.nvf-hero__button--secondary {
    padding: 15px 30px;
    color: #ffffff;
    background: rgba(255,255,255,0);
    border: 1px solid rgba(255,255,255,0.72);
}

.nvf-hero__button--secondary:hover,
.nvf-hero__button--secondary:focus-visible {
    background: rgba(255,255,255,0.12);
    border-color: #ffffff;
}

.nvf-hero__secondary-link {
    position: relative;
    min-height: 36px;
    padding: 0 0 4px;
    color: #ffffff;
    border-radius: 0;
}

.nvf-hero__secondary-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(255,255,255,0.72);
    transform-origin: left center;
    transition: transform 220ms ease, background-color 220ms ease;
}

.nvf-hero__secondary-link:hover::after,
.nvf-hero__secondary-link:focus-visible::after {
    transform: scaleX(0.84);
    background: #ffffff;
}

.nvf-hero--css-intro [data-nvf-hero-reveal] {
    opacity: 0;
    animation: nvfHeroReveal var(--nvf-hero-intro-duration, 0.85s) cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--nvf-hero-intro-delay, 0.25s) + (var(--nvf-hero-index, 0) * var(--nvf-hero-intro-stagger, 0.1s)));
}

.nvf-hero--css-intro[data-intro-preset="fade-up-scale"] [data-nvf-hero-reveal] {
    transform: translateY(24px) scale(0.975);
}

.nvf-hero--css-intro[data-intro-preset="fade-up"] [data-nvf-hero-reveal] {
    transform: translateY(24px);
}

.nvf-hero--css-bg-motion.nvf-hero--css-kenburns-in .nvf-hero__media-frame {
    animation: nvfHeroKenBurnsIn var(--nvf-hero-motion-duration) ease-in-out infinite alternate;
}

.nvf-hero--css-bg-motion.nvf-hero--css-kenburns-out .nvf-hero__media-frame {
    animation: nvfHeroKenBurnsOut var(--nvf-hero-motion-duration) ease-in-out infinite alternate;
}

.nvf-hero--css-bg-motion.nvf-hero--css-pan-left .nvf-hero__media-frame {
    animation: nvfHeroPanLeft var(--nvf-hero-motion-duration) ease-in-out infinite alternate;
}

.nvf-hero--css-bg-motion.nvf-hero--css-pan-right .nvf-hero__media-frame {
    animation: nvfHeroPanRight var(--nvf-hero-motion-duration) ease-in-out infinite alternate;
}

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

@keyframes nvfHeroKenBurnsIn {
    from { transform: scale(1) translate3d(0,0,0); }
    to { transform: scale(var(--nvf-hero-motion-scale)) translate3d(0,0,0); }
}

@keyframes nvfHeroKenBurnsOut {
    from { transform: scale(var(--nvf-hero-motion-scale)) translate3d(0,0,0); }
    to { transform: scale(1) translate3d(0,0,0); }
}

@keyframes nvfHeroPanLeft {
    from { transform: scale(var(--nvf-hero-motion-scale)) translate3d(1.8%,0,0); }
    to { transform: scale(var(--nvf-hero-motion-scale)) translate3d(-1.8%,0,0); }
}

@keyframes nvfHeroPanRight {
    from { transform: scale(var(--nvf-hero-motion-scale)) translate3d(-1.8%,0,0); }
    to { transform: scale(var(--nvf-hero-motion-scale)) translate3d(1.8%,0,0); }
}



.nvf-hero__breadcrumb {
    position: absolute;
    z-index: 3;
    top: 24px;
    left: max(24px, calc((100% - 1580px) / 2 + 12px));
    right: 24px;
    width: auto;
    max-width: calc(100% - 48px);
    color: rgba(255,255,255,0.82);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.nvf-hero--breadcrumb-inline .nvf-hero__breadcrumb {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 100%;
    margin: 0 0 var(--nvf-hero-breadcrumb-content-gap);
}

.nvf-hero--header-aligned .nvf-hero__breadcrumb {
    left: calc(var(--nvf-hero-header-frame-left) + var(--nvf-hero-breadcrumb-frame-inset));
    right: calc(var(--nvf-hero-header-frame-right) + var(--nvf-hero-breadcrumb-frame-inset));
    max-width: none;
}

.nvf-hero--header-overlap .nvf-hero__breadcrumb {
    top: calc(var(--nvf-hero-header-local-bottom) + var(--nvf-hero-breadcrumb-header-gap));
}

.nvf-hero__breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nvf-hero__breadcrumb-item,
.nvf-hero__breadcrumb-separator {
    min-width: 0;
    margin: 0;
    padding: 0;
}

.nvf-hero__breadcrumb a,
.nvf-hero__breadcrumb-current {
    display: inline-block;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.nvf-hero__breadcrumb a {
    color: rgba(255,255,255,0.82);
    transition: color 180ms ease, opacity 180ms ease;
}

.nvf-hero__breadcrumb a:hover,
.nvf-hero__breadcrumb a:focus-visible {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nvf-hero__breadcrumb-current {
    color: #ffffff;
    font-weight: 600;
}

.nvf-hero__breadcrumb-separator {
    color: rgba(255,255,255,0.62);
    user-select: none;
}


/* Derde contentvariant: gecentreerde tekst onderin, onafhankelijk van de herohoogte. */
.nvf-hero.nvf-hero--layout-bottom-center .nvf-hero__inner {
    align-items: flex-end;
    justify-content: center;
    padding-bottom: var(--nvf-hero-bottom-center-offset);
}

.nvf-hero.nvf-hero--layout-bottom-center .nvf-hero__content {
    width: 100%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.nvf-hero.nvf-hero--layout-bottom-center .nvf-hero__content-stack {
    max-width: var(--nvf-hero-bottom-center-width);
    margin-right: auto;
    margin-left: auto;
}

.nvf-hero.nvf-hero--layout-bottom-center.nvf-hero--breadcrumb-inline .nvf-hero__breadcrumb-list {
    justify-content: center;
}

.nvf-hero.nvf-hero--layout-bottom-center .nvf-hero__eyebrow,
.nvf-hero.nvf-hero--layout-bottom-center .nvf-hero__rating {
    margin-right: auto;
    margin-left: auto;
}

.nvf-hero.nvf-hero--layout-bottom-center .nvf-hero__title,
.nvf-hero.nvf-hero--layout-bottom-center .nvf-hero__description {
    margin-right: auto;
    margin-left: auto;
}

.nvf-hero.nvf-hero--layout-bottom-center .nvf-hero__actions {
    justify-content: center;
}

.nvf-hero.nvf-hero--layout-bottom-center.nvf-hero--gradient .nvf-hero__overlay::after {
    background: linear-gradient(180deg, rgba(0,0,0,0) 28%, rgba(0,0,0,calc(var(--nvf-hero-gradient-opacity) * 0.28)) 52%, rgba(0,0,0,var(--nvf-hero-gradient-opacity)) 100%);
}

/* Compacte subpagina-hero: zelfde widget/markup, compacter formaat. */
.nvf-hero--variant-compact {
    min-height: max(50vh, var(--nvf-hero-compact-min-floor));
}

.nvf-hero--variant-compact .nvf-hero__inner {
    padding: var(--nvf-hero-compact-pad-top) var(--nvf-hero-compact-pad-right) var(--nvf-hero-compact-pad-bottom) var(--nvf-hero-compact-pad-left);
}

/* Header-meting is uitsluitend gekoppeld aan .nvf-hero__breadcrumb. */

.nvf-hero--variant-compact .nvf-hero__content-stack {
    max-width: var(--nvf-hero-compact-content-width);
}

.nvf-hero--variant-compact.nvf-hero--layout-bottom-center .nvf-hero__content-stack {
    max-width: var(--nvf-hero-bottom-center-width);
}

.nvf-hero--variant-compact .nvf-hero__title {
    max-width: 13em;
    font-size: clamp(30px, 2.55vw, 44px);
    line-height: 1.08;
}

.nvf-hero--variant-compact .nvf-hero__description {
    max-width: 42em;
    font-size: 15px;
    line-height: 1.72;
}

.nvf-hero--variant-compact .nvf-hero__actions {
    margin-top: calc(var(--nvf-hero-content-gap) + 4px);
}

@media (max-width: 1024px) {
    .nvf-hero {
        --nvf-hero-bottom-center-width: 560px;
        --nvf-hero-bottom-center-offset: 56px;
    }

    .nvf-hero {
        min-height: 720px;
    }

    .nvf-hero--variant-compact {
        --nvf-hero-compact-min-floor: 540px;
        min-height: 58vh;
    }

    .nvf-hero__inner {
        padding: 140px 40px 90px;
    }

    .nvf-hero--variant-compact {
        --nvf-hero-compact-pad-top: 150px;
        --nvf-hero-compact-pad-right: 40px;
        --nvf-hero-compact-pad-bottom: 44px;
        --nvf-hero-compact-pad-left: 40px;
        --nvf-hero-breadcrumb-header-gap: 10px;
        --nvf-hero-breadcrumb-frame-inset: 8px;
    }

    .nvf-hero__title {
        font-size: clamp(32px, 5.2vw, 50px);
    }
}

@media (max-width: 767px) {
    .nvf-hero {
        --nvf-hero-bottom-center-width: 100%;
        --nvf-hero-bottom-center-offset: 36px;
    }

    .nvf-hero {
        min-height: 680px;
    }

    .nvf-hero--variant-compact {
        --nvf-hero-compact-min-floor: 620px;
        min-height: 72vh;
    }

    .nvf-hero--gradient .nvf-hero__overlay::after {
        background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,calc(var(--nvf-hero-gradient-opacity) * 0.76)) 42%, rgba(0,0,0,var(--nvf-hero-gradient-opacity)) 100%);
    }

    .nvf-hero__inner {
        padding: 136px 24px 72px;
        align-items: flex-end;
    }

    .nvf-hero--variant-compact {
        --nvf-hero-compact-pad-top: 112px;
        --nvf-hero-compact-pad-right: 24px;
        --nvf-hero-compact-pad-bottom: 36px;
        --nvf-hero-compact-pad-left: 24px;
        --nvf-hero-breadcrumb-header-gap: 10px;
        --nvf-hero-breadcrumb-frame-inset: 0px;
    }

    .nvf-hero__breadcrumb {
        left: 24px;
        right: 24px;
        max-width: calc(100% - 48px);
        font-size: 11px;
    }

    .nvf-hero--breadcrumb-inline .nvf-hero__breadcrumb-list {
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .nvf-hero--breadcrumb-inline .nvf-hero__breadcrumb-item {
        flex: 0 1 auto;
        overflow: hidden;
        white-space: nowrap;
    }

    .nvf-hero--breadcrumb-inline .nvf-hero__breadcrumb-item.is-current {
        flex: 1 1 auto;
    }

    .nvf-hero--breadcrumb-inline .nvf-hero__breadcrumb-current {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nvf-hero--breadcrumb-hide-mobile .nvf-hero__breadcrumb {
        display: none;
    }

    .nvf-hero--header-aligned .nvf-hero__breadcrumb {
        left: calc(var(--nvf-hero-header-frame-left) + var(--nvf-hero-breadcrumb-frame-inset));
        right: calc(var(--nvf-hero-header-frame-right) + var(--nvf-hero-breadcrumb-frame-inset));
        max-width: none;
    }

    .nvf-hero__content {
        max-width: 100%;
    }

    .nvf-hero__title {
        font-size: clamp(34px, 10vw, 44px);
        max-width: 11.5em;
    }

    .nvf-hero--variant-compact .nvf-hero__title {
        font-size: clamp(30px, 9vw, 40px);
        max-width: 12em;
    }

    .nvf-hero__description {
        font-size: 15px;
        line-height: 1.72;
    }

    .nvf-hero--mobile-stack .nvf-hero__actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .nvf-hero--mobile-stack .nvf-hero__button,
    .nvf-hero--mobile-stack .nvf-hero__secondary-link {
        width: 100%;
    }

    .nvf-hero--mobile-stack .nvf-hero__secondary-link {
        width: fit-content;
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nvf-hero .nvf-hero__media-frame,
    .nvf-hero [data-nvf-hero-reveal],
    .nvf-hero__button,
    .nvf-hero__secondary-link,
    .nvf-hero__secondary-link::after {
        animation: none;
        transition: none;
        transform: none;
    }

    .nvf-hero--css-intro [data-nvf-hero-reveal] {
        opacity: 1;
    }
}