/* ===== Hero ===== */
.hp-hero{
  position:relative;
  width:100%;
  background:#0b0b0b;
  overflow:hidden;
}

.hp-hero-media{
  width:100%;
  aspect-ratio:21/9;
  min-height:420px;
  background:#0b0b0b;
}

@media (max-width: 980px){
  .hp-hero-media{
    aspect-ratio:16/9;
    min-height:340px;
  }
}

@media (max-width: 560px){
  .hp-hero-media{
    min-height:280px;
  }
}

.hp-hero-media iframe,
.hp-hero-media video{
  width:100%;
  height:100%;
  display:block;
  border:0;
}

.hp-hero-media .wp-video{
  width:100% !important;
}

.hp-hero-media video{
  object-fit:cover;
  object-position:center;
}

/* overlay */
.hp-hero-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding:clamp(18px, 4vw, 44px);
  pointer-events:none;
}

.hp-hero-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.75) 100%);
}

.hp-hero-content{
  position:relative;
  width:min(1100px,100%);
  margin:0 auto;
  color:#fff;
  pointer-events:auto;
}

.hp-hero-title{
  margin:0 0 10px;
  font-size:clamp(26px,4vw,46px);
  line-height:1.08;
  color:#fff;
}

.hp-hero-sub{
  margin:0 0 18px;
  font-size:clamp(14px,1.6vw,18px);
  line-height:1.6;
  opacity:.92;
  max-width:70ch;
}