/* =====================================================================
   RESPONSIVE — Shaheen Cabinets & Joinery
   Targets: 320 / 375 / 390 / 414 / 768 / 1024 / 1280 / 1440 / 1920
   Mobile-first friendly reductions from desktop defaults.
   ===================================================================== */

/* ---------- Large desktops ---------- */
@media (min-width: 1441px) {
  body { font-size: 18px; }
}

/* ---------- Tablet & small desktop (≤ 1100px) ---------- */
@media (max-width: 1100px) {
  :root { --header-h: 76px; }

  /* Switch to mobile nav */
  .header-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-inner { grid-template-columns: 1fr auto; }
  .header-cta { justify-self: end; gap: .6rem; }

  /* Process → 2 columns */
  .process__grid { grid-template-columns: repeat(2, 1fr); gap: 2.6rem 2rem; }
  .process__grid::before { display: none; }

  /* Two-column sections stack */
  .quote { grid-template-columns: 1fr; }
  .quote__media { min-height: 280px; order: -1; }
  .service-detail { grid-template-columns: 1fr; gap: 2rem; }
  .service-detail--reverse .service-detail__media { order: -1; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- ≤ 768px tablet portrait ---------- */
@media (max-width: 768px) {
  body { font-size: 16.5px; }
  .section { padding-block: clamp(58px, 11vw, 90px); }

  .services-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .masonry { columns: 2; column-gap: 1rem; }
  .masonry__item { margin-bottom: 1rem; }

  .cta-band__inner { text-align: center; justify-content: center; flex-direction: column; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ---------- ≤ 640px large phones ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { min-height: 90svh; }
  .page-hero { min-height: auto; }

  .process__grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
  .masonry { columns: 1; }

  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__meta { gap: 1.4rem 2rem; }

  .form-nav { flex-direction: row; }
  .form-nav .btn { flex: 1; }
}

/* ---------- ≤ 480px small phones ---------- */
@media (max-width: 480px) {
  .logo__main { font-size: 1.2rem; letter-spacing: .15em; }
  .logo__sub { font-size: .5rem; letter-spacing: .34em; }
  .header-cta .btn { padding: .72em 1.05em; font-size: .82rem; }
  .header-cta .btn .arrow { display: none; }

  .chips label { padding: .72rem 1rem; font-size: .86rem; }
  .gallery-filters { gap: .45rem; }
  .filter-btn { padding: .62rem 1.1rem; font-size: .84rem; }

  .quote-form { padding: 1.4rem; }
  .review-card__inner { padding: 1.6rem; }

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

/* ---------- ≤ 380px (iPhone SE / 320) ---------- */
@media (max-width: 380px) {
  .container { padding-inline: 18px; }
  .header-cta .btn { padding: .68em .9em; font-size: .78rem; }
  .hero__stat .num { font-size: 1.6rem; }
  .step-panel__title { font-size: 1.25rem; }
  .hero__actions .btn { font-size: .9rem; padding: .95em 1.2em; }
}

/* ---------- Touch / coarse pointers ---------- */
@media (pointer: coarse) {
  .service-card:hover,
  .project-card:hover,
  .masonry__item:hover { transform: none; }
}