/* ============================================================
   RESPONSIVE — Mobile < 640, Tablet 640-1024, Desktop > 1024, Large > 1440
   ============================================================ */

@media (min-width: 1440px) {
  .container { max-width: 1280px; }
}

/* ---------- Tablet & below (<= 1080px) ---------- */
@media (max-width: 1080px) {
  .main-nav { display: none; }
  .menu-toggle { display: flex; }

  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-visual { max-width: 380px; margin: 0 auto; aspect-ratio: 1/1; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }

  .location-grid, .contact-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 36px; }
}

/* ---------- Mobile (< 640px) ---------- */
@media (max-width: 640px) {
  section { padding: 60px 0; }

  .header-inner { height: 68px; }
  .site-header.is-scrolled .header-inner { height: 60px; }
  .brand img { height: 42px; }
  .brand-text { font-size: 0.88rem; }
  .brand-text small { font-size: 0.55rem; }

  .hero { padding: 44px 0 60px; }
  .hero-logo { width: 150px; height: 150px; margin-bottom: 20px; }
  .hero-orn { width: 90px; }
  .hero-name { font-size: clamp(1.9rem, 10vw, 2.6rem); white-space: normal; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }

  .services-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }

  .timeline { grid-template-columns: 1fr; row-gap: 34px; }
  .timeline::before { display: none; }

  .footer-grid { grid-template-columns: 1fr; row-gap: 30px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .location-card, .contact-form { padding: 26px 22px; }
  .location-actions { flex-direction: column; align-items: stretch; }
  .location-actions .btn { width: 100%; }

  .section-heading { margin-bottom: 34px; }
}

@media (max-width: 380px) {
  .hero-name { font-size: 1.7rem; }
}