/* Office locations: a steady red center and two slow, outward-moving rings. */
.contacts__map img[src$="/img/map-marker.png"]{animation:none}
@supports selector(div:has(> img)) {
 .contacts__map div:has(> img[src$="/img/map-marker.png"]){
  background:radial-gradient(circle at center,#20282c 0 2px,#ff2424 2px 8px,transparent 8.5px);
 }
 .contacts__map div:has(> img[src$="/img/map-marker.png"])>img{opacity:0}
 .contacts__map div:has(> img[src$="/img/map-marker.png"])::before,
 .contacts__map div:has(> img[src$="/img/map-marker.png"])::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;box-sizing:border-box;
  border:2px solid #ff3030;border-radius:50%;pointer-events:none;
  animation:zorg-office-ring 6s linear infinite;
 }
 .contacts__map div:has(> img[src$="/img/map-marker.png"])::after{animation-delay:-3s}
}
@keyframes zorg-office-ring{
 0%{transform:translate(-50%,-50%) scale(1);opacity:1}
 65%{opacity:.8}
 100%{transform:translate(-50%,-50%) scale(3);opacity:0}
}
@media(prefers-reduced-motion:reduce){
 .contacts__map div:has(> img[src$="/img/map-marker.png"])::before,
 .contacts__map div:has(> img[src$="/img/map-marker.png"])::after{animation:none;transform:translate(-50%,-50%) scale(2);opacity:.65}
}