/* Full-width project photos; keep captions below the image. */
body.vB .hero{display:flex;flex-direction:column;align-items:stretch;height:auto;min-height:0;overflow:hidden;background:#b7bec2}
body.vB .hero:after{display:none}
body.vB .hero .brand-strip{position:relative;inset:auto;order:0;flex:none;width:100%;padding:20px 0;background:#142c39}
body.vB .hero .brand-strip .hero-mark{display:none}
body.vB .hero .brand-copy .eyebrow{font-size:.85rem;margin-bottom:7px;text-shadow:none}
body.vB .hero .brand-copy h1{font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.12;text-shadow:none;max-width:none}
body.vB .hero .hero-carousel{position:relative;inset:auto;order:1;flex:none;width:100%;height:clamp(360px,78svh,960px);background:#b7bec2}
body.vB .hero .hero-slide,body.vB .hero .hero-slide.hero-slide-full-product{background:#b7bec2}
body.vB .hero .hero-slide img,body.vB .hero .hero-slide.hero-slide-full-product img{object-fit:cover;object-position:var(--photo-position,center);width:100%;height:100%;filter:none}
body.vB .hero .hero-inner{position:relative;order:2;flex:none;height:auto;padding:18px 0;display:block;color:#182b38}
body.vB .hero .hero-project{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:none;width:100%;margin:0;padding:0;background:none;border:0;backdrop-filter:none;text-shadow:none;color:#182b38}
body.vB .hero .hero-project-copy span{color:#874015}
body.vB .hero .hero-project-copy strong{font-size:1.15rem;color:#182b38}
body.vB .hero .hero-project-copy p{display:block;margin:0;color:#405563}
body.vB .hero .hero-carousel-controls{margin:0;flex-wrap:wrap;flex:none}
body.vB .hero .hero-carousel-controls button{background:#173346;color:#fff;border-color:#173346;min-height:44px;min-width:44px}
body.vB .hero .hero-carousel-controls button:hover,body.vB .hero .hero-carousel-controls button:focus-visible{background:#d8782f;color:#102630;outline:2px solid #173346;outline-offset:2px}
body.vB .hero #heroSlideStatus{color:#182b38}
body.vB .hero-contact-band{margin-top:0;background:#142c39}
@media(max-width:700px){
 body.vB .hero .brand-strip{padding:16px 0}
 body.vB .hero .hero-inner{padding:16px 0}
 body.vB .hero .hero-project{display:block;min-height:0}
 body.vB .hero .hero-carousel-controls{margin-top:12px;justify-content:flex-start}
 body.vB .hero .hero-project-copy p{font-size:.86rem}
}

/* Fill the viewport width without side masks, frames or distorted proportions. */
body.vB .hero .hero-carousel{isolation:isolate;border:0;border-radius:0;box-shadow:none}
body.vB .hero .hero-slide img,body.vB .hero .hero-slide.hero-slide-full-product img{
 position:absolute;inset:0;transform:none;width:100%;height:100%;max-width:none;max-height:none;
 object-fit:cover;object-position:var(--photo-position,center);border:0;border-radius:0;box-shadow:none;
 -webkit-mask-image:none;mask-image:none;
}
body.vB .hero .project-photo{position:absolute;inset:0;transform:none;width:100%;height:100%;aspect-ratio:auto}
/* Only the bottom edge fades into the caption background. */
body.vB .hero .hero-carousel::after{
 content:"";position:absolute;z-index:2;left:0;right:0;bottom:-1px;height:clamp(56px,9svh,100px);
 pointer-events:none;background:linear-gradient(to bottom,transparent,#b7bec2);
 -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000);mask-image:linear-gradient(to bottom,transparent,#000);
}
/* A small, soft light patch only behind the upper-left logo. */
body.vB .hero .carousel-brand{
 position:absolute;z-index:3;top:0;left:0;width:clamp(250px,29vw,390px);height:clamp(130px,14vw,180px);
 pointer-events:none;isolation:isolate;
}
body.vB .hero .carousel-brand::before{
 content:"";position:absolute;z-index:-1;inset:0;background:rgba(248,249,249,.9);
 -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
 -webkit-mask-image:radial-gradient(ellipse at 20% 15%,#000 12%,rgba(0,0,0,.75) 40%,transparent 75%);
 mask-image:radial-gradient(ellipse at 20% 15%,#000 12%,rgba(0,0,0,.75) 40%,transparent 75%);
}
body.vB .hero .carousel-brand img{
 display:block;position:relative;width:clamp(170px,22vw,280px);height:auto;max-width:none;
 margin:clamp(14px,2vw,24px);opacity:1;filter:none;border:0;border-radius:0;box-shadow:none;
}
body.vB .hero .project-photo-watermark{position:absolute;z-index:3;right:3%;bottom:clamp(62px,10svh,108px);color:rgba(255,255,255,.72);font:700 clamp(12px,1.4vw,18px)/1 Arial,sans-serif;letter-spacing:.04em;text-shadow:0 1px 3px rgba(0,0,0,.55);pointer-events:none}
@media(max-width:700px){
 body.vB .hero .carousel-brand{width:250px;height:130px}
 body.vB .hero .carousel-brand img{width:170px;margin:14px}
}

/* Keep portrait work photos centered on small screens. */
@media(max-width:700px){body.vB .hero .hero-slide-new-trakt{--photo-position:50% 50%!important}}

/* Keep both halves of the single before/after photograph visible at every width. */
body.vB .hero .hero-carousel:has(.hero-slide-comparison.is-active){height:auto;aspect-ratio:3/2}
body.vB .hero .hero-carousel:has(.hero-slide-comparison.is-active) .carousel-brand{display:none}
body.vB .hero .hero-carousel:has(.hero-slide-comparison.is-active)::after{height:clamp(16px,3vw,40px)}