.logo-frame {
  width: 58px;
  height: 58px;
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
}
.logo-frame img { width: 54px; height: 54px; display: block; object-fit: contain; }
.compact .logo-frame { width: 46px; height: 46px; }
.compact .logo-frame img { width: 43px; height: 43px; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.work { background: #0c131a; padding: 110px max(28px, calc((100vw - var(--max)) / 2)); }
.work-heading { display: grid; grid-template-columns: 1.05fr .95fr; gap: 9vw; align-items: end; margin-bottom: 48px; }
.work-heading h2 { font: 700 clamp(3rem, 6vw, 5rem)/.94 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: -.02em; margin: .3em 0 0; }
.work-heading > p { color: var(--muted); font-size: 1.05rem; max-width: 520px; margin: 0; }
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 280px; gap: 12px; }
.work-grid figure { position: relative; margin: 0; overflow: hidden; background: var(--steel); }
.work-grid figure.wide { grid-column: span 2; }
.work-grid figure.tall { grid-row: span 2; }
.work-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease, filter .45s ease; }
.work-grid figure:hover img { transform: scale(1.025); filter: brightness(1.08); }
.work-grid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 18px 15px; background: linear-gradient(transparent, rgba(4,8,12,.9)); font: 700 .78rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .1em; color: #fff; }
@media (max-width: 850px) {
  .work { padding-top: 80px; padding-bottom: 80px; }
  .work-heading { grid-template-columns: 1fr; gap: 20px; }
  .work-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 250px; }
  .site-header nav { gap: 18px; }
}
@media (max-width: 560px) {
  .logo-frame { width: 50px; height: 50px; }
  .logo-frame img { width: 47px; height: 47px; }
  .work { padding-left: 18px; padding-right: 18px; }
  .work-grid { grid-template-columns: 1fr; grid-auto-rows: 285px; }
  .work-grid figure.wide { grid-column: auto; }
  .work-grid figure.tall { grid-row: auto; }
  .work-heading h2 { font-size: 3rem; }
}