#engagements{background:#fff;padding:80px 0 90px}
#engagements>.wrap{width:min(1450px,90%)}
#engagements .why-heading{max-width:none;margin:0 auto 66px;text-align:center}
#engagements h2{display:flex;justify-content:center;align-items:center;gap:clamp(16px,2.3vw,40px);font:700 clamp(28px,3.3vw,54px)/1.15 Arial,sans-serif;letter-spacing:-1.5px;margin:0 0 28px}
#engagements h2::before,#engagements h2::after{content:"";height:3px;width:clamp(30px,4.8vw,90px);background:#BF022A;flex-shrink:0}
#engagements h2 .why-brand{color:#BF022A}
#engagements .why-heading p{font:400 clamp(17px,1.5vw,24px)/1.6 Arial,sans-serif;color:#252b31;margin:0 auto;max-width:1250px}
#engagements .why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:35px;text-align:center}
#engagements .why-item{min-width:0;max-width:none;grid-column:auto;justify-self:stretch}
#engagements .why-icon{width:clamp(100px,8.5vw,140px);height:auto;aspect-ratio:1;border:5px solid #000;border-radius:50%;background:#fff;color:#BF022A;display:grid;place-items:center;margin:0 auto 20px}
#engagements .why-icon svg{width:81%;height:81%;display:block;overflow:visible}
#engagements .why-item h3{font:750 clamp(18px,1.8vw,29px)/1.2 Arial,sans-serif;text-transform:uppercase;letter-spacing:-.5px;margin:0;color:#000}
.why-flame,.why-hammer,.why-microbe,.why-droplet{transform-box:fill-box;transform-origin:center}
.why-flame{transform-origin:center bottom}.why-hammer{transform-origin:80% 20%}
/* Motion is attached to the icon itself, never the card or section. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .why-icon-fire:hover .why-flame{animation:why-flame .7s ease-in-out infinite}
  .why-icon-impact:hover .why-hammer{animation:why-hammer .8s ease-in-out infinite}
  .why-icon-impact:hover .why-sparks{animation:why-sparks .8s ease-in-out infinite}
  .why-icon-bacteria:hover .why-microbe{animation:why-microbe 1.1s ease-in-out infinite}
  .why-icon-water:hover .why-droplet{animation:why-water 1s ease-in-out infinite}
}
@keyframes why-flame{0%,100%{transform:scale(1) rotate(0)}35%{transform:scale(.96,1.06) rotate(-3deg)}70%{transform:scale(1.03,.97) rotate(3deg)}}
@keyframes why-hammer{0%,100%{transform:rotate(0)}35%{transform:rotate(-13deg)}55%{transform:rotate(7deg)}70%{transform:rotate(0)}}
@keyframes why-sparks{0%,35%,100%{opacity:1}55%{opacity:.25}}
@keyframes why-microbe{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.9) rotate(9deg)}}
@keyframes why-water{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-5px) scale(.97,1.03)}75%{transform:translateY(2px) scale(1.03,.97)}}
@media(max-width:1000px){#engagements .why-grid{gap:22px}#engagements h2{display:block;font-size:clamp(30px,4vw,42px);letter-spacing:-1px}#engagements h2::before,#engagements h2::after{display:none}.why-break{display:none}#engagements .why-item h3{font-size:19px}}
@media(max-width:900px){#engagements{padding:58px 0 65px}#engagements .why-heading{margin-bottom:40px}#engagements h2{font-size:32px;max-width:480px;margin:0 auto 22px}#engagements .why-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}#engagements .why-icon{width:100px;border-width:4px;margin-bottom:18px}#engagements .why-item h3{font-size:clamp(14px,3.8vw,18px)}}
@media(max-width:360px){#engagements .why-icon{width:90px}#engagements .why-item h3{font-size:15px}}