.elementor-8371 .elementor-element.elementor-element-363b5eaf{--display:flex;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:1024px){.elementor-8371 .elementor-element.elementor-element-363b5eaf{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:575px){.elementor-8371 .elementor-element.elementor-element-363b5eaf{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS *//* --- hero spacing on phones -------------------------------------------
   The real problem was not line spacing. The headline was still rendering at
   its DESKTOP 56px on a 360px screen, and the animated word ("Perfect") was
   running at 29px/40px while the rest of the line was 56px/62.7px - so the two
   halves of the headline never shared a baseline and the block was far taller
   than it needed to be. Sizing both together fixes the mismatch and the height.

   The other space was structural: the hero is a flex container with a 20px gap
   between every child, and there are six of them. */
@media (max-width: 767px) {
  .elementor-element-9798454 .elementor-headline,
  .elementor-element-9798454 .elementor-headline-dynamic-wrapper,
  .elementor-element-9798454 .elementor-headline-dynamic-text,
  .elementor-element-9798454 .elementor-headline-plain-text {
    font-size: 36px !important;
    line-height: 1.15 !important;
  }
  .elementor-element-45e28c0 { gap: 10px !important; }
  .elementor-element-d73a3fe { font-size: 15px !important; line-height: 1.5 !important; }
}/* End custom CSS */