.selected-work {
  padding: 100px 5%;
  overflow: hidden;
  background: #101010;
  color: #fff;
}
.selected-work .eyebrow { color: #fff; }
.selected-work .eyebrow::before { background: #ff4f00; }
.work-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
  gap: 7%;
  align-items: end;
}
.work-lead h2 { font-size: clamp(54px, 7.2vw, 112px); }
.work-lead h2 em { color: #ff4f00; }
.work-summary { padding-bottom: 8px; }
.work-summary p { margin: 0 0 28px; color: #d9d9d9; font-size: 23px; line-height: 1.55; }
.work-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.work-roles span {
  padding: 10px 13px;
  border: 1px solid #666;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.work-gallery {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 24px;
  margin-top: 70px;
  align-items: stretch;
}
.work-image { position: relative; min-height: 680px; overflow: hidden; background: #222; }
.work-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-image.primary img { object-position: center center; }
.work-image.secondary img { object-position: center center; }
.work-image figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 18px 20px;
  background: linear-gradient(transparent, rgba(0,0,0,.88));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.work-proof {
  display: grid;
  grid-template-columns: minmax(300px, .55fr) minmax(0, 1.45fr);
  gap: 6%;
  align-items: center;
  margin-top: 70px;
  padding-top: 70px;
  border-top: 1px solid #444;
}
.proof-copy h3 { font-size: clamp(38px, 4.4vw, 68px); }
.proof-copy p { color: #cfcfcf; font-size: 19px; line-height: 1.55; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.work-links { display: flex; flex-wrap: wrap; gap: 25px; margin-top: 26px; }
.selected-work .link { color: #fff; }

@media (max-width: 900px) {
  .selected-work { padding: 70px 5%; }
  .work-lead, .work-proof { grid-template-columns: 1fr; gap: 38px; }
  .work-summary p { font-size: 20px; }
  .work-gallery { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; }
  .work-image { min-height: 520px; }
}
@media (max-width: 620px) {
  .work-gallery { grid-template-columns: 1fr; }
  .work-image { min-height: 520px; }
  .work-proof { margin-top: 50px; padding-top: 50px; }
}