.site-header {
    position:sticky;
    top:0;
    background:var(--white);
    border-bottom:1px solid var(--line);
    z-index:50
}
.header-inner {
    height:var(--header);
    display:flex;
    align-items:center;
    gap:24px;
    justify-content:space-between
}
.brand {
    font-size:1.65rem;
    line-height:1;
    font-weight:750;
    letter-spacing:-.07em;
    white-space:nowrap
}
.brand>span {
    color:var(--accent)
}
.desktop-nav,.header-contact {
    display:none
}
.menu summary {
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-width:48px;
    min-height:48px
}
.menu summary::-webkit-details-marker {
    display:none
}
.menu-label {
    font-size:.78rem;
    font-weight:600
}
.menu-lines {
    display:flex;
    width:25px;
    height:22px;
    position:relative
}
.menu-lines>span {
    position:absolute;
    left:0;
    width:25px;
    height:2px;
    background:var(--ink);
    border-radius:2px;
    transition:transform .22s,opacity .16s;
    transform-origin:center
}
.menu-lines>span:nth-child(1) {
    top:3px
}
.menu-lines>span:nth-child(2) {
    top:10px
}
.menu-lines>span:nth-child(3) {
    top:17px
}
.menu[open] .menu-lines>span:nth-child(1) {
    transform:translateY(7px) rotate(45deg)
}
.menu[open] .menu-lines>span:nth-child(2) {
    opacity:0;
    transform:scaleX(0)
}
.menu[open] .menu-lines>span:nth-child(3) {
    transform:translateY(-7px) rotate(-45deg)
}
.menu-panel {
    position:fixed;
    inset:var(--header) 0 0;
    background:var(--white);
    padding:24px var(--gutter) 40px;
    overflow:auto;
    overscroll-behavior:contain
}
.menu-panel nav {
    display:grid;
    max-width:620px;
    margin:0 auto 28px
}
.menu-panel nav>a {
    font-size:1.65rem;
    line-height:1.3;
    letter-spacing:-.035em;
    padding:18px 5px;
    border-bottom:1px solid var(--line);
    font-weight:500
}
.menu-panel nav>a[aria-current] {
    color:var(--accent)
}
.menu-panel>.button {
    display:flex;
    max-width:620px;
    margin:auto
}
.site-footer {
    background:#fff;
    padding:44px 0 22px
}
.footer-top {
    display:grid;
    gap:32px;
    padding-bottom:35px
}
.footer-top p {
    font-size:.87rem;
    margin-top:18px;
    line-height:1.8
}
.footer-top nav,.footer-direct {
    display:flex;
    flex-wrap:wrap;
    align-content:start;
    gap:0 22px;
    font-size:.85rem
}
.footer-top nav a,.footer-direct a {
    display:flex;
    align-items:center;
    min-height:44px
}
.footer-direct {
    flex-direction:column;
    align-items:start;
    gap:0
}
.footer-top a:hover {
    color:var(--accent)
}
.footer-bottom {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px 20px;
    border-top:1px solid var(--line);
    padding-top:15px;
    font-size:.73rem;
    color:var(--muted)
}
.footer-bottom>a {
    min-height:44px;
    display:flex;
    align-items:center
}
.footer-bottom>span {
    flex-basis:100%
}
@media(min-width:760px) {
    .footer-top {
        grid-template-columns:1.4fr 1fr 1fr;
        gap:50px
    }
    .footer-top nav {
        display:grid
    }
    .footer-bottom>span {
        flex-basis:auto;
        margin-right:auto
    }
}
@media(min-width:1000px) {
    .menu {
        display:none
    }
    .desktop-nav {
        display:flex;
        align-items:center;
        gap:30px;
        margin-left:auto;
        margin-right:12px
    }
    .desktop-nav a {
        display:flex;
        position:relative;
        align-items:center;
        min-height:48px;
        font-size:.9rem;
        font-weight:500
    }
    .desktop-nav a[aria-current] {
        color:var(--accent)
    }
    .desktop-nav a[aria-current]::after {
        position:absolute;
        content:'';
        height:2px;
        bottom:4px;
        left:0;
        right:0;
        background:var(--accent)
    }
    .desktop-nav a:hover {
        color:var(--accent)
    }
    .header-contact {
        display:inline-flex;
        align-items:center;
        gap:20px;
        background:var(--accent);
        color:white;
        border-radius:5px;
        padding:12px 19px;
        min-height:48px;
        font-size:.85rem;
        font-weight:600
    }
    .header-contact:hover {
        background:var(--accent-hover)
    }
}