/* Homepage-only progressive motion. Static HTML/SVG remains the fallback. */
.echo-hero{--hero-art-gutter:max(48px,calc((100vw - var(--content))/2))}
.hero-ambient,.echo-hero>.echo-art{position:absolute;z-index:-1;width:660px;right:calc(var(--hero-art-gutter) - 120px);top:50%;pointer-events:none;transform:translateY(-50%) rotate(-12deg)}
.hero-ambient{height:660px;opacity:0}
.hero-ambient canvas{display:block;width:100%;height:100%}
.echo-hero.hero-webgl-ready>.echo-art{visibility:hidden}
.echo-hero.hero-webgl-ready .hero-ambient{opacity:.88}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:transparent;border:0;border-bottom:1px solid #b8b8b8;color:#5c5c5c;border-radius:0;padding:8px 0;font:500 12px 'Noto Sans',sans-serif;cursor:pointer;margin-top:16px}
.motion-toggle[hidden]{display:none}.motion-toggle:focus-visible{outline:3px solid #252525;outline-offset:5px}
body[data-page=index] #our-impact .pillar-card{isolation:isolate;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
body[data-page=index] #our-impact .pillar-card .pillar-fluid-accent{position:absolute;z-index:-1;pointer-events:none;width:220px;height:220px;right:-110px;bottom:-120px;opacity:0;transform:translate(24px,32px) rotate(-18deg);transition:opacity .35s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
body[data-page=index] #our-impact .pillar-card:is(:hover,:focus-visible) .pillar-fluid-accent{opacity:.48;transform:translate(0,0) rotate(0deg)}
body[data-page=index] #our-impact .pillar-card:is(:hover,:focus-visible){transform:translateY(-5px);box-shadow:0 12px 28px #20282312}
body[data-page=index] #our-impact .card-arrow{transition:transform .3s ease}
body[data-page=index] #our-impact .pillar-card:is(:hover,:focus-visible) .card-arrow{transform:translate(3px,-3px) rotate(8deg)}
@media(min-width:601px) and (max-width:1100px){.hero-ambient,.echo-hero>.echo-art{width:560px;right:-70px}.hero-ambient{height:560px}.echo-hero.hero-webgl-ready .hero-ambient{opacity:.65}}
@media(max-width:600px){.hero-ambient,.echo-hero>.echo-art{width:390px;right:-80px;top:auto;bottom:10px;transform:rotate(-10deg)}.hero-ambient{height:390px}.echo-hero.hero-webgl-ready .hero-ambient{opacity:.8}}
@media(prefers-reduced-motion:reduce){.hero-ambient{display:none!important}.echo-hero.hero-webgl-ready>.echo-art{visibility:visible}.echo-art{translate:none!important}body[data-page=index] #our-impact .pillar-card,body[data-page=index] #our-impact .pillar-fluid-accent,body[data-page=index] #our-impact .card-arrow{transition:none!important;transform:none!important}}
body.motion-paused .echo-art{translate:none!important}body.motion-paused #our-impact .pillar-card,body.motion-paused #our-impact .pillar-fluid-accent,body.motion-paused #our-impact .card-arrow{transition:none!important;transform:none!important}

/* Scroll response shared by the animated blob and its static fallback. */
.echo-hero>.echo-art,.echo-hero>.hero-ambient{translate:0 var(--hero-scroll-y,0px);rotate:var(--hero-scroll-turn,0deg)}
@media(prefers-reduced-motion:reduce){.echo-hero>.echo-art,.echo-hero>.hero-ambient{translate:none!important;rotate:none!important}}
body.motion-paused .echo-hero>.echo-art,body.motion-paused .echo-hero>.hero-ambient{translate:none!important;rotate:none!important}

/* Supplied pillar illustrations sit as quiet top-right card artwork. */
body[data-page=index] #our-impact .pillar-card>.pillar-supplement{position:absolute;z-index:0;pointer-events:none;width:50%;height:auto;max-height:58%;right:14px;top:22px;object-fit:contain;object-position:top right;opacity:.3;transform:none;transition:opacity .3s ease,transform .35s ease}
body[data-page=index] #our-impact .pillar-card:is(:hover,:focus-visible)>.pillar-supplement{opacity:.4;transform:translate(-2px,2px)}
body[data-page=index] #our-impact .pillar-card>.pillar-symbol,body[data-page=index] #our-impact .pillar-card>.card-number,body[data-page=index] #our-impact .pillar-card>h3{position:relative;z-index:1}
body[data-page=index] #our-impact .pillar-card>.card-arrow{position:absolute;z-index:1;right:20px;bottom:20px}
@media(max-width:600px){body[data-page=index] #our-impact .pillar-card>.pillar-supplement{width:48%;right:12px;top:18px;max-height:56%}}
@media(prefers-reduced-motion:reduce){body[data-page=index] #our-impact .pillar-card>.pillar-supplement{transition:none!important;transform:none!important}}
