.site-header {
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
}

.navbar {
    min-height: 86px;
}

.navbar-brand img {
    display: block;
    height: 54px;
    max-width: 180px;
    width: auto;
}

.navbar-toggler {
    border: 1px solid var(--brand-black);
    border-radius: 50em;
    padding: .55rem .75rem;
}

.nav-link {
    color: var(--brand-black);
    font-family: var(--font-heading);
    font-size: 1.12rem;
    font-weight: 900;
    position: relative;
    text-decoration: none;
}

.nav-link::after {
    background: var(--brand-yellow);
    bottom: .35rem;
    content: "";
    height: 4px;
    left: .5rem;
    position: absolute;
    right: .5rem;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .24s ease;
}

.nav-link.active::after,
.nav-link:hover::after,
.nav-link:focus::after {
    transform: scaleX(1);
}

.nav-count {
    font-size: .78em;
    font-weight: 600;
    display: inline-block;
    width: 22px;
    border-radius: 50em;
    background: var(--brand-yellow);
    aspect-ratio: 1/1;
    text-align: center;
    margin: 0;
    top: -10px;
    position: relative;
    padding-top: 0px;
}
@media (max-width: 991.98px) {
    .navbar-collapse {
        max-height: calc(100dvh - 86px);
        overflow-y: auto;
    }

    .navbar-nav {
        align-items: stretch;
        padding: .5rem 0 1rem;
    }

    .navbar-nav .nav-item {
        border-bottom: 1px solid var(--line);
    }

    .nav-link {
        display: inline-block;
        font-size: 1.05rem;
        padding: .85rem 0;
    }

    /* The underline follows the label instead of stretching across the full
       row, which is what made it look oversized in the open mobile menu. */
    .nav-link::after {
        bottom: .5rem;
        left: 0;
        right: 0;
        width: auto;
    }

    .header-cta {
        margin-bottom: .5rem;
        margin-top: 1rem;
        width: 100%;
    }

    .nav-count {
        top: -6px;
    }
}

@media (max-width: 767.98px) {
    .navbar {
        min-height: 72px;
    }

    .navbar-brand img {
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-link::after {
        transition: none;
    }
}