/* ============================================================
   public-site/css/responsive.css
   Mobile-first responsive adjustments
   ============================================================ */

/* Desktop default: 4-column services grid */

/* ---- Tablet: 900px and below ---- */
@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-visual { max-width: 560px; margin: 0 auto; order: -1; }
  .hero-actions { justify-content: flex-start; }

  .about-short { grid-template-columns: 1fr; gap: 2rem; }
  .about-short-img { max-width: 560px; margin: 0 auto; width: 100%; }

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

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

  .newsletter-form { max-width: 100%; }

  .section { padding: 3.5rem 0; }
}

/* ---- Mobile: 640px and below ---- */
@media (max-width: 640px) {
  .container { width: calc(100% - 1.5rem); }

  .desktop-nav { display: none; }
  .hamburger { display: flex; }
  .brand-name { font-size: 1rem; }
  .brand-logo { width: 40px; height: 40px; }

  .hero { padding: 2.5rem 0 4rem; }
  .hero h1 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .hero-wave svg { height: 50px; }

  .services-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .service-card { padding: 1.25rem; }

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

  .newsletter-box { padding: 2rem 1.25rem; border-radius: 20px; }
  .newsletter-form {
    flex-direction: column;
    border-radius: 16px;
    padding: .5rem;
    gap: .5rem;
  }
  .newsletter-form input { padding: .9rem 1rem; }
  .newsletter-form button { width: 100%; border-radius: 12px; }

  .form-row { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; text-align: left; }

  .section { padding: 2.75rem 0; }
  .section-head { margin-bottom: 2rem; }

  .btn { padding: .8rem 1.35rem; font-size: .9rem; }

  .kcs-whatsapp { width: 52px; height: 52px; }
  .kcs-whatsapp svg { width: 24px; height: 24px; }

  .kcs-toast { left: 1rem; right: 1rem; max-width: none; bottom: 80px; }
}

/* ---- Small mobile: 380px and below ---- */
@media (max-width: 380px) {
  .brand-name { display: none; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.35rem; }
}

/* ---- Large desktop: 1400px+ ---- */
@media (min-width: 1400px) {
  .container { width: min(100% - 3rem, 1280px); }
}