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

/* ---- Tablet ≤ 1024px ---- */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-track { grid-template-columns: repeat(2, 1fr); }
  .service-detail { grid-template-columns: 1fr; gap: 24px; }
  .contact-layout { grid-template-columns: 1fr; }
  .approach-row { grid-template-columns: 1fr; }
  .home-about-row { grid-template-columns: 1fr; }
  .home-about-visual-wrap { order: -1; }
}

/* ---- Mobile nav breakpoint ≤ 900px ---- */
@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .header-actions .btn-gold.btn-sm.desktop-only { display: none; }
  .nav-toggle { display: flex; }
}

/* ---- Mobile ≤ 768px ---- */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .testimonial-track { grid-template-columns: 1fr; }
  .mvv-grid { grid-template-columns: 1fr; }
  .approach-visual { max-width: 260px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .form-row-2 { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }
  .trust-logos { gap: 28px; }
  .process-step { gap: 20px; }
  .process-track::before { left: 21px; }
  .process-step .step-marker { width: 44px; height: 44px; font-size: 0.95rem; }
  h1 { line-height: 1.2; }
  .scroll-top { right: 18px; bottom: 18px; width: 42px; height: 42px; }
}

/* ---- Small mobile ≤ 480px ---- */
@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .card { padding: 30px 24px; }
  .btn { width: 100%; }
  .header-actions .btn { display: none; }
}