.site-header {
    width: min(var(--max), calc(100% - 64px));
    height: 88px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    position: relative;
    z-index: 10
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px
}

.brand-logo {
    width: 36px;
    height: 36px;
    object-fit: contain
}

.brand-name {
    font: 800 12px/1.2 var(--display);
    letter-spacing: .12em
}

.brand-name span {
    display: block;
    color: var(--gold);
    font-size: 8px;
    letter-spacing: .25em;
    margin-top: 5px;
    font-weight: 600
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 34px
}

.site-nav>a:not(.nav-cta) {
    color: #b8b9bc;
    font-size: 12px;
    transition: color .2s
}

.site-nav>a:not(.nav-cta):hover {
    color: var(--gold-light)
}

.nav-cta {
    border: 1px solid rgba(216, 182, 107, .4);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background .2s, border-color .2s
}

.nav-cta:hover {
    background: #d8b66b12;
    border-color: var(--gold)
}

.menu-toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--text);
    font-size: 27px;
    cursor: pointer
}

.site-header {
    backdrop-filter: blur(14px)
}

.site-header:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 90px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
    opacity: .8
}

.brand {
    transition: opacity .2s ease
}

.brand:hover {
    opacity: .8
}

.brand-logo {
    filter: drop-shadow(0 0 9px #d8b66b14);
    transition: filter .3s, transform .3s
}

.brand:hover .brand-logo {
    filter: drop-shadow(0 0 12px #d8b66b55);
    transform: rotate(-4deg)
}

.site-nav>a:not(.nav-cta) {
    position: relative
}

.site-nav>a:not(.nav-cta):after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -7px;
    height: 1px;
    background: var(--gold);
    transition: right .25s ease
}

.site-nav>a:not(.nav-cta):hover:after {
    right: 0
}

.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--gold);
    background: #202329;
    font-size: 12px
}

.language-switcher select {
    appearance: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: 700 10px var(--font);
    cursor: pointer;
    padding-right: 2px
}

.language-switcher select option {
    background: #202329;
    color: var(--text)
}

@media(max-width:650px) {
    .language-switcher {
        align-self: flex-start;
        margin-top: 12px
    }

    .site-nav.is-open .language-switcher {
        display: inline-flex
    }
}