.site-navigation {
    position: relative;
    z-index: 20;
}

.site-menu-toggle {
    display: none;
    position: relative;
    width: 30px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #151618;
    cursor: pointer;
}

.site-menu-toggle > span {
    position: absolute;
    top: calc(50% + 3px);
    left: 0;
    width: 100%;
}

.site-menu-toggle > span > span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: currentColor;
    transition: transform .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1) .2s;
}

.site-menu-toggle > span > span:first-child { top: -10px; }
.site-menu-toggle > span > span:last-child { top: 10px; }

.site-menu-toggle[aria-expanded="true"] > span > span {
    top: 0;
    transform: rotate(45deg);
    transition: transform .3s cubic-bezier(.645, .045, .355, 1) .3s, top .3s cubic-bezier(.645, .045, .355, 1);
}

.site-menu-toggle[aria-expanded="true"] > span > span:last-child {
    transform: rotate(-45deg);
}

@media (max-width: 1024px) {
    .header-section .header-wrap {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 20px;
    }

    .header-section .header-logo {
        flex: 1 1 auto;
        min-width: 0;
    }

    .site-navigation {
        flex: 0 0 30px;
        height: 42px;
        text-align: right;
    }

    .site-menu-toggle { display: inline-block; }

    .site-navigation .site-nav {
        display: none;
        position: absolute;
        top: 43px;
        right: -10px;
        width: 190px;
        max-width: calc(100vw - 10vw);
        padding: 2vh 15px;
        border-radius: 13px;
        background: #151618;
        box-shadow: 0 5px 45px -10px rgba(0, 0, 0, .3);
    }

    .site-navigation.is-open .site-nav { display: block; }

    .site-navigation .site-nav a {
        display: block;
        margin: 0 0 0 1.15vw;
        padding: 5px;
        color: #fff;
        font-family: Inter, sans-serif;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.3;
        overflow-wrap: break-word;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
}

@media (max-width: 768px) {
    .site-navigation .site-nav { right: -5px; }
}

@media (max-width: 480px) {
    .header-section .header-wrap { padding-bottom: 0; }
    .header-section .header-logo { margin: 10px 0; }
    .site-navigation .site-nav {
        right: 0;
        width: 180px;
        padding-right: 10px;
        padding-left: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-menu-toggle > span > span { transition: none !important; }
}