/* Self-hosted homepage films with native, user-controlled playback. */
.home-commercial { min-width: 0; }
.home-commercial-intro { padding-block: clamp(3rem, 5vw, 5rem); background: var(--cream); }
.home-commercial-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center; }
.home-commercial-copy { min-width: 0; }
.home-commercial-copy h2 { margin-bottom: 1rem; font-size: clamp(2rem, 3.6vw, 3.3rem); }
.home-commercial-copy > p:not(.eyebrow) { color: var(--muted); }
.home-commercial-copy .text-link { margin-top: 0; }
.home-commercial-video { min-width: 0; margin: 0; }
.home-commercial-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--navy-2); box-shadow: var(--shadow-sm); }
.home-commercial-frame video { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; border: 0; object-fit: contain; background: var(--navy-2); }
.home-commercial-frame video:focus-visible { outline: 4px solid var(--gold); outline-offset: -6px; }
.home-commercial-video figcaption { margin-top: .7rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1rem; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.home-commercial-video figcaption a { color: var(--rust-dark); font-weight: 800; text-underline-offset: .2em; }
.home-commercial-process { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line-dark); }
.home-commercial-process .home-commercial-copy > p:not(.eyebrow) { color: rgba(255,255,255,.78); }
.home-commercial-process .home-commercial-copy .home-commercial-note { font-size: .78rem; }
.home-commercial-process .home-commercial-copy .text-link, .home-commercial-process .home-commercial-video figcaption a { color: var(--gold); }
.home-commercial-process .home-commercial-frame { border-color: var(--line-dark); }
.home-commercial-process .home-commercial-video figcaption { color: rgba(255,255,255,.72); }
@media (max-width: 780px) {
  .home-commercial-grid { grid-template-columns: minmax(0, 1fr); }
  .home-commercial-copy { max-width: 64ch; }
  .home-commercial-copy h2 { max-width: 18ch; }
}