/* ==================== RESPONSIVE ==================== */

/* ----- Tablet ----- */
@media (max-width: 1024px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .process::before { display: none; }
}

/* ----- Below desktop nav: switch to mobile menu ----- */
@media (max-width: 900px) {
  .header__inner { flex-direction: row; justify-content: space-between; align-items: center; }
  .nav__toggle { display: flex; position: static; transform: none; top: auto; }
  .header--scrolled .nav__toggle { top: auto; }

  .nav__links {
    position: fixed; inset: 0; z-index: 105;
    background: var(--cream); color: var(--ink);
    flex-direction: column; justify-content: center; align-items: center;
    gap: 1.9rem; padding: 2rem;
    transform: translateX(100%);
    visibility: hidden; pointer-events: none;
    transition: transform 0.45s var(--ease), visibility 0s linear 0.45s;
  }
  .nav__links.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform 0.45s var(--ease); }
  .nav__link { color: var(--ink); font-size: 1.05rem; letter-spacing: var(--ls-wide); }
  .nav__toggle.is-active span { background: var(--ink); }

  .intro__grid { grid-template-columns: 1fr; gap: 3rem; }
  .intro__figure { border-left: 0; padding-left: 0; max-width: 420px; margin-inline: auto; }
  .faq__grid { grid-template-columns: 1fr; gap: 2rem; }
  .faq__head { text-align: center; }
  .faq__head .rule { margin-inline: auto; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer__brand { grid-column: 1 / -1; order: -1; margin-bottom: 1rem; }
  .footer__col--links { text-align: left; }
}

/* ----- Mobile ----- */
@media (max-width: 640px) {
  .projects-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .process { grid-template-columns: 1fr; }
  .hero__title { letter-spacing: var(--ls-wide); line-height: 1.3; text-wrap: balance; }
  .footer__grid { grid-template-columns: 1fr; text-align: center; }
  .footer__col--links { text-align: center; }
  .footer__col--contact { display: flex; flex-direction: column; align-items: center; }
  .btn { padding: 1rem 2rem; }
}

/* ----- Fine pointer hover niceties off on touch ----- */
@media (hover: none) {
  .project-card:hover .media { transform: none; }
}