/* ==========================================================================
   Citywide Services — Responsive Refinements
   Most responsive behaviour lives alongside components in main.css.
   This file holds cross-cutting tweaks per breakpoint.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mobile (below 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero {
    min-height: auto;
    padding-bottom: 3rem;
  }

  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta .btn { width: 100%; }

  .hero__trust { gap: 1rem; }

  .section-num { top: -1.6rem; font-size: 3.5rem; }

  /* Full-width CTAs are easier tap targets */
  .about__cta .btn,
  .faq__aside-card .btn { width: 100%; }

  /* Headings breathe a little more on small screens */
  .section-head { margin-bottom: 2rem; }

  /* Keep the chat popup within the viewport */
  .whatsapp-popup { right: 0; }
}

/* --------------------------------------------------------------------------
   Small phones (below 420px)
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .hero__chip { display: none; }
  .marquee__track { gap: 2rem; }
}

/* Slightly larger base tap targets on touch devices */
@media (hover: none) and (pointer: coarse) {
  .nav__link { padding: 10px 0; }
}

/* --------------------------------------------------------------------------
   Large screens (1440px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root { --container-max: 1320px; }
}