/* ==========================================================================
   RESPONSIVE — mobile-first overrides, largest breakpoint last
   Tested targets: 360, 480, 768, 992, 1200, 1600
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤1200px
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__col--contact { grid-column: 1 / -1; }
  .bento { grid-auto-rows: 190px; }
}

/* --------------------------------------------------------------------------
   ≤992px — nav collapses to the overlay menu
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {

  .nav, .header__cta { display: none; }
  .burger { display: grid; }

  .topbar__group--left { display: none; }
  .topbar__inner { justify-content: space-between; }

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

  .split,
  .split--wide-left { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .split--media-last .split__media { order: 0; }

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

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
  .bento__tile--xl { grid-column: span 2; grid-row: span 2; }
  .bento__tile--w  { grid-column: span 2; }
  .bento__tile--t  { grid-row: span 1; }

  /* Timeline becomes a single left-aligned rail */
  .timeline__svg { left: 30px; transform: none; }
  .timeline__step { grid-template-columns: 60px 1fr; gap: 1.2rem; }
  .timeline__step:nth-child(odd)  .timeline__card,
  .timeline__step:nth-child(even) .timeline__card { grid-column: 2; text-align: left; }
  .timeline__dot { grid-column: 1; grid-row: 1; width: 52px; height: 52px; }

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

  .hero { min-height: 88svh; }

  /* Desktop-only affordance — it collides with the trust row on small screens */
  .scroll-cue { display: none; }
}

/* --------------------------------------------------------------------------
   ≤768px — sticky action bar appears; single-column everything
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  html { scroll-padding-top: 88px; }

  .action-bar { display: block; }
  /* Reserve room so the bar never covers the footer.
     58px button + 1px top border, plus the iOS home-indicator inset. */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .gallery     { grid-template-columns: 1fr; }
  .awards      { grid-template-columns: 1fr; }
  .stats       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-left: 0; border-top: 1px solid var(--sand); }
  .sec--dark .stat, .sec--deep .stat { border-top-color: var(--ink-line); }
  .stat:nth-child(-n+2) { border-top: 0; }

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

  .bento { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .bento__tile--xl, .bento__tile--w { grid-column: span 1; grid-row: span 1; }

  .hero { min-height: 82svh; margin-top: -76px; padding-top: 76px; }
  .hero__trust { gap: .9rem 1.3rem; }
  .hero__cta .btn { flex: 1 1 100%; }

  .page-head { margin-top: -76px; }
  .header__inner { min-height: 76px; }
  .header.is-stuck .header__inner { min-height: 66px; }

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

  .footer__bottom { flex-direction: column; text-align: center; }
  .footer__legal { justify-content: center; }

  .lightbox__nav--prev { left: .6rem; }
  .lightbox__nav--next { right: .6rem; }

  /* Disable pointer-driven depth effects where there is no pointer */
  .tilt__inner { transform: none !important; }
  .cursor { display: none !important; }
}

/* --------------------------------------------------------------------------
   ≤480px
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root { --gutter: 1.15rem; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .stats { grid-template-columns: 1fr; }
  .stat { border-top: 1px solid var(--ink-line); }
  .stat:first-child { border-top: 0; }

  .brand__text { display: none; }
  .topbar__item--email { display: none; }

  .info-card { padding: 1.4rem; }
  .card__body { padding: 1.2rem 1.25rem 1.4rem; }

  .mobile-menu { padding-top: 5.2rem; }
  .mobile-menu__list a { font-size: 1.28rem; }

  .timeline__step { grid-template-columns: 46px 1fr; gap: .9rem; }
  .timeline__dot { width: 44px; height: 44px; font-size: 1.05rem; }
  .timeline__svg { left: 23px; }
}

/* --------------------------------------------------------------------------
   ≤360px — nothing may overflow horizontally
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  :root { --gutter: 1rem; }
  .btn { padding-inline: 1.25rem; font-size: .87rem; }
  .hero__trust-item { font-size: .74rem; }
  .reviews__score-num { font-size: 2.4rem; }
  .action-bar__btn { font-size: .88rem; }
}

/* --------------------------------------------------------------------------
   ≥1600px
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --maxw: 1400px; }
  .bento { grid-auto-rows: 250px; }
}

/* --------------------------------------------------------------------------
   Pointer capability — custom cursor only for real mice
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .cursor { display: grid; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
}
@media (hover: none) {
  .cursor { display: none !important; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .topbar, .header, .action-bar, .curtain, .cursor, .grain,
  .marquee, .video, .scroll-cue { display: none !important; }
  body { background: #fff; color: #000; }
  .sec { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}