/* ==========================================================================
   KCR UI fixes — geo hero CTA + form headline.
   Mirrors what lives inside kcr-mega.css on staging. Kept as its own file here
   because production has no mega menu yet; when the mega menu is pushed from
   staging, these rules will exist in BOTH files — remove this one then.

   NOTE: `requestButton` is used as an ID TWICE on geo pages — the header
   "Schedule Service Now" button and the hero "Call Now" button. Duplicate IDs,
   so an #requestButton rule hits both and the header's own mobile CSS was
   overriding the hero button's horizontal padding. Hence the .kcr-hero-call
   class, which nothing else in the theme targets.
   ========================================================================== */

button.kcr-hero-call{
  display:inline-flex!important;align-items:center;justify-content:center;
  gap:10px;white-space:nowrap;width:auto!important;
  min-height:52px!important;padding:0 28px!important;line-height:1.2!important;
}
button.kcr-hero-call a{display:inline-flex;align-items:center;gap:10px;
  white-space:nowrap;color:#fff;padding:0!important;margin:0!important}
button.kcr-hero-call svg{width:1em;height:1em;flex:none}

@media (max-width:820px){
  /* Full-width CTA on phones. */
  button.kcr-hero-call{display:flex!important;width:100%!important;padding:0 20px!important}

  /* Form headline: drop the template's hard <br> so the sentence flows across
     two rows wherever it naturally breaks — that shortens the longest line and
     lets the type be much bigger than a forced break allows.
     .hubspot-new-ux is the geo SERVICE pages' equivalent of .ux-main-form. */
  .ux-main-form .title br,.hubspot-new-ux .title br{display:none}
  .ux-main-form .title,.hubspot-new-ux .title{font-size:min(10vw,40px)!important;
    line-height:1.15!important;display:block;text-wrap:balance}
}