/* what-we-offer.html - page styles that followed the mobile layer in the original (generated). Loaded after responsive.css. */
/* additions to mobile-fix */
.mapstage{height:auto;padding:22px 24px 18px}
.mapinner{position:relative;margin:0 auto;width:100%;max-width:900px;aspect-ratio:945/332}
.mapinner svg.world{position:absolute;inset:0;width:100%;height:100%;opacity:.95}
.bub .cl{font-size:9px;white-space:nowrap}
.maplegend{bottom:18px}
@media(max-width:980px){.mapstage{height:auto;padding:16px 12px 40px}.impactbar .brandcell{grid-column:1/-1;border-right:none;border-bottom:1px solid rgba(255,255,255,.1);padding:18px 22px}.impactbar .icell:nth-child(odd){border-right:none}.impactbar .icell:nth-child(-n+3){border-bottom:1px solid rgba(255,255,255,.1)}.icell{padding:16px 22px}.bub{transform:translate(-50%,-50%) scale(.72)}.bub:hover{transform:translate(-50%,-50%) scale(.78)}}
@media(max-width:600px){.bub.sg{margin:7px 0 0 9px}.bub{transform:translate(-50%,-50%) scale(.52)}.bub:hover{transform:translate(-50%,-50%) scale(.56)}.bub .cl{display:none}.bub .cn{font-size:19px}.maplegend{left:16px;bottom:14px}}
@media(max-width:600px){.impactwrap .mapstage{display:none}.impactwrap .mapcities{grid-template-columns:1fr;border-top:none}.impactwrap .mc{border-right:none;border-top:1px solid rgba(255,255,255,.1);padding:18px 22px}.impactwrap .mc:first-child{border-top:none}.impactwrap .mc p{font-size:13px}.impactwrap .mapzip{max-width:280px}}

/* #ill-css */
  /* motion inside the illustrations (all CSS, stops for reduced motion) */
  @keyframes eebob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .ill .bob{animation:eebob 3.4s ease-in-out infinite}
  .ill .b2{animation-delay:-.9s}.ill .b3{animation-delay:-1.8s}.ill .b4{animation-delay:-2.6s}
  @keyframes eepin{0%,100%{transform:translateY(0)}45%{transform:translateY(-5px)}}
  .ill .pin{animation:eepin 2.4s ease-in-out infinite}
  .ill .pin.p2{animation-delay:-.6s}.ill .pin.p3{animation-delay:-1.2s}.ill .pin.p4{animation-delay:-1.8s}.ill .pin.p5{animation-delay:-.3s}.ill .pin.p6{animation-delay:-.9s}.ill .pin.p7{animation-delay:-1.5s}.ill .pin.p8{animation-delay:-2.1s}.ill .pin.p9{animation-delay:-.45s}
  @keyframes eehop{0%,62%,100%{transform:translateY(0) rotate(0)}72%{transform:translateY(-12px) rotate(-5deg)}84%{transform:translateY(0) rotate(2deg)}}
  .ill .hop{transform-box:fill-box;transform-origin:50% 100%;animation:eehop 3.6s ease-in-out infinite}
  .ill .hop.h2{animation-delay:-1.8s}
  @keyframes eeswing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
  .ill .swing{transform-box:fill-box;transform-origin:50% 0%;animation:eeswing 3s ease-in-out infinite}
  @keyframes eeding{0%,70%,100%{opacity:0;transform:scale(.7)}76%,92%{opacity:1;transform:scale(1)}}
  .ill .ding{transform-box:fill-box;transform-origin:0% 100%;animation:eeding 3.2s ease-out infinite}
  .ill .ding.d2{animation-delay:-1.1s}.ill .ding.d3{animation-delay:-2.2s}
  @keyframes eespin{to{transform:rotate(360deg)}}
  .ill .spin{transform-origin:160px 104px;animation:eespin 26s linear infinite}
  .ill .spin .tr{transform-box:fill-box;transform-origin:50% 50%;animation:eespin 26s linear infinite reverse}
  @keyframes eewave{0%,55%,100%{transform:rotate(0)}65%{transform:rotate(-14deg)}75%{transform:rotate(6deg)}85%{transform:rotate(-10deg)}}
  .ill .wave{transform-box:fill-box;transform-origin:0% 92%;animation:eewave 2.8s ease-in-out infinite}
  @keyframes eesway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
  .ill .sway{transform-box:fill-box;transform-origin:50% 0%;animation:eesway 3.6s ease-in-out infinite}
  .ill .sway.s2{animation-delay:-1.2s}.ill .sway.s3{animation-delay:-2.4s}
  @keyframes eeflick{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.15,.9) rotate(4deg)}}
  .ill .flick{transform-box:fill-box;transform-origin:50% 100%;animation:eeflick 1.1s ease-in-out infinite}
  @keyframes eeroll{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
  .ill .roll{animation:eeroll 4s ease-in-out infinite}
  @keyframes eepop{0%,60%,100%{transform:scale(1)}70%{transform:scale(1.12)}80%{transform:scale(.96)}}
  .ill .pop{transform-box:fill-box;transform-origin:50% 50%;animation:eepop 3.6s ease-in-out infinite}
  @keyframes eetwinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
  .ill .tw{transform-box:fill-box;transform-origin:50% 50%;animation:eetwinkle 2.2s ease-in-out infinite}
  .ill .tw.t2{animation-delay:-.7s}.ill .tw.t3{animation-delay:-1.4s}
  @keyframes eerise{0%{opacity:0;transform:translateY(10px)}30%,70%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-6px)}}
  .ill .rain{animation:eerise 4s ease-in-out infinite}
  @keyframes eedrive{0%{transform:translateX(-140px)}45%,60%{transform:translateX(0)}100%{transform:translateX(150px)}}
  .ill .drive{animation:eedrive 9s ease-in-out infinite}
  @keyframes eebusdrive{0%{transform:translateX(-200px)}100%{transform:translateX(200px)}}
  .ill .busdrive{animation:eebusdrive 12s linear infinite}
  @keyframes eegrow{to{stroke-dashoffset:0}}
  .ill .grow{stroke-dasharray:300;stroke-dashoffset:300;animation:eegrow 2.4s cubic-bezier(.22,.61,.36,1) forwards}
  @keyframes eenotif{0%,8%{opacity:0;transform:translateY(10px) scale(.92)}16%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-6px)}}
  .ill .notif{transform-box:fill-box;transform-origin:50% 50%;animation:eenotif 6s ease-in-out infinite}
  @keyframes eebell{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-14deg)}88%{transform:rotate(12deg)}92%{transform:rotate(-8deg)}96%{transform:rotate(5deg)}}
  .ill .bell{transform-box:fill-box;transform-origin:50% 0%;animation:eebell 4s ease-in-out infinite}
  @media(prefers-reduced-motion:reduce){.ill *{animation:none !important}}

  .ill .th{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
  .ill .th.on{opacity:1;transform:none}
  .ill .thdots circle{fill:#E6CBB4;transition:fill .3s ease}
  .ill .thdots circle.on{fill:#F04E23}
  /* 17 Sep 2026: six ways to give - illustrated (same set as employee engagement) instead of photos */
  .imgcard .art{aspect-ratio:16/10;overflow:hidden;position:relative}
  .imgcard .art svg{display:block;width:100%;height:100%}
  .imgcard .art.w1{background:#EAF1F4}.imgcard .art.w2{background:#FAEBDD}.imgcard .art.w3{background:#F5E9D8}.imgcard .art.w4{background:#F3EBDF}.imgcard .art.w5{background:#F5E9D8}.imgcard .art.w6{background:#FCE6D4}
