/* Mobile-first landing hero (2026-09-25).
   On a phone the hero stacked three estimate CTAs (header, hero button, inline
   form) and the form's submit button sat 160-200px below the first screen.
   Scoped with :has() to pages whose hero carries the inline form, so pages
   without it keep their hero button. The header keeps Call + Free Estimate.
   Injected by scripts/inject-landing-mobile-css.js; re-run it after any edit
   (the ?v= is this file's content hash). */
@media (max-width:640px){
  body:has([data-sr-hero-form]) .breadcrumbs{padding:6px 16px!important;font-size:12.5px!important;line-height:1.3!important;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
  .hero:has([data-sr-hero-form]){min-height:0!important;padding:0!important}
  .hero:has([data-sr-hero-form]) .hero__content{padding:20px 16px 24px!important;min-height:0!important}
  .hero:has([data-sr-hero-form]) .hero__ctas{display:none!important}
  .hero:has([data-sr-hero-form]) .hero__bg{filter:brightness(.5)}
  .hero:has([data-sr-hero-form]) .hero__badge{margin:0 0 12px!important;padding:6px 12px!important;font-size:12.5px!important;line-height:1.35!important}
  .hero:has([data-sr-hero-form]) .hero__title{font-size:clamp(28px,8.2vw,34px)!important;line-height:1.08!important;margin:0 0 8px!important}
  .hero:has([data-sr-hero-form]) .hero__subtitle{font-size:15.5px!important;line-height:1.45!important;margin:0 0 16px!important}
  .hero:has([data-sr-hero-form]) .lp-hero-form{margin-top:0!important;padding:16px!important}
  .hero:has([data-sr-hero-form]) .lp-hero-form__lede{margin:0 0 10px!important;font-size:14.5px!important;line-height:1.3!important}
  .hero:has([data-sr-hero-form]) .lp-hero-form input,
  .hero:has([data-sr-hero-form]) .lp-hero-form select{font-size:16px!important;min-height:46px!important;margin-bottom:8px!important}
  .hero:has([data-sr-hero-form]) .lp-hero-form__submit{min-height:52px!important;width:100%!important;font-size:17px!important}
}