/* 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 `

` 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