/* The research commercial on the plans page and the homepage (2026-10-05): a poster served from this site with a play
   button, and the YouTube player only after the press (js/film.js). Words on the left, the film on the right; on a
   phone the heading, then the film, then the AI disclosure. Linked only by the two pages that show the film. */
[data-kp-film][hidden] { display: none; }
.kp-film { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head media" "note media"; grid-template-rows: auto 1fr; column-gap: 48px; row-gap: 18px; align-items: start; }
.kp-film-head { grid-area: head; }
.kp-film-media { grid-area: media; align-self: center; }
.kp-film-note { grid-area: note; }
.kp-film-head .k-eyebrow { margin-bottom: 12px; }
.kp-film-head h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; margin: 0 0 12px; text-wrap: balance; }
.kp-film-head p { color: var(--body); font-size: 16px; line-height: 1.65; margin: 0; }
.kp-film-note { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; }
.kp-film-note strong { color: var(--body); font-weight: 600; }
.kp-film-player { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--ink-700); border: 1px solid var(--line-strong); box-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.8); }
.kp-film-btn { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.kp-film-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kp-film-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.kp-film-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 54px; transform: translate(-50%, -50%); border-radius: 14px; background: rgba(7, 11, 20, 0.82); border: 1px solid var(--line-strong); transition: background .15s, transform .15s; }
.kp-film-play::after { content: ""; position: absolute; left: 31px; top: 16px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--paper); }
.kp-film-btn:hover .kp-film-play, .kp-film-btn:focus-visible .kp-film-play { background: var(--accent); transform: translate(-50%, -50%) scale(1.06); }
.kp-film-btn:hover .kp-film-play::after, .kp-film-btn:focus-visible .kp-film-play::after { border-left-color: var(--accent-ink); }
.kp-film-dur { position: absolute; right: 12px; bottom: 12px; padding: 3px 8px; border-radius: 6px; background: rgba(7, 11, 20, 0.84); color: var(--paper); font-size: 12px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
.kp-film-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.kp-film-more { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; text-align: right; }
.kp-film-more a { color: var(--accent); font-weight: 600; text-decoration: none; }
.kp-film-more a:hover, .kp-film-more a:focus-visible { text-decoration: underline; }
/* On the plans page the film sits in a panel between the free briefing and the plans. */
.kp-film-panel { margin: 0 0 34px; padding: 28px 30px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
@media (max-width: 900px) {
  .kp-film { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "note"; grid-template-rows: auto; row-gap: 20px; }
  .kp-film-panel { padding: 22px 18px; }
  .kp-film-more { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .kp-film-play { transition: none; } }