/* ===== 6. HEADER ===== */
.band {
    background: var(--navy-900);
    color: white;
    font-size: .875rem;
}

.band .container {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 20px;
    min-height: 42px;
}

.band p {
    color: rgba(255, 255, 255, .75);
    max-width: none;
}

.menu {
    display: flex;
    align-items: stretch;
}

.menu>li {
    position: relative;
    display: flex;
    align-items: stretch;
}

.nl {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    padding: 0 14px;
    white-space: nowrap;
}

.nl svg {
    transition: transform .2s;
}

.has-dd:hover>.nl svg,
.has-dd:focus-within>.nl svg {
    transform: rotate(180deg);
}

.dd {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 290px;
    background: white;
    border: 1px solid #dbe3f0;
    border-top: 3px solid var(--red);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 14px 40px rgba(11, 31, 77, .1);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 90;
}

.band .dd {
    left: auto;
    right: 0
}

.has-dd:hover>.dd,
.has-dd:focus-within>.dd {
    opacity: 1;
    visibility: visible;
    transform: none
}

.dd a {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    color: #15213b;
    font-size: 16px;
    font-weight: 600;
}

.dd a:hover {
    background: #eaf1ff;
    color: var(--red);
}

.band .nl {
    height: 42px
}

.band .nl:hover {
    color: var(--red);
}

.site-header {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 80;
    background: white;
border-top: 1px solid #dbe3f0;
    border-bottom: 1px solid #dbe3f0;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 78px
}

.site-header .menu {
    height: 78px;
    margin-left: auto
}

.site-header .nl {
color: var(--ink);
    font-size: 16px;
}

.site-header .nl:hover {
    color: var(--red);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    line-height: 1.1;
}

.logo small {
    display: block;
    font-weight: 500;
    font-size: var(--fs-sm);
    color: #55627a;
}

.burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid #dbe3f0;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    align-items: center;
    justify-content: center
}

.drawer,
.overlay {
    display: none
}

.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line-dark);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 20px
}

.drawer-foot {
    padding: 16px 20px;
    /* border-top: 1px solid #dbe3f0; */
    display: grid;
    gap: 10px;
}

@media(max-width:1120px) {
    .logo img {
        width: 168px;
    }

    .band,
    .site-header .menu,
    .site-header .btn {
        display: none
    }

    .burger {
        display: inline-flex
    }

    .site-header .container {
        height: 68px
    }

    .overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(11, 31, 77, .55);
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s, visibility .35s;
        z-index: 100
    }

    .drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        background: var(--white);
        z-index: 110;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .4s cubic-bezier(.22, .8, .24, 1), visibility .4s;
        box-shadow: -20px 0 50px rgba(11, 31, 77, .25);
        padding-top: env(safe-area-inset-top, 0px)
    }

    body.menu-open .overlay {
        opacity: 1;
        visibility: visible
    }

    body.menu-open .drawer {
        transform: none;
        visibility: visible
    }
}