/* kx-video: section header over a 16:9 player (no design source; added 8 Oct for the client's launch video). */
.kx.kx-video .kx-section__header + .kx-video__frame { margin-top: 3rem; }
@media (min-width: 1024px) { .kx.kx-video .kx-section__header + .kx-video__frame { margin-top: 4rem; } }
.kx.kx-video .kx-video__frame { position: relative; max-width: 72rem; margin-inline: auto; aspect-ratio: 16 / 9; border-radius: 1.5rem; overflow: hidden; background: var(--kx-navy); box-shadow: 0 30px 70px -30px rgb(2 38 56 / 0.5); }
.kx.kx-video .kx-video__media, .kx.kx-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.kx.kx-video .kx-video__play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--kx-navy); }
.kx.kx-video .kx-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--kx-duration-base) var(--kx-ease-soft); }
.kx.kx-video .kx-video__play:hover .kx-video__poster { transform: scale(1.02); }
.kx.kx-video .kx-video__btn { position: relative; display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 9999px; background: #fff; box-shadow: 0 12px 30px -10px rgb(2 38 56 / 0.6); transition: background-color var(--kx-duration-base) var(--kx-ease-soft); }
@media (min-width: 1024px) { .kx.kx-video .kx-video__btn { width: 6rem; height: 6rem; } }
.kx.kx-video .kx-video__btn svg { display: block; width: 48%; height: 48%; } /* the path sits a touch right of the box centre, so the triangle looks centred */
.kx.kx-video .kx-video__play:hover .kx-video__btn, .kx.kx-video .kx-video__play:focus-visible .kx-video__btn { background: var(--kx-green); }
.kx.kx-video .kx-video__play:focus-visible { outline: 3px solid var(--kx-blue); outline-offset: -3px; }
.kx.kx-video .kx-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* No video yet: dashed frame, editors only (the widget prints nothing for visitors). */
.kx.kx-video .kx-video__pending { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; border: 2px dashed var(--kx-on-navy-faint); border-radius: inherit; }
.kx.kx-video .kx-video__pending p { max-width: 36ch; text-align: center; font-size: 0.9375rem; line-height: 1.5; color: var(--kx-on-navy-muted); }