/* ATREZZO / ELEGANT MASSAGE — Unified treatment cinema, 2026-11-09.
   Five existing treatment scenes, one native-scroll controller at every size.
   Editorial chapter holds follow the approved Thaissage pattern:
   a scene remains readable before the next photograph enters.
   This file is scoped to the Home treatments ONLY. */
html.em-cinema-ready .touch-home #find-your-massage {
  position:relative!important;
  overflow:visible!important;
  background:#f8f7f4;
  padding:0!important;
}
html.em-cinema-ready .touch-home #find-your-massage > .treatments__opening {
  display:block!important;position:relative!important;inset:auto!important;
  z-index:1!important;isolation:isolate;
  background:#f8f7f4!important;
  margin:0 auto!important;max-width:none!important;
  padding:clamp(85px,10vw,155px) var(--gutter,5vw) clamp(75px,8vw,115px)!important;
  opacity:1!important;visibility:visible!important;transform:none!important;
}
html.em-cinema-ready .touch-home #cinema-track {
  position:relative!important;display:block!important;
  height:885svh!important;min-height:0!important;
  background:#111!important;overflow:visible!important;
  isolation:isolate!important;margin:0!important;padding:0!important;
}
html.em-cinema-ready .touch-home #atrezzo-mask-stage {
  position:sticky!important;top:0!important;
  width:100%!important;height:100svh!important;min-height:0!important;
  display:block!important;overflow:hidden!important;
  background:#111!important;background-image:none!important;isolation:isolate!important;
  margin:0!important;padding:0!important;
}
html.em-cinema-ready .touch-home #atrezzo-mask-stage > .chapter {
  position:absolute!important;inset:0!important;
  display:flex!important;align-items:flex-end!important;
  width:100%!important;height:100%!important;min-height:0!important;
  padding:clamp(105px,11vh,145px) clamp(28px,5.3vw,100px) clamp(145px,18svh,210px)!important;
  margin:0!important;overflow:hidden!important;
  clip-path:none!important;transform:none;
  isolation:isolate!important;background:#111!important;
  background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  opacity:0;visibility:visible!important;
  pointer-events:none;
  transition:none!important;
}
html.em-cinema-ready .touch-home #atrezzo-mask-stage > .chapter:first-of-type {
  opacity:1;
}
html.em-cinema-ready .touch-home #atrezzo-mask-stage .at-mask-layer,
html.em-cinema-ready .touch-home #atrezzo-mask-stage .at-mask-progress {
  display:none!important;
}
html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter__image {
  display:block!important;position:absolute!important;inset:0!important;
  z-index:0!important;width:100%!important;height:100%!important;
  min-width:100%!important;min-height:100%!important;max-width:none!important;max-height:none!important;
  margin:0!important;padding:0!important;overflow:hidden!important;
  border:0!important;border-radius:0!important;background:transparent!important;
}
html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter__image img {
  display:block!important;position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:cover!important;aspect-ratio:auto!important;
  object-position:var(--em-focus-x,50%) var(--em-focus-y,45%)!important;
  transform:scale(var(--em-cinema-zoom,1.025))!important;
  filter:saturate(.94) contrast(1.035);
  transform-origin:var(--em-focus-x,50%) var(--em-focus-y,45%);
  transition:none!important;
}
html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter__shade {
  display:block!important;position:absolute!important;inset:0!important;
  z-index:1!important;width:100%!important;height:100%!important;
  min-height:100%!important;max-height:none!important;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.77),rgba(0,0,0,.32) 65%,rgba(0,0,0,.10)),
    linear-gradient(0deg,rgba(0,0,0,.62),transparent 68%)!important;
}
html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter__content {
  display:block!important;position:relative!important;inset:auto!important;
  z-index:3!important;width:min(770px,70%)!important;max-width:none!important;
  margin:0!important;padding:0!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  color:white!important;clip-path:none!important;
  opacity:1!important;visibility:visible!important;transform:none!important;
  pointer-events:auto!important;text-align:left!important;
  text-shadow:0 2px 17px rgba(0,0,0,.23);
}
html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter__content h3 {
  font-size:clamp(4.3rem,8.2vw,9rem)!important;
  line-height:.91!important;max-width:12ch;margin:15px 0 23px!important;
}
html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter__index {
  color:#d2e6db!important;
}
html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter__duration {
  margin:16px 0 20px!important;
}
html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter__actions {
  display:flex!important;flex-wrap:wrap;gap:14px 26px;
}
html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter--body{--em-focus-x:51%;--em-focus-y:47%}
html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter--combo{--em-focus-x:51%;--em-focus-y:51%}
html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter--couples{--em-focus-x:50%;--em-focus-y:45%}
html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter--chair{--em-focus-x:49%;--em-focus-y:45%}
html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter--four{--em-focus-x:50%;--em-focus-y:48%}
/* Noninteractive chapter chrome does not cover treatment links. */
html.em-cinema-ready .touch-home .em-treatment-chrome {
  position:absolute;inset:0;z-index:15;pointer-events:none;
  color:white;font-family:var(--sans,'DM Sans',Arial,sans-serif);
}
html.em-cinema-ready .touch-home .em-treatment-chrome__top {
  position:absolute;top:clamp(112px,14svh,155px);right:clamp(25px,5.3vw,100px);
  font-size:11px;letter-spacing:.17em;font-weight:700;
}
html.em-cinema-ready .touch-home .em-treatment-chrome__nav {
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(8px,1.5vw,25px);position:absolute;
  bottom:clamp(21px,3.5svh,42px);left:clamp(28px,5.3vw,100px);
  right:clamp(28px,5.3vw,100px);pointer-events:auto;
}
html.em-cinema-ready .touch-home .em-treatment-chrome__button {
  appearance:none;min-width:0;display:flex;flex-direction:column;gap:11px;
  border:0;background:transparent!important;padding:4px 0 10px;
  color:rgba(255,255,255,.78);font:600 clamp(.62rem,.82vw,.83rem)/1.3 var(--sans,'DM Sans',Arial,sans-serif);
  text-align:left;cursor:pointer;outline-offset:5px;
}
html.em-cinema-ready .touch-home .em-treatment-chrome__button::before {
  content:'';height:2px;width:100%;display:block;
  background:linear-gradient(90deg,#fff calc(var(--em-progress,0)*100%),rgba(255,255,255,.35) 0);
}
html.em-cinema-ready .touch-home .em-treatment-chrome__button[aria-current="step"] {
  color:white;
}
html.em-cinema-ready .touch-home .em-treatment-chrome__button:focus-visible {
  outline:2px solid white;
}
@media(max-width:1024px){
 html.em-cinema-ready .touch-home #cinema-track{height:935svh!important}
 html.em-cinema-ready .touch-home #atrezzo-mask-stage > .chapter {
   padding:110px clamp(25px,4.5vw,55px) 155px!important;
 }
 html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter__content {
   width:min(610px,84%)!important;
 }
 html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter__content h3{
   font-size:clamp(4rem,8.7vw,7.4rem)!important;
 }
 html.em-cinema-ready .touch-home .em-treatment-chrome__nav {
   left:clamp(25px,4.5vw,55px);right:clamp(25px,4.5vw,55px);
 }
}
@media(max-width:870px){
 html.em-cinema-ready .touch-home #atrezzo-mask-stage > .chapter {
   padding:100px 23px max(150px,19svh)!important;
 }
 html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter__content{
   width:100%!important;max-width:550px!important;
 }
 html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter__content h3 {
   font-size:clamp(3.8rem,12.2vw,6.2rem)!important;
   max-width:100%;margin:13px 0 16px!important;
 }
 html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter__content > p:not(.chapter__index):not(.chapter__duration){
   font-size:clamp(.85rem,2vw,.99rem)!important;line-height:1.52!important;
 }
 html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter__duration{
   margin:14px 0 18px!important;
 }
 html.em-cinema-ready .touch-home .em-treatment-chrome__top{
   top:105px;right:23px;font-size:.66rem;
 }
 html.em-cinema-ready .touch-home .em-treatment-chrome__nav {
   left:23px;right:23px;bottom:clamp(89px,13svh,125px);
   gap:7px;
 }
 html.em-cinema-ready .touch-home .em-treatment-chrome__button {
   font-size:.55rem;line-height:1.2;
   padding:6px 0;gap:9px;word-break:normal;
 }
 html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter__shade{
   background:linear-gradient(180deg,rgba(0,0,0,.26),rgba(0,0,0,.30) 35%,rgba(0,0,0,.80) 100%)!important;
 }
 html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter--body{--em-focus-x:57%;--em-focus-y:48%}
 html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter--combo{--em-focus-x:50%;--em-focus-y:50%}
 html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter--couples{--em-focus-x:51%;--em-focus-y:49%}
 html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter--chair{--em-focus-x:49%;--em-focus-y:42%}
 html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter--four{--em-focus-x:48%;--em-focus-y:46%}
}
/* Mobile editorial placement: sit the complete headline, copy, duration
   and CTAs lower in the scene, while preserving a clear interval above
   chapter navigation and the fixed booking ribbon. Tablets are unchanged. */
@media(max-width:600px) and (min-height:700px){
 html.em-cinema-ready .touch-home #atrezzo-mask-stage > .chapter {
   padding-bottom:clamp(144px,18svh,170px)!important;
 }
 html.em-cinema-ready .touch-home .em-treatment-chrome__nav {
   bottom:calc(clamp(88px,10.5svh,106px) + env(safe-area-inset-bottom,0px))!important;
 }
}
@media(max-width:870px) and (max-height:699px){
 html.em-cinema-ready .touch-home .em-treatment-chrome__nav {display:none!important}
 html.em-cinema-ready .touch-home #atrezzo-mask-stage > .chapter{padding:95px 19px 88px!important}
 html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter__content h3{
   font-size:clamp(3rem,9vw,4.7rem)!important;
 }
 html.em-cinema-ready .touch-home #atrezzo-mask-stage .chapter__duration{margin:10px 0 13px!important}
}
@media(max-height:559px),(prefers-reduced-motion:reduce){
 html.em-cinema-ready .touch-home #cinema-track{height:auto!important}
 html.em-cinema-ready .touch-home #atrezzo-mask-stage {height:auto!important;position:relative!important}
 html.em-cinema-ready .touch-home #atrezzo-mask-stage > .chapter {
   position:relative!important;inset:auto!important;height:auto!important;
   min-height:650px!important;opacity:1!important;pointer-events:auto!important;
   padding:130px 23px 85px!important;transform:none!important;clip-path:none!important;
 }
 html.em-cinema-ready .touch-home .em-treatment-chrome{display:none!important}
}

/* Remove legacy ivory/white hand-off overlays from the previous SVG-mask
   implementation. They were painted ABOVE the slide at z-index 10 on iPhone
   and tablet and falsely made the photograph appear like an inset rectangle. */
html.em-cinema-ready .touch-home #cinema-track::before,
html.em-cinema-ready .touch-home #cinema-track::after,
html.em-cinema-ready .touch-home #atrezzo-mask-stage::before,
html.em-cinema-ready .touch-home #atrezzo-mask-stage::after {
  content:none!important;display:none!important;opacity:0!important;
  background:none!important;background-image:none!important;
}
html.em-cinema-ready .touch-home #atrezzo-mask-stage{
  background-color:#111!important;
  background-image:none!important;
  border:0!important;border-radius:0!important;
  box-shadow:none!important;
}
/* The underlying mobile card style previously capped photographs at 57svh,
   leaving an inset photo with an opaque content box underneath. The full
   viewport image is now the actual slide, with text floating on top. */
@media(max-width:870px){
 html.em-cinema-ready .touch-home #atrezzo-mask-stage > .chapter{
   width:100vw!important;max-width:100vw!important;
   min-height:100svh!important;height:100svh!important;
   left:0!important;right:0!important;
   border:0!important;border-radius:0!important;
 }
 html.em-cinema-ready .touch-home #atrezzo-mask-stage > .chapter > .chapter__image{
   position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:0!important;
   width:100%!important;height:100%!important;min-height:100%!important;
   max-height:none!important;max-width:none!important;display:block!important;
   overflow:hidden!important;z-index:0!important;
 }
 html.em-cinema-ready .touch-home #atrezzo-mask-stage > .chapter > .chapter__shade{
   inset:0!important;width:100%!important;height:100%!important;
   min-height:100%!important;max-height:none!important;z-index:1!important;
 }
 html.em-cinema-ready .touch-home #atrezzo-mask-stage > .chapter > .chapter__content{
   position:relative!important;z-index:3!important;background:transparent!important;
   padding:0!important;border-radius:0!important;
 }
}
/* Never expose the original separate image-frame version while the responsive
   controller is active. Every image covers the scene, including on tablets. */

/* Mobile-only placement correction: the legacy phone layout sets
   flex-direction:column, so align-items:flex-end does not move the copy down.
   Align its main axis to the bottom while keeping existing CTA/nav clearance. */
@media(max-width:767px) and (min-height:560px) and (prefers-reduced-motion:no-preference){
 html.em-cinema-ready .touch-home #atrezzo-mask-stage > .chapter {
   justify-content:flex-end!important;
 }
}