/* Click-to-load YouTube Shorts facade. Shared by case studies and the home page. */
.yt-card { margin: 0; width: 100%; max-width: 360px; }
.yt-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #111114;
  border: 1px solid rgba(255,255,255,.1);
}
.yt-play { all: unset; box-sizing: border-box; position: absolute; inset: 0; cursor: pointer; display: block; }
.yt-play img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .82; transition: opacity 250ms, transform 400ms; }
.yt-play:hover img, .yt-play:focus-visible img { opacity: 1; transform: scale(1.02); }
.yt-play:focus-visible { outline: 2px solid #d4a574; outline-offset: -4px; border-radius: 14px; }
.yt-icon {
  position: absolute; top: 50%; left: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px;
  border-radius: 50%; background: #c17f59; box-shadow: 0 10px 40px -8px rgba(193,127,89,.6);
}
.yt-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -7px;
  border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #0a0a0c;
}
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-card figcaption { margin-top: .9rem; font-size: .9rem; line-height: 1.5; color: #aaa9ad; }
.yt-card figcaption strong { display: block; color: #f5f5f7; font-weight: 600; font-size: 1rem; }
.yt-card figcaption a { color: #c17f59; }
.yt-card figcaption a:hover { color: #d4a574; }
@media (prefers-reduced-motion: reduce) { .yt-play img { transition: none; } .yt-play:hover img { transform: none; } }