/* Charlotte's Home Care - WordPress additions. Generated by chc_sync_design(). Do not hand-edit.
   Elementor (free) cannot set data-* attributes on containers, so the design's
   data-reveal / data-stagger hooks also answer to the classes .rv .rv-left .rv-right
   .rv-scale and .stg, set in the container's Advanced > CSS Classes field. */
.js .rv:not(.in){opacity:0}
.js .rv.in{animation:revealUp .8s var(--ease) forwards}
.js .rv-left.in{animation-name:revealLeft}
.js .rv-right.in{animation-name:revealRight}
.js .rv-scale.in{animation-name:revealScale}
.js .stg:not(.in) > *{opacity:0}
.js .stg.in > *{animation:revealUp .7s var(--ease) forwards}
.js .stg.in > *:nth-child(1){animation-delay:.04s}
.js .stg.in > *:nth-child(2){animation-delay:.10s}
.js .stg.in > *:nth-child(3){animation-delay:.16s}
.js .stg.in > *:nth-child(4){animation-delay:.22s}
.js .stg.in > *:nth-child(5){animation-delay:.28s}
.js .stg.in > *:nth-child(6){animation-delay:.34s}
/* cost meters: the design hardcodes the four widths by position; the widget
   carries them as --w so the client can edit each figure. Same specificity as
   the design's rule, printed later, so it wins. */
.costs.in .costbar[style] .costbar__meter i{width:var(--w)}
/* Elementor gives every container and widget width:100%. Inside the design's
   space-between heading rows (.svc__head) that forced the right-hand item onto
   its own line; the design's children shrink to fit. */
.svc__head > .e-con,.svc__head > .elementor-widget{width:auto;max-width:100%}
/* In the design a paragraph's bottom margin collapses with the top margin of the
   element after it (chips, a button row, the trust rows). Flex items never
   collapse, so inside a container both margins would add up. A text widget
   marked chc-collapse drops its last paragraph's margin and lets the next
   element's top margin stand, which is the value the design's collapse produced. */
.elementor-widget.chc-collapse > :last-child{margin-bottom:0}
/* Elementor resets text-align on every container (initial = start), which breaks
   the design's inherited centring (.nf, .phero--center). Inherit instead; a
   container's own Text Align control still writes its variable on the element. */
.e-con{--text-align:inherit}
/* the design's handful of inline styles on layout blocks, as classes a container
   can carry (Elementor free has no per-element CSS) */
.sec.chc-pt0{padding-top:0}
.chc-max420{max-width:420px}.chc-max700{max-width:700px}.chc-max900{max-width:900px}
.chc-left{text-align:left}
/* the design's `<h2 style=\"margin-bottom:1rem\">` above a form; must outrank .rail__box h2 (0,2,1) */
.elementor-widget.chc-mb16 > .elementor-heading-title{margin-bottom:1rem}
/* FAQ answers on service pages: the design has bare text inside .acc__body, the
   editor stores paragraphs; .prose p would otherwise resize them */
.prose .acc__body p{font-size:inherit;line-height:inherit}
/* a grid item that overlaps its neighbour with a negative margin relies on width:auto
   (stretch); Elementor's width:100% made the card 4rem narrower and rewrapped its copy */
.e-con.lay-overlap__card{width:auto}
/* four service categories (client update, Sep 2026): the design's .svc__grid is three
   across; a cards widget marked svc--4 lays its four cards in one row on desktop */
.svc--4 .svc__grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){.svc--4 .svc__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.svc--4 .svc__grid{grid-template-columns:1fr}}
/* Elementor's `.elementor img{border-radius:0;box-shadow:none}` reset squared the logo and
   dropped its shadow; the design crops it to a circle in the header and the footer */
.elementor .brand__mark{border-radius:50%;box-shadow:var(--shadow-sm)}
.elementor .ft__brand img{border-radius:50%}
/* header bar white (client, 10 Sep 2026) so the logo's white ground blends; the design's
   translucency and blur are kept */
.hd{background:rgba(255,255,255,.92)}
/* form fields must never dictate layout: a <select>'s intrinsic width is its longest
   option, and grid items refuse to shrink below it. In the design that quietly widened
   the contact page's form column; inside Elementor containers (min-width:0) the same
   row spilled out of its card once a longer option was added. */
.form > *,.form__row > .field,.field{min-width:0}
.field input,.field select,.field textarea{min-width:0;width:100%}
/* the design's contact split renders near-even (569/579 at 1220) because the form column
   grows to the fields; keep that look deterministically, and let the design's own
   max-width:900px rule stack the columns as before */
@media (min-width:901px){.split.chc-split-even{grid-template-columns:1fr 1fr}}
/* decorative layers position against the section, not the zero-height widget box */
.elementor-widget-chc-atmos{position:static}
/* the design attaches the hero animations to elements that are widget wrappers here */
.hero .elementor-widget.hero__lead-w{animation:fadeUp .8s var(--ease) .34s both}
.hero .elementor-widget.hero__proof-w{animation:fadeUp .8s var(--ease) .54s both}
.motion-done .hero .elementor-widget.hero__lead-w,.motion-done .hero .elementor-widget.hero__proof-w{animation:none!important;opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .stg > *{opacity:1!important;transform:none!important;animation:none!important}
  .hero .elementor-widget.hero__lead-w,.hero .elementor-widget.hero__proof-w{animation:none!important;opacity:1!important;transform:none!important}
}