.headerWrap{
    position: sticky;
    top: 0;
    z-index: 999;
    padding: 22px 50px;
    transition: padding 0.4s ease;
    .headerInner{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0px;
        border: 1px solid transparent;
        border-radius: 100px;
        transition: height 0.4s ease, background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        .headerLeft{
            width: 300px;
        }
        .logoImg{
            width: 100%;
            img{
                width: 100%;
            }
        }
        .menuWrap{
            > ul{
                display: flex;
                gap: 26px;
                margin-bottom: 0px;
                > li{
                    position: relative;
                    > a{
                        position: relative;
                        display: inline-flex;
                        align-items: center;
                        gap: 7px;
                        color: #000000;
                        font-size: 16px;
                        letter-spacing: 0.2px;
                        padding-bottom: 4px;
                        transition: color 0.3s ease, transform 0.3s ease;
                        .subArrow{
                            font-size: 9px;
                            opacity: 0.7;
                            transition: transform 0.35s ease, opacity 0.35s ease;
                        }
                        /*===underline sweeps out from the centre on hover===*/
                        &::after{
                            content: '';
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            width: 100%;
                            height: 2px;
                            border-radius: 2px;
                            background: #0075ff;
                            transform: scaleX(0);
                            transform-origin: 50% 50%;
                            transition: transform 0.35s cubic-bezier(.22, .8, .36, 1);
                        }
                        &:hover{
                            font-weight: 600;
                        }
                        &:hover,
                        &:focus-visible{
                            color: #0075ff;
                            /*===a small lift makes the item feel clickable===*/
                            transform: translateY(-2px);
                            .subArrow{
                                opacity: 1;
                            }
                            &::after{
                                transform: scaleX(1);
                            }
                        }
                        /*===current page keeps the underline on===*/
                        &.is-active{
                            color: #0075ff;
                            &::after{
                                transform: scaleX(1);
                            }
                        }
                    }
                    /* ---- dropdown ---- */
                    .subMenu{
                        position: absolute;
                        left: -18px;
                        top: calc(100% + 16px);
                        min-width: 236px;
                        padding: 10px;
                        border-radius: 16px;
                        border: 1px solid #ffffff2b;
                        background: rgb(13 14 18 / 92%);
                        backdrop-filter: blur(18px);
                        box-shadow: 0 28px 60px rgb(0 0 0 / 55%);
                        opacity: 0;
                        visibility: hidden;
                        transform: translateY(14px);
                        transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
                        /* invisible bridge so the cursor can cross the gap */
                        &::before{
                            content: '';
                            position: absolute;
                            left: 0;
                            right: 0;
                            top: -16px;
                            height: 16px;
                        }
                        /* little notch pointing at the parent item */
                        &::after{
                            content: '';
                            position: absolute;
                            left: 34px;
                            top: -5px;
                            width: 10px;
                            height: 10px;
                            transform: rotate(45deg);
                            border-radius: 2px;
                            background: linear-gradient(135deg, #2472fc 0%, #8a5cf6 100%);
                        }
                        li{
                            opacity: 0;
                            transform: translateY(10px);
                            transition: opacity 0.35s ease, transform 0.35s ease;
                            a{
                                position: relative;
                                display: block;
                                padding: 11px 16px;
                                border-radius: 10px;
                                color: #bdbdbd;
                                font-size: 14px;
                                letter-spacing: 0.3px;
                                transition: color 0.3s ease, background 0.3s ease, padding-left 0.3s ease;
                                &:hover{
                                    color: #fff;
                                    background: #ffffff0f;
                                    padding-left: 24px;
                                    &::before{
                                        opacity: 1;
                                    }
                                }
                                /* gradient tick that appears on hover */
                                &::before{
                                    content: '';
                                    position: absolute;
                                    left: 12px;
                                    top: 50%;
                                    transform: translateY(-50%);
                                    width: 5px;
                                    height: 5px;
                                    border-radius: 50%;
                                    background: linear-gradient(135deg, #2472fc 0%, #8a5cf6 100%);
                                    opacity: 0;
                                    transition: opacity 0.3s ease;
                                }
                            }
                        }
                    }
                    /* open on hover or keyboard focus */
                    &:hover,
                    &:focus-within{
                        > a{
                            color: #0075ff;
                            .subArrow{
                                transform: rotate(180deg);
                                opacity: 1;
                            }
                        }
                        .subMenu{
                            opacity: 1;
                            visibility: visible;
                            transform: translateY(0);
                            /* items cascade in one after another */
                            li{
                                opacity: 1;
                                transform: translateY(0);
                                &:nth-child(1){ transition-delay: 0.05s; }
                                &:nth-child(2){ transition-delay: 0.1s; }
                                &:nth-child(3){ transition-delay: 0.15s; }
                                &:nth-child(4){ transition-delay: 0.2s; }
                                &:nth-child(5){ transition-delay: 0.25s; }
                            }
                        }
                    }
                }
            }
        }
        .headerRight{
            display: flex;
            align-items: center;
            gap: 26px;
            .langWrap{
                position: relative;
                display: inline-flex;
                align-items: center;
                padding: 0 16px 0 46px;
                &::before{
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 1px;
                    height: 18px;
                    background: #ffffff2e;
                }
                .langIcon{
                    position: absolute;
                    left: 22px;
                    color: #ffffff;
                    font-size: 14px;
                    opacity: 0.7;
                    pointer-events: none;
                    transition: opacity 0.3s ease;
                }
                .langArrow{
                    position: absolute;
                    right: 0;
                    color: #ffffff;
                    font-size: 9px;
                    opacity: 0.7;
                    pointer-events: none;
                    transition: transform 0.3s ease, opacity 0.3s ease;
                }
                .langSelect{
                    appearance: none;
                    -webkit-appearance: none;
                    border: 0;
                    outline: 0;
                    background: transparent;
                    color: #ffffff;
                    font-size: 15px;
                    font-weight: 400;
                    letter-spacing: 0.5px;
                    line-height: 1;
                    padding: 6px 0;
                    cursor: pointer;
                    option{
                        background: #101010;
                        color: #ffffff;
                        letter-spacing: normal;
                    }
                }
                &:hover{
                    .langIcon,
                    .langArrow{
                        opacity: 1;
                    }
                    .langArrow{
                        transform: translateY(2px);
                    }
                }
                &:focus-within .langArrow{
                    color: #0075ff;
                    opacity: 1;
                }
            }
            .headerIcons{
                display: flex;
                align-items: center;
                gap: 16px;
                .callBtn{
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    color: #000000;
                    font-size: 14px;
                    transition: color 0.3s ease;
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                    box-shadow: 0 0 10px 0px #848484;
                    background-color: #fff;
                    &:hover{
                        color: #0075ff;
                    }
                }
                .iconDivider{
                    width: 1px;
                    height: 20px;
                    background: #00000033;
                }
                .searchBtn{
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    color: #000000;
                    font-size: 14px;
                    transition: color 0.3s ease;
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                    box-shadow: 0 0 10px 0px #848484;
                    background: #fff;
                    &:hover{
                        color: #0075ff;
                    }
                }
            }
        }
    }
    &.isSticky{
        padding: 14px 50px;
        .headerInner{
            height: 64px;
            background: #ffffffa6;
            border-color: #ffffff1f;
            box-shadow: 0 18px 40px rgb(0 0 0 / 35%);
            backdrop-filter: blur(18px);
            padding: 0 20px;
        }
    }
}


@media (max-width: 1600px){
    .headerWrap {
        /* No overflow-x here. It used to carry `overflow-x: hidden` to hide the
           brands mega panel hanging ~8px past the viewport, but hidden on one
           axis promotes the other to auto, which made the header a scroll
           container and clipped every dropdown below 1600 - the menus opened
           with only their notch showing. The panel is kept in bounds at the
           bottom of this file instead. */
        .headerInner {
            .menuWrap {
                > ul {
                    gap: 20px;
                    > li {
                        > a {
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 1600px){
    .headerWrap {
        .headerInner {
            .headerLeft {
                width: 240px;
            }
        }
    }
    .bannerWrap {
        .bannerImg {
            border-radius: 30px;
        }
    }
}
@media (max-width: 1366px){
    .headerWrap {
        padding: 10px 10px;
        &.isSticky {
            padding: 10px 10px;
        }
    }
}
@media (max-width: 1199px){
    .headerWrap{
        padding: 16px 20px;
        &.isSticky{
            padding: 12px 20px;
        }
        .headerInner{
            .headerLeft{
                width: 200px;
                flex-shrink: 0;
            }
            .headerRight{
                gap: 14px;
            }
        }
    }
}

@media (max-width: 767px){
    .headerWrap{
        padding: 14px 16px;
        .headerInner{
            .headerLeft{
                width: 165px;
            }
        }
    }
    .headerWrap {
        .headerInner {
            .headerRight {
                .headerIcons {
                    gap: 10px;
                }
            }
        }
    }
    .headerWrap {
        &.isSticky {
            padding: 3px 10px;
        }
    }
}

/*===brands mega panel===================================================
    "Brands We Represent" has no child menu items - the walker builds a
    panel of flagship logos instead. It borrows the dropdown's glass
    treatment and open-on-hover behaviour so it reads as the same object.
=====================================================================*/
.hasMegaPanel{
    position: relative;
}
.megaPanel{
    position: absolute;
    left: -18px;
    top: calc(100% + 16px);
    z-index: 20;
    width: 580px;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #ffffff2b;
    background: rgb(13 14 18 / 92%);
    backdrop-filter: blur(18px);
    box-shadow: 0 28px 60px rgb(0 0 0 / 55%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
    /* invisible bridge so the cursor can cross the gap */
    &::before{
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -16px;
        height: 16px;
    }
    /* little notch pointing at the parent item */
    &::after{
        content: '';
        position: absolute;
        left: 34px;
        top: -5px;
        width: 10px;
        height: 10px;
        transform: rotate(45deg);
        border-radius: 2px;
        background: linear-gradient(135deg, #2472fc 0%, #8a5cf6 100%);
    }
}
.hasMegaPanel:hover > .megaPanel,
.hasMegaPanel:focus-within > .megaPanel{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.brandsLogoGrid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    li{
        margin: 0;
    }
    a{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 58px;
        padding: 10px;
        border-radius: 12px;
        background: #ffffff;
        transition: background .3s ease, transform .3s ease;
        &:hover{
            background: #ffffff;
            transform: translateY(-2px);
            img{
                filter: none;
                opacity: 1;
            }
        }
    }
    img{
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        opacity: 1;
        transition: filter .3s ease, opacity .3s ease;
    }
}
.brandsLogoText{
    color: #dcdcdc;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}
.brandsViewAll{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2472fc 0%, #8a5cf6 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    transition: opacity .3s ease, transform .3s ease;
    i{
        font-size: 12px;
        transition: transform .3s ease;
    }
    &:hover{
        color: #fff;
        opacity: .92;
        i{
            transform: translateX(4px);
        }
    }
}

/*===in the drawer the panel is an accordion like the other submenus:
     closed until the chevron adds .isOpen (mobile-menu.js)===*/
@media (max-width: 1199px){
    .megaPanel{
        position: static;
        width: auto;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 0;
        transition: max-height 0.4s ease, padding 0.4s ease;
        border: 0;
        background: none;
        backdrop-filter: none;
        box-shadow: none;
        &::before,
        &::after{
            display: none;
        }
    }
    .hasMegaPanel.isOpen > .megaPanel{
        max-height: 900px;
        padding: 14px 0 4px;
    }
    .brandsLogoGrid{
        grid-template-columns: repeat(3, 1fr);
    }
}

/*=====================================================================
    Brands mega panel - stay inside the viewport

    The panel is a fixed 580px anchored to the left edge of its menu
    item. That item sits well to the right of the bar, so once the nav
    tightens up the panel runs past the window and puts a scrollbar on
    the page. From 1440 down it hangs off the item's right edge instead
    and opens inwards, with the notch moved across to match. Since the
    panel grew to 580px (every brand with a page) it overflows at any
    desktop width, so this now applies to the whole desktop range.
=====================================================================*/
@media (min-width: 1200px){
    .megaPanel{
        left: auto;
        right: -18px;
        &::after{
            left: auto;
            right: 34px;
        }
    }
}