.case-hero {
  display: grid;
  grid-template-columns: 1fr minmax(0, 2fr);
  gap: 1rem 5vw;
  padding-top: 4rem;
}

.case-hero > .eyebrow { margin: 0; }

.case-hero h1 {
  justify-self: end;
  max-width: 48rem;
  margin: 0;
  text-align: right;
  font: 700 0.72rem/1.45 var(--mono);
  letter-spacing: 0.08em;
}

.case-hero .hero-meta {
  grid-column: 1 / -1;
  margin-top: 2.5rem;
}

@media (max-width: 800px) {
  .case-hero { grid-template-columns: 1fr; padding-top: 3rem; }
  .case-hero h1 { justify-self: start; text-align: left; }
  .case-hero .hero-meta { grid-column: 1; margin-top: 1.5rem; }
}