/* 16:9 HERO using padding-top trick (works everywhere) */
.hero{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.hero::before{
  content:"";
  display:block;
  padding-top:56.25%;              /* 9/16 * 100 = 56.25% */
}

/* Position the video and content to fill that 16:9 box */
.hero .video-bg,
.hero > .zs-container,
.hero > .container,
.hero > .row{
  position: absolute;
  inset: 0;
}

/* Background video layer */
.hero .video-bg{
  z-index: 0;
  pointer-events: none;
}
/* Overlay for readability */
.hero .video-bg::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.25);
}

/* Vimeo "center & cover" within the 16:9 hero */
.hero .video-bg iframe{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:100%;
  height:100%;
  min-width:100%;
  min-height:100%;
  border:0;
}

/* Content above the video; center vertically if you like */
.hero > .zs-container,
.hero > .container,
.hero > .row{
  z-index:1;
  display:flex;
  align-items:center;
}

/* Optional: on phones, a bit taller than strict 16:9 looks nicer */
@media (max-width: 768px){
  .hero::before{ padding-top: 62%; } /* slightly taller for mobile */
}