/* Preserve client artwork. Colour surfaces also give monochrome logos a clear response. */
.home-logo-row > a,.brandcard,.clientmark{--logo-hover-surface:#dfeda8;--logo-hover-border:#94ad47;--logo-rest-filter:none;--logo-hover-filter:none}
.home-logo-row > a{border:1px solid transparent;border-radius:7px;transition:background-color .18s,border-color .18s}
.home-logo-row > a img[data-client-logo]{filter:grayscale(1);mix-blend-mode:normal;opacity:1;transition:filter .18s}
.brandgrid .brandcard .brandlogo{transition:background-color .18s,border-color .18s}
.brandgrid .brandcard .brandlogo img[data-client-logo],.clientmark img[data-client-logo]{filter:var(--logo-rest-filter);opacity:1;mix-blend-mode:normal}
/* White marks become dark on the quiet homepage, then regain their original artwork. */
:is(.home-logo-row > a,.brandcard,.clientmark):has([data-client-logo="tango"]){--logo-hover-surface:#bd4208;--logo-hover-border:#a13405}
:is(.home-logo-row > a,.brandcard,.clientmark):has([data-client-logo="petmunchies"],[data-client-logo="sanmiguel"],[data-client-logo="twycross"]){--logo-hover-surface:#174f3b;--logo-hover-border:#487e62}
.home-logo-row > a img:is([data-client-logo="petmunchies"],[data-client-logo="sanmiguel"],[data-client-logo="twycross"]){filter:brightness(0)}
/* Retain contrast even before hovering on the client and case-study pages. */
.brandgrid .brandcard .brandlogo:has([data-client-logo="petmunchies"],[data-client-logo="sanmiguel"],[data-client-logo="twycross"]),.clientmark:has([data-client-logo="petmunchies"],[data-client-logo="sanmiguel"],[data-client-logo="twycross"]){background:#20332b;border-color:#20332b;border-radius:8px}
:is(.home-logo-row > a,.brandcard,.clientmark):has([data-client-logo="volkswagen"],[data-client-logo="subaru"]){--logo-hover-surface:#c7e5f4;--logo-hover-border:#6fa1bc}
:is(.home-logo-row > a,.brandcard,.clientmark):has([data-client-logo="pandora"],[data-client-logo="radley"]){--logo-hover-surface:#f2d2d7;--logo-hover-border:#c88795}
:is(.home-logo-row > a,.brandcard,.clientmark):has([data-client-logo="f1"]){--logo-hover-surface:#f8cfc4;--logo-hover-border:#ce8171}
.home-logo-row > a:is(:hover,:focus-visible),.brandgrid .brandcard:is(:hover,:focus-visible) .brandlogo,.clientmark:hover{background:var(--logo-hover-surface);border-color:var(--logo-hover-border);transform:none}
.home-logo-row > a:is(:hover,:focus-visible) img[data-client-logo],.brandgrid .brandcard:is(:hover,:focus-visible) .brandlogo img[data-client-logo],.clientmark:hover img[data-client-logo]{filter:var(--logo-hover-filter);opacity:1;mix-blend-mode:normal}
.brandgrid .brandcard:is(:hover,:focus-visible) .client-name-mark{color:#28723e}
.home-logo-row > a:focus-visible,.brandgrid .brandcard:focus-visible{outline:2px solid #20332b;outline-offset:4px}
/* Touch users get the colour treatment without needing to discover hover. */
@media(hover:none){
 .home-logo-row > a,.brandgrid .brandcard .brandlogo,.clientmark{background:var(--logo-hover-surface);border-color:var(--logo-hover-border)}
 .home-logo-row > a img[data-client-logo],.brandgrid .brandcard .brandlogo img[data-client-logo],.clientmark img[data-client-logo]{filter:var(--logo-hover-filter);opacity:1;mix-blend-mode:normal}
 .brandgrid .brandcard .client-name-mark{color:#28723e}
}
@media(prefers-reduced-motion:reduce){.home-logo-row > a,.home-logo-row > a img[data-client-logo],.brandgrid .brandcard .brandlogo{transition:none}}