/* ==========================================================================
   Responsive overrides
   Breakpoints reviewed at ~1440 / 1200 / 992 / 768 / 576 / 375 / 320
   ========================================================================== */

/* ----- ≤1200px : tighten section rhythm slightly on laptops ----- */
@media (max-width: 1200px) {
  .masonry { grid-auto-rows: 120px; }
}

/* ----- ≤992px (Bootstrap lg) ----- */
@media (max-width: 991.98px) {
  :root { --header-height: 76px; }

  .hero__scroll { display: none; }

  .tile-grid--4, .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .service-tile { aspect-ratio: 4 / 5; }

  .category-grid, .category-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .category-panel { min-height: 46vh; }

  .duo-panel { min-height: 60vh; }

  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--reverse .split__media,
  .split--reverse .split__content,
  .split .split__media,
  .split .split__content { order: initial; position: static !important; }
  .split__media-frame { aspect-ratio: 16 / 10; }
  .split__content { max-width: none; }

  .masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .masonry .project-card--hero,
  .masonry .project-card--wide { grid-column: span 2; grid-row: span 2; }
  .masonry .project-card--tall { grid-row: span 2; }
  .masonry .project-card--medium { grid-row: span 1; }

  .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 28px; }

  .contact-layout { grid-template-columns: 1fr; gap: 56px; }

  .photo-section--break { min-height: 46vh; }

  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 36px; }

  .section-head--split { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ----- ≤767px : centre the services/portfolio headings on mobile only ----- */
@media (max-width: 767.98px) {
  .section-head--split { align-items: center; text-align: center; }
}

/* ----- ≤768px (Bootstrap md) ----- */
@media (max-width: 767.98px) {
  :root {
    --section-spacing-desktop: var(--section-spacing-tablet);
  }

  .reasons { grid-template-columns: 1fr; gap: 36px; max-width: 360px; }

  .portfolio-grid { grid-template-columns: 1fr; gap: 44px; }
  .portfolio-modal .carousel-item img { max-height: 56vh; }

  .site-header__phone-number { display: none; }

  .cta-band { padding-block: 64px; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1 1 auto; }

  .photo-section--statement { padding-block: 72px; }

  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__bottom-inner { flex-direction: column; text-align: center; }

  .process-horizontal { flex-wrap: wrap; row-gap: 32px; }
  .process-horizontal::before { display: none; }
  .process-step-h { flex: 0 0 25%; }
}

/* ----- ≤576px (Bootstrap sm) : small phones ----- */
@media (max-width: 575.98px) {
  :root {
    --section-spacing-desktop: var(--section-spacing-mobile);
    --container-padding: 18px;
  }

  .menu-launcher__label { display: none; }

  .contact-form .field--row { grid-template-columns: 1fr; gap: 0; }

  .hero { min-height: 88vh; }
  .hero--center { min-height: 62vh; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .tile-grid--2, .card-grid--2,
  .tile-grid--3, .card-grid--3,
  .tile-grid--4, .card-grid--4 {
    grid-template-columns: 1fr;
  }

  .category-grid, .category-grid--3 { grid-template-columns: 1fr; }
  .category-panel { min-height: 56vh; }

  .duo-grid { grid-template-columns: 1fr; }
  .duo-panel { min-height: 70vh; }

  .process-step-h { flex: 0 0 50%; }

  .masonry { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .masonry .project-card--hero,
  .masonry .project-card--wide,
  .masonry .project-card--tall,
  .masonry .project-card--medium { grid-column: span 1; grid-row: span 1; }

  .photo-section--statement blockquote { max-width: none; }
  .photo-section--break .photo-section__inner { padding-block: 40px; }
}

/* ----- ≤375px / ≤320px : smallest phones ----- */
@media (max-width: 400px) {
  .site-header__phone { display: none; }
  .site-header__inner { grid-template-columns: auto auto; justify-content: space-between; }
  .brand--center { justify-self: start; }
}

@media (max-width: 375px) {
  .hero__title { max-width: none; }
}