/* ==========================================================================
   The looping service clip.  [bhp_loopvid key="..."]

   One treatment wherever it appears: a 16:9 frame with the site's radius and hairline, the clip
   filling it, and an optional caption beneath. Nothing about it is page-specific.
   ========================================================================== */
.bhpvloop{margin:0;width:100%}
.bhpvloop-v{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;
  background:#101A32;border:1px solid rgba(247,242,231,.14);
  /* full width across a 1240 container a 16:9 frame is 700px tall and swamps the section it belongs
     to; the crop keeps the proportion sensible and the clip still fills its frame */
  max-height:420px}
@media (max-width:767px){ .bhpvloop-v{max-height:260px} }
.bhpvloop-cap{margin-top:12px;font-family:'Geist',-apple-system,sans-serif;font-size:13.5px;
  line-height:1.5;color:var(--bhp-on-dark-2,rgba(247,242,231,.66))}
/* on a light band the hairline and the caption have to flip */
.sec-white .bhpvloop-v,.sec-cream .bhpvloop-v,.bhpvloop--light .bhpvloop-v{border-color:rgba(23,29,58,.12)}
.sec-white .bhpvloop-cap,.sec-cream .bhpvloop-cap,.bhpvloop--light .bhpvloop-cap{color:rgba(23,29,58,.62)}

/* A clip that loops forever is motion the viewer did not ask for. With reduced motion on, the frame
   stays and the movement stops. */
@media (prefers-reduced-motion:reduce){
  .bhpvloop-v{animation:none}
}