/* ====== Responsive ====== */
@media (max-width: 960px) {
  .grid.two { grid-template-columns: 1fr; }
  .grid.three { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .nav-toggle { display: inline-block; }
  .grid.three { grid-template-columns: 1fr; }
  .hero { padding: 72px 0 64px; }

  /* Mobile full-screen slide-out nav */
  .nav {
    position: fixed; inset: 0 0 0 auto; /* anchor to right edge */
    width: 100vw; height: 100vh;
    display: grid; grid-auto-rows: min-content; gap: 10px;
    padding: 96px 22px 22px; /* extra top space for header */
    background: var(--white); /* solid background */
    backdrop-filter: blur(8px);
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(.22,.61,.36,1), opacity 0.3s ease;
    z-index: 60; /* above header */
  }

  .nav.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav a {
    display: block; width: 100%;
    padding: 18px 16px; border-radius: 8px; font-size: 1.15rem; font-weight: 700;
    transform: translateX(12px);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease, background 0.15s ease;
  }

  /* Staggered reveal for first few links */
  .nav.open a { opacity: 1; transform: translateX(0); }
  .nav.open a:nth-child(1) { transition-delay: 0.06s; }
  .nav.open a:nth-child(2) { transition-delay: 0.12s; }
  .nav.open a:nth-child(3) { transition-delay: 0.18s; }
  .nav.open a:nth-child(4) { transition-delay: 0.24s; }

  .nav a:hover { background: var(--gray-200); }

  /* Close button */
  .nav-close {
    position: absolute; top: 16px; right: 16px;
    width: 44px; height: 44px;
    border: 0; background: transparent; box-shadow: none;
    color: var(--muted);
    font-size: 32px; line-height: 1; cursor: pointer;
    display: none; /* hidden until nav is open */
  }
  .nav.open .nav-close { display: grid; place-items: center; }
}