/* No inherited scroll variables: the engine writes only direct transforms. */
.motion-layer{will-change:transform}
.floating-plane,.hero-orbit,.laser-plane,.experience-stage>div:not(.gallery-film){box-shadow:0 12px 26px -18px #18292060;transition:none}
.experience-stage>div:focus-within,.experience-stage>div:has(.gallery-open:hover){box-shadow:0 12px 26px -18px #18292060}
.treatment-card{transition:transform .25s,background .25s,opacity .25s}
.hero-backdrop{filter:none}
@supports(content-visibility:auto){
 .journal{content-visibility:auto;contain-intrinsic-size:auto 1000px}
 .locations{content-visibility:auto;contain-intrinsic-size:auto 750px}
 .appointment{content-visibility:auto;contain-intrinsic-size:auto 1000px}
 .faq{content-visibility:auto;contain-intrinsic-size:auto 650px}
 footer{content-visibility:auto;contain-intrinsic-size:auto 400px}
}
@media(hover:none),(max-width:768px){
 header,.portrait-caption,.floating-note,#mobile-nav,dialog::backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 header{background:#f5f4effa;transition:background .15s,color .15s}
 header.nav-dark{background:#28342efa}
 .portrait-caption{background:#e6e7dff5}
 .hero-backdrop{filter:none!important}
 .treatment-card,.treatment-card:hover{transform:none;box-shadow:none;perspective:none;--card-lift:0px}
 .treatment-card:active{transform:scale(.99)}
 .treatment-card:before{display:none}.treatment-card:hover img{transform:none}
 .gallery-open img{transition:none}.gallery-open:hover img{scale:1}
 .experience-stage>div:has(.gallery-open:hover){scale:1;box-shadow:0 12px 26px -18px #18292060}
 .cinema-sticky,.experience-stage{perspective:none}
}
@media(max-width:600px){
 .hero.cinema-scene{height:135svh}.laser-cinema{height:140svh}
 .facial-cinema,.advanced-cinema,.melanin.cinema-scene{height:auto}
 .facial-stage.cinema-sticky,.advanced-stage.cinema-sticky,.melanin-stage.cinema-sticky{position:relative;height:100svh;min-height:740px}
 .melanin-stage.cinema-sticky{min-height:800px}
 .experience-stage>div:not(.gallery-film){transition:none}
 .facial-cinema{view-timeline-name:--facial-view;view-timeline-axis:block}
 .melanin.cinema-scene{view-timeline-name:--melanin-view;view-timeline-axis:block}
}
@supports(animation-timeline:view()){
 @media(max-width:600px) and (prefers-reduced-motion:no-preference){
  .native-scroll-media .facial-main{animation:light-media-zoom linear both;animation-timeline:--facial-view;animation-range:entry 0% exit 100%}
  .native-scroll-media .melanin .education-image img{animation:light-media-zoom linear both;animation-timeline:--melanin-view;animation-range:entry 0% exit 100%}
 }
}
@keyframes light-media-zoom{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-35px,0) scale(1.12)}}
@media(prefers-reduced-motion:reduce){.motion-layer{will-change:auto!important}.cinema-scene *,.approach-photo>img,.founder-detail,.founder-consult,.acne-story-image,.acne-story-small,.result-pair,.client-film,.closing-photo{animation:none!important;transform:none!important}}