/* ==========================================================================
   VORA — Mobile spacing & fixes (home page). Loaded LAST so it wins.
   ========================================================================== */

/* ---- Stats bento grid was overflowing to the right on tablets/large phones
   because the 5-column desktop grid stayed active. Stack it earlier. ---- */
@media (max-width: 1024px) {
  .stats__grid {
    grid-template-columns: 1fr;
  }
  .stats__col-left,
  .stats__col-right {
    grid-column: auto;
  }
}

/* ---- Tighter vertical rhythm + card gaps on phones ---- */
@media (max-width: 768px) {
  .clients {
    padding: 32px 0;
  }

  .why-choose {
    padding: 52px 0;
  }
  .why-choose__inner {
    gap: 28px;
  }
  .why-choose__grid {
    gap: 12px;
  }
  .why-choose__title {
    font-size: 26px;
  }

  .services__content {
    padding: 44px 20px;
    gap: 32px;
  }

  .stats {
    padding: 52px 0;
  }
  .stats__inner {
    gap: 26px;
  }
  .stats__grid {
    gap: 14px;
  }
  .stats__row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* stats title was too large on mobile */
  .stats__head {
    gap: 14px;
    max-width: 100%;
  }
  .stats__title {
    font-size: 24px;
    line-height: 1.25;
  }

  /* number + suffix no longer forced onto one overflowing line */
  .stats__number-row {
    flex-wrap: wrap;
  }
  .stats__number,
  .stats__suffix {
    font-size: 30px;
  }

  /* cards more compact; decorative photo was covering the card text */
  .stats__card {
    min-height: 0;
    padding: 26px;
  }
  .stats__card--yellow,
  .stats__card--black {
    min-height: 0;
  }
  .stats__card--media {
    min-height: 200px;
  }
  .stats__truck-img {
    display: none;
  }

  .pricing {
    padding: 52px 0;
  }
  .pricing__head {
    margin-bottom: 32px;
  }
  .pricing__title {
    font-size: 26px;
  }
  .pricing__grid {
    gap: 16px;
  }

  .video-section {
    padding-bottom: 32px;
  }

  .testimonials {
    padding-bottom: 52px;
  }
  .testimonials__head {
    margin-bottom: 32px;
  }
  .testimonials__title {
    font-size: 26px;
  }

  .cta {
    padding: 56px 20px;
  }
}

@media (max-width: 560px) {
  .hero__container {
    gap: 28px;
  }
}