/* _yt (tools/sections/_yt.html): a YouTube film behind its poster, nothing of YouTube before the click; the embed section and the hero use it */
.k-yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: inherit; background: #0d0d14; cursor: pointer; overflow: hidden; }
.k-yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.k-yt:hover img { transform: scale(1.02); }
.k-yt .k-play { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px 0 16px; border-radius: 16px; transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 1px rgba(25, 24, 38, .06), 0 18px 40px -16px rgba(25, 24, 38, .5);
  font: 500 16px/1 var(--sans); color: var(--ink); transition: transform .25s, background .2s; }
.k-yt .k-play svg { width: 22px; height: 22px; fill: var(--ink); }
.k-yt:hover .k-play { transform: translate(-50%, -50%) scale(1.04); background: #fff; }
.k-yt:focus-visible { outline: 2px solid #6E72F2; outline-offset: 3px; }
.k-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) { .k-yt .k-play { height: 48px; padding: 0 18px 0 14px; font-size: 15px; } }