/* ==========================================================================
   RESPONSIVE — 1536 / 1280 / 1024 / 768 / 560 / 380
   Mobile-first would invert these; the base above is desktop-leaning, so we
   step down. Verified for zero horizontal overflow at 320px.
   ========================================================================== */

@media (max-width: 1280px) {
  .masonry {
    column-count: 3;
  }
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
  .footer__contact-col {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1100px) {
  .nav {
    gap: 0.15rem;
  }
  .nav__link {
    padding-inline: var(--sp-2);
    font-size: 0.8125rem;
  }
  .topbar__group--left .topbar__item:nth-child(2) {
    display: none;
  }
}

/* ---- Tablet: collapse nav to drawer ---- */
@media (max-width: 1023px) {
  :root {
    --header-h: 128px; /* top bar 46 + nav 82 */
  }
  .nav,
  .nav-actions .btn {
    display: none;
  }
  .burger {
    display: grid;
  }
  .navbar__inner {
    height: 82px;
  }
  .site-header.is-shrunk .navbar__inner {
    height: 66px;
  }
  .brand img {
    height: 52px;
  }
  .site-header.is-shrunk .brand img {
    height: 44px;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 7vw, 4rem);
  }
  .hero__stage {
    max-width: 480px;
    margin-inline: auto;
    width: 100%;
  }
  .hero {
    min-height: auto;
  }

  .split,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .split--reverse .split__media {
    order: 0;
  }
  .split__media-float {
    width: 38%;
    right: 0;
    bottom: -10%;
  }
  .split--reverse .split__media-float {
    left: auto;
    right: 0;
  }
  .split__stat {
    left: 0;
    top: -5%;
  }
  .split--reverse .split__stat {
    right: auto;
    left: 0;
  }

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

  .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--sp-6);
  }
  .process::before,
  .process::after {
    display: none;
  }
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
  :root {
    --section-y: clamp(3.25rem, 11vw, 4.5rem);
    --header-h: 82px; /* top bar is hidden below 768 */
  }

  /* The sticky call/WhatsApp bar covers the top bar's job on mobile. */
  .topbar {
    display: none;
  }

  /* Clear the fixed bottom bar so the footer is never covered. */
  body {
    padding-bottom: 60px;
  }

  .mobile-bar {
    display: block;
  }
  .wa-float {
    display: none;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .masonry {
    column-count: 2;
  }
  .review-grid,
  .mat-grid,
  .grid--3,
  .grid--4,
  .grid--2 {
    grid-template-columns: 1fr;
  }
  .form__row {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .hero__badge {
    right: auto;
    left: 0;
    bottom: 6%;
  }

  .split__media-float,
  .split__stat {
    position: static;
    width: 100%;
    margin-top: var(--sp-4);
  }
  .split__stat {
    display: inline-block;
  }

  .review-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: var(--sp-3);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .review-filters::-webkit-scrollbar {
    display: none;
  }
  .chip {
    flex: none;
  }

  .cta-band__actions,
  .centered-page__actions,
  .hero__actions {
    flex-direction: column;
  }
  .cta-band__actions .btn,
  .centered-page__actions .btn,
  .hero__actions .btn {
    width: 100%;
  }

  .faq__q {
    font-size: 0.975rem;
    padding-inline: var(--sp-4);
  }
  .faq__a p {
    padding-inline: var(--sp-4);
  }
}

@media (max-width: 560px) {
  .masonry {
    column-count: 1;
  }
  .stats {
    grid-template-columns: 1fr;
  }
  .hero__stage {
    aspect-ratio: 4 / 5;
  }
  .rating-summary {
    flex-direction: column;
    border-radius: var(--r-lg);
    text-align: center;
  }
}

@media (max-width: 380px) {
  :root {
    --gutter: 1rem;
  }
  .brand img {
    height: 44px;
  }
  .mobile-bar__btn {
    font-size: 0.8125rem;
  }
}

/* ---- Short viewports (1280x720, 1366x768 laptops) ----
   Tighten the hero's vertical rhythm so the CTA *and* the trust strip both
   clear the fold at zero scroll. Height-based, so it never fires on tall
   monitors where the extra breathing room is wanted. ---- */
@media (min-width: 1024px) and (max-height: 780px) {
  .hero__title {
    font-size: clamp(2.2rem, 1.4rem + 2.9vw, 3.9rem);
    margin-bottom: var(--sp-3);
  }
  .hero__lead {
    margin-bottom: var(--sp-4);
  }
  .hero__actions {
    margin-bottom: var(--sp-4);
  }
  .hero__trust {
    padding-top: var(--sp-3);
    gap: var(--sp-3) var(--sp-4);
  }
}

/* ---- Pointer capability: disable hover-only affordances on touch ---- */
@media (hover: none) {
  .cursor-dot {
    display: none;
  }
  .masonry__cap {
    opacity: 1;
    transform: none;
  }
}

/* ---- Print ---- */
@media print {
  .site-header,
  .mobile-bar,
  .wa-float,
  .popup,
  .scroll-progress,
  .cursor-dot,
  .cta-band {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
    padding-bottom: 0;
  }
  body::before {
    display: none;
  }
}