/* V78 — light professional vector hero advertisements */
.v78-promo-link{
  position:absolute;
  inset:0;
  z-index:4;
  display:block;
  opacity:0;
  pointer-events:none;
  cursor:pointer;
}
.v78-promo-nav{
  position:absolute;
  z-index:12;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.v78-promo-nav button{
  width:42px;
  height:42px;
  border:1px solid rgba(5,20,28,.18);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#071015;
  box-shadow:0 10px 28px rgba(2,12,18,.14);
  font:900 18px/1 system-ui,-apple-system,Segoe UI,sans-serif;
  cursor:pointer;
  backdrop-filter:blur(10px);
}
.v78-promo-nav button:hover,.v78-promo-nav button:focus-visible{
  background:#fff;
  border-color:#0d9fb4;
  transform:translateY(-2px);
}

.v73-cinematic-hero.v78-promo-active{
  height:clamp(540px,56.28vw,860px)!important;
  min-height:540px!important;
  max-height:860px!important;
  background:#fff!important;
  border-radius:0 0 clamp(20px,2.4vw,34px) clamp(20px,2.4vw,34px)!important;
}
.v73-cinematic-hero.v78-promo-active .v73-bg-stack{
  background:#fff!important;
}
.v73-cinematic-hero.v78-promo-active .v73-bg-image.is-active{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  filter:none!important;
  transform:none!important;
  background:#fff!important;
}
.v73-cinematic-hero.v78-promo-active .v73-black-fade,
.v73-cinematic-hero.v78-promo-active .v73-brush-flare{
  opacity:0!important;
  visibility:hidden!important;
}
.v73-cinematic-hero.v78-promo-active .v73-main,
.v73-cinematic-hero.v78-promo-active .v73-ad-rail{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.v73-cinematic-hero.v78-promo-active .v78-promo-link{
  opacity:1;
  pointer-events:auto;
}
.v73-cinematic-hero.v78-promo-active .v78-promo-nav{
  opacity:1;
  pointer-events:auto;
}

/* The ad is already fully designed. Keep the page background light around it. */
body.v73-has-cinematic-hero .v78-promo-active + *{
  position:relative;
  z-index:1;
}

@media(max-width:900px){
  .v73-cinematic-hero.v78-promo-active{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    background:#f5f8f9!important;
    border-radius:0 0 22px 22px!important;
  }
  .v73-cinematic-hero.v78-promo-active .v73-bg-stack{
    inset:0 0 auto 0!important;
    width:100%!important;
    height:56.28vw!important;
    min-height:0!important;
    max-height:506px!important;
    background:#fff!important;
  }
  .v73-cinematic-hero.v78-promo-active .v73-bg-image.is-active{
    object-fit:contain!important;
    object-position:center top!important;
  }
  .v73-cinematic-hero.v78-promo-active .v78-promo-link{
    inset:0 0 auto 0!important;
    height:56.28vw!important;
    max-height:506px!important;
  }
  .v73-cinematic-hero.v78-promo-active .v78-promo-nav{
    left:auto!important;
    right:12px!important;
    top:calc(min(56.28vw,506px) - 50px)!important;
    bottom:auto!important;
    transform:none!important;
    gap:6px!important;
  }
  .v73-cinematic-hero.v78-promo-active .v78-promo-nav button{
    width:38px!important;
    height:38px!important;
    font-size:16px!important;
  }

  /* On phones/tablets the baked-in banner copy becomes small, so repeat only the
     essential live page copy below the artwork as real responsive HTML. */
  .v73-cinematic-hero.v78-promo-active .v73-main{
    position:relative!important;
    z-index:7!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:calc(min(56.28vw,506px) + 12px) 14px 18px!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    background:#f5f8f9!important;
  }
  .v73-cinematic-hero.v78-promo-active .v73-copy{
    display:block!important;
    max-width:760px!important;
    margin:0 auto!important;
    padding:18px!important;
    border:1px solid #e1e8eb!important;
    border-radius:20px!important;
    background:#fff!important;
    box-shadow:0 12px 30px rgba(18,38,49,.08)!important;
    color:#09151c!important;
  }
  .v73-cinematic-hero.v78-promo-active .v73-topline{
    color:#078fa5!important;
    margin-bottom:8px!important;
  }
  .v73-cinematic-hero.v78-promo-active .v73-count{
    color:#5b6870!important;
    border-color:#d7e0e4!important;
    background:#f3f6f7!important;
  }
  .v73-cinematic-hero.v78-promo-active .v73-count b{color:#071015!important}
  .v73-cinematic-hero.v78-promo-active .v73-copy h1{
    color:#071015!important;
    -webkit-text-fill-color:#071015!important;
    text-shadow:none!important;
    font-size:clamp(32px,8vw,48px)!important;
    line-height:.98!important;
  }
  .v73-cinematic-hero.v78-promo-active .v73-copy p{
    color:#52616a!important;
    text-shadow:none!important;
    font-size:14px!important;
    line-height:1.5!important;
    margin-top:10px!important;
  }
  .v73-cinematic-hero.v78-promo-active .v73-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin-top:14px!important;
  }
  .v73-cinematic-hero.v78-promo-active .v73-actions a{
    min-height:44px!important;
    font-size:11px!important;
  }
  .v73-cinematic-hero.v78-promo-active .v73-secondary{
    color:#071015!important;
    background:#fff!important;
    border-color:#c9d5da!important;
    backdrop-filter:none!important;
  }
  .v73-cinematic-hero.v78-promo-active .v73-gallery,
  .v73-cinematic-hero.v78-promo-active .v73-progress,
  .v73-cinematic-hero.v78-promo-active .v73-ad-rail{
    display:none!important;
  }
}

@media(max-width:520px){
  .v73-cinematic-hero.v78-promo-active .v73-main{
    padding-left:10px!important;
    padding-right:10px!important;
    padding-bottom:12px!important;
  }
  .v73-cinematic-hero.v78-promo-active .v73-copy{
    padding:15px!important;
    border-radius:16px!important;
  }
  .v73-cinematic-hero.v78-promo-active .v73-copy h1{
    font-size:clamp(29px,9.2vw,40px)!important;
  }
  .v73-cinematic-hero.v78-promo-active .v73-actions{
    grid-template-columns:1fr!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .v78-promo-nav,.v78-promo-nav button{transition:none!important}
}
