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

.site-header {

    position:
        absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 20;

    transition:
        background .4s ease,
        backdrop-filter .4s ease;

}


.site-header.scrolled {

    position: fixed;

    background:
        rgba(8,11,10,.88);

    backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

}


.header-inner {

    height:
        var(--header-height);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.brand-logo img {

    width:
        115px;

}


.desktop-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        34px;

}


.desktop-nav a {

    font-size:
        12px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .04em;

    color:
        rgba(255,255,255,.88);

    transition:
        color .25s ease;

}


.desktop-nav a:hover {

    color:
        var(--gold);

}


.header-cta {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        16px;

    padding:
        17px 24px;

    border-radius:
        6px;

    background:
        var(--red);

    font-size:
        13px;

    font-weight:
        700;

    transition:
        transform .3s ease,
        background .3s ease;

}


.header-cta:hover {

    transform:
        translateY(-2px);

    background:
        #ef302a;

}


.header-cta span {

    font-size:
        18px;

}


.menu-toggle {

    display:
        none;

    width:
        46px;

    height:
        46px;

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

    border-radius:
        8px;

    background:
        rgba(0,0,0,.15);

    padding:
        11px;

}


.menu-toggle span {

    display:
        block;

    height:
        1px;

    background:
        #fff;

    margin:
        5px 0;

}


.mobile-menu {

    display:
        none;

}