/* Phlebotomy page video: thumbnail with a play button, 16:9 */
.esa-video { position: relative; max-width: 820px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: 0 16px 40px rgba(22, 32, 60, 0.14); }
.esa-video-play { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.esa-video-play img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(.22, 1, .36, 1); }
.esa-video-play:hover img { transform: scale(1.03); }
.esa-video-badge { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; padding-left: 5px; border-radius: 50%; font-size: 28px; color: #fff; background: var(--brick); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform 0.25s; }
.esa-video-play:hover .esa-video-badge { transform: scale(1.08); }
.esa-video-play:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; }
.esa-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.esa-video-note { margin: 12px 0 0; text-align: center; font-size: 0.85rem; color: #6b7280; }
@media (max-width: 600px) { .esa-video-badge { width: 62px; height: 62px; margin: -31px 0 0 -31px; font-size: 22px; } }