*{box-sizing:border-box}
body{margin:0;background:#F7F5F2;color:#202022;font-family:'Inter',-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.wk{max-width:1180px;margin:0 auto;padding:clamp(5rem,10vw,9rem) clamp(1.25rem,5vw,3rem) clamp(4rem,8vw,7rem)}
.wk-eyebrow{font-size:11px;font-weight:600;letter-spacing:2.6px;text-transform:uppercase;color: #8F6318;margin:0 0 14px}
.wk h1{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 48px}
.wk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
.wk-card{display:block;text-decoration:none;color:inherit;border:1px solid rgba(32,32,34,.12);padding:26px 24px 24px;transition:border-color .3s,transform .3s}
.wk-card:hover{border-color:#E8A849;transform:translateY(-3px)}
.wk-cat{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6A6A70}
.wk-card h2,
.wk-card h3{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:1.35rem;line-height:1.15;margin:10px 0 16px}
.wk-stats{display:flex;flex-wrap:wrap;gap:6px 20px}
.wk-stats b{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:1rem}
.wk-stats span{display:block;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#6A6A70;margin-top:4px}
@media(max-width:560px){.wk-grid{grid-template-columns:1fr;gap:18px}}

/* ══════════════════════════════════════════════════════════════
   CLIENT LOGO ON THE SELECTED WORK CARDS                  v12
   The card was a plain block. It becomes a two column grid so the
   three text rows keep column one and the logo takes column two,
   spanning all of them and optically centred against the stats.

   The logo files are the ones from the logo wall, which are pure
   white on transparent because that wall sits on ink. This page
   is cream, so they would be invisible as shipped.
   brightness(0) drops any source colour to a black silhouette and
   leaves alpha alone, which also makes the eight read as one set
   rather than seven different brand colours.
   ══════════════════════════════════════════════════════════════ */
.wk-card{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  column-gap: 20px;
  align-items: start;
}
.wk-card > .wk-cat,
.wk-card > h2,
.wk-card > h3,
.wk-card > .wk-stats{ grid-column: 1; }
.wk-logo{
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  width: auto;
  max-width: 96px;
  max-height: 46px;
  object-fit: contain;
  filter: brightness(0);
  opacity: .34;
  transition: opacity .3s;
}
.wk-card:hover .wk-logo{ opacity: .62; }

/* On a phone the card is a single column and a logo beside the stats
   squeezes the headline, so it moves under the stats and sits right. */
@media (max-width: 560px){
  .wk-card{ grid-template-columns: minmax(0,1fr); }
  .wk-logo{
    grid-column: 1;
    grid-row: auto;
    justify-self: end;
    margin-top: 16px;
    max-height: 34px;
  }
}

/* ══════════════════════════════════════════════════════════════
   GROUPED WORK GRID
   Eight cards today, sixteen when the pipeline lands. A flat wall
   loses the vertical signal exactly when there is finally enough
   work to show one. Each heading is a link into its market page,
   which also gives the case studies an inbound path from here.
   ══════════════════════════════════════════════════════════════ */
.wk-group { margin-bottom: 54px; }
.wk-group:last-of-type { margin-bottom: 0; }
.wk-group-h { margin: 0 0 20px; font-size: 11px; font-weight: 600;
              letter-spacing: .16em; text-transform: uppercase; }
.wk-group-h a {
  display: inline-flex; align-items: center; gap: 8px;
  color: #6A6A70; text-decoration: none;
  padding-bottom: 9px; border-bottom: 1px solid rgba(32,32,34,.14);
  transition: color .3s, border-color .3s;
}
.wk-group-h a:hover, .wk-group-h a:focus-visible { color: #8F6318; border-color: #8F6318; }
.wk-group-go { transition: transform .3s; }
.wk-group-h a:hover .wk-group-go { transform: translateX(4px); }
@media (max-width: 560px) { .wk-group { margin-bottom: 40px; } }