/* =========================================================
   VARIABLES
========================================================= */

:root {

    --lux-dark: #11110F;
    --lux-primary: #171715;

    --lux-background: #f0f5fa;
    --lux-panel: #F7F4EF;
    --lux-panel-hover: #ECE8E1;

    --lux-body: #5B5954;
    --lux-accent: #A39482;

    --lux-border: rgba(23, 23, 21, 0.10);
    --lux-light-border: rgba(245, 243, 238, 0.20);

    --lux-font: "Manrope", Arial, sans-serif;

    --lux-header-height: 92px;
    --lux-side-padding: 48px;

}


/* =========================================================
   HEADER
========================================================= */

.lux-header,
.lux-header * {
    box-sizing: border-box;
}


.lux-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 99999;

    font-family: var(--lux-font);

    color: #FFFFFF;
}


body.admin-bar .lux-header {
    top: 32px;
}


/* =========================================================
   HEADER BAR
========================================================= */

.lux-header__bar {

    position: relative;

    z-index: 20;

    width: 100%;

    height: var(--lux-header-height);

    background: transparent;

    transition:
        background-color 0.35s ease,
        backdrop-filter 0.35s ease;
}


/* hover */

.lux-header:hover .lux-header__bar,

.lux-header.is-scrolled .lux-header__bar,

.lux-header.is-open .lux-header__bar {

    background:
        rgba(17, 17, 15, 0.96);

    -webkit-backdrop-filter:
        blur(8px);

    backdrop-filter:
        blur(8px);
}


/* =========================================================
   HEADER INNER
========================================================= */

.lux-header__inner {

    width: 100%;

    height: 100%;

    padding:

        0
        var(--lux-side-padding);

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;
}


/* =========================================================
   LEFT
========================================================= */

.lux-header__left {

    justify-self: start;
}


/* =========================================================
   TOGGLE
========================================================= */

.lux-menu-toggle {

    width: 58px;
    height: 58px;

    padding: 0;

    border: 0;

    background:
        rgba(17, 17, 15, 0.25);

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 7px;

    cursor: pointer;

    transition:
        background-color 0.3s ease;
}


.lux-header:hover
.lux-menu-toggle,

.lux-header.is-scrolled
.lux-menu-toggle,

.lux-header.is-open
.lux-menu-toggle {

    background:
        rgba(245, 243, 238, 0.08);
}


.lux-menu-toggle:hover {

    background:
        rgba(245, 243, 238, 0.15) !important;
}


.lux-menu-toggle__line {

    width: 30px;
    height: 2px;

    display: block;

    background: #FFFFFF;

    transition:
        transform 0.35s ease,
        opacity 0.25s ease;
}


/* X */

.lux-header.is-open
.lux-menu-toggle__line:nth-child(1) {

    transform:
        translateY(9px)
        rotate(45deg);
}


.lux-header.is-open
.lux-menu-toggle__line:nth-child(2) {

    opacity: 0;
}


.lux-header.is-open
.lux-menu-toggle__line:nth-child(3) {

    transform:
        translateY(-9px)
        rotate(-45deg);
}


/* =========================================================
   LOGO
========================================================= */

.lux-header__brand {

    justify-self: center;

    display: flex;

    align-items: center;

    justify-content: center;
}


.lux-header__logo {

    display: block;

    width: 185px;

    height: auto;

    max-height: 60px;

    object-fit: contain;
}


/* =========================================================
   HEADER RIGHT
========================================================= */

.lux-header__right {

    justify-self: end;
}


/* =========================================================
   HEADER CTA
========================================================= */

.lux-header-cta {

    min-width: 220px;

    height: 56px;

    padding:

        0
        24px;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    background: #000046;

    border:
        1px solid
        var(--lux-background);

    color: #fff; !important;

    text-decoration:
        none !important;

    font-family:
        var(--lux-font);

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.02em;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


.lux-header-cta:hover {

    background:
        transparent;

    border-color:
        rgba(245, 243, 238, 0.6);

    color:
        #FFFFFF !important;
}


.lux-header-cta__arrow {

    font-size: 18px;

    transition:
        transform 0.3s ease;
}


.lux-header-cta:hover
.lux-header-cta__arrow {

    transform:
        translateX(5px);
}


/* =========================================================
   MEGA MENU WRAPPER
========================================================= */

.lux-mega-menu {

    position: absolute;

    top: var(--lux-header-height);

    left: 0;

    width: 100%;

    padding:

        22px
        var(--lux-side-padding)
        30px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-18px);

    transition:
        opacity 0.35s ease,
        transform 0.45s cubic-bezier(.22,1,.36,1),
        visibility 0s linear 0.45s;
}


/* OPEN */

.lux-header.is-open
.lux-mega-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0);

    transition:
        opacity 0.35s ease,
        transform 0.45s cubic-bezier(.22,1,.36,1),
        visibility 0s;
}


/* =========================================================
   PANEL
========================================================= */

.lux-mega-menu__panel {

    width: 100%;

    max-width: 1700px;

    margin: 0 auto;

    padding: 28px;

    background: #f0f5fa;

    border:
        1px solid
        rgba(255,255,255,0.12);

    border-radius:
        24px;

    box-shadow:
        0 24px 70px
        rgba(0,0,0,0.22);

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(420px, 1.45fr);

    overflow: hidden;
}


/* =========================================================
   COLUMNS
========================================================= */

.lux-mega-column {

    min-width: 0;
}


.lux-mega-column--one,
.lux-mega-column--two {

    padding:
        10px
        26px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 14px;
}


.lux-mega-column--one {

    border-right:
        1px solid
        var(--lux-border);
}


.lux-mega-column--two {

    border-right:
        1px solid
        var(--lux-border);
}


/* =========================================================
   LINKS
========================================================= */

.lux-mega-link {

    width: 100%;

    min-height: 112px;

    padding:
        17px;

    display: flex;

    align-items: flex-start;

    gap: 17px;

    border-radius:
        15px;

    color:
        var(--lux-primary);

    text-decoration:
        none !important;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}


.lux-mega-link:hover,

.lux-mega-link.is-active {

    background: #fff;
}


/* =========================================================
   ICON
========================================================= */

.lux-mega-link__icon {

    width: 52px;
    height: 52px;

    flex:
        0 0 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(255,255,255,0.45);

    border:
        1px solid
        var(--lux-border);

    border-radius:
        13px;

    color:
        var(--lux-accent);
}


.lux-mega-link__icon svg {

    width: 23px;
    height: 23px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   LINK CONTENT
========================================================= */

.lux-mega-link__content {

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.lux-mega-link__title {

    font-family:
        var(--lux-font);

    font-size:
        17px;

    font-weight:
        500;

    line-height:
        1.3;

    color:
        var(--lux-primary);
}


.lux-mega-link__description {

    max-width:
        250px;

    font-family:
        var(--lux-font);

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1.55;

    color:
        var(--lux-body);
}


/* =========================================================
   IMAGE COLUMN
========================================================= */

.lux-mega-column--preview {

    padding-left:
        28px;
}


/* =========================================================
   PREVIEW
========================================================= */

.lux-mega-preview {

    position: relative;

    width: 100%;

    height: 100%;

    min-height:
        410px;

    overflow: hidden;

    border-radius:
        18px;

    background:
        #D8D2C8;
}


/* =========================================================
   PREVIEW ITEMS
========================================================= */

.lux-mega-preview__item {

    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    transform:
        scale(1.025);

    transition:
        opacity 0.45s ease,
        transform 0.75s cubic-bezier(.22,1,.36,1),
        visibility 0s linear 0.45s;
}


.lux-mega-preview__item.is-active {

    opacity: 1;

    visibility: visible;

    transform:
        scale(1);

    transition:
        opacity 0.45s ease,
        transform 0.75s cubic-bezier(.22,1,.36,1),
        visibility 0s;
}


.lux-mega-preview__item img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


/* =========================================================
   IMAGE SHADE
========================================================= */

.lux-mega-preview__shade {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(

            to top,

            rgba(10,9,8,0.62) 0%,

            rgba(10,9,8,0.16) 48%,

            rgba(10,9,8,0.02) 75%

        );
}


/* =========================================================
   PREVIEW CONTENT
========================================================= */

.lux-mega-preview__content {

    position: absolute;

    left: 30px;

    right: 30px;

    bottom: 27px;

    color: #FFFFFF;
}


.lux-mega-preview__content h3 {

    margin:

        0
        0
        7px !important;

    padding: 0;

    font-family:
        var(--lux-font) !important;

    font-size:
        22px;

    font-weight:
        500 !important;

    line-height:
        1.2;

    color:
        #FFFFFF;
}


.lux-mega-preview__content p {

    margin: 0;

    max-width:
        420px;

    font-family:
        var(--lux-font);

    font-size:
        13px;

    line-height:
        1.55;

    color:
        rgba(255,255,255,0.85);
}


/* =========================================================
   BODY LOCK
========================================================= */

body.lux-menu-open {

    overflow:
        hidden;
}


/* =========================================================
   HIDE ASTRA DEFAULT HEADER
========================================================= */

#masthead {

    display:
        none !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    :root {

        --lux-header-height:
            80px;

        --lux-side-padding:
            30px;
    }


    .lux-header__logo {

        width:
            155px;
    }


    .lux-menu-toggle {

        width:
            52px;

        height:
            52px;
    }


    .lux-header-cta {

        min-width:
            190px;

        height:
            50px;

        font-size:
            11px;
    }


    .lux-mega-menu {

        max-height:
            calc(100svh - var(--lux-header-height));

        overflow-y:
            auto;
    }


    .lux-mega-menu__panel {

        grid-template-columns:
            1fr 1fr;

        padding:
            22px;
    }


    .lux-mega-column--two {

        border-right:
            0;
    }


    .lux-mega-column--preview {

        grid-column:
            1 / -1;

        padding:

            24px
            0
            0;

        margin-top:
            12px;

        border-top:
            1px solid
            var(--lux-border);
    }


    .lux-mega-preview {

        min-height:
            330px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    :root {

        --lux-header-height:
            72px;

        --lux-side-padding:
            20px;
    }


    body.admin-bar
    .lux-header {

        top:
            46px;
    }


    .lux-menu-toggle {

        width:
            46px;

        height:
            46px;
    }


    .lux-menu-toggle__line {

        width:
            26px;
    }


    .lux-header__logo {

        width:
            125px;
    }


    .lux-header-cta {

        display:
            none;
    }


    .lux-header__right {

        min-width:
            46px;
    }


    .lux-mega-menu {

        padding:

            12px
            12px
            20px;

        max-height:
            calc(100svh - var(--lux-header-height));

        overflow-y:
            auto;
    }


    .lux-mega-menu__panel {

        display:
            block;

        padding:
            14px;

        border-radius:
            18px;
    }


    .lux-mega-column--one,
    .lux-mega-column--two {

        padding:
            0;

        border:
            0;

        gap:
            5px;
    }


    .lux-mega-column--two {

        margin-top:
            5px;
    }


    .lux-mega-link {

        min-height:
            auto;

        padding:
            13px;

        border-radius:
            12px;

        gap:
            13px;
    }


    .lux-mega-link__icon {

        width:
            44px;

        height:
            44px;

        flex-basis:
            44px;
    }


    .lux-mega-link__icon svg {

        width:
            20px;

        height:
            20px;
    }


    .lux-mega-link__title {

        font-size:
            15px;
    }


    .lux-mega-link__description {

        font-size:
            12px;
    }


    .lux-mega-column--preview {

        padding:
            18px
            0
            0;

        margin-top:
            15px;
    }


    .lux-mega-preview {

        min-height:
            250px;

        border-radius:
            14px;
    }


    .lux-mega-preview__content {

        left:
            20px;

        right:
            20px;

        bottom:
            18px;
    }


    .lux-mega-preview__content h3 {

        font-size:
            18px;
    }

}











/* =========================================================
   SANITAIRMEESTERS BRAND BLUE
   Subtle luxury accent
========================================================= */

:root {
    --lux-brand-blue: #315F7D;
    --lux-brand-blue-dark: #254B65;
    --lux-brand-blue-soft: #E7EEF3;
    --lux-brand-blue-border: rgba(49, 95, 125, 0.18);
}


/* ICONS */

.lux-mega-link__icon {
    color: var(--lux-brand-blue);

    border-color:
        var(--lux-brand-blue-border);

    background:
        rgba(255,255,255,0.60);
}


/* ACTIVE / HOVER MENU ITEM */

.lux-mega-link:hover,
.lux-mega-link.is-active {
    background:
        var(--lux-brand-blue-soft);
}


/* subtle active indicator */

.lux-mega-link {
    position: relative;
}


.lux-mega-link::after {
    content: "";

    position: absolute;

    left: 0;
    top: 18px;
    bottom: 18px;

    width: 2px;

    background:
        var(--lux-brand-blue);

    opacity: 0;

    transform:
        scaleY(0.4);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


.lux-mega-link:hover::after,
.lux-mega-link.is-active::after {
    opacity: 1;

    transform:
        scaleY(1);
}


/* MENU TITLE HOVER */

.lux-mega-link:hover
.lux-mega-link__title,

.lux-mega-link.is-active
.lux-mega-link__title {
    color:
        var(--lux-brand-blue-dark);
}


/* IMAGE EYEBROW */

.lux-mega-preview__eyebrow {
    display: block;

    margin-bottom: 7px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 10px;

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: 0.15em;

    color:
        #D7E7F1;

    text-transform: uppercase;
}


/* small blue line underneath preview */

.lux-mega-preview__content::after {
    content: "";

    display: block;

    width: 54px;

    height: 2px;

    margin-top: 16px;

    background:
        #7EA9C4;
}