/* Work page: "clients we're proud of", a heading and two rows of client logos sliding in opposite directions, under the works. */
.clients{padding:24px 0 96px}
.clients h2{font-size:var(--fs-section);font-weight:var(--fw-bold);color:var(--title);padding-inline:var(--gutter)}
.clients .marquee{margin-top:32px}
.marquee{margin-top:48px;display:grid;gap:14px;direction:ltr;overflow:hidden;
  -webkit-mask-image:var(--mask-fade-x);mask-image:var(--mask-fade-x)}
.mq-row{display:flex;width:max-content;animation:mq 90s linear infinite}
.mq-row.rev{animation-direction:reverse;animation-duration:44s}
.mq-row ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;padding-inline-end:14px}
.mq-row li{width:180px;height:96px;border:1px solid var(--line);border-radius:var(--r-12);display:grid;place-items:center;background:var(--mist);flex:none;
  padding:10px 14px;transition:background-color .45s var(--ease-out),border-color .45s var(--ease-out)}
.lg img{width:100%;height:100%;object-fit:contain;display:block;opacity:.72;
  transition:filter .45s var(--ease-out),opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.lg-dark img{filter:grayscale(1) invert(1)}
.lg-mid img,.lg-light img{filter:grayscale(1) brightness(1.4)}
.lg:active img{filter:none;opacity:1;transform:scale(1.08)}
.lg-dark:active,.lg-mid:active{background:#F5F3F0;border-color:#F5F3F0}
@keyframes mq{to{transform:translateX(-50%)}}
.ph-logo{width:100%;max-width:116px;height:40px;border-radius:var(--r-6);background:repeating-linear-gradient(135deg,var(--stripe-1) 0 6px,var(--stripe-2) 6px 12px);display:grid;place-items:center;font-size:var(--fs-12);color:var(--placeholder);
  filter:grayscale(1);opacity:.7;transition:opacity 200ms ease,filter 200ms ease}
@media (hover:hover) and (pointer:fine){.marquee:hover .mq-row{animation-play-state:paused}.lg:hover img{filter:none;opacity:1;transform:scale(1.08)}.lg-dark:hover,.lg-mid:hover{background:#F5F3F0;border-color:#F5F3F0}}
@media (prefers-reduced-motion:reduce){.mq-row{animation:none}.mq-row ul[aria-hidden]{display:none}.mq-row ul{flex-wrap:wrap}.mq-row{width:auto}.marquee{-webkit-mask-image:none;mask-image:none}}

@media (max-width:760px){.clients{padding-bottom:64px}.clients h2{padding-inline:var(--gutter-m)}.mq-row li{width:140px;height:76px;padding:8px 10px}}