/* =========================================================
   RESPONSIVE POLISH
   Extra breakpoints & fixes so the whole site sits well on
   phones, tablets, laptops and large screens.
   Loaded AFTER every other stylesheet so it can safely
   override old/duplicated rules.
========================================================= */

/* ---------- Global safety net ---------- */

html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

* {
  min-width: 0;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* ---------- Fluid typography for big hero titles ---------- */

.about-hero h1,
.contact-hero h1 {
  font-size: clamp(28px, 6vw, 62px);
}

.about-content h2,
.mission-box h2,
.cta-box h2 {
  font-size: clamp(24px, 4.5vw, 42px);
}

/* ---------- Tablet tier: 769px – 1024px ---------- */
/* Fills the gap where grids used to jump straight from
   desktop layout to single-column mobile layout. */

@media (min-width: 769px) and (max-width: 1024px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .about-grid,
  .mission-box {
    gap: 40px;
  }

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

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

  .contact-grid {
    grid-template-columns: 320px 1fr;
  }

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

/* ---------- Small tablet / large phone: 577px – 768px ---------- */

@media (min-width: 577px) and (max-width: 768px) {
  .about-stats,
  .why-grid,
  .stats-grid,
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-hero,
  .contact-hero {
    min-height: 360px;
  }

  .about-story,
  .why-us,
  .mission,
  .brands-section,
  .about-cta {
    padding: 70px 0;
  }
}

/* ---------- Phones: up to 576px ---------- */

@media (max-width: 576px) {
  .about-hero,
  .contact-hero {
    min-height: 320px;
    text-align: center;
  }

  .about-hero-content,
  .contact-hero .hero-content {
    max-width: 100%;
  }

  .about-hero p,
  .contact-hero p {
    font-size: 15px;
  }

  .about-stats {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

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

  .mission-box {
    grid-template-columns: 1fr;
  }

  .mission-box > div {
    padding: 28px;
  }

  .cta-box {
    padding: 45px 22px;
  }

  .cta-buttons {
    flex-direction: column;
    gap: 14px;
  }

  .cta-call,
  .cta-contact {
    width: 100%;
    text-align: center;
  }

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

  .contact-section {
    padding: 90px 0 60px;
  }

  .contact-form {
    padding: 22px;
  }

  .contact-buttons {
    flex-direction: column;
  }

  .contact-map iframe {
    height: 300px;
  }

  .info-card {
    padding: 16px;
  }
}

/* ---------- Very small phones: up to 380px ---------- */

@media (max-width: 380px) {
  .container {
    width: 94%;
  }

  .about-hero h1,
  .contact-hero h1 {
    font-size: 26px;
  }

  .hero-badge {
    font-size: 13px;
    padding: 8px 14px;
  }

  .stat-box h3 {
    font-size: 28px;
  }
}

/* ---------- Side menu: don't let it eat too much width on tiny phones ---------- */

@media (max-width: 380px) {
  :root {
    --side-collapsed: 52px;
  }
}