.feature-image,
.card-image { isolation: isolate; }

.work-subhead {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  align-items: end;
  gap: 25px;
  padding: 25px 0 22px;
  border-top: 1px solid #466077;
  color: #91a7ba;
}
.work-subhead span,
.recognition-copy > span { color: #82b9db; font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.work-subhead h3 { margin: 0; color: #eef4f7; font-size: clamp(24px, 3vw, 42px); font-weight: 500; letter-spacing: -.055em; }
.work-subhead p { margin: 0; font-size: 13px; line-height: 1.5; }
.feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.feature-actions .text-link span { margin-left: 25px; }
.feature-actions .text-link:last-child { color: #a9cee6; }
.project-grid { margin-top: 55px; }
.project-card h3 { line-height: 1.2; }

.recognition {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 90px);
  align-items: center;
  margin-top: clamp(100px, 12vw, 180px);
  padding: clamp(32px, 6vw, 75px);
  border: 1px solid #304459;
  background: linear-gradient(125deg, #0c2237, #08111d 68%);
}
.recognition-copy h3 { margin: 15px 0 15px; font-size: clamp(70px, 9vw, 145px); line-height: .9; letter-spacing: -.09em; }
.recognition-copy h3 span { color: #81bce0; }
.recognition-copy p { max-width: 360px; color: #b5c2cc; line-height: 1.7; }
.recognition-copy .text-link { display: inline-block; text-decoration: none; }
.recognition-copy .text-link span { margin-left: 38px; }
.recognition img { display: block; width: 100%; max-height: 430px; object-fit: contain; filter: saturate(.8); }
.more-work > div { flex-wrap: wrap; }

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  padding: 0 0 0 4px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: rgba(5, 17, 30, .76);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background .2s, transform .2s;
}

.video-play:hover,
.video-play:focus-visible {
  background: #4a9ed0;
  transform: translate(-50%, -50%) scale(1.08);
}

.video-trigger { cursor: pointer; }
.video-trigger:focus-visible,
.video-stop:focus-visible { outline: 2px solid #9ddaff; outline-offset: 3px; }

.feature-image.is-playing,
.card-image.is-playing { background: #000; }

.feature-image.is-playing iframe,
.card-image.is-playing iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-stop {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 20px;
  background: rgba(5, 17, 30, .88);
  color: #fff;
  font: 600 11px 'DM Sans', sans-serif;
  cursor: pointer;
}

@media (max-width: 600px) {
  .video-play { width: 64px; height: 64px; font-size: 20px; }
  .work-subhead { grid-template-columns: 1fr; gap: 10px; }
  .work-subhead p { margin-bottom: 10px; }
  .recognition { grid-template-columns: 1fr; margin-top: 100px; padding: 30px 22px; }
  .recognition img { max-height: 290px; }
}