/* Proportions matched to the supplied reference */
@media (min-width: 701px) {
  .hero { height: clamp(570px, 64vw, 690px); min-height: 570px; grid-template-columns: 36% 64%; }
  .hero h1 { font-size: clamp(2.9rem, 4.45vw, 4.65rem); line-height: 1.06; letter-spacing: -.045em; }
  .hero-visual { left: 20%; right: 1.5%; top: 3%; bottom: -7%; }
  .hero-visual img { transform: scale(1.08); transform-origin: right center; }
  .hero::after { content: ""; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: 17%; pointer-events: none; background: linear-gradient(90deg, rgba(3,3,3,0), rgba(3,3,3,.7) 55%, #030303 100%); }
  .hero-copy, .scroll { z-index: 3; }
}
.clients { min-height: 90px; grid-template-columns: 150px 1fr; }
.section { padding-top: 3.2rem; padding-bottom: 3.2rem; }
.project { height: 300px; }
.metrics { min-height: 128px; }
.metrics strong { font-size: 3rem; }
.approach li { min-height: 150px; }
.about figure { height: 300px; }
.about figure img { object-position: 38% 34%; }
.cta { min-height: 110px; }