/* ============================================================
   Fresco Cleaning — MOBILE POLISH
   Loads LAST. Purpose: tighten spacing, kill overflow, calm
   the visual noise so mobile reads like the desktop feels.
   ============================================================ */

@media (max-width: 900px) {

  /* 1. Kill horizontal overflow globally --------------------- */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  /* Any child that tries to escape the viewport gets clipped   */
  main, section, .container, .hero, .why-plus-process,
  .services-plus-cases, .reviews-plus-area, .faq-section,
  .final-cta, .footer {
    max-width: 100vw;
    overflow-x: clip;
  }

  /* 2. Prevent overflowing card-scroll rails from bleeding --- */
  .services-scroll,
  .cases-scroll,
  .projects-scroll,
  [class*="__scroll"] {
    max-width: 100%;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [class*="__scroll"]::-webkit-scrollbar { display: none; }

  /* 3. Tighten vertical rhythm — sections were too tall ----- */
  section,
  main > section {
    padding-block: 2.75rem !important;
  }

  .hero {
    padding-top: calc(84px + 1.25rem) !important;
    padding-bottom: 2.5rem !important;
  }

  .why-plus-process,
  .services-plus-cases,
  .reviews-plus-area,
  .faq-section,
  .final-cta {
    padding-block: 2.5rem !important;
  }

  /* Reduce gap under section headers */
  .section-header {
    margin-bottom: 1.25rem !important;
  }

  /* 4. Container padding — a touch tighter ------------------ */
  .container {
    padding-inline: 1.125rem !important;
  }

  /* 5. Bottom action bar — slimmer, less visually loud ------ */
  .bottom-bar {
    padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(10,10,11,.92) !important;
    border-top: 1px solid rgba(255,255,255,.05) !important;
  }
  .bottom-bar__btn {
    padding: .625rem .75rem !important;
    font-size: .875rem !important;
    border-radius: 10px !important;
  }
  .bottom-bar__btn svg {
    width: 14px !important;
    height: 14px !important;
  }
  /* Trim body padding since bar is now shorter */
  body { padding-bottom: 68px !important; }

  /* 6. Trust chips row — wrap nicely, don't crowd ----------- */
  .hero-trust {
    gap: .5rem .875rem !important;
    margin-top: 1.25rem !important;
    flex-wrap: wrap !important;
  }
  .hero-trust__item {
    font-size: .8125rem !important;
    padding: 0 !important;
  }

  /* 7. Grid chips (area chips, portfolio chips) ------------ */
  .area-chips {
    gap: .375rem !important;
  }
  .area-chip {
    font-size: .75rem !important;
    padding: .3rem .625rem !important;
  }

  /* 8. Review cards — full-width, comfortable padding ------ */
  .reviews-grid {
    grid-template-columns: 1fr !important;
    gap: .875rem !important;
  }
  .review-card {
    padding: 1.125rem !important;
    border-radius: 12px !important;
  }
  .review-cta-row {
    flex-direction: column !important;
    gap: .625rem !important;
  }
  .review-cta-row .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* 9. FAQ — tighter spacing between items ------------------ */
  .faq-list {
    gap: .5rem !important;
  }
  .faq-item {
    padding: 1rem 1.125rem !important;
  }

  /* 10. Simplified footer — mobile ------------------------- */
  .footer__top {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
    margin-bottom: 1.75rem !important;
  }
  .footer__brand-logo img {
    height: 40px !important;
  }
  .footer__blurb {
    font-size: .875rem !important;
    line-height: 1.55 !important;
  }
  .footer__links-wrap {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
  }
  .footer__col-title {
    font-size: .75rem !important;
    margin-bottom: .875rem !important;
  }
  .footer__links a {
    font-size: .875rem !important;
  }
  .footer__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .5rem !important;
    padding-top: 1.25rem !important;
  }

  /* 11. Kill any leftover heavy footer chip band ------------ */
  .footer__area,
  .footer__cta,
  .footer__trust,
  .footer__contact-list {
    display: none !important;
  }

  /* 12. Buttons — comfortable touch targets ---------------- */
  .btn--lg {
    padding: .875rem 1.25rem !important;
    font-size: .9375rem !important;
  }

  /* 13. Nav lockup — larger on mobile per user request ---- */
  .nav__brand-lockup {
    height: 60px !important;
    width: auto !important;
  }
  .nav__inner {
    height: 88px !important;
  }
  .nav__mobile {
    top: 88px !important;
  }

  /* 14. Hero copy width — don't hug edges too tight -------- */
  .hero__content {
    padding-inline: 0 !important;
  }
  .hero__heading {
    font-size: clamp(2rem, 8.5vw, 2.75rem) !important;
    line-height: 1.05 !important;
  }
  .hero__sub {
    font-size: .9375rem !important;
    line-height: 1.55 !important;
    margin-top: 1rem !important;
  }
  .hero__actions {
    gap: .625rem !important;
    margin-top: 1.5rem !important;
  }
  .hero__actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Extra-small phones ------------------------------------------ */
@media (max-width: 380px) {
  .container { padding-inline: 1rem !important; }
  .hero__heading { font-size: 1.85rem !important; }
  .bottom-bar__btn { font-size: .8125rem !important; }
}