:root {
    --site-header-height:76px;
    --header-padding-x:var(--gutter-wide,70px);
    --header-bg:color-mix(in srgb,var(--color-light) 75%,transparent);
    --header-overlay:rgba(3,8,22,.3);
    --mobile-overlay:rgba(3,8,22,.97);
    --mobile-border:rgba(245,245,245,.34);
    --header-arrow-bg:color-mix(in srgb,var(--color-light) 96%,var(--color-dark) 4%);
    --header-ease:var(--nav-hover-ease);
    --popup-ease:cubic-bezier(.16,1,.3,1);
    --mobile-dropdown-ease:ease-in-out;
    --header-duration:.4s;
}

body {
    padding-top:var(--site-header-height);
}

#site-header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:calc(var(--z-modal) - 1);
    background:var(--header-bg);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:0;
    box-shadow:none;
    transition:
        background var(--header-duration) ease,
        backdrop-filter var(--header-duration) ease,
        -webkit-backdrop-filter var(--header-duration) ease;
}

#site-header.menu-open {
    background:var(--color-white);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.site-header__inner {
    width:100%;
    display:grid;
    grid-template-columns:25% 50% 25%;
    align-items:center;
    padding:var(--space-3) var(--header-padding-x);
}

.site-header__brand,
.site-header__navigation,
.site-header__actions {
    min-width:0;
    display:flex;
    align-items:center;
}

.site-header__brand {
    justify-content:flex-start;
}

.site-header__navigation {
    justify-content:center;
}

.site-header__actions {
    justify-content:flex-end;
}

.site-header__logo {
    display:block;
    width:clamp(210px,17vw,270px);
    line-height:0;
}

.site-header__logo-image {
    display:block;
    width:100%;
    height:auto;
    transition:filter var(--header-duration) ease;
}

#site-header.mobile-menu-open .site-header__logo-image {
    filter:brightness(0) invert(1);
}

#site-header.mobile-menu-closing .site-header__logo-image {
    filter:none;
}

.site-nav__list {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(24px,2vw,38px);
    margin:0;
    padding:0;
    list-style:none;
}

.site-nav__list>li {
    margin:0;
    padding:0;
}

.site-nav__list .sub-menu {
    display:none;
}

.site-nav__list>li>a {
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 0;
    color:var(--color-secondary-dark);
    font-family:var(--font-heading);
    font-size:18px;
    font-weight:var(--font-weight-medium);
    line-height:1;
    white-space:nowrap;
    text-decoration:none;
    transition:color var(--header-duration) ease;
}

.site-nav__list>li>a:hover,
.site-nav__list>li.current-menu-item>a,
.site-nav__list>li.current-menu-parent>a,
.site-nav__list>li.current-menu-ancestor>a,
.site-nav__list>li.is-open>a {
    color:var(--color-primary);
}

.site-nav__list>.menu-item-has-children>a {
    cursor:pointer;
}

.site-nav__list>li>a .nav-text {
    position:relative;
    display:inline-block;
}

.site-nav__list>li>a .nav-text::after {
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:100%;
    height:2px;
    background:var(--color-primary);
    transform:scaleX(0);
    transform-origin:right;
    transition:transform var(--header-duration) var(--header-ease);
}

.site-nav__list>li>a:hover .nav-text::after,
.site-nav__list>li.is-open>a .nav-text::after {
    transform:scaleX(1);
    transform-origin:left;
}

.diensten-arrow {
    display:inline-flex;
    transition:transform var(--header-duration) var(--header-ease);
}

.diensten-arrow svg {
    display:block;
    stroke:currentColor;
}

.menu-item-has-children.is-open .diensten-arrow {
    transform:rotate(180deg);
}

.site-header__cta {
    flex-shrink:0;
}

#mega-menu-diensten {
    position:fixed;
    top:var(--site-header-height);
    left:0;
    right:0;
    z-index:calc(var(--z-modal) - 2);
    display:grid;
    grid-template-rows:0fr;
    width:100%;
    padding:0 var(--header-padding-x);
    background:var(--color-white);
    visibility:hidden;
    pointer-events:none;
    transition:
        grid-template-rows var(--header-duration) var(--header-ease),
        padding var(--header-duration) var(--header-ease),
        visibility 0s linear var(--header-duration);
}

#mega-menu-diensten.is-open {
    grid-template-rows:1fr;
    padding-top:20px;
    padding-bottom:20px;
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s;
}

.mega-menu-diensten__inner {
    min-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-8px);
    transition:
        opacity var(--header-duration) ease,
        transform var(--header-duration) var(--header-ease);
}

#mega-menu-diensten.is-open .mega-menu-diensten__inner {
    opacity:1;
    transform:translateY(0);
}

.mega-menu-diensten__title {
    margin:0 0 var(--space-5);
    color:var(--color-dark);
    font-family:var(--font-heading);
    font-size:clamp(20px,1.35vw,22px);
    font-weight:var(--font-weight-semibold);
    line-height:1.25;
}

.gradient-text {
    color:var(--color-primary);
}

.mega-menu-diensten__links {
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:center;
    gap:clamp(24px,2.6vw,50px);
}

.mega-link {
    display:inline-flex;
    align-items:center;
    gap:clamp(10px,.8vw,14px);
    width:fit-content;
    color:var(--color-dark);
    font-family:var(--font-heading);
    font-size:clamp(18px,1.15vw,20px);
    font-weight:var(--font-weight-medium);
    line-height:1.25;
    white-space:nowrap;
    text-decoration:none;
    transition:color var(--header-duration) ease;
}

.mega-link:hover {
    color:var(--color-primary);
}

.arrow-btn {
    width:clamp(42px,2.5vw,46px);
    height:clamp(42px,2.5vw,46px);
    flex:0 0 clamp(42px,2.5vw,46px);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-pill);
    background:var(--header-arrow-bg);
    transition:background var(--header-duration) ease;
}

.arrow-btn svg {
    width:clamp(18px,1.2vw,20px);
    height:clamp(18px,1.2vw,20px);
    stroke:var(--color-dark);
    transform:rotate(-45deg);
    transition:
        stroke var(--header-duration) ease,
        transform var(--header-duration) var(--header-ease);
}

.mega-link:hover .arrow-btn {
    background:var(--color-primary);
}

.mega-link:hover .arrow-btn svg {
    stroke:var(--color-light);
    transform:rotate(0);
}

#menu-overlay {
    position:fixed;
    top:var(--site-header-height);
    left:0;
    right:0;
    bottom:0;
    z-index:calc(var(--z-modal) - 4);
    background:var(--header-overlay);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity var(--header-duration) ease,
        visibility 0s linear var(--header-duration);
}

#menu-overlay.is-open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s;
}

#hamburger-toggle {
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    padding:8px;
    margin:-8px;
    border:0;
    background:transparent;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

#hamburger-toggle span {
    display:block;
    width:24px;
    height:2px;
    background:var(--color-secondary-dark);
    border-radius:2px;
    transform-origin:center;
    transition:
        transform var(--header-duration) var(--popup-ease),
        opacity var(--header-duration) ease,
        background var(--header-duration) ease;
}

#site-header.mobile-menu-open #hamburger-toggle span {
    background:var(--color-light);
}

#site-header.mobile-menu-closing #hamburger-toggle span {
    background:var(--color-secondary-dark);
}

#hamburger-toggle.open span:nth-child(1) {
    transform:translateY(7px) rotate(45deg);
}

#hamburger-toggle.open span:nth-child(2) {
    opacity:0;
    transform:scaleX(0);
}

#hamburger-toggle.open span:nth-child(3) {
    transform:translateY(-7px) rotate(-45deg);
}

.mobile-menu {
    position:fixed;
    inset:0;
    z-index:calc(var(--z-modal) - 3);
    width:100%;
    height:100dvh;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    touch-action:pan-y;
    scrollbar-width:none;
    -ms-overflow-style:none;
    visibility:hidden;
    pointer-events:none;
    opacity:0;
    background:rgba(3,8,22,0);
    transition:
        opacity var(--header-duration) ease,
        background var(--header-duration) ease,
        visibility 0s linear var(--header-duration);
}

.mobile-menu::-webkit-scrollbar {
    display:none;
    width:0;
    height:0;
}

.mobile-menu.is-mounted {
    visibility:visible;
    transition-delay:0s;
}

.mobile-menu.is-open {
    opacity:1;
    background:var(--mobile-overlay);
    pointer-events:auto;
}

.mobile-menu.is-closing {
    opacity:0;
    background:rgba(3,8,22,0);
    pointer-events:none;
}

.mobile-menu__content {
    min-height:100dvh;
    padding:var(--site-header-height) var(--header-padding-x) 40px;
    opacity:0;
    transform:translateY(12px);
    transition:
        opacity var(--header-duration) ease,
        transform var(--header-duration) var(--popup-ease);
}

.mobile-menu.is-open .mobile-menu__content {
    opacity:1;
    transform:translateY(0);
}

.mobile-menu.is-closing .mobile-menu__content {
    opacity:0;
    transform:translateY(8px);
}

.mobile-nav-menu,
.mobile-nav-menu *,
.mobile-nav-list,
.mobile-nav-list * {
    -webkit-tap-highlight-color:transparent;
}

.mobile-nav-list {
    margin:0;
    padding:0;
    list-style:none;
}

.mobile-nav-list>li {
    opacity:0;
    transform:translateY(6px);
    border-bottom:1px solid var(--mobile-border);
    transition:
        opacity var(--header-duration) ease,
        transform var(--header-duration) var(--popup-ease);
}

.mobile-menu.is-open .mobile-nav-list>li {
    opacity:1;
    transform:translateY(0);
}

.mobile-menu.is-closing .mobile-nav-list>li {
    opacity:0;
    transform:translateY(5px);
}

.mobile-nav-list>li>a {
    display:flex;
    align-items:center;
    gap:8px;
    padding:16px 0;
    color:var(--color-light);
    opacity:.7;
    font-family:var(--font-heading);
    font-size:22px;
    font-weight:var(--font-weight-semibold);
    line-height:1.3;
    text-decoration:none;
    outline:none;
    transition:
        opacity .2s ease,
        color .2s ease;
}

.mobile-nav-list>.has-children>a {
    cursor:pointer;
}

.mobile-nav-list>li.current-menu-item>a,
.mobile-nav-list>li.current-menu-parent>a,
.mobile-nav-list>li.current-menu-ancestor>a {
    color:var(--color-light);
    opacity:1;
}

.mobile-nav-list>li.is-tapping>a {
    color:var(--color-light);
    opacity:1;
}

.mobile-nav-list>li>a .nav-text {
    position:relative;
    display:inline-block;
}

.mobile-nav-list>li>a .nav-text::after {
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;
    width:100%;
    height:2px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .22s var(--header-ease);
}

.mobile-nav-list>li.is-tapping>a .nav-text::after {
    transform:scaleX(1);
    transform-origin:left;
}

.mobile-nav-list .has-children>a .arrow {
    display:inline-flex;
    align-items:center;
    transition:
        transform
        var(--header-duration)
        var(--mobile-dropdown-ease);
}

.mobile-nav-list .has-children.open>a .arrow {
    transform:rotate(180deg);
}

.mobile-nav-list .sub-menu {
    max-height:0;
    overflow:hidden;
    margin:0;
    padding:0;
    list-style:none;
    transition:
        max-height
        var(--header-duration)
        var(--mobile-dropdown-ease);
}

.mobile-nav-list .sub-menu li {
    border:0;
}

.mobile-nav-list .sub-menu li>a {
    position:relative;
    display:flex;
    align-items:center;
    padding:10px 0 10px 20px;
    color:var(--color-light);
    opacity:.62;
    font-family:var(--font-heading);
    font-size:17px;
    font-weight:500;
    line-height:1.35;
    text-decoration:none;
    transform:translateX(-5px);
    transition:
        color .2s ease,
        opacity .2s ease,
        transform var(--header-duration) var(--mobile-dropdown-ease),
        padding-left .2s ease;
}

.mobile-nav-list .sub-menu li>a::before {
    content:"";
    position:absolute;
    left:5px;
    top:50%;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--color-light);
    opacity:0;
    transform:translate(-6px,-50%) scale(.4);
    transition:
        opacity .2s ease,
        transform .22s var(--header-ease);
}

.mobile-nav-list .sub-menu li>a .nav-text::after {
    display:none!important;
}

.mobile-nav-list .has-children.open>.sub-menu li>a {
    opacity:.62;
    transform:translateX(0);
}

.mobile-nav-list .sub-menu li.is-tapping>a {
    color:var(--color-light);
    opacity:1;
    padding-left:30px;
}

.mobile-nav-list .sub-menu li.is-tapping>a::before {
    opacity:1;
    transform:translate(8px,-50%) scale(1);
}

.mobile-nav-list .sub-menu .current-menu-item>a {
    color:var(--color-light);
    opacity:1;
}

.mobile-menu__cta-wrap {
    padding-top:20px;
    opacity:0;
    transform:translateY(6px);
    transition:
        opacity var(--header-duration) ease,
        transform var(--header-duration) var(--popup-ease);
}

.mobile-menu.is-open .mobile-menu__cta-wrap {
    opacity:1;
    transform:translateY(0);
}

.mobile-menu.is-closing .mobile-menu__cta-wrap {
    opacity:0;
    transform:translateY(5px);
}

#site-header.mobile-menu-open {
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    border:0!important;
    box-shadow:none!important;
}

#site-header.mobile-menu-open::before,
#site-header.mobile-menu-open::after {
    content:none!important;
    display:none!important;
}

#site-header.mobile-menu-closing {
    background:var(--color-light)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
}

@media(hover:hover) and (pointer:fine) {
    .mobile-nav-list>li>a:hover {
        color:var(--color-light);
        opacity:1;
    }

    .mobile-nav-list>li>a:hover .nav-text::after {
        transform:scaleX(1);
        transform-origin:left;
    }

    .mobile-nav-list .has-children.open>.sub-menu li>a:hover {
        color:var(--color-light);
        opacity:1;
        padding-left:30px;
    }

    .mobile-nav-list .has-children.open>.sub-menu li>a:hover::before {
        opacity:1;
        transform:translate(8px,-50%) scale(1);
    }
}

@media(max-width:1600px) {
    .site-header__logo {
        width:clamp(220px,16vw,260px);
    }

    .site-nav__list {
        gap:clamp(24px,1.8vw,30px);
    }
}

@media(min-width:1201px) and (max-width:1450px) {
    #mega-menu-diensten {
        padding-left:50px;
        padding-right:50px;
    }

    .mega-menu-diensten__links {
        grid-template-columns:repeat(4,max-content);
        justify-content:space-between;
        gap:16px;
    }

    .mega-menu-diensten__title {
        font-size:20px;
    }

    .mega-link {
        gap:10px;
        font-size:16px;
    }

    .arrow-btn {
        width:38px;
        height:38px;
        flex:0 0 38px;
    }

    .arrow-btn svg {
        width:17px;
        height:17px;
    }
}

@media(max-width:1200px) {
    .site-nav,
    .site-header__actions {
        display:none;
    }

    #hamburger-toggle {
        display:flex;
    }

    .site-header__inner {
        grid-template-columns:minmax(0,1fr) auto;
    }

    .site-header__navigation {
        justify-content:flex-end;
    }

    .site-header__logo {
        width:230px;
        max-width:calc(100vw - 110px);
    }

    #mega-menu-diensten,
    #menu-overlay {
        display:none;
    }
}

@media(max-width:767px) {
    .site-header__inner {
        grid-template-columns:minmax(0,1fr) auto;
        padding:15px var(--header-padding-x);
    }

    .site-header__logo {
        width:230px;
        max-width:calc(100vw - 95px);
    }

    .mobile-nav-list>li>a {
        font-size:22px;
        font-weight:var(--font-weight-semibold);
    }

    .mobile-nav-list .sub-menu li>a {
        font-size:17px;
        font-weight:500;
    }
}

@media(prefers-reduced-motion:reduce) {
    #site-header,
    #mega-menu-diensten,
    #menu-overlay,
    .mobile-menu,
    .mobile-menu *,
    .mega-link *,
    .site-nav * {
        transition-duration:.01ms!important;
    }
}