/* === Video section === */
.video-section{ padding: 80px 0 40px; }
.video-header{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 18px; }
.video-eyebrow{ font-family:'Syne',sans-serif; font-weight:500; font-size:24px; line-height:29px; color:#01172C; }
.video-title{ margin:0; font-family:'Syne',sans-serif; font-weight:700; font-size:72px; line-height:80px; color:#01172C; }

.video-grid{ display:grid; grid-template-columns: minmax(0,420px) 1fr; gap:24px; align-items:start; }
.video-main video{
  width:100%; display:block; border-radius: var(--radius);
  box-shadow: var(--shadow); background:#000;
  aspect-ratio: 9/16; object-fit: cover;
}
.video-main-note{ margin-top:10px; font-size:14px; color:var(--muted); text-align:center; }

.video-clips{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.video-clip{ position:relative; cursor:pointer; }
.video-clip video{
  width:100%; display:block; border-radius: var(--radius);
  box-shadow: var(--shadow); background:#000;
  aspect-ratio: 9/16; object-fit: cover;
}
.video-clip-label{ margin-top:10px; font-weight:600; font-size:15px; color:#01172C; text-align:center; }
.video-clip .play-badge{ position:absolute; inset:0; bottom:35px; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.play-badge span{ width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow); }
.play-badge span::after{ content:""; display:block; margin-left:4px; border-style:solid; border-width:10px 0 10px 16px; border-color: transparent transparent transparent #01172C; }
.video-clip.playing .play-badge{ display:none; }

@media (max-width: 900px){
  .video-title{ font-size: clamp(40px,6vw,72px); line-height: clamp(48px,6.5vw,80px); }
  .video-grid{ grid-template-columns: 1fr; }
  .video-clips{ grid-template-columns: repeat(2, 1fr); }
}