/* ── The showreel (theme 0.17.0, 14 Nov 2026) ─────────────────────
   Video hero, the "Our work" grid, the hover preview and the lightbox.
   Tokens come from home.css. The cards themselves are the Videos
   archive's (videos.css); this sheet only adds what the showreel needs.
   ───────────────────────────────────────────────────────────────── */

/* ── video hero ──────────────────────────────────────────────────── */

  .bmp-vhero{position:relative;overflow:hidden;background:var(--bmp-ink);
    min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
  .bmp-vhero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

  /* Dark at the top for the menu, darker at the bottom-left for the headline,
     clear enough in the middle that the footage still reads as footage. */
  .bmp-vhero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
    linear-gradient(180deg,rgba(8,8,10,.78) 0,rgba(8,8,10,.15) 24%,rgba(8,8,10,.25) 55%,rgba(8,8,10,.92) 100%),
    linear-gradient(90deg,rgba(8,8,10,.55) 0,rgba(8,8,10,0) 65%)}

  .bmp-vhero .bmp-ident{z-index:6}
  /* width is stated: a flex item with auto margins shrinks to its content, and with
     inline-size containment its content counts as zero, so the column collapsed. */
  .bmp-vhero-copy{position:relative;z-index:2;container-type:inline-size;width:100%;box-sizing:border-box;
    padding-top:140px;padding-bottom:clamp(64px,9vh,110px)}
  .bmp-vhero-kicker{font-family:var(--bmp-display);font-weight:700;font-size:12px;
    letter-spacing:.24em;text-transform:uppercase;color:var(--bmp-gold-1);margin:0 0 18px}
  .bmp-vhero h1{font-family:var(--bmp-display);font-weight:800;
    font-size:min(9.2cqi,96px);line-height:.98;letter-spacing:.01em;
    text-transform:uppercase;margin:0 0 20px;color:var(--bmp-white);
    text-shadow:0 2px 30px rgba(0,0,0,.35)}
  .bmp-vhero h1 span{display:block;white-space:nowrap}
  .bmp-vhero h1 .bmp-lit{color:var(--bmp-gold-1)}
  .bmp-vhero .bmp-lede{max-width:46ch;margin:0 0 30px;color:var(--bmp-white);opacity:.92}
  .bmp-vhero-ctas{display:flex;flex-wrap:wrap;gap:12px}

  .bmp-vhero-down{position:absolute;z-index:2;left:50%;bottom:18px;transform:translateX(-50%);
    width:44px;height:44px;display:grid;place-items:center;color:var(--bmp-white);opacity:.7;
    animation:bmp-bob 2.4s var(--bmp-ease) infinite}
  .bmp-vhero-down svg{width:26px;height:26px}
  .bmp-vhero-down:hover{opacity:1;color:var(--bmp-gold-1)}
  @keyframes bmp-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

  @media (max-width:760px){
    .bmp-vhero h1{font-size:min(11cqi,64px)}
    /* "Let's film your brand." is wider than a phone at this size; it wraps there. */
    .bmp-vhero h1 span{white-space:normal}
    .bmp-vhero-copy{padding-top:120px}
    .bmp-vhero-down{display:none}
  }

/* ── "Our work" ──────────────────────────────────────────────────── */

  .bmp-work{padding-top:clamp(56px,7vw,110px)}
  .bmp-workgrid{grid-template-columns:repeat(3,1fr);margin-top:clamp(24px,3vw,40px)}
  .bmp-work-more{margin:clamp(28px,3vw,40px) 0 0}
  @media (max-width:980px){.bmp-workgrid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:600px){.bmp-workgrid{grid-template-columns:1fr}}

  /* A portrait film's still keeps its subject: the upper middle of the frame,
     not the dead centre where a 16:9 crop of a 9:16 shot cuts heads off. */
  .bmp-vidcard.is-tall .bmp-vidcard-pic img{object-position:50% 30%}

/* ── hover preview ───────────────────────────────────────────────── */

  .bmp-vidcard-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity .35s var(--bmp-ease);z-index:1}
  .bmp-vidcard.is-tall .bmp-vidcard-preview{object-position:50% 30%}
  .bmp-vidcard.is-previewing .bmp-vidcard-preview{opacity:1}
  .bmp-vidcard .bmp-shot-play{z-index:2;transition:opacity .3s}
  .bmp-vidcard.is-previewing .bmp-shot-play{opacity:0}

/* ── lightbox ────────────────────────────────────────────────────── */

  .bmp-lightbox{border:0;padding:0;background:transparent;max-width:none;max-height:none;
    width:100vw;height:100vh;height:100dvh;margin:0;display:none;place-items:center;overflow:hidden}
  .bmp-lightbox[open]{display:grid}
  .bmp-lightbox::backdrop{background:rgba(5,5,6,.92);backdrop-filter:blur(4px)}
  .bmp-lightbox-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
    width:min(1200px,92vw)}
  .bmp-lightbox video{display:block;width:100%;max-height:80vh;max-height:80dvh;
    background:#000;border:1px solid var(--bmp-line)}
  .bmp-lightbox.is-tall .bmp-lightbox-fig{width:auto}
  .bmp-lightbox.is-tall video{width:auto;height:84vh;height:84dvh;max-width:92vw;aspect-ratio:9/16}
  .bmp-lightbox-cap{font-family:var(--bmp-display);font-weight:700;font-size:13px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--bmp-white);text-align:center}
  .bmp-lightbox-x{position:fixed;top:18px;right:18px;z-index:2;width:48px;height:48px;
    display:grid;place-items:center;border:1px solid var(--bmp-line-2);border-radius:50%;
    background:rgba(17,17,20,.8);color:var(--bmp-white);cursor:pointer}
  .bmp-lightbox-x svg{width:20px;height:20px}
  /* hello-elementor paints every <button> pink, hover included; restated here at a
     higher specificity so the close button stays on brand. */
  .bmp-lightbox .bmp-lightbox-x{padding:0;margin:0;appearance:none;box-shadow:none;
    background:rgba(17,17,20,.85);color:var(--bmp-white);border:1px solid var(--bmp-line-2)}
  .bmp-lightbox .bmp-lightbox-x:hover,.bmp-lightbox .bmp-lightbox-x:focus,
  .bmp-lightbox .bmp-lightbox-x:focus-visible{background:#100E0A;border-color:var(--bmp-gold-1);color:var(--bmp-gold-1)}
  .bmp-lightbox-cap{font-style:normal}
  .bmp-lightbox-on,.bmp-lightbox-on body{overflow:hidden}

  @media (prefers-reduced-motion:reduce){
    .bmp-vhero-down{animation:none}
  }