/* ============================================================
   MOBILE NAV OVERLAY
============================================================ */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: var(--z-mobile-nav);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-nav.open {
  display: flex;
  opacity: 1;
  pointer-events: all;
}

.mobile-nav a {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.01em;
}

/* ============================================================
   RESPONSIVE (shared chrome only — each slot carries its own)
============================================================ */
@media (max-width: 900px) {   /* below this the links crowd the logo and toggle; the hamburger takes over */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-right { gap: 10px; }
  .nav-cta { font-size: 18px; padding: 4px 8px; }

  .section { padding: 64px 5vw; }
}