/* The client logo and the client grid, one component for every page that shows
   them: the case studies hub and its case pages, and the landing pages
   (Liam, October 26, 2026: "add this section someowehre on our bottome of funel
   ladning apges"). A page sets the section around the grid; the grid and the
   marks live here only. */

/* a client logo, inked to cream through its own alpha */
.logo{display:block;height:26px;width:150px;background:var(--ink);
  -webkit-mask:var(--logo) left center/contain no-repeat;mask:var(--logo) left center/contain no-repeat}

/* ---- each client's mark file ---- */
.logo[data-logo="hedra"]{--logo:url(/case-studies/hedra/assets/hedra-wordmark.svg)}
.logo[data-logo="collabstr"]{--logo:url(/uploads/collabstr-wordmark.svg)}
.logo[data-logo="bustem"]{--logo:url(/uploads/bustem-wordmark.png)}
.logo[data-logo="washtech"]{--logo:url(/uploads/washtech-lockup.png)}
.logo[data-logo="butchers-hook"]{--logo:url(/uploads/butchers-hook-lockup.png)}
.logo[data-logo="tenmar"]{--logo:url(/uploads/tenmar-logo.png)}
.logo[data-logo="reyal"]{--logo:url(/uploads/reyal-logo.png)}
.logo[data-logo="aetherhaus"]{--logo:url(/uploads/aetherhaus-logo-sand.png)}
.logo[data-logo="legacy"]{--logo:url(/assets/logos/legacy.svg)}
.logo[data-logo="eight-station"]{--logo:url(/uploads/client-logos/eight-station.png)}
.logo[data-logo="044-bureau"]{--logo:url(/uploads/client-logos/044-bureau.png)}
.logo[data-logo="home-gym-builds"]{--logo:url(/uploads/client-logos/home-gym-builds.png)}
.logo[data-logo="maple-terroir"]{--logo:url(/uploads/client-logos/maple-terroir.png)}
.logo[data-logo="rocketclub-media"]{--logo:url(/uploads/client-logos/rocketclub.png)}
.logo[data-logo="solmano"]{--logo:url(/uploads/client-logos/solmano.svg)}
.logo[data-logo="intrepid-marine"]{--logo:url(/uploads/client-logos/intrepid-marine.svg)}

/* ---- clients: a ruled grid of their real marks, Cassette's
   (mobbin.com/sites/sections/666b53f3-7fad-499a-bb34-8e63621ff69d), in the
   site grid's hairlines. Each mark is sized to one ink area, --lh per client
   below, so a long wordmark and a short one weigh the same ---- */
.lg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.lg-c{position:relative;display:grid;place-items:center;height:clamp(104px,10vw,150px);border-bottom:1px solid var(--line);border-right:1px solid var(--line);transition:background .3s}
.lg-c:nth-child(4n){border-right:0}
.lg-c:nth-child(4n+2){--d:1}.lg-c:nth-child(4n+3){--d:2}.lg-c:nth-child(4n){--d:3}
.lg-c .logo{width:72%;height:calc(var(--lh,28px) * var(--lk,1));opacity:.62;-webkit-mask-position:center;mask-position:center;transition:opacity .4s var(--ease)}
.lg-c::after{content:"\2192";position:absolute;right:var(--s-3);bottom:var(--s-2);font-size:var(--t-7);color:var(--quiet);opacity:0;transform:translateX(-6px);transition:opacity .3s var(--ease),transform .4s var(--ease)}
.lg-c:hover{background:var(--wash-row)}
.lg-c:hover .logo,.lg-c:focus-visible .logo{opacity:1}
.lg-c:hover::after,.lg-c:focus-visible::after{opacity:1;transform:none}
/* one ink area each, about 3,600px at the full size: height from the file's
   own box over its inked part, measured from the alpha, then evened by eye:
   thin and outlined marks up a step, the heaviest down one */
.lg-c [data-logo="hedra"]{--lh:31px}
.lg-c [data-logo="collabstr"]{--lh:38px}
.lg-c [data-logo="bustem"]{--lh:26px}
.lg-c [data-logo="washtech"]{--lh:40px}
.lg-c [data-logo="aetherhaus"]{--lh:22px}
.lg-c [data-logo="butchers-hook"]{--lh:30px}
.lg-c [data-logo="tenmar"]{--lh:30px}
.lg-c [data-logo="reyal"]{--lh:27px}
.lg-c [data-logo="legacy"]{--lh:46px}
.lg-c [data-logo="eight-station"]{--lh:40px}
.lg-c [data-logo="044-bureau"]{--lh:23px}
.lg-c [data-logo="home-gym-builds"]{--lh:46px}
.lg-c [data-logo="rocketclub-media"]{--lh:22px}
.lg-c [data-logo="solmano"]{--lh:24px}
.lg-c [data-logo="intrepid-marine"]{--lh:34px}
/* a long wordmark stops at 180px wide, so it is not a line across the cell */
.lg-c [data-logo="maple-terroir"]{--lh:14px}
@media (max-width:900px){
  .lg{--lk:.86}
}
@media (max-width:560px){
  /* the clients two across, rising in pairs */
  .lg{grid-template-columns:repeat(2,minmax(0,1fr));--lk:.74}
  .lg-c:nth-child(4n){border-right:1px solid var(--line)}
  .lg-c:nth-child(2n){border-right:0}
  .lg-c:nth-child(2n+1){--d:0}.lg-c:nth-child(2n){--d:1}
}