.mobile-menu-toggle { display: none; }
.mobile-menu:not([open]) { display: none; }
.mobile-menu {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111;
    overflow: hidden;
}
.mobile-menu::backdrop { background: rgb(0 0 0 / 50%); }
.mobile-menu__panel {
    position: absolute;
    inset: 0 0 0 auto;
    box-sizing: border-box;
    width: min(360px, 86.25vw);
    height: 100%;
    padding: max(60px, env(safe-area-inset-top)) 26px max(24px, env(safe-area-inset-bottom)) 30px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    transform: translateX(100%);
    transition: transform 300ms ease;
    font: 400 16px/1.4 Roboto, Arial, sans-serif;
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
.mobile-menu__close {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    right: 10px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}
.mobile-menu__close span { display: grid; place-items: center; width: 30px; height: 30px; background: #087fc3; color: white; font: 300 32px/1 Arial, sans-serif; }
.mobile-menu__list, .mobile-menu__submenu { margin: 0; padding: 0; list-style: none; }
.mobile-menu__item { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #e1e1e1; }
.mobile-menu__item:last-child { border-bottom: 0; }
.mobile-menu__link { flex: 1; min-width: 0; padding: 15px 0; color: #111; font-weight: 700; text-decoration: none; text-transform: uppercase; line-height: 1.35; }
.mobile-menu__link[aria-current="page"] { color: #0084cb; }
.mobile-menu__expand { flex: 0 0 36px; align-self: stretch; min-height: 44px; margin: 0; border: 0; padding: 0; color: #777; background: transparent; font: 300 26px/1 Arial, sans-serif; cursor: pointer; }
.mobile-menu__submenu { width: 100%; padding: 0 0 12px 12px; }
.mobile-menu__submenu[hidden] { display: none !important; }
.mobile-menu__submenu a { display: block; padding: 11px 0; color: #333; text-decoration: none; font-size: 15px; line-height: 1.4; }
.mobile-menu :focus-visible { outline: 3px solid #087fc3; outline-offset: 2px; }
html.mobile-menu-open, html.mobile-menu-open body { overflow: hidden; }

@media (max-width: 1100px) {
    .site-header .site-brand { display: flex !important; align-items: center; flex: 0 0 auto; margin: 0; }
    .site-header .site-brand > a { display: block; padding: 0; }
    .site-header .site-brand img:not(.site-brand__mobile-logo) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 114px;
        height: 40px;
        max-width: 100%;
        object-fit: contain;
    }
    .site-header .site-brand img.site-brand__mobile-logo { display: none !important; }
    .mobile-menu-ready .site-header .site-nav,
    .mobile-menu-ready .site-header .site-nav__toggle { display: none !important; }
    .mobile-menu-ready .site-header__inner { display: flex !important; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
    .mobile-menu-ready .mobile-menu-toggle {
        display: flex;
        flex: 0 0 44px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        margin-left: auto;
        padding: 9px;
        border: 0;
        background: transparent;
        color: #163652;
        cursor: pointer;
    }
    .mobile-menu-toggle span { display: block; width: 25px; height: 2px; background: currentColor; }
}

@media (max-width: 767px) {
    .page-home .feature-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
    .page-home .feature-card__icon { width: 80px; height: 80px; margin: 0 0 1rem; }
    .page-home .feature-card__content { width: 100%; min-width: 0; }
    body:not(.page-home) #main-content > .container { width: 100%; max-width: 100%; padding-inline: 0 !important; }
    #main-content h1 {
        max-width: 100%;
        font-size: clamp(1.65rem, 6.4vw, 2.125rem) !important;
        line-height: 1.22 !important;
        letter-spacing: normal;
        text-wrap: balance;
        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }
    #main-content h2 {
        max-width: 100%;
        font-size: clamp(1.3rem, 5.1vw, 1.7rem) !important;
        line-height: 1.25 !important;
        letter-spacing: normal;
        text-wrap: balance;
        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }
    #main-content h3 { font-size: clamp(1.125rem, 4.5vw, 1.375rem) !important; line-height: 1.3 !important; text-wrap: balance; }
    #main-content .hero h2 { font-size: clamp(1.875rem, 7.8vw, 2.5rem) !important; line-height: 1.15 !important; text-wrap: balance; }
    #main-content h1 br, #main-content h2 br, #main-content h3 br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu__panel { transition: none; }
}