/* Charlotte's Home Care design system. Synced from the approved design by chc_sync_design(). Do not hand-edit. */
/* ============================================================
   Charlotte's Home Care — homepage composition layer
   Loaded after style.css. Richer sections, infographics, motion.
   All motion is disabled under prefers-reduced-motion at the end.
   ============================================================ */

/* ---------- scroll reveal primitive ----------
   Two hard rules learned the hard way:
   1. Content is only hidden when JS is confirmed running (html.js), so a JS
      failure can never leave the page blank.
   2. The revealed state uses an ANIMATION with forwards fill, not a transition.
      A transition that never ticks (off-screen, throttled tab, reduced power)
      leaves the element stuck at opacity 0. An animation commits its end state.
------------------------------------------------------------------ */
@keyframes revealUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes revealLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes revealRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes revealScale{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

.js [data-reveal]:not(.in){opacity:0}
.js [data-reveal].in{animation:revealUp .8s var(--ease) forwards}
.js [data-reveal="left"].in{animation-name:revealLeft}
.js [data-reveal="right"].in{animation-name:revealRight}
.js [data-reveal="scale"].in{animation-name:revealScale}

.js [data-stagger]:not(.in) > *{opacity:0}
.js [data-stagger].in > *{animation:revealUp .7s var(--ease) forwards}
.js [data-stagger].in > *:nth-child(1){animation-delay:.04s}
.js [data-stagger].in > *:nth-child(2){animation-delay:.10s}
.js [data-stagger].in > *:nth-child(3){animation-delay:.16s}
.js [data-stagger].in > *:nth-child(4){animation-delay:.22s}
.js [data-stagger].in > *:nth-child(5){animation-delay:.28s}
.js [data-stagger].in > *:nth-child(6){animation-delay:.34s}

/* ---------- atmosphere ---------- */
.mesh{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.mesh i{position:absolute;display:block;border-radius:50%;filter:blur(60px);opacity:.5}
.mesh i:nth-child(1){width:44vw;height:44vw;right:-12vw;top:-14vw;background:radial-gradient(circle,rgba(232,184,110,.55),transparent 68%);animation:float1 22s ease-in-out infinite}
.mesh i:nth-child(2){width:32vw;height:32vw;left:-10vw;bottom:-12vw;background:radial-gradient(circle,rgba(173,19,27,.18),transparent 66%);animation:float2 27s ease-in-out infinite}
.mesh i:nth-child(3){width:22vw;height:22vw;right:26%;bottom:6%;background:radial-gradient(circle,rgba(232,184,110,.32),transparent 70%);animation:float1 19s ease-in-out infinite reverse}
@keyframes float1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3%,4%,0) scale(1.08)}}
@keyframes float2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4%,-3%,0) scale(1.1)}}

.grain{position:absolute;inset:0;pointer-events:none;opacity:.035;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- hero ---------- */
.hero{padding:var(--s6) 0 var(--s7);position:relative;overflow:hidden}
.hero__grid{position:relative;z-index:2}
.hero h1 span{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 span b{display:block;font-weight:inherit;animation:riseIn .95s var(--ease) both}
.hero h1 span:nth-child(1) b{animation-delay:.06s}
.hero h1 span:nth-child(2) b{animation-delay:.16s}
.hero h1 span:nth-child(3) b{animation-delay:.26s}
@keyframes riseIn{from{transform:translateY(105%)}to{transform:translateY(0)}}

.hero__crown{animation:fadeUp .7s var(--ease) both}
.hero__lead{animation:fadeUp .8s var(--ease) .34s both}
.hero .btn-row{animation:fadeUp .8s var(--ease) .44s both}
.hero__proof{animation:fadeUp .8s var(--ease) .54s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero__art{position:relative;animation:fadeUp 1s var(--ease) .3s both}
.hero__art .arch{aspect-ratio:4/5;transform:translateZ(0)}
.hero__art .arch img{transition:transform 1.4s var(--ease)}
.hero__art:hover .arch img{transform:scale(1.04)}
.hero__ring{position:absolute;inset:-4%;border:1px solid rgba(185,138,62,.4);border-radius:var(--arch) var(--arch) 40px 40px;pointer-events:none;animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.015);opacity:.9}}

/* floating fact chips around the hero image */
.chip{
  position:absolute;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:16px;padding:.8rem 1rem;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:.7rem;
  font-size:.86rem;line-height:1.3;z-index:3;
}
.chip b{display:block;font-family:var(--serif);font-size:1.02rem;color:var(--ink)}
.chip span{color:var(--mut);font-size:.78rem}
.chip__ico{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--red-wash);color:var(--red)}
.chip--a{left:-2.4rem;top:16%;animation:bob 6s ease-in-out infinite}
.chip--b{right:-1.6rem;bottom:22%;animation:bob 7.5s ease-in-out infinite reverse}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* Motion failsafe. If animations never tick (throttled tab, battery saver,
   some headless renderers) the hero would otherwise sit at its 0-opacity
   start frame forever. home.js sets .motion-done after 2s regardless. */
.motion-done .hero h1 span b,
.motion-done .hero__crown,
.motion-done .hero__lead,
.motion-done .hero .btn-row,
.motion-done .hero__proof,
.motion-done .hero__art,
.motion-done .chip{animation:none!important;opacity:1!important;transform:none!important}

/* ---------- trust marquee under hero ---------- */
.tstrip{border-block:1px solid var(--line);background:var(--white);overflow:hidden;padding:.9rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tstrip__track{display:flex;gap:3rem;width:max-content;animation:slide 34s linear infinite}
.tstrip__track span{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;
  font-size:.9rem;font-weight:600;color:var(--body);letter-spacing:.01em}
.tstrip__track svg{color:var(--gold-deep);flex:none}

/* ---------- lottie icon holder ---------- */
.lot{width:56px;height:56px;flex:none}
.lot--sm{width:44px;height:44px}
.lot--lg{width:74px;height:74px}
.lotwrap{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--red-wash),var(--gold-pale));
  border:1px solid rgba(185,138,62,.24);margin-bottom:1.2rem;transition:transform .4s var(--ease)}
.card:hover .lotwrap{transform:translateY(-3px) rotate(-3deg)}

/* ---------- services ---------- */
.svc__grid{counter-reset:svc}
.card{position:relative;isolation:isolate;overflow:hidden}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(160deg,rgba(232,184,110,.16),rgba(173,19,27,.05));
  transition:opacity .45s var(--ease);
}
.card:hover::before{opacity:1}
.card__n{position:absolute;top:1.5rem;right:1.6rem;font-family:var(--serif);
  font-size:2.4rem;line-height:1;color:var(--line);z-index:-1;transition:color .4s}
.card:hover .card__n{color:var(--gold-pale)}

/* ---------- comparison infographic ---------- */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:1.4rem;align-items:stretch;margin-top:var(--s4)}
.vs__col{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.7rem}
.vs__col--ours{border-color:rgba(173,19,27,.35);box-shadow:0 20px 44px -30px rgba(173,19,27,.45);position:relative}
.vs__col--ours::after{content:"Charlotte's";position:absolute;top:-.72rem;left:1.5rem;background:var(--red);color:#fff;
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.24rem .7rem;border-radius:999px}
.vs__col h3{font-size:1.06rem;margin-bottom:1rem}
.vs__row{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem 0;border-top:1px solid var(--line-soft);font-size:.94rem;line-height:1.55}
.vs__row:first-of-type{border-top:none}
.vs__row svg{flex:none;margin-top:.25rem}
.vs__col--ours .vs__row svg{color:var(--red)}
.vs__col--them{background:transparent;border-style:dashed}
.vs__col--them .vs__row{color:var(--mut)}
.vs__col--them .vs__row svg{color:var(--mut)}
.vs__mid{display:grid;place-items:center;align-self:center;width:46px;height:46px;border-radius:50%;
  background:var(--ink);color:var(--gold);font-family:var(--serif);font-size:.82rem;letter-spacing:.06em}

/* ---------- process timeline with drawing line ---------- */
.tl{position:relative;margin-top:var(--s5)}
.tl__line{position:absolute;left:0;right:0;top:22px;height:2px;background:var(--line);overflow:hidden}
.tl__line i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--gold));transition:width 1.6s var(--ease)}
.tl.in .tl__line i{width:100%}
.tl__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;position:relative}
.tl__step{padding-top:3.6rem;position:relative}
.tl__dot{position:absolute;top:12px;left:0;width:22px;height:22px;border-radius:50%;background:var(--shell);
  border:2px solid var(--line);display:grid;place-items:center;transition:border-color .4s,background .4s,transform .4s}
.tl__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .4s}
.tl.in .tl__step:nth-child(1) .tl__dot{border-color:var(--red);transition-delay:.15s}
.tl.in .tl__step:nth-child(2) .tl__dot{border-color:var(--red);transition-delay:.5s}
.tl.in .tl__step:nth-child(3) .tl__dot{border-color:var(--red);transition-delay:.85s}
.tl.in .tl__step:nth-child(4) .tl__dot{border-color:var(--red);transition-delay:1.2s}
.tl.in .tl__step:nth-child(1) .tl__dot::after{background:var(--red);transition-delay:.15s}
.tl.in .tl__step:nth-child(2) .tl__dot::after{background:var(--red);transition-delay:.5s}
.tl.in .tl__step:nth-child(3) .tl__dot::after{background:var(--red);transition-delay:.85s}
.tl.in .tl__step:nth-child(4) .tl__dot::after{background:var(--red);transition-delay:1.2s}
.tl__num{font-family:var(--serif);font-size:.8rem;letter-spacing:.14em;color:var(--gold-deep);display:block;margin-bottom:.35rem}
.tl__step h3{font-size:1.1rem;margin-bottom:.4rem}
.tl__step p{font-size:.93rem;line-height:1.62}

/* ---------- scenario cards ---------- */
.scen__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:var(--s4)}
.scard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;
  display:flex;gap:1rem;align-items:flex-start;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.scard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.scard__ico{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--gold-pale);color:var(--gold-deep)}
.scard p{font-size:.95rem;line-height:1.6;margin:0}
.scard b{display:block;font-family:var(--serif);font-size:1.04rem;color:var(--ink);margin-bottom:.25rem;font-weight:400}

/* ---------- cost infographic ---------- */
.costs{display:grid;gap:1rem;margin-top:1.6rem}
.costbar{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.3rem}
.costbar__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.6rem}
.costbar__top b{font-family:var(--serif);font-size:1.04rem;color:var(--ink);font-weight:400}
.costbar__top span{font-size:.84rem;color:var(--mut);text-align:right}
.costbar__meter{height:6px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.costbar__meter i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep) 45%,var(--red));
  transition:width 1.25s cubic-bezier(.22,.85,.26,1)}
.costs.in .costbar:nth-child(1) .costbar__meter i{width:92%;transition-delay:.12s}
.costs.in .costbar:nth-child(2) .costbar__meter i{width:74%;transition-delay:.30s}
.costs.in .costbar:nth-child(3) .costbar__meter i{width:58%;transition-delay:.48s}
.costs.in .costbar:nth-child(4) .costbar__meter i{width:41%;transition-delay:.66s}
.costbar__cap{font-size:.78rem;color:var(--mut);margin-top:.5rem}

.costs .costbar{opacity:1;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.js .costs:not(.in) .costbar{transform:translateY(10px)}
.costs.in .costbar{transform:none}
.costs.in .costbar:nth-child(1){transition-delay:.02s}
.costs.in .costbar:nth-child(2){transition-delay:.20s}
.costs.in .costbar:nth-child(3){transition-delay:.38s}
.costs.in .costbar:nth-child(4){transition-delay:.56s}

/* the timeline's own line and dots already stagger; give the CTA under it a
   centred position to match the centred heading above */
.tl ~ .btn-row{justify-content:center}

/* ---------- service area map ---------- */
.area__map{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--linen);aspect-ratio:4/3}
.area__map img{width:100%;height:100%;object-fit:cover}
.area__pins{position:absolute;inset:0}
.pin{position:absolute;transform:translate(-50%,-50%)}
.pin i{display:block;width:13px;height:13px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(173,19,27,.5);animation:ping 3s ease-out infinite}
.pin:nth-child(2) i{animation-delay:.5s}.pin:nth-child(3) i{animation-delay:1s}
.pin:nth-child(4) i{animation-delay:1.5s}.pin:nth-child(5) i{animation-delay:2s}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(173,19,27,.5)}70%{box-shadow:0 0 0 16px rgba(173,19,27,0)}100%{box-shadow:0 0 0 0 rgba(173,19,27,0)}}
.pin b{position:absolute;left:16px;top:-6px;white-space:nowrap;font-size:.74rem;font-weight:600;
  background:rgba(255,255,255,.95);border-radius:999px;padding:.16rem .55rem;box-shadow:var(--shadow-sm);color:var(--ink)}

.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem}
.chips a{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .95rem;border-radius:999px;
  border:1px solid var(--line);background:var(--white);font-size:.9rem;transition:.28s var(--ease)}
.chips a:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px);box-shadow:var(--shadow-sm)}

/* ---------- trust rows ---------- */
.trust__rows .trow{padding:1.1rem 0;border-top:1px solid rgba(255,255,255,.1)}
.trust__rows .trow:first-child{border-top:none}
.trow__ico{transition:transform .4s var(--ease)}
.trow:hover .trow__ico{transform:scale(1.08) rotate(-4deg)}

/* ---------- closing cta ---------- */
.cta::after{content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 4a26 26 0 1 1 0 52' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E")}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .vs{grid-template-columns:1fr}
  .vs__mid{justify-self:center;margin:.2rem 0}
  .tl__grid{grid-template-columns:repeat(2,1fr);gap:2.2rem 1.6rem}
  .tl__line{display:none}
  .scen__cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .chip--a{left:.6rem;top:auto;bottom:6.5rem}
  .chip--b{right:.6rem;bottom:1rem}
}
@media (max-width:640px){
  .tl__grid,.scen__cards{grid-template-columns:1fr}
  .chip{position:static;margin-top:.8rem;animation:none}
  .hero__art{margin-bottom:1rem}
}

/* ---------- motion preference: everything stops ---------- */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-stagger] > *{opacity:1!important;transform:none!important;animation:none!important}
  .mesh i,.chip,.hero__ring,.pin i,.tstrip__track,.marquee__track{animation:none!important}
  .hero h1 span b,.hero__crown,.hero__lead,.hero .btn-row,.hero__proof,.hero__art{animation:none!important;opacity:1!important;transform:none!important}
  .tl__line i{width:100%!important;transition:none!important}
  .costs .costbar__meter i{transition:none!important}
}

/* footer stock-photography disclaimer (homepage does not load pages.css) */
.ft__disc{margin-top:1.2rem;font-size:.78rem;color:#7A6E68}

/* ============================================================
   "Where we work" — service-area map. Namespaced under .chc-sa
   so the whole block ports into Elementor as one unit.
   Honesty: no coverage ring, no spokes, no mileage to any town,
   no HQ marker, no repeating pulse. Ten equal places.
   ============================================================ */
.chc-sa__grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(2rem,4.5vw,4rem);align-items:center}
.chc-sa__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.chc-sa__list{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.2rem .8rem}
.chc-sa__row{
  width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:.05rem;
  background:none;border:0;border-left:2px solid transparent;border-radius:0 8px 8px 0;
  padding:.5rem .7rem;text-align:left;cursor:pointer;min-height:44px;justify-content:center;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.chc-sa__rowname{font-family:var(--serif);font-size:1.02rem;color:var(--ink);line-height:1.2}
.chc-sa__rowco{font-size:.74rem;color:var(--mut);letter-spacing:.04em}
.chc-sa__row:hover,.chc-sa__row.is-active{background:var(--red-wash);border-left-color:var(--red)}
.chc-sa__row:hover .chc-sa__rowname,.chc-sa__row.is-active .chc-sa__rowname{color:var(--red)}
.chc-sa__row:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:8px}

.chc-sa__note{margin-top:1.3rem;font-size:.92rem;color:var(--body);border-left:2px solid var(--gold);padding-left:.9rem}

.chc-sa__fig{margin:0}
.chc-sa__svg{width:100%;height:auto;display:block;overflow:visible}
.chc-sa__plate{fill:var(--shell)}
.chc-sa__grat line{stroke:var(--gold);stroke-width:.8;opacity:.28}
.chc-sa__river{stroke:var(--mut);stroke-width:3.2;fill:none;stroke-linecap:round;opacity:.55}
.chc-sa__arch{fill:none;stroke:var(--gold)}
.chc-sa__arch--out{stroke-width:2.2}
.chc-sa__arch--in{stroke-width:1;opacity:.55}
.chc-sa__bar,.chc-sa__tick{stroke:var(--body);stroke-width:2}
.chc-sa__barlab{fill:var(--body);font-family:var(--sans);font-size:18px;letter-spacing:.06em}
.chc-sa__riverlab{fill:var(--body);font-family:var(--sans);font-style:italic;font-size:18px;opacity:.75}

.chc-sa__pin{cursor:pointer}
.chc-sa__halo{fill:none;stroke:var(--gold);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.chc-sa__ring{fill:var(--white);stroke:var(--body);stroke-width:2;transition:stroke .28s var(--ease)}
.chc-sa__dot{fill:var(--body);transition:fill .28s var(--ease)}
.chc-sa__lab{fill:var(--ink);font-family:var(--sans);font-size:20px;font-weight:600;transition:fill .28s var(--ease)}
.chc-sa__pin.is-anchor .chc-sa__ring{stroke:var(--red)}
.chc-sa__pin.is-anchor .chc-sa__dot{fill:var(--red)}
.chc-sa__pin.is-anchor .chc-sa__lab{font-family:var(--serif);font-size:24px;font-weight:400;fill:var(--red-ink)}
.chc-sa__pin.is-anchor .chc-sa__halo{opacity:.5;transform:scale(1)}
.chc-sa__pin:hover .chc-sa__ring,.chc-sa__pin.is-active .chc-sa__ring{stroke:var(--red)}
.chc-sa__pin:hover .chc-sa__dot,.chc-sa__pin.is-active .chc-sa__dot{fill:var(--red)}
.chc-sa__pin:hover .chc-sa__lab,.chc-sa__pin.is-active .chc-sa__lab{fill:var(--red)}
.chc-sa__pin:hover .chc-sa__halo,.chc-sa__pin.is-active .chc-sa__halo{opacity:1;transform:scale(1)}

.chc-sa__cap{margin-top:1rem;font-size:.86rem;color:var(--mut);min-height:2.4em;line-height:1.5}
.chc-sa__cap b{font-family:var(--serif);font-size:1.02rem;color:var(--ink);font-weight:400;display:block}

/* one-shot reveal, then completely still. No looping sweep. */
.js .chc-sa.in .chc-sa__arch{stroke-dasharray:1;stroke-dashoffset:1;animation:drawArch 1.1s var(--ease) forwards}
.js .chc-sa.in .chc-sa__arch--in{animation-delay:.12s}
.js .chc-sa.in .chc-sa__river{stroke-dasharray:1;stroke-dashoffset:1;animation:drawArch 1.3s var(--ease) .35s forwards}
.js .chc-sa.in .chc-sa__grat{opacity:0;animation:gratIn .8s var(--ease) .3s forwards}
.js .chc-sa.in .chc-sa__pin{opacity:0;animation:pinIn .55s var(--ease) forwards;animation-delay:calc(.75s + var(--i) * 55ms)}
.js .chc-sa.in .chc-sa__anno{opacity:0;animation:gratIn .7s var(--ease) 1.5s forwards}
@keyframes drawArch{to{stroke-dashoffset:0}}
@keyframes gratIn{to{opacity:1}}
@keyframes pinIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

@media (max-width:1080px){
  .chc-sa__grid{grid-template-columns:1fr}
  .chc-sa__col--map{order:-1}
}
@media (max-width:520px){
  .chc-sa__list{grid-template-columns:1fr}
  .chc-sa__lab{font-size:26px}
  .chc-sa__pin.is-anchor .chc-sa__lab{font-size:30px}
  .chc-sa__barlab,.chc-sa__riverlab{font-size:22px}
}

@media (prefers-reduced-motion:reduce){
  .js .chc-sa.in .chc-sa__arch,.js .chc-sa.in .chc-sa__river,
  .js .chc-sa.in .chc-sa__grat,.js .chc-sa.in .chc-sa__pin,
  .js .chc-sa.in .chc-sa__anno{animation:none!important;opacity:1!important;stroke-dashoffset:0!important;transform:none!important}
  .chc-sa__halo,.chc-sa__ring,.chc-sa__dot,.chc-sa__lab,.chc-sa__row{transition:none!important}
}

/* the four differentiators read as horizontal rows, deliberately a different
   shape from the six service cards that sit directly above them */
.whyrow{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.whyrow__item{display:flex;gap:1.1rem;align-items:flex-start;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.5rem;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.whyrow__item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.whyrow__item h3{font-size:1.1rem;margin-bottom:.35rem}
.whyrow__item p{font-size:.94rem;line-height:1.6;margin:0}
.lotwrap--sm{width:56px;height:56px;border-radius:16px;margin-bottom:0;flex:none}
.lotwrap--sm .lot{width:40px;height:40px}
@media (max-width:820px){.whyrow{grid-template-columns:1fr}}

/* ============================================================
   SITE-WIDE ENTRANCE ANIMATION
   Every heading, paragraph, image, icon and button rises in once
   when its section enters the viewport, one after another.
   Only applied when JS is confirmed running (html.js), and the
   failsafe in home.js reveals everything after 2s regardless, so
   content can never be stranded invisible.
   ============================================================ */
.js [data-anim]:not(.in){opacity:0}
.js [data-anim]{will-change:opacity,transform}
.js [data-anim].in{
  animation:animRise .72s cubic-bezier(.22,.85,.26,1) forwards;
  animation-delay:calc(var(--d,0) * 65ms);
}
.js [data-anim="fade"].in{animation-name:animFade}
.js [data-anim="zoom"].in{animation-name:animZoom}
.js [data-anim="left"].in{animation-name:animLeft}
@keyframes animRise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes animFade{from{opacity:0}to{opacity:1}}
@keyframes animZoom{from{opacity:0;transform:scale(.955)}to{opacity:1;transform:none}}
@keyframes animLeft{from{opacity:0;transform:translate3d(-20px,0,0)}to{opacity:1;transform:none}}
.js [data-anim].in{will-change:auto}
/* Once an element has animated (or the guard timer fired), drop the animation so
   it rests at its natural style. Without this, an environment that starts but
   never advances animations leaves the element frozen on frame 0 = invisible. */
.js [data-anim].anim-done{animation:none!important;opacity:1!important;transform:none!important}

@media (prefers-reduced-motion:reduce){
  .js [data-anim],.js [data-anim].in{opacity:1!important;transform:none!important;animation:none!important}
  .mega{animation:none!important}
}

/* touch targets: the chips sat 1px under the 44px bar, and the topbar link was
   capped by the bar height. Let the bar grow on touch instead. */
@media (pointer:coarse){
  .chips a{min-height:44px}
  .topbar{height:auto;min-height:var(--topbar-h);padding-block:.25rem}
  .topbar__tel,.topbar__mail{min-height:44px}
}

/* ============================================================
   ICON SET — one 24x24 grid, one stroke weight, one optical size.
   Replaces the mixed Lottie library, which was both semantically
   wrong for these services and optically uneven.
   ============================================================ */
.ico{width:34px;height:34px;display:block;color:var(--red);overflow:visible}
.lotwrap{display:grid;place-items:center}
.lotwrap--sm .ico{width:26px;height:26px}
.mega__ico .ico{width:24px;height:24px}
.card:hover .ico,.mega__item:hover .ico,.whyrow__item:hover .ico{color:var(--red-deep)}

/* No stroke draw-on. The icons already rise in with their parent card, and a
   second animation layer on the strokes meant that any environment which does
   not advance animations rendered them as invisible outlines. One less moving
   part is worth more here than the flourish. pathLength is kept on the shapes
   so a draw-on can be reinstated later without redrawing the set. */
}

/* Same guard for the map's drawn arch and river: if animations never advance,
   motion-done (set 2s after load) leaves them fully drawn rather than invisible. */
.motion-done .chc-sa__arch,
.motion-done .chc-sa__river{animation:none!important;stroke-dashoffset:0!important}