/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-illustration { max-width: 380px; margin-inline: auto; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats-band { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-lg); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* client-wall stays on its fluid auto-fill grid (defined in components.css) —
     no fixed column override needed, it adapts naturally at every width. */
  .feature-row { grid-template-columns: 1fr; text-align: center; gap: var(--space-lg); padding-block: var(--space-xl); }
  .feature-row--reverse { direction: ltr; }
  .feature-row__content p { margin-inline: auto; }
  .feature-row__bignum { font-size: 10rem; opacity: 0.5; top: 8%; transform: none; }
  .feature-row__visual { max-width: 260px; }
}

@media (max-width: 900px) {
  .hero { padding-top: 110px; padding-bottom: 80px; min-height: auto; }
  .hero-copy h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); }
  .page-header { padding-top: calc(100px + var(--space-lg)) !important; padding-bottom: var(--space-xl) !important; }
}

@media (max-width: 720px) {
  .section { padding-block: var(--space-2xl); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .process-item { grid-template-columns: 48px 1fr; gap: var(--space-md); }
  .sticky-card { position: static !important; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }
  .footer-cta { padding-block: var(--space-xl); }
  .work-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }
  .pill-tab-group { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
  .pill-tab-group::-webkit-scrollbar { display: none; }
  .pill-tab { flex-shrink: 0; }
  .hero-scroll-cue { display: none; }
  .float-whatsapp { width: 48px; height: 48px; right: 14px; bottom: 14px; }
  .nav-toggle { width: 44px; height: 44px; }

  /* Cards & content blocks need less internal padding on small screens */
  .card { padding: var(--space-md); }
  .testimonial-card { padding: var(--space-xl) var(--space-md); }
  .testimonial-card::before { font-size: 4.5rem; }
  .testimonial-card__quote { font-size: 1.2rem; }

  /* Touch targets: hover-only affordances become always-visible on touch */
  .client-wall__name { transform: translateY(0); }
  .work-card__body { padding: var(--space-md); }

  /* Contact page two-column layout should stack cleanly */
  .header-inner { gap: var(--space-sm); }
}

@media (max-width: 480px) {
  .btn { padding: 13px 22px; font-size: 0.82rem; }
  .hero-copy h1 { font-size: clamp(2.1rem, 8vw, 2.8rem); }
  .section-head__title { font-size: 1.6rem; }
  .stats-band { grid-template-columns: 1fr 1fr; }
  .stat__number { font-size: 2rem; }
  .footer-cta h2 { font-size: 1.8rem; }
  .sticky-cta { padding: 12px; gap: var(--space-sm); }
  .sticky-cta .btn { padding: 10px 14px; }
  .feature-row__bignum { font-size: 7rem; }
  .feature-row__visual { max-width: 200px; }
  .feature-row__icon .dashicons { font-size: 48px; width: 48px; height: 48px; }
  .feature-row__content h3 { font-size: 1.7rem; }
}

/* Landscape phones / short viewports: don't let a tall hero push content
   below the fold unnecessarily. */
@media (max-height: 640px) and (max-width: 900px) {
  .hero { min-height: auto; padding-top: 100px; padding-bottom: 60px; }
}