/* Approved company-logo flip: muted front, original-color back. */
.company-flip{display:block;position:relative;width:100%;height:102px;padding:0;border:0;border-radius:9px;background:transparent;perspective:500px;cursor:pointer}
.company-face{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .55s cubic-bezier(.22,1,.36,1);pointer-events:none}
.company-face .client-mark{width:100%;height:102px;transition:none}
.company-front{transform:perspective(500px) rotateY(0deg)}
.company-back{transform:perspective(500px) rotateY(180deg)}
.company-front .client-mark{opacity:.75}
.company-back .client-mark{filter:none;opacity:1}
.company-flip:is(:focus-visible,.is-flipped) .company-front{transform:perspective(500px) rotateY(-180deg)}
.company-flip:is(:focus-visible,.is-flipped) .company-back{transform:perspective(500px) rotateY(0deg)}
.company-flip:focus-visible{outline:2px solid var(--vermilion-700);outline-offset:7px}
@media(hover:hover){
 .company-flip:hover .company-front{transform:perspective(500px) rotateY(-180deg)}
 .company-flip:hover .company-back{transform:perspective(500px) rotateY(0deg)}
}
@media(max-width:760px){.company-flip,.company-face .client-mark{height:80px}}
@media(prefers-reduced-motion:reduce){
 .company-face{transition:none!important;transform:none!important}
 .company-back{visibility:hidden}
 .company-flip:is(:focus-visible,.is-flipped) .company-front{visibility:hidden}
 .company-flip:is(:focus-visible,.is-flipped) .company-back{visibility:visible}
}
@media(prefers-reduced-motion:reduce) and (hover:hover){
 .company-flip:hover .company-front{visibility:hidden}
 .company-flip:hover .company-back{visibility:visible}
}