/* =============================================================
   MOBILE TIGHTEN — reduce blank space & scale elements down
   so more content fits per screen on phones. Loaded LAST so it
   wins the cascade over style.css / header-patch.css.
   ============================================================= */

/* ── Critical fix: WhatsApp header button was leaking off-screen
      because header-patch.css redeclares it with no mobile hide ── */
@media (max-width: 900px) {
  .header-wa-btn { display: none !important; }
}

@media (max-width: 768px) {

  /* ---------- Hero ---------- */
  .hero-eyebrow   { padding: 6px 14px !important; margin-bottom: 16px !important; font-size: 0.68rem !important; }
  .hero-title     { font-size: 1.9rem !important; line-height: 1.18 !important; margin-bottom: 14px !important; }
  .hero-desc      { font-size: 0.95rem !important; line-height: 1.6 !important; margin-bottom: 22px !important; }
  .hero-actions   { gap: 10px !important; margin-bottom: 26px !important; }
  .hero-inner     { padding-top: 74px !important; padding-bottom: 36px !important; gap: 26px !important; }
  #hero           { padding-top: 56px !important; background-position: 74% top !important; background-attachment: scroll !important; }
  .hero-wa-strip  { margin-bottom: 16px !important; padding: 12px 14px !important; }
  .hero-cards     { gap: 12px !important; }
  .hero-card      { padding: 16px !important; }

  /* ---------- Generic section rhythm ---------- */
  .badge          { padding: 5px 13px !important; margin-bottom: 12px !important; font-size: 0.66rem !important; }
  .section-title  { font-size: 1.55rem !important; margin-bottom: 10px !important; }
  .section-subtitle { font-size: 0.9rem !important; margin: 0 auto 28px !important; line-height: 1.65 !important; }
  .gold-line      { margin: 12px auto 0 !important; width: 44px !important; }
  .container      { padding: 0 16px !important; }

  /* Collapse the large inline section paddings used across every
     page (e.g. style="padding:100px 0;...") down to a tight rhythm. */
  section[style*="padding:100px 0"]     { padding: 46px 0 !important; }
  section[style*="padding:110px 0"]     { padding: 48px 0 !important; }
  section[style*="padding:90px 0"]      { padding: 42px 0 !important; }
  section[style*="padding:80px 0"]      { padding: 40px 0 !important; }
  section[style*="padding:75px 0 110px"]{ padding: 38px 0 48px !important; }
  section[style*="padding:70px 0 100px"]{ padding: 36px 0 46px !important; }
  section[style*="padding:60px 0 80px"] { padding: 32px 0 42px !important; }
  section[style*="padding:60px 0"]      { padding: 32px 0 !important; }
  section[style*="padding:50px 0 100px"]{ padding: 28px 0 46px !important; }
  section[style*="padding:40px 0"]      { padding: 24px 0 !important; }
  section[style*="padding:30px 0"]      { padding: 20px 0 !important; }
  section[style*="padding:28px 0 80px"] { padding: 18px 0 40px !important; }
  section[style*="padding:28px 0"]      { padding: 18px 0 !important; }
  section[style*="padding:0 0 100px"]   { padding: 0 0 46px !important; }
  div[style*="padding:100px 0"]         { padding: 46px 0 !important; }

  /* Class/ID-based section paddings defined in style.css (not inline) */
  #services, #why-us, #process, #testimonials,
  #team, #cta-section, #contact          { padding: 46px 0 !important; }
  #stats-bar                              { padding: 26px 0 !important; }

  /* ---------- Cards ---------- */
  .testi-card     { padding: 26px 22px !important; }
  .testi-text     { font-size: 0.88rem !important; margin-bottom: 18px !important; }
  .faq-q          { padding: 15px 18px !important; font-size: 0.9rem !important; }
  .faq-item       { margin-bottom: 10px !important; }
  .flip-card      { height: 118px !important; }

  /* ---------- Buttons ---------- */
  .btn            { padding: 12px 24px !important; font-size: 0.85rem !important; }
  .btn-lg         { padding: 13px 28px !important; }
  .cta-actions    { gap: 10px !important; }

  /* ---------- Footer / misc breathing room ---------- */
  .footer-main    { gap: 26px !important; padding-top: 40px !important; padding-bottom: 24px !important; }
  #cta-section .cta-inner { padding: 34px 22px !important; }
}

@media (max-width: 480px) {
  .hero-title     { font-size: 1.6rem !important; }
  .hero-desc      { font-size: 0.9rem !important; }
  .section-title  { font-size: 1.35rem !important; }
  .container      { padding: 0 14px !important; }
  .btn            { padding: 11px 20px !important; font-size: 0.8rem !important; }

  /* Keep the stats bar (100+ Happy Clients, etc.) 2-per-row instead of
     stacking 1-per-row — style.css collapses it to 1fr below 480px. */
  .stats-bar-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-bar-item  { padding: 22px 10px !important; }
  .stat-bar-num   { font-size: 2rem !important; margin-bottom: 4px !important; }
  .stat-bar-num .suffix { font-size: 1.3rem !important; }
  .stat-bar-label { font-size: 0.68rem !important; letter-spacing: 0.5px !important; }
}