/* ============================================
   Mobile compatibility — applies to all templates
   Loaded AFTER inline <style>, so wins the cascade
   ============================================ */

/* Universal overflow guards */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video { max-width: 100%; height: auto; }

/* === Tablet & below (≤900px) === */
@media (max-width: 900px) {
  .hero h1 { font-size: 48px !important; letter-spacing: -1.2px !important; }
  .section-title { font-size: 38px !important; }
  .container { padding: 0 24px !important; }
}

/* === Phone (≤640px) === */
@media (max-width: 640px) {
  .container { padding: 0 20px !important; }
  section { padding: 64px 0 !important; }
  .hero { padding: 56px 0 60px !important; }

  /* Hero stacks; type scales down */
  .hero-grid, .hero-content, .about-grid, .approach-grid,
  .service-grid, .local-grid, .depths-grid, .footer-grid,
  .identity-grid, .stats, .local-stats {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .footer-grid, .identity-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  .hero h1 { font-size: 38px !important; line-height: 1.05 !important; letter-spacing: -1px !important; }
  .hero p { font-size: 17px !important; }
  .section-title { font-size: 32px !important; line-height: 1.1 !important; }
  .section-sub { font-size: 16px !important; margin-bottom: 40px !important; }

  /* Section heading variants in different files */
  .about h2, .local h2, .depths h2 { font-size: 32px !important; line-height: 1.1 !important; }
  .cta h2 { font-size: 38px !important; line-height: 1.05 !important; }

  /* Hero CTAs stack full-width */
  .hero-cta { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .hero-cta .btn { width: 100% !important; text-align: center !important; }

  /* Quote/testimonial */
  .testimonial blockquote, .quote blockquote {
    font-size: 22px !important; line-height: 1.35 !important;
  }

  /* Trust bar wraps cleaner */
  .trust-grid { gap: 12px 20px !important; font-size: 11px !important; }

  /* Service cards full-width */
  .service-card { padding: 28px 24px !important; }

  /* Hero photo doesn't dominate viewport */
  .hero-photo { max-height: 460px !important; }

  /* Nav padding tighter */
  nav { padding: 14px 0 !important; }
  .logo { font-size: 16px !important; }

  /* Affirm bar wraps gracefully */
  .affirm-track { gap: 16px !important; font-size: 14px !important; }
  .affirm-dot { display: none !important; }

  /* Footer bottom stacks */
  .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
}

/* === Small phone (≤420px) === */
@media (max-width: 420px) {
  .container { padding: 0 16px !important; }
  .hero h1 { font-size: 32px !important; }
  .section-title { font-size: 28px !important; }
  .cta h2 { font-size: 32px !important; }
  .hero-photo { max-height: 380px !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .pronouns { display: none !important; }
}

/* ============================================
   B3 (Full Sponge) — needs extra scaling
   Bangers display font has huge sizes + text-shadows
   ============================================ */
@media (max-width: 640px) {
  /* B3 hero shadow stack overflows; reduce */
  .hero h1[class*=""], .hero h1 { text-shadow: 2px 2px 0 #FFE135, 4px 4px 0 #FF6B5B !important; }
  .cta h2 { text-shadow: 3px 3px 0 #FF6B5B, 5px 5px 0 #26B9C8 !important; }

  /* Stickers in B3 — bring inside viewport */
  .sticker { font-size: 14px !important; padding: 10px 14px !important; }
  .sticker.s1 { top: -12px !important; right: 0 !important; }
  .sticker.s2 { bottom: -8px !important; left: 0 !important; }

  /* B3 service cards have big offset before pseudo - keep but smaller */
  .service-card::before { width: 28px !important; height: 28px !important; top: -14px !important; }

  /* B3 nav logo with emoji wraps */
  nav .logo { font-size: 18px !important; }
  nav .logo .logo-pineapple { font-size: 22px !important; }

  /* Box shadow stacks reduced (Bangers buttons) */
  .btn-primary, .btn-secondary { box-shadow: 0 4px 0 #1A2E3A !important; }
}

/* ============================================
   Touch targets — buttons and links min 44px
   ============================================ */
@media (max-width: 640px) {
  .btn { min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
  nav a { padding: 8px 0 !important; }
}

/* ============================================
   Reduce motion respect
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}