/* ==========================================================================
   RESPONSIVE — mobile-first overrides layered last
   Breakpoints tested: 360 / 480 / 768 / 992 / 1200 / 1440 / 1920
   ========================================================================== */

/* ---- ≤ 1200px ----------------------------------------------------------- */
@media (max-width: 1200px) {
  .footer__grid { grid-template-columns: 1.3fr 1fr 1.15fr; }
  .footer__brandcol { grid-column: 1 / -1; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- ≤ 992px — tablet: nav collapses, mobile bar appears ---------------- */
@media (max-width: 992px) {
  .nav, .header__cta .btn { display: none; }
  .burger { display: grid; }

  .mobilebar { display: flex; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .hero__card { max-width: 460px; }
  .hero { min-height: auto; padding-top: var(--sp-8); }

  .sec-head { grid-template-columns: minmax(0, 1fr); align-items: start; }

  .split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .split__sticky { position: static; }
  .split__media--layered { padding: 0 var(--sp-7) var(--sp-7) 0; }

  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

  .shot--wide { grid-column: span 12; }
  .shot--tall { grid-column: span 6; }
  .shot--half { grid-column: span 6; }
  .shot--third { grid-column: span 6; }

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

  /* Parallax is disabled below tablet — it costs more than it gives */
  .hero__media, .cta__media, .pagehero__media { transform: none !important; inset: 0 !important; }

  /* Horizontal entrance offsets become vertical below tablet. At narrow widths
     a pre-reveal translateX pushes the element past the viewport edge and
     creates real horizontal overflow before the animation ever runs. */
  .reveal--left, .reveal--right { transform: translateY(26px); }
}

/* ---- ≤ 768px ------------------------------------------------------------ */
@media (max-width: 768px) {
  .topbar__inner { justify-content: center; gap: var(--sp-4); }
  .topbar__trust, .topbar__item--email, .topbar__item--hours { display: none; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .reviews__grid { grid-template-columns: minmax(0, 1fr); }
  .form__row { grid-template-columns: minmax(0, 1fr); }

  .gallery { gap: var(--sp-3); }
  .shot--tall, .shot--half, .shot--third, .shot--wide { grid-column: span 12; aspect-ratio: 4 / 3; }

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

  .cta__panel { max-width: none; }
  .cta__actions .btn { width: 100%; }

  .hero__scroll { display: none; }

  .header__inner { min-height: 72px; }
  .header.is-stuck .header__inner { min-height: 64px; }
  .brand__img { height: 34px; }
  .header.is-stuck .brand__img { height: 32px; }
  .footer__brandcol .brand__img { height: 38px; }

  .split__media--layered { padding: 0 var(--sp-6) var(--sp-6) 0; }
  .split__media--layered .split__over { width: 52%; border-width: 4px; }

  .badge-float { padding: var(--sp-3) var(--sp-4); }
  .badge-float strong { font-size: 1.1rem; }

  .footer__bottom { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ---- ≤ 480px ------------------------------------------------------------ */
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .trust__grid { grid-template-columns: minmax(0, 1fr); }

  .hero__actions .btn, .popup__actions .btn { width: 100%; }

  .rating-block { gap: var(--sp-4); }
  .rating-block__score { font-size: 2.5rem; }

  .tabs { gap: 6px; }
  .tab { padding: 10px var(--sp-4); font-size: var(--fs-eyebrow); }

  .mobilemenu__link { font-size: 1.25rem; }

  .mobilebar__btn { font-size: var(--fs-eyebrow); gap: var(--sp-2); }

  .review { padding: var(--sp-5); }
  .contact-panel, .cta__panel { padding: var(--sp-5); }
}

/* ---- ≤ 360px — smallest supported --------------------------------------- */
@media (max-width: 360px) {
  .topbar__item span { display: none; }
  .mobilebar__btn span { font-size: 11px; }
  .brand__img { height: 30px; }
}

/* ---- ≥ 1600px — let the layout breathe on very large screens ------------ */
@media (min-width: 1600px) {
  :root { --maxw: 1400px; }
}

/* ---- Touch devices: no hover-only affordances --------------------------- */
@media (hover: none) {
  .shot__cap { transform: translateY(0); opacity: 1; }
  .card:hover .card__media img, .shot:hover img { transform: none; }
  .tilt { transform: none !important; }
  .magnetic { transform: none !important; }
}

/* ---- Print --------------------------------------------------------------- */
@media print {
  .topbar, .header, .mobilebar, .popup, .scrollbar, .mobilemenu, .cta { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .section--dark, .footer { background: #fff !important; color: #000 !important; }
}