/* Mobile type scale (5 Nov 2026, Ravi approved): section headings had a 36px+ floor set for desktop,
   so on phones they outsized the page H1. Headings are capped here; tiny form/label text is raised.
   The `body` prefix adds one element of specificity so these win over the inline template rules. */
@media (max-width:600px){
  body h2,
  body .stats-headline,
  body .seo-prob h2,
  body .about-story h2,
  body .contact-form-row h2,
  body .dcin .in-head h2,
  body .dccs .cs-ch h2,
  body .dccs .cs-qhead h2,
  body .dccs .cs-ind-head h2{font-size:clamp(24px,6.6vw,27px);line-height:1.14}
  body .cta-row h2,
  body .dcin .in-cta h2,
  body .dccs .cs-cta h2,
  body .dccs .cs-cta-form h2{font-size:clamp(26px,7.2vw,29px);line-height:1.12}
  /* Hero H1: ~30px at 390 so first lines like "Birmingham web design" fit; the desktop <br> is dropped so text flows. */
  body .hero h1,
  body .seo-hero h1,
  body .dcin .in-hero h1{font-size:clamp(26px,7.6vw,32px)}
  body .hero h1 br,
  body .seo-hero h1 br{display:none}
  body .dcin .in-lead{font-size:17px}
  body .dccs .cs-ch .cs-sub{font-size:19px}
  body .cf-field label .opt,
  body .fa-form-card .cf-field label .opt,
  body .fa-ms-lbl .opt{font-size:13px}
  body .fa-form-foot{font-size:13px;color:rgba(255,255,255,.6)}
  body .fa-logos-h{font-size:12.5px}
  body .outcome-strip .oc span{font-size:12.5px}
}