.vbc-host{position:relative;--vbc-crumb-top:clamp(44px,5vh,92px);--vbc-gap:clamp(26px,3.4vh,40px);--vbc-strip:calc(var(--vbc-crumb-top) + -4px + var(--vbc-gap))}
/* reserve a uniform strip for the breadcrumb so banner copy never collides */
.vbc-host{box-sizing:border-box;padding-top:var(--vbc-strip)}
.vbc-host>.slide,.vbc-host>.vpg-bg,.vbc-host>.bg{top:0}
/* the strip now supplies the top spacing, so drop the banner's own top padding
   -- this makes the crumb-to-heading gap equal --vbc-gap on every page */
.vbc-host>.wrap{padding-top:0}
/* vertically-centred banners: guarantee the same clearance below the crumb */
.vbc-host>.slide .hero-inner{padding-top:var(--vbc-gap)}
.vbc{position:absolute;top:0;left:0;right:0;z-index:14;
  padding-top:var(--vbc-crumb-top);padding-bottom:var(--vbc-gap);pointer-events:none}
/* inherits the hero's own .wrap geometry so it lines up with the H1 */
.vbc>.wrap{display:block!important;min-height:0;height:auto;padding-top:0;padding-bottom:0}
.vbc-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;
  justify-content:flex-start;flex-wrap:wrap;gap:11px;pointer-events:auto}
.vbc-list>li{display:flex;align-items:center}
.vbc-list a,.vbc-list span[aria-current]{font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;line-height:1;
  white-space:nowrap;text-decoration:none}
.vbc-list a{color:#b6b5ac;transition:color .18s}
.vbc-list a:hover{color:#F6A700}
.vbc-list a:focus-visible{outline:2px solid #F6A700;outline-offset:4px;border-radius:2px}
.vbc-list span[aria-current]{color:#e8e7e0}
.vbc-sep{color:#8f9aa6;font-size:13px;line-height:1;user-select:none}
@media(max-width:560px){
 .vbc-host {
        height: 500px;
        --vbc-gap: auto;
    }   
  .vbc-list{gap:8px}
 .vbc-host>.slide .hero-inner {
    padding-top: 78px;
}.slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.08);
    transition: transform 7s linear;
    height:500px;
    /* height: 600px; */
}.vbc-list a, .vbc-list span[aria-current] {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}
}
@media(prefers-reduced-motion:reduce){.vbc-list a{transition:none}}




@media (max-width: 767px) {
    .vbc-host>.wrap {
    padding-top: 58px;
} .vbc-host2 {
        height: 500px;
       padding-top: var(--vbc-strip) !important;
       --vbc-gap: clamp(26px, 3.4vh, 40px) !important;
    }
        .phero h1 {
        font-size: 20px;
        line-height: 1.02;
        margin-top: 12px;
    }
}
@media(max-width:991px){
.slide-bg::after {
  
    background: none !important;
}
}