/* Homepage hero "Every Voice Matters". Linked only on the home page. Site palette: plum #351d42, mauve-ink #7b4768, rose #d9a3b5, ivory #f6ede8.
   Text pairs: plum/ivory 12.4:1, mauve-ink/ivory 5.9:1 (AA). Artwork is decorative. */
.hx{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--color-ivory,#f6ede8) 0%,#f3e6e2 100%);color:var(--color-plum,#351d42)}
.hx-grid{display:grid;gap:2rem;align-items:center;padding-block:2.5rem 3rem}
.hx-copy{position:relative;z-index:1;max-width:46rem}
.hx-eyebrow-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.hx-title{margin-top:1.5rem;font-size:clamp(2.6rem,9.2vw,4.4rem)}
.hx-lede{margin-top:1.75rem;max-width:40ch;color:var(--color-charcoal,#222027)}
.hx-cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem}
.hx-art-wrap{position:relative;width:100%;max-width:34rem;justify-self:center}
.hx-art{display:block;width:100%;height:auto;overflow:visible}
.hx-voice,.hx-smile{fill:none;stroke-linecap:round}
.hx .c1{stroke:#351d42;fill:#351d42}.hx .c2{stroke:#7b4768;fill:#7b4768}.hx .c3{stroke:#d9a3b5;fill:#d9a3b5}
.hx .hx-voice.c1,.hx .hx-voice.c2,.hx .hx-voice.c3{fill:none}
.hx-smile{stroke:#7b4768}
.hx-dot{opacity:.9}
@media (min-width:768px){.hx-grid{padding-block:3.5rem 4.5rem}.hx-title{font-size:clamp(3.4rem,7vw,5.6rem)}}
@media (min-width:1024px){
  .hx-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:3rem;padding-block:4.5rem 5rem;min-height:calc(100svh - var(--header-h,5rem) - 2rem)}
  .hx-copy{grid-column:1/8;grid-row:1;max-width:none}
  .hx-title{font-size:clamp(4.2rem,6.2vw,8rem)}
  .hx-art-wrap{grid-column:8/13;grid-row:1;max-width:none}
}
@media (min-width:1280px){.hx-art-wrap{margin-right:-1rem}}
@media (min-width:1600px){.hx-grid{max-width:1560px}}

/* Motion: a one-time draw-in (finishes in under 4 s; no looping, so WCAG 2.2.2 needs no pause control). The DRAWN state is the default,
   so reduced motion, or a browser that matches the query but does not run the animation, shows the complete artwork. The hidden start
   values live only in the keyframes; fill-mode "both" keeps each element hidden during its delay. */
@media (prefers-reduced-motion:no-preference){
  .hx-voice,.hx-smile{stroke-dasharray:1;animation:hx-draw 2.6s cubic-bezier(.65,0,.25,1) both;animation-delay:calc(.25s + var(--i,0)*.18s)}
  .hx-smile{animation-delay:1.9s;animation-duration:1.6s}
  .hx-dot{animation:hx-fade .8s ease both;animation-delay:calc(var(--i,0)*.18s)}
}
@keyframes hx-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hx-fade{from{opacity:0}to{opacity:.9}}