/* Client logos: drop-in for an existing grid. No layout rules.
   Markup per cell:
   <div class="logo logo--cbs-bahamas" role="img" aria-label="CBS Bahamas"><span class="logo__mono"></span><span class="logo__color"></span></div>
   Hovering whatever element directly wraps .logo (your grid cell) fades it to color.
   Optional on your grid: --logo-ink (tint), --logo-rest (resting opacity), --logo-scale (size of the whole set, default 1). */
.logo { position: relative; display: block; max-width: 100%;
  width: calc(var(--w) * var(--logo-scale, 1)); height: calc(var(--h) * var(--logo-scale, 1)); }
.logo__mono, .logo__color { position: absolute; inset: 0; transition: opacity .35s ease; }
.logo__mono { background: var(--logo-ink, #1f1f1f); opacity: var(--logo-rest, .6);
  -webkit-mask: var(--mono) center / contain no-repeat; mask: var(--mono) center / contain no-repeat; }
.logo__color { background: var(--color) center / contain no-repeat; opacity: 0; }
@media (hover: hover) {
  :hover > .logo > .logo__mono { opacity: 0; }
  :hover > .logo > .logo__color { opacity: 1; }
}
:focus-visible > .logo > .logo__mono, .logo:focus-visible > .logo__mono { opacity: 0; }
:focus-visible > .logo > .logo__color, .logo:focus-visible > .logo__color { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .logo__mono, .logo__color { transition: none; } }

.logo--cbs-bahamas { --w:131px; --h:59px; --mono:url(svg/cbs-bahamas.svg); --color:url(png-color/cbs-bahamas.png); }
.logo--builders-hardware { --w:135px; --h:65px; --mono:url(svg/builders-hardware.svg); --color:url(png-color/builders-hardware.png); }
.logo--third-dimension { --w:127px; --h:64px; --mono:url(svg/third-dimension.svg); --color:url(png-color/third-dimension.png); }
.logo--tropix-air { --w:138px; --h:52px; --mono:url(svg/tropix-air.svg); --color:url(png-color/tropix-air.png); }
.logo--tropix-oasis { --w:175px; --h:66px; --mono:url(svg/tropix-oasis.svg); --color:url(png-color/tropix-oasis.png); }
.logo--rh-curry { --w:192px; --h:77px; --mono:url(svg/rh-curry.svg); --color:url(png-color/rh-curry.png); }
.logo--acc { --w:139px; --h:52px; --mono:url(svg/acc.svg); --color:url(png-color/acc.png); }
.logo--funfoods { --w:154px; --h:70px; --mono:url(svg/funfoods.svg); --color:url(png-color/funfoods.png); }
.logo--windermere-yacht { --w:143px; --h:71px; --mono:url(svg/windermere-yacht.svg); --color:url(png-color/windermere-yacht.png); }
.logo--bnt { --w:62px; --h:93px; --mono:url(svg/bnt.svg); --color:url(png-color/bnt.png); }