/* ============================================================
   Responsive
============================================================ */

/* Large laptops */
@media (max-width: 1100px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tablets */
@media (max-width: 900px) {
  :root { --header-h: 68px; }

  .nav { display: none; }
  .nav-toggle { display: flex; }
  .header__actions .btn--sm span { display: none; }
  .header__actions .btn--sm { padding: .6rem; }

  .why__grid { grid-template-columns: 1fr 1fr; }
  .pricing__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .price-card--popular { order: -1; }

  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }

  .process__timeline { grid-template-columns: 1fr 1fr; gap: 2.5rem 1rem; }
  .process__line { display: none; }

  .faq__inner { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer__brand { grid-column: 1 / -1; }

  .float-call { display: grid; }

  /* Cursor off on touch */
  .cursor, .cursor-dot { display: none; }
}

/* Mobiles */
@media (max-width: 640px) {
  .container { padding-inline: 18px; }

  .services__grid { grid-template-columns: 1fr 1fr; gap: .9rem; }
  .service-card { min-height: 0; padding: 1.3rem; }

  .gallery__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .gallery__item--wide { grid-column: span 2; }
  .gallery__item--tall { grid-row: span 1; }

  .hero__meta { gap: 1.6rem; }
  .hero__actions .btn { flex: 1; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }

  .section__head { margin-bottom: 2.2rem; }
}

@media (max-width: 420px) {
  .services__grid { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* Tall hero safety on short landscape screens */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 640px; }
  .hero__scroll { display: none; }
}