.site-header{
    @media(max-width: 880px){
        .nav-container{
            position: absolute;
            display: flex;
            flex-direction: column;
            width: 100vw;
            right: -100vw;
            height: calc(100vh - 100px);
            z-index: 1;
            background-color: #F9FAFB;
            overflow: scroll;
            transition: right .3s;
        }

        .nav-container.open{
            right: 0;
        }
    }

    ul{
        list-style: none;
        padding: 0;
    }

    .mobile-contact{
        display: none;
        background-color: #0E1D6F;
        color: white;
        padding-block: 1rem;
        order: 0;

        @media(max-width: 880px){
            display: block;
        }

        a{
            color: white;
            text-decoration: none;
        }

        .container{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    .mobile-contact a:not([class*="btn-"]):hover{
        text-decoration: underline;
    }

    .mobile-contact .login-link{
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-contact .login-link:hover{
        background-color: white;
        color: #0E1D6F;
    }

    .header-top{
        padding-block: 1rem;
        background-color: #0E1D6F;
        color: white;
        order: 2;

        @media(max-width: 880px){
            background: none;
            color: black
        }
    }

    .header-top a{
        color: white;
        text-decoration: none;

        @media(max-width: 880px){
            color: black;
        }
    }

    .utility-nav{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 1.5em;

        @media(max-width: 880px){
            display: block;
            font-size: 16px;
            padding-bottom: 24px;
            border-bottom: 1px solid #E5E7EB;
        }

        a{
            @media(max-width: 880px){
                padding-block: 6px;
                display: block;
            }

            &:not([class*="btn-"]):hover{
                text-decoration: underline;
            }
        }
    }

    .utility-nav > ul{
        gap: 1.5em;
        display: flex;

        @media(max-width: 880px){
            flex-direction: column;
            gap: 0;
        }
    }

    .utility-nav .has-subnav{
        position: relative;

        @media(max-width: 880px){
            order: 999;
            margin-top: 25px;
        }
    }

    .utility-nav .menu-link{
        @media(max-width: 880px){
            color: #99A1AF;
            font-size: 12px;
            font-weight: 700;
            line-height: 16px;
            padding-bottom: 6px;
            display: block;
            text-transform: uppercase;
        }
    }

    .utility-nav .menu-link:after{
        content: '\f0d7';
        font-family: 'Font Awesome 6 Sharp';
        font-weight: 700;
        margin-left: .5ch;

        @media(max-width: 880px){
            content: none;
        }
    }

    .utility-nav .utility-subnav{
        position: absolute;
        top: 43px;
        white-space: nowrap;
        background-color: #0E1D6F;
        z-index: 1;
        opacity: 0;
        pointer-events: none;

        @media(max-width: 880px){
            position: static;
            background: none;
            opacity: 1;
            pointer-events: all;
        }
    }

    .utility-nav .has-subnav.open .utility-subnav,
    .utility-nav .has-subnav .menu-link:focus-visible + .utility-subnav,
    .utility-nav .has-subnav .utility-subnav:focus-within{
        opacity: 1;
        pointer-events: all;
    }

    .utility-nav .utility-subnav li{
        padding: 16px;
        border-bottom: 1px solid rgba(229, 231, 235, 0.50);

        @media(max-width: 880px){
            padding: 0;
            border: none;
        }

    }

    .utility-nav .login-link{
        display: flex;
        align-items: center;
        gap: 8px;

        @media(max-width: 880px){
            display: none;
        }
    }

    .utility-nav .login-link span{
        line-height: 1;
    }

    .utility-nav .search-btn{
        background-color: white;
        height: 32px;
        width: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 50%;

        @media(max-width: 880px){
            display: none;
        }
    }

    .header-mid{
        order: 3;
    }

    .header-mid .mobile-label{
        display: none;
        color: #99A1AF;
        font-size: 12px;
        font-weight: 700;
        line-height: 16px;
        padding: 12px 1.5rem 6px;
        text-transform: uppercase;

        @media(max-width: 880px){
            display: block;
        }
    }

    .mid-nav{
        display: flex;
        font-size: 14px;

        @media(max-width: 880px){
            display: block;
            padding-inline: 1.5rem;

            li{
                padding-block: 6px;
            }
        }
    }

    .header-mid a{
        color: black;
        text-decoration: none;
        padding: 15px 14px 10px;
        border-bottom: 5px solid transparent;
        display: inline-block;
        transition: background-color .3s, border-color .3s;

        @media(max-width: 880px){
            padding: 2px 0;
            border: none;
        }
    }

    .header-mid .active a,
    .header-mid a:hover{
        background-color: #F2F2F2;
        border-bottom-color: #0E1D6F;

        @media(max-width: 880px){
            background: none;
        }
    }

    .header-mid a:hover{
        @media(max-width: 880px){
            text-decoration: underline;
        }
    }

    .header-bottom{
        border-top: 1px solid #E5E7EB;
        padding-block: 30px;
        position: relative;
        order: 1;

        @media(max-width: 880px){
            background-color: white;
            padding: 0;

            > .container{
                padding-inline: 0;
            }

            nav{
                width: 100%;
            }
        }
    }

    .header-bottom-inner{
        display: flex;
        align-items: center;
        gap: 50px;
    }

    .header-bottom-inner img{
        height: 70px;

        @media(max-width: 880px){
            display: none;
        }
    }

    .primary-nav{
        display: flex;
        gap: min(40px, 3.5vw);
        font-size: 16px;

        @media(max-width: 880px){
            display: block;

            > li > a,
            > li > span{
                font-size: 20px;
                display: block;
                font-weight: 600;
                padding: 20px 1.5rem;
                border-bottom: 1px solid rgba(14, 29, 111, 0.05);
            }
        }
    }

    .primary-nav a:not([class*="btn-"]){
        color: black;
        text-decoration: none;
        white-space: nowrap;
        position: relative;
    }

    .primary-nav .has-subnav .menu-link{
        transition: color .3s;
        cursor: pointer;
        position: relative;
        white-space: nowrap;

        @media(max-width: 880px){
            display: flex;
            justify-content: space-between;
        }
    }

    .primary-nav .has-subnav .menu-link:before,
    .primary-nav > li > a:before{
        content: '';
        position: absolute;
        width: 100%;
        bottom: calc(-3em - 7px);
        height: 4px;
        background-color: transparent;
        transition: background-color .3s;

        @media(max-width: 880px){
            content: none;
        }
    }

    .primary-nav .has-subnav .menu-link:after{
        content: "C";
        display: inline-block;
        font-family: "Hemic Icons";
        font-size: 12px;
        margin-left: 1ch;
        position: relative;
        top: 2px;
        transform: rotate(0deg);
        transition: transform .3s;
    }

    .primary-nav .has-subnav.open .menu-link{
        color: #0E1D6F;
    }

    .primary-nav .has-subnav.open .menu-link:before,
    .primary-nav .has-subnav .menu-link:hover:before,
    .primary-nav > li > a:hover:before{
        background-color: #0E1D6F;
    }

    .primary-nav .has-subnav.open .menu-link:after{
        transform: rotate(90deg);
    }

    .subnav{
        position: absolute;
        max-width: 1500px;
        top: 130px;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        z-index: 2;
        background-color: white;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s;
        box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.25);

        @media(max-width: 880px){
            box-shadow: none;
            position: static;
            flex-direction: column;
            opacity: 1;
            max-height: 0;
            overflow: hidden;
            transition: max-height .3s ease-in-out;
        }
    }

    .has-subnav .menu-link:focus-visible + .subnav,
    .has-subnav .subnav:focus-within,
    .has-subnav.open .subnav{
        opacity: 1;
        pointer-events: all;

        @media(max-width: 880px){
            max-height: 2000px;
        }
    }

    .subnav-block{
        background-color: white;
        flex: 1;
        position: relative;
        padding-inline: 3%;
        margin-block: 40px 60px;
        border-left: 1px solid #E5E7EB;

        @media(max-width: 880px){
            padding: 24px 1.5rem;
            margin: 0;
            background-color: #F9FAFB;
            border-bottom: 1px solid #E5E7EB;
        }
    }

    .subnav-block-inner{
        @media(max-width: 880px){
            max-height: 0;
            overflow: hidden;
            transition: max-height .3s ease-in-out;
        }
    }

    .subnav-block-inner.open{
        max-height: 1000px;
    }

    .subnav-block:first-child{
        border: none;

        @media(max-width: 880px){
            border-bottom: 1px solid #E5E7EB;
            border-top: 1px solid #E5E7EB;
        }
    }

    .subnav-block.navBlockWithSubtext,
    .subnav-block.navBlockWithCopy{
        margin-block: 0;
        padding-block: 40px 60px;
        border: none;

        @media(max-width: 880px){
            border-bottom: 1px solid #E5E7EB;
        }
    }

    .subnav-block.navBlockWithSubtext{
        background-color: rgba(14, 29, 111, 0.05);

        @media(max-width: 880px){
            padding: 24px 1.5rem;
            background-color: #F9FAFB;
        }
    }

    .subnav-block.navBlockWithCopy{
        background-color: #0E1D6F;
        color: white;
        position: relative;

        @media(max-width: 880px){
            display: none;
        }
    }

    .subnav-block.navBlockWithCopy:after{
        content: '';
        position: absolute;
        inset: auto 0 0 0;
        background-image: url(/images/kapa-bar-white.webp);
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 50px;
        height: 50px;
        pointer-events: none;
        opacity: .8;
    }

    .subnav-block.navBlockWithCopy .block-heading{
        color: white;
        font-weight: 400;
    }

    .subnav-block.navBlockWithCopy [class*="btn-"]{
        margin-top: 22px;
    }

    .subnav-block .block-heading{
        color: #636363;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 16px;

        @media(max-width: 880px){
            margin-bottom: 0;
            display: flex;
            align-items: center;

            &:after{
                content: "C";
            }
        }
    }

    .subnav-block .block-heading:after{
        display: inline-block;
        font-family: "Hemic Icons";
        font-size: 12px;
        margin-left: auto;
        transform: rotate(0deg);
        transition: transform .3s;
    }

    .subnav-block .block-heading.open:after{
        transform: rotate(90deg);
    }

    .subnav-block .block-heading i{
        margin-right: 4px;
    }

    .subnav-block ul{
        @media(max-width: 880px){
            margin-top: 24px;
        }
    }

    .subnav-block a:not([class*="btn-"]):hover{
        color: #0E1D6F;
        text-decoration: underline;
    }

    .subnav-block .eyebrow,
    .subnav-block .subtext{
        color: #636363;
        font-size: 13px;
        margin-block: .333em;
        font-weight: 400;
    }

    .subnav-block .eyebrow{
        text-transform: uppercase;
    }

    .subnav-block .info-box-panel-title{
        font-size: 20px;
        line-height: 1.25;
        margin-bottom: 8px;
        display: inline-block;
    }

    .subnav-block p{
        font-size: 14px;
    }

    .subnav-block li{
        margin-bottom: 16px;
        font-weight: 500;
    }

    .subnav-block.navBlockWithEyebrows li a,
    .subnav-block.navBlockWithSubtext li a{
        font-weight: 600;
    }

    .subnav-block.navBlockWithSubtext li a{
        text-transform: uppercase;
    }

    .subnav-block.navBlockWithSubtext li a:after{
        content: "C";
        font-family: "Hemic Icons";
        font-size: 12px;
        margin-left: 1ch;
    }

    .subnav-block.navBlockWithSubtext li a:hover{
        text-decoration: none;
    }

    .subnav-block.navBlockWithSubtext li a:hover span{
        text-decoration: underline;
    }

    .subnav-block.navBlockWithIcons li i{
        height: 40px;
        width: 40px;
        border-radius: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(14, 29, 111, 0.05);
        color: rgba(14, 29, 111, 0.80);
        margin-right: 4px;
    }

    .subnav-block [class*="btn-"]{
        @media(max-width: 880px){
            width: 100%;
        }
    }
}

.mobile-header{
    display: none;
    padding-block: 20px;

    @media(max-width: 880px){
        display: flex;
    }

    .container{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 24px;
    }

    .logo{
        margin-right: auto;
    }

    .logo img{
        height: 56px;
    }

    .burger{
        font-size: 32px;
        font-family: 'Font Awesome 6 Pro';
    }

    .search-btn{
        background: none;
        border: none;
        font-size: 28px;
        line-height: 1;
    }
}