/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ---------------------------------- ≤1180px : small desktop / large tablet ---------------------------------- */
@media (max-width: 1180px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
  .stats-strip__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-8); }
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .gallery__grid > *:first-child { grid-row: span 1; }
  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-8); }
}

/* ---------------------------------- ≤980px : tablet ---------------------------------- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-phone span { display: none; }
  .nav-cta { gap: var(--space-3); }

  .hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero__media {
    clip-path: polygon(0 6% , 100% 0, 100% 100%, 0 100%);
    min-height: 320px;
    order: -1;
  }
  .hero__content { padding-block: var(--space-8); }

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

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

  .exterior-band { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------- ≤640px : mobile ---------------------------------- */
@media (max-width: 640px) {
  :root {
    --space-16: 4.5rem;
    --space-12: 3.5rem;
  }

  .site-header .container { height: 72px; }
  .hero { padding-top: 72px; }
  .brand img { height: 36px; }
  .brand-word { font-size: var(--fs-sm); }
  .brand-word span { display: none; }

  /* The pill CTA + phone icon + hamburger no longer fit this narrow a
     header without overflowing and pushing the menu button off-screen —
     drop the CTA here; it reappears as the first item in the mobile
     drawer instead. */
  .nav-cta .btn--primary { display: none; }
  .nav-cta { gap: var(--space-2); }
  .nav-phone { padding: 6px; }

  .hero__title { font-size: clamp(2.1rem, 9vw, 2.75rem); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .hero__ribbon p { font-size: var(--fs-xs); letter-spacing: 0.03em; }

  .stats-strip__grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }

  .services__grid { grid-template-columns: 1fr; }
  .testimonials__grid { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: 1fr 1fr; }

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

  .contact__form-panel { padding: var(--space-5); }
  .field-row { grid-template-columns: 1fr; }

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

  .diagonal-top, .diagonal-bottom { clip-path: none; }

  .section-title { font-size: var(--fs-2xl); }
}

/* ---------------------------------- ≤400px : small phones ---------------------------------- */
@media (max-width: 400px) {
  .gallery__grid { grid-template-columns: 1fr; }
  .container { padding-inline: 1.1rem; }
}