/* Merkvideo's op careers en about (inc/brand_videos.php): de speler (poster of stille lus + knop) en de dialoog met de
   film met geluid. Werkt in beide paginakits: elke kleur valt terug op de huiskleuren als de pagina hem niet zet. */

.bv{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line,#E3E6E1);border-radius:12px;overflow:hidden;
  aspect-ratio:16/9;background:var(--paper-2,#F3F4F1);cursor:pointer;color:inherit;font:inherit;text-align:left;
  box-shadow:0 42px 90px -48px rgba(11,11,12,.42);transition:transform .25s ease,box-shadow .25s ease}
.bv-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bv-cta{position:absolute;z-index:2;left:20px;bottom:20px;display:inline-flex;align-items:center;gap:12px;
  padding:8px 18px 8px 8px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 40px -22px rgba(11,11,12,.55)}
.bv-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--purple,#8511D9);flex:none}
.bv-ico svg{width:18px;height:18px;fill:#fff;margin-left:2px}
.bv-lbl{font-weight:700;font-size:1rem;letter-spacing:-.01em;color:#0B0B0C;line-height:1}
.bv-dur{font-family:var(--mono,"Space Mono",ui-monospace,monospace);font-size:.72rem;letter-spacing:.06em;color:#5B615B;line-height:1}
.bv:hover{transform:translateY(-3px);box-shadow:0 48px 96px -46px rgba(11,11,12,.5)}
.bv:focus-visible{outline:3px solid var(--purple,#8511D9);outline-offset:4px}

/* de dialoog: vult het scherm, de film in het midden; klik naast de film of Esc sluit */
.bv-dialog{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}
.bv-dialog::backdrop{background:rgba(11,11,12,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.bv-dialog-in{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1200px,calc(100vw - 32px),calc((100dvh - 120px) * 16 / 9))}
.bv-dialog-video{display:block;width:100%;aspect-ratio:16/9;border-radius:12px;background:#0B0B0C}
.bv-close{position:absolute;right:0;top:-52px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
.bv-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.bv-close:hover{background:rgba(255,255,255,.2)}
.bv-close:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* de film staat altijd heel in beeld, ook op een lage laptop: hooguit de schermhoogte min de navigatie (80 px) en 24 px
   lucht erboven en eronder. Op een gewoon scherm blijft hij 1040 breed. svh: geen sprong als een telefoon de balk
   verbergt. */
.crs-film .bv,.ab-fo{max-width:min(1040px,max(320px,calc((100vh - 128px) * 16 / 9)));max-width:min(1040px,max(320px,calc((100svh - 128px) * 16 / 9)))}

/* careers: de film onder de hero */
.crs-film .bv{margin-inline:auto}

/* about: Meet the founders */
.ab-fo{margin:40px auto 0}

@media (max-width:600px){
  .bv-cta{left:12px;bottom:12px;gap:9px;padding:6px 14px 6px 6px}
  .bv-ico{width:32px;height:32px}
  .bv-lbl{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){.bv{transition:none}.bv:hover{transform:none}}