.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-group-trigger { display: inline-flex; align-items: center; }
.nav-group-trigger > button { display: grid; place-items: center; width: 28px; height: 34px; padding: 0; border: 0; background: transparent; color: #d8e0e9; cursor: pointer; }
.nav-group-trigger > button:hover, .nav-group-trigger > button:focus-visible, .nav-group-trigger > button[aria-expanded="true"] { color: var(--gold-light); }
.nav-group-trigger > button span { display: block; font-size: 18px; line-height: 1; transition: transform .18s ease; }
.nav-group-trigger > button[aria-expanded="true"] span { transform: rotate(180deg); }
.nav-submenu { position: absolute; z-index: 40; top: calc(100% + 14px); left: 0; min-width: 210px; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--navy-900); box-shadow: 0 18px 42px rgba(0,0,0,.42); }
.nav-submenu[hidden] { display: none; }
.nav-submenu a { display: block; padding: 10px 12px; border-radius: 7px; }
.nav-submenu a:hover, .nav-submenu a:focus-visible { background: var(--navy-800); }
.mobile-app-menu .mobile-app-menu-subitem { margin-left: 18px; border-left: 2px solid var(--gold); border-radius: 0 8px 8px 0; color: var(--gold-light); }

@media (max-width: 1050px) {
  .nav-group { display: grid; width: 100%; }
  .nav-group-trigger { display: grid; grid-template-columns: minmax(0, 1fr) 48px; }
  .nav-group-trigger > button { width: 48px; height: 48px; }
  .nav-submenu { position: static; min-width: 0; margin: 0 8px 8px 18px; border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0 8px 8px 0; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-group-trigger > button span { transition: none; }
}