/* =========================================================
   MUVON — CLEAN FINAL MENU
   Desktop: 2 rows
   Mobile: single column
   No hover images
   ========================================================= */


/* ---------- OVERLAY ---------- */

.header__wrapper-overlay-menu {
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255,255,255,.025),
            transparent 42%
        ),
        #070707 !important;

    overflow: hidden !important;
}


/* Hide old visual system completely */

.muvon-menu-visual {
    display: none !important;
}


/* ---------- MENU WRAPPER ---------- */

.header__wrapper-menu {
    width: 88vw !important;
    max-width: 1450px !important;

    min-height: 100vh !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* ---------- MENU LIST ---------- */

.header__wrapper-menu > ul,
.header__wrapper-menu .menu {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* ---------- ITEMS ---------- */

.header__wrapper-menu li {
    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;

    opacity: 1 !important;
}


/* ---------- LINKS ---------- */

.header__wrapper-menu li > a {
    position: relative;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    color: rgba(255,255,255,.62) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-weight: 300 !important;

    text-transform: uppercase;
    text-decoration: none !important;

    transition:
        color .3s ease,
        transform .35s cubic-bezier(.22,1,.36,1);
}


.header__wrapper-menu li:hover > a {
    color: #fff !important;
}


/* ---------- UNDERLINE ---------- */

.header__wrapper-menu li > a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 1px;

    background: rgba(255,255,255,.65);

    transform: translateX(-50%);

    transition:
        width .4s cubic-bezier(.22,1,.36,1);
}


.header__wrapper-menu li:hover > a::after {
    width: 34px;
}


/* =========================================================
   DESKTOP
   TWO CLEAN ROWS
   ========================================================= */

@media (min-width: 992px) {

    .header__wrapper-menu {
        min-height: 100vh !important;

        transform: translateY(-4vh);
    }


    .header__wrapper-menu > ul,
    .header__wrapper-menu .menu {
        display: grid !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        grid-template-rows:
            auto
            auto;

        column-gap:
            clamp(25px, 4vw, 75px);

        row-gap:
            clamp(34px, 5vh, 60px);

        align-items: center;

        text-align: center;
    }


    /*
       ROW 1
       Brands / Products / Services / Markets
    */

    .header__wrapper-menu li:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .header__wrapper-menu li:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .header__wrapper-menu li:nth-child(3) {
        grid-column: 3;
        grid-row: 1;
    }

    .header__wrapper-menu li:nth-child(4) {
        grid-column: 4;
        grid-row: 1;
    }


    /*
       ROW 2
       About / Partners / Contact / CTA
    */

    .header__wrapper-menu li:nth-child(5) {
        grid-column: 1;
        grid-row: 2;
    }

    .header__wrapper-menu li:nth-child(6) {
        grid-column: 2;
        grid-row: 2;
    }

    .header__wrapper-menu li:nth-child(7) {
        grid-column: 3;
        grid-row: 2;
    }

    .header__wrapper-menu li:nth-child(8) {
        grid-column: 4;
        grid-row: 2;
    }


    .header__wrapper-menu li > a {
        font-size:
            clamp(25px, 2.35vw, 42px) !important;

        line-height: 1.05 !important;

        letter-spacing: -.04em !important;

        padding: 8px 0 !important;

        white-space: nowrap;
    }


    /* CTA */

    .header__wrapper-menu li:nth-child(8) > a {
        font-size:
            clamp(12px, 1vw, 15px) !important;

        font-weight: 500 !important;

        letter-spacing: .08em !important;

        padding:
            13px 20px !important;

        border:
            1px solid rgba(255,255,255,.36);

        border-radius: 100px;

        color: rgba(255,255,255,.88) !important;
    }


    .header__wrapper-menu li:nth-child(8):hover > a {
        background: #fff;
        color: #080808 !important;
        border-color: #fff;
    }


    .header__wrapper-menu li:nth-child(8) > a::after {
        display: none;
    }

}


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

@media (min-width: 768px) and (max-width: 991px) {

    .header__wrapper-overlay-menu {
        overflow-y: auto !important;
    }


    .header__wrapper-menu {
        width: 84vw !important;

        min-height: 100vh !important;

        padding:
            90px 0
            70px !important;
    }


    .header__wrapper-menu > ul,
    .header__wrapper-menu .menu {
        display: grid !important;

        grid-template-columns:
            1fr
            1fr !important;

        gap:
            12px
            45px;

        width: 100% !important;
    }


    .header__wrapper-menu li > a {
        font-size:
            clamp(27px, 5vw, 40px) !important;

        line-height: 1.08 !important;

        padding: 7px 0 !important;
    }


    .header__wrapper-menu li:nth-child(8) > a {
        font-size: 14px !important;

        padding:
            13px 18px !important;

        border:
            1px solid rgba(255,255,255,.35);

        border-radius: 100px;
    }

}


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

@media (max-width: 767px) {

    .header__wrapper-overlay-menu {
        overflow-y: auto !important;
    }


    .header__wrapper-menu {
        width: 82vw !important;

        min-height: 100vh !important;

        margin: 0 auto !important;

        padding:
            100px 0
            50px !important;

        display: block !important;
    }


    .header__wrapper-menu > ul,
    .header__wrapper-menu .menu {
        display: flex !important;

        flex-direction: column;

        align-items: flex-start;

        gap: 4px;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .header__wrapper-menu li {
        width: 100%;
    }


    .header__wrapper-menu li > a {
        justify-content: flex-start;

        font-size:
            clamp(27px, 9vw, 39px) !important;

        line-height: 1.08 !important;

        padding: 7px 0 !important;

        letter-spacing: -.035em !important;
    }


    .header__wrapper-menu li > a::after {
        left: 0;
        transform: none;
    }


    .header__wrapper-menu li:nth-child(7) {
        margin-top: 18px !important;

        padding-top: 18px !important;

        border-top:
            1px solid rgba(255,255,255,.12);
    }


    .header__wrapper-menu li:nth-child(8) > a {
        margin-top: 12px;

        width: auto;

        font-size:
            14px !important;

        letter-spacing:
            .08em !important;

        padding:
            13px 18px !important;

        border:
            1px solid rgba(255,255,255,.35);

        border-radius: 100px;
    }


    .header__wrapper-menu li:nth-child(8) > a::after {
        display: none;
    }

}


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

@media (max-width: 420px) {

    .header__wrapper-menu {
        width: 86vw !important;

        padding-top: 86px !important;
    }


    .header__wrapper-menu li > a {
        font-size:
            clamp(25px, 8.6vw, 34px) !important;
    }

}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.header__wrapper-overlay-menu .header__controls,
.header__wrapper-overlay-menu .header__burger {
    position: relative !important;
    z-index: 50 !important;
}
/* =========================================================
   MUVON — MINI HOVER PREVIEW
   Desktop only
   ========================================================= */

@media (min-width: 992px) {

    .header__wrapper-menu li {
        overflow: visible !important;
    }

    .muvon-mini-preview {
        position: absolute;

        left: 50%;
        top: calc(100% + 14px);

        width: 190px;
        height: 120px;

        transform:
            translateX(-50%)
            translateY(8px)
            scale(.96);

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        overflow: hidden;

        border-radius: 4px;

        border:
            1px solid rgba(255,255,255,.12);

        box-shadow:
            0 18px 45px rgba(0,0,0,.55);

        background: #0a0a0a;

        transition:
            opacity .3s ease,
            transform .35s cubic-bezier(.22,1,.36,1),
            visibility .3s ease;

        z-index: 100;
    }

    .muvon-mini-preview img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        filter:
            brightness(.78)
            contrast(1.05)
            saturate(.82);
    }

    .muvon-mini-preview.is-visible {
        opacity: 1;
        visibility: visible;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }

}