/* =========================================================
   Responsive breakpoints
   Desktop-first source order above; overrides narrow downward
   ========================================================= */

/* ---- Laptop / small desktop ---- */
@media (max-width: 1180px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .doc-grid { grid-template-columns: repeat(3, 1fr); }
  .logo-wall { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__figure { max-width: 420px; aspect-ratio: 16/10; }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-lg); }
  .contact-grid { grid-template-columns: 1fr; }
  .relationship-groups { grid-template-columns: 1fr; }
  .strip__list { grid-template-columns: repeat(2, 1fr); }
  .strip__item:nth-child(3) { border-left: none; }
  .strip__item { border-left: 1px solid var(--color-line); }
  .strip__item:nth-child(odd) { border-left: none; }
}

/* ---- Mobile nav breakpoint ---- */
@media (max-width: 1280px) {
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    align-items: center;
  }
  .nav-toggle span { width: 22px; height: 2px; background: var(--color-ink); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .main-nav {
    position: fixed;
    inset: 88px 0 0 0;
    background: var(--color-bg);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-lg) var(--container-pad);
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease);
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav__links { flex-direction: column; gap: 0; }
  .main-nav__links a { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-line); font-size: 1.05rem; }
  .main-nav .btn-row { margin-top: var(--space-lg); flex-direction: column; }
}

/* ---- Small tablet / large phone ---- */
@media (max-width: 720px) {
  .card-grid, .card-grid--2 { grid-template-columns: 1fr; }
  .project-grid, .project-grid--2 { grid-template-columns: 1fr; }
  .svc-split { grid-template-columns: 1fr; gap: var(--space-lg); }
  .doc-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-wall { grid-template-columns: repeat(3, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; text-align: center; }
  .timeline::before { left: 8px; }
  .section { padding-block: var(--space-xl); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- Mobile ---- */
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .strip__list { grid-template-columns: 1fr 1fr; }
  .doc-grid { grid-template-columns: 1fr; }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .hero__figure { aspect-ratio: 4/3; }
  .site-header__bar { height: 72px; }
  .main-nav { inset: 72px 0 0 0; }
  .wordmark img { height: 30px; }
}