/* Aceternity Background Beams on warm charcoal, shared by public salon pages.
   The SVG layer stays behind the content and never receives input. */
:root{--bg:#10100f}
body.home-page,body.inner-page{isolation:isolate}
.site-atmosphere{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict;background:var(--bg)}
.ash-background-beams{position:absolute;inset:0;pointer-events:none;opacity:.85;mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.ash-background-beams__svg{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.home-page section,.home-page .experience,.home-page .services,
.home-page .faq,.home-page .footer{background:transparent}
.home-page .reviews-vignette{background:linear-gradient(90deg,#10100fb3,transparent 20%,transparent 80%,#10100fb3)}

/* Both sides of the hero boundary meet at the same charcoal, without a gap.
   The fade sits behind the gallery and its controls at every viewport size. */
.home-page main>.hero::after{background:linear-gradient(0deg,var(--bg) 0,transparent 24%),linear-gradient(180deg,#050b1333,transparent 24%)}
.home-page main>.hero+section{isolation:isolate}
.home-page main>.hero+section::before{content:"";position:absolute;top:0;left:0;right:0;height:clamp(120px,18svh,220px);z-index:-1;pointer-events:none;background:linear-gradient(180deg,#10100f 0%,#10100fed 18%,#10100f8c 52%,#10100f26 80%,transparent 100%)}

@media(forced-colors:active){
 .site-atmosphere,.home-page main>.hero+section::before{display:none}
 .home-page .services,.home-page .reviews,.home-page .visit{background:Canvas}
}