/* ---- client wall, card treatment ----
   Matches the "What We Do" .card-grid on the landing page: hairline
   dividers made with a 1px gap over a --line background, white cards,
   lift-and-tint on hover. Scoped to the three pages that carry the wall
   so a tweak here doesn't cache-bust every page on the site. */

.client-grid {
    background: var(--bg);
    border: 1px solid var(--line);
    gap: 0;
    padding: 0;
    /* Hairlines come from each cell's own shadow rather than a 1px gap over
       a --line background, so a part-filled last row leaves no grey blocks
       whatever the cell count or column count. */
}

.client-cell {
    /* Fixed logo band, then wordmark, then the affordance - so every logo
       in a row shares a baseline whatever the caption length. */
    display: grid;
    grid-template-rows: 76px auto 1fr;
    align-items: center;
    justify-items: center;
    gap: 8px;
    min-height: 0;
    background: var(--bg);
    box-shadow: 1px 1px 0 var(--line);
    padding: 26px 18px 22px;
    opacity: 1;
    filter: none;
    transition: background-color .2s ease, transform .2s ease;
}

.client-cell:hover {
    background: var(--bg-soft);
    transform: translateY(-3px);
    opacity: 1;
    filter: none;
}

.client-cell img {
    max-width: 76px;
    max-height: 76px;
    /* Most source marks are JPEGs on white; multiply drops the white box
       into the card instead of leaving a pale tile. */
    mix-blend-mode: multiply;
    filter: grayscale(1);
    opacity: .72;
    transition: filter .25s ease, opacity .25s ease;
}

.client-cell:hover img { filter: none; opacity: 1; }

.client-cell__word { align-self: start; color: var(--text-strong); }
.client-cell__word small { margin-top: 4px; color: var(--text-soft); }

.client-cell__more {
    align-self: end;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--accent);
    text-transform: none;
}

@media (max-width: 899px) {
    .client-cell { grid-template-rows: 64px auto 1fr; padding: 20px 14px 18px; }
    .client-cell img { max-width: 60px; max-height: 60px; }
}

/* Placeholder for a client with no logo file yet - holds the logo band open
   so the wordmark still lines up with its neighbours. */
.client-cell__mark { display: block; }