/* Refined project presentation layer. */
.project-video-wrap { position: absolute; z-index: -2; inset: 0; }
.project-video-wrap video { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-video-wrap .project-hero-shade { z-index: 1; }
.project-hero-copy { max-width: 48rem; }
.project-hero-copy > p:first-child { margin: 0 0 1rem; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.project-video-title { margin: 1rem 0 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.video-sound { position: absolute; z-index: 2; right: 4.5vw; bottom: 6vw; border: 1px solid var(--white); padding: .72rem .95rem; background: rgba(17,17,18,.78); color: var(--white); cursor: pointer; font: 700 11px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.video-sound:hover { background: var(--white); color: var(--black); }

@media (min-width: 701px) {
  .project-details { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(42px,6vw,110px); padding: 8vw 6vw; }
  .project-numbers { width: min(100%,42rem); justify-self: center; }
  .project-gallery { width: min(100%,43rem); justify-self: center; }
  .project-caption { max-width: 35rem; font-size: clamp(19px,1.45vw,25px); }
  .number-list { max-width: 100%; }
  .number-list span { min-height: 10.5rem; }
  .number-list b { font-size: clamp(46px,5vw,84px); }
}

@media (max-width: 700px) {
  .project-hero { display: block; min-height: 0; padding: 0; background: var(--black); }
  .project-video-wrap { position: relative; z-index: auto; inset: auto; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
  .project-video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .project-video-wrap .project-hero-shade { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(0,0,0,.36),transparent 60%); }
  .project-hero-copy { max-width: none; padding: 2.75rem 22px 3.2rem; }
  .project-hero h2 { font-size: 15vw; }
  .project-video-title { margin-top: .9rem; }
  .project-intro { margin-top: 1.35rem; }
  .video-sound { right: 16px; bottom: 16px; }
  .project-hero > div:last-child { max-width: none; }
}