/* GENERATED by build/vid-el/make_css.py - do not edit on the server. */

/* ---------- 01 the hero showreel ----------
   The device beside the H1 is the loop clip rather than a console, as on the social media page. It
   is given the same corner and the same frame every film on this site carries, so the hero reads as
   one object and not as a video dropped into a column. */
.bhp-vid .heroclip .bhpvloop-v{border-radius:16px;overflow:hidden;
  border:1px solid rgba(247,242,231,.14);box-shadow:0 30px 80px rgba(6,10,24,.38)}

/* ---------- 03 the research figures ----------
   Four cards, and the figures are words as often as numbers ("Video beats text", "60 to 90 sec"),
   so the figure wraps instead of being forced onto one line at a size that would overflow. */
.bhp-vid.a3 .statrow .fig .elementor-heading-title{white-space:normal;text-wrap:balance}
.bhp-vid.a3 .lstat .srcline p{border-top:1px solid rgba(247,242,231,.14);padding-top:10px}
.bhp-vid.a3 .lstat .srcline a{color:rgba(247,242,231,.72);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(255,176,0,.5)}
.bhp-vid.a3 .lstat .srcline a:hover{color:#FFB000}
.bhp-vid.a3 .srcnote p{max-width:92ch}

/* ---------- 05 to 07 the samples ----------
   His own introduction line above each sample, set apart from the paragraph so the three films
   below read as the thing it is pointing at. */
.bhp-vid .samplelead p{font-weight:500}
.bhp-vid .samplelead strong{font-weight:600}
.bhp-vid .wallwrap.e-con{padding:0}

/* ---------- 08 and 09 the two stages ----------
   The wall sits in the right half of a 50/50, so it must never set its own width and must never
   push the row wider than the column it was given. */
.bhp-vid .wallcol{min-width:0}
.bhp-vid .wallcol .bvw{width:100%}
/* The social cuts ran as a stage in half a row until 2026-09-23, when the client asked for them
   side by side with arrows for the rest. The section is full width now, so the rules that made a
   9:16 stage fit beside a column of copy are gone with it. The slider itself lives in the widget's
   own stylesheet, because it is the widget's shape and not this page's. */
.bhp-vid .cutswrap.e-con{padding:0}

/* ---------- 12 the six links ----------
   The service card, corrected four times in this round: one line, the label centred, no arrow, no
   ragged bottom. Scoped to its OWN variant class and not to a section number, because section
   numbers collide across pages and .a12 would reach three other pages' cards. */
.bhp-vid .enggrid-vid6.e-con{display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  align-items:stretch}
.bhp-vid .enggrid-vid6 .engcard.e-con{justify-content:center;min-height:96px}
.bhp-vid .enggrid-vid6 .engt .elementor-heading-title{text-wrap:balance}
.bhp-vid.a12 .ecol{max-width:none}
.bhp-vid.a12 .ecol p{max-width:92ch}

/* ---------- the responsive steps ---------- */
@media (max-width:1100px){
  .bhp-vid .enggrid-vid6.e-con{grid-template-columns:repeat(2,1fr)!important}
}
/* the research row is three since he dropped the fourth stat (2026-09-25, 2:39:30) */
.bhp-vid .statrow.three.e-con{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
@media (max-width:900px){
  .bhp-vid .statrow.four.e-con{grid-template-columns:repeat(2,1fr)!important}
  .bhp-vid .statrow.three.e-con{grid-template-columns:1fr!important}
  .bhp-vid .prow.e-con:not(.last)::before{left:17px;top:32px}
}
@media (max-width:700px){
  .bhp-vid .statrow.four.e-con{grid-template-columns:1fr!important}
  .bhp-vid .enggrid-vid6.e-con{grid-template-columns:1fr!important}
}