/* The original four-piece mark and wordmark, using the earlier eight-second loop. */
.logo .brand-svg{display:block;width:100%;height:35px;overflow:visible;color:#15191d;--logo-wave:#637f8d;--logo-run:paused}
.header .logo .brand-svg{height:43px}
.brand-svg[data-motion="running"]{--logo-run:running}
.brand-piece{transform-box:fill-box;transform-origin:center;animation:logo-return 8s cubic-bezier(.45,0,.25,1) infinite;animation-play-state:var(--logo-run)}
.brand-piece-0{--mark-x:-18px;--mark-y:-16px}.brand-piece-1{--mark-x:18px;--mark-y:-7px}.brand-piece-2{--mark-x:-18px;--mark-y:7px}.brand-piece-3{--mark-x:7px;--mark-y:18px}
.brand-wave{transform:translateX(-250px);opacity:0;animation:logo-color-wave 8s cubic-bezier(.45,0,.25,1) infinite;animation-play-state:var(--logo-run)}
@keyframes logo-return{0%,48%,100%{transform:translate(0,0)}24%{transform:translate(var(--mark-x),var(--mark-y))}}
@keyframes logo-color-wave{0%{transform:translateX(-250px);opacity:0}8%{opacity:1}43%{transform:translateX(900px);opacity:1}44%,100%{transform:translateX(900px);opacity:0}}
.brand-svg[data-reduced="true"] .brand-piece{animation:none;transform:none}.brand-svg[data-reduced="true"] .brand-wave{animation:none;opacity:0}
@media(max-width:700px){.header .logo .brand-svg{height:31px}}
@media(prefers-reduced-motion:reduce){.brand-piece{animation:none;transform:none}.brand-wave{animation:none;opacity:0}}