/* Click-to-load YouTube facade — no YouTube iframe/cookies until the user hits play.
   Keeps pages fast + consent-clean (raw YouTube embeds set marketing cookies on load). */
.video-embed { max-width: 900px; margin: 0 auto; }
.yt-facade {
  position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  cursor: pointer; background: #1e2a37;
}
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-facade::after {
  content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.22);
  transition: background .2s ease;
}
.yt-facade:hover::after { background: rgba(0,0,0,.08); }
.yt-facade .yt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 74px; height: 74px; border: 0; border-radius: 50%;
  background: #ff6804; color: #fff; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 26px rgba(0,0,0,.4); transition: transform .2s ease, background .2s ease;
}
.yt-facade:hover .yt-play { transform: translate(-50%,-50%) scale(1.08); background: #e65d00; }
.yt-facade .yt-play svg { width: 30px; height: 30px; margin-left: 3px; fill: #fff; }
.yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Section wrapper (dark, so the video pops and separates from cream sections) */
.video-section { padding: 76px 0; background: #1e2a37; color: #fff; }
.video-section .container { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.video-section h2 { text-align: center; color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 10px; line-height: 1.2; }
.video-section .vs-sub { text-align: center; color: rgba(255,255,255,.8); max-width: 640px; margin: 0 auto 32px; font-size: 1rem; line-height: 1.6; }