.nav .nav-links {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.nav-services { position: relative; }
.nav-services-toggle,
.nav-menu-toggle {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.nav-services-toggle { display: inline-flex; align-items: center; gap: .35rem; }
.nav-services-toggle::after { content: "▾"; font-size: .8em; transition: transform .15s ease; }
.nav-services-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.nav-services.is-active .nav-services-toggle,
.nav-services-toggle:hover,
.nav-services-toggle:focus-visible { color: #fff; }

.nav-services-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + .75rem);
  right: 0;
  display: none;
  width: min(22rem, calc(100vw - 2rem));
  margin: 0;
  padding: .5rem;
  list-style: none;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: #0a1d38;
  box-shadow: 0 16px 36px rgba(0,0,0,.28);
}

.nav-services.is-open .nav-services-menu { display: grid; gap: .15rem; }
.nav-services-menu a { display: grid; gap: .12rem; padding: .7rem .8rem; border-radius: 9px; color: #fff; }
.nav-services-menu a:hover,
.nav-services-menu a:focus-visible { background: rgba(79,140,255,.22); outline: 2px solid #8fbcff; outline-offset: 1px; }
.nav-services-menu small { color: #b9cbe2; font-size: .76rem; line-height: 1.35; }
.nav-menu-toggle { display: none; }
.nav a:focus-visible,
.nav button:focus-visible { outline: 2px solid #8fbcff; outline-offset: 4px; border-radius: 4px; }

@media (min-width: 641px) {
  /* Keep the hover target continuous across the visual space below the trigger. */
  .nav-services::after { content: ""; position: absolute; top: 100%; right: 0; width: 100%; height: .75rem; }
  .nav-services:hover .nav-services-menu { display: grid; gap: .15rem; }
}

@media (max-width: 640px) {
  .nav { position: relative; }
  .nav .container { position: relative; }
  .nav-menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .45rem .7rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #f7f9fc; }
  .nav .nav-links { position: absolute; top: calc(100% + .5rem); right: 0; left: 0; display: none; align-items: stretch; gap: 0; padding: .65rem; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: #0a1d38; box-shadow: 0 16px 36px rgba(0,0,0,.28); }
  .nav .nav-links.is-menu-open { display: grid; }
  .nav .nav-links > a,
  .nav-services-toggle { padding: .75rem .8rem; text-align: left; }
  .nav-services-toggle { width: 100%; justify-content: space-between; }
  .nav-services-menu { position: static; width: auto; margin: 0 .35rem .35rem; padding: .25rem; border-radius: 10px; box-shadow: none; }
}