@media (max-width: 820px) {
  .nav { flex-wrap: wrap; padding: 9px 0 10px; }
  .mobile-menu { display: none; }
  .nav-links, .nav-links.open {
    position: static; display: flex; width: 100%; gap: 8px; margin-top: 14px; padding: 0 0 2px; transform: none;
    overflow-x: auto; flex-direction: row; align-items: center; white-space: nowrap;
    background: transparent; box-shadow: none; scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    flex: 0 0 auto; padding: 10px 15px; border: 1px solid rgba(46,125,50,.13);
    border-radius: 999px; background: #f1f7f1;
  }
  .nav-links a:hover, .nav-links a.active {
    color: #fff; border-color: var(--primary); background: var(--primary);
  }
  .nav-links a::after { display: none; }
}
@media (max-width: 560px) { .hero { min-height: calc(100vh - 168px); } }