/* ============================================================
   MAIN NAVIGATION
   ============================================================ */
.mainnav { background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 50; }
.mainnav__list { display: flex; justify-content: center; align-items: stretch; gap: 0; }
.mainnav__item { position: relative; }
.mainnav__link {
    display: flex; align-items: center; gap: 6px; height: var(--nav-h); padding: 0 15.5px;
    font-size: 14px; color: #1a1a1a; white-space: nowrap;
}
.mainnav__link:hover { color: var(--brand-blue); text-decoration: none; }
.mainnav__item:hover > .mainnav__link { opacity: .62; }
.mainnav__caret { width: 9px; height: 9px; opacity: .7; margin-top: 2px; }

.submenu {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
    min-width: 240px; background: #fff; border: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(0,0,0,.11); padding: 10px 0;
    opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease;
}
.mainnav__item:hover .submenu,
.mainnav__item.is-open .submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.submenu a { display: block; padding: 8px 22px; font-size: 14px; color: var(--text); }
.submenu a:hover { background: var(--brand-tint); color: var(--brand-blue); }

.navscrim {
    position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 110;
    opacity: 0; visibility: hidden; transition: .25s;
}
.navscrim.is-on { opacity: 1; visibility: visible; }