/* =========================================================================
   RESPONSIVE — tested at 320 / 375 / 768 / 1024 / 1440 / 1920
   ========================================================================= */

/* ---------------- <= 1200px --------------------------------------------- */
@media (max-width: 1200px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__contact-col { grid-column: 1 / -1; }
  .gal { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------- <= 1024px --------------------------------------------- */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-7); }
  .hero__stage { height: clamp(340px, 46vh, 460px); order: 2; }
  .hero__copy { max-width: 100%; }
  .hero { min-height: auto; padding-block: var(--sp-9) var(--sp-8); }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .process__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); }
  .process__line { display: none; }
  .split { grid-template-columns: 1fr; gap: var(--sp-7); }
  .split--rev .split__media { order: 0; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .trust__item:nth-child(3)::before { display: none; }
}

/* ---------------- <= 900px ---------------------------------------------- */
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .gal { grid-template-columns: repeat(2, 1fr); }
  .gal__item--tall { grid-row: span 1; aspect-ratio: 4 / 5; }
}

/* ---------------- <= 768px : mobile ------------------------------------- */
@media (max-width: 768px) {
  /* Nav → drawer */
  .nav { display: none; }
  .burger { display: grid; }
  .header__cta { display: none; }
  .header__inner { min-height: 66px; }
  .brand img { height: 38px; }

  /* Top bar trims to phone + socials */
  .topbar__hide-sm { display: none; }
  .topbar__inner { justify-content: space-between; min-height: 38px; }

  /* Sticky action bar appears */
  .mobar { display: block; }
  body { padding-bottom: 58px; }

  /* Kill expensive effects on touch */
  .cursor { display: none; }
  .hero__frame { animation-name: frameIn !important; }
  [data-parallax] { transform: none !important; }
  [data-tilt] { transform: none !important; }

  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .process__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .form__row { grid-template-columns: 1fr; }
  .modal__actions { grid-template-columns: 1fr; }

  .hero__stage { height: 320px; }
  .hero__frame--back { width: 44%; height: 42%; }
  .hero__frame--mid { width: 50%; height: 52%; }
  .hero__frame--front { width: 54%; height: 56%; left: 20%; }
  .hero__cue { display: none; }

  .offset-frame::before { transform: translate(11px, 11px); }

  .footer__bar { flex-direction: column; text-align: center; gap: var(--sp-3); }

  .rating-sum { gap: var(--sp-4); }

  /* Modal becomes a bottom sheet */
  .modal { place-items: end center; padding: 0; }
  .modal__panel {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 0;
  }

  .lb__prev { left: var(--sp-3); }
  .lb__next { right: var(--sp-3); }
  .lb__btn { width: 44px; height: 44px; }
}

/* ---------------- <= 560px ---------------------------------------------- */
@media (max-width: 560px) {
  .gal { grid-template-columns: 1fr; }
  .gal__item--wide { grid-column: span 1; aspect-ratio: 4 / 5; }
  .footer__grid { grid-template-columns: 1fr; }
  .trust__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .trust__item::before { display: none !important; }
  .trust__item + .trust__item { padding-top: var(--sp-5); border-top: var(--hairline); }
  .radio-row { flex-direction: column; gap: var(--sp-2); }
  .filters { gap: var(--sp-2); }
  .filter { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
}

/* ---------------- <= 380px : smallest supported ------------------------- */
@media (max-width: 380px) {
  :root { --gutter: 1rem; }
  .btn { padding-inline: var(--sp-5); font-size: var(--fs-xs); }
  .hero__meta { gap: var(--sp-4); }
}

/* ---------------- Touch devices ----------------------------------------- */
@media (hover: none) {
  .cursor { display: none !important; }
  .frame::after { display: none; }
  /* Wall labels always visible — no hover to reveal them. */
  .gal__label { opacity: 1; transform: none; }
}

/* ---------------- Print -------------------------------------------------- */
@media print {
  .topbar, .header, .mobar, .modal, .lb, .progress, .cursor,
  .hero__cue, .page-veil { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  * { box-shadow: none !important; }
  a { color: #000; text-decoration: underline; }
}