/* The three overview heroes begin at the viewport edge, underneath the nav. */
body[data-page="home"] #home .hero{padding:0}
#home .hero-card{width:100%;max-width:none;min-height:clamp(660px,92svh,940px);border-radius:0!important}
#home .hero-inner{min-height:inherit;padding:160px 24px 88px}
#home .hero-card::after{content:"";position:absolute;inset:auto 0 0;height:clamp(120px,22%,210px);z-index:2;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.12) 22%,rgba(255,255,255,.48) 52%,rgba(255,255,255,.86) 79%,#fff 100%)}
#about > .wrap:first-child{padding:0;max-width:none}
#about .page-hero-about{margin:0 0 64px;border-radius:0!important;min-height:780px;padding:156px 24px 40px;justify-content:center}
#services > .wrap{padding:0;max-width:none}
#services > .wrap > .shero{margin:0;border-radius:0!important;min-height:700px;padding:152px max(40px,calc((100vw - 1180px)/2)) 76px}
body:is([data-page="home"],[data-page="about"],[data-page="services"]) .navbar:not(.nav-scrolled) .nav-pill{width:100%;max-width:none;background:rgba(255,255,255,.76);border-radius:0;box-shadow:none}
@media(max-width:800px){
 #home .hero-card{min-height:clamp(620px,92svh,820px)}
 #home .hero-inner{padding:140px 20px 72px}
 #about .page-hero-about{min-height:680px;padding:132px 20px 36px;margin-bottom:40px}
 #services > .wrap > .shero{min-height:740px;padding:132px 26px 44px;gap:32px}
}