.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; overflow: hidden; background: #123b43; opacity: 0; transition: opacity 1s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide::before { content: ""; position: absolute; inset: -32px; background: var(--slide-photo) center / cover no-repeat; filter: blur(24px) brightness(.6); }
.hero-slide .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.hero-bottom { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hero-bottom .hero-caption { position: static; }
.hero-controls { display: inline-flex; align-items: center; gap: 10px; flex: none; font-size: .78rem; font-variant-numeric: tabular-nums; }
.hero-controls button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(12,42,49,.35); color: #fff; font: inherit; cursor: pointer; }
.hero-controls button:hover { background: #fff; color: #123b43; }
.hero-controls button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.video-section { background: #edf2ef; padding: 100px 0; }
.video-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(35px, 6vw, 100px); }
.video-copy h2 { max-width: 420px; }
.video-copy > p:not(.eyebrow) { max-width: 390px; margin-top: 25px; font-size: 1.18rem; line-height: 1.7; }
.video-frame { background: #14383f; min-height: 530px; display: flex; justify-content: center; align-items: center; padding: 14px; }
.video-frame video { display: block; height: 530px; width: auto; max-width: 100%; background: #0c252b; }
@media(max-width:700px) {
  .hero-bottom { bottom: 18px; align-items: flex-end; }
  .hero-bottom .hero-caption { max-width: 56%; line-height: 1.5; }
  .hero-bottom .caption-line { display: none; }
  .hero-controls { gap: 5px; }
  .hero-controls button { width: 35px; height: 35px; }
  .video-section { padding: 70px 0; }
  .video-grid { grid-template-columns: 1fr; gap: 28px; }
  .video-frame { min-height: 0; padding: 10px; }
  .video-frame video { height: min(125vw, 600px); }
}
@media(prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }