/* ATREZZO / Elegant Massage — Home-specific refinements, 2026-11-06.
   Requested: hide Sticky Grid subtitle on mobile, purposefully pin/zoom Menu 02,
   and bring Home CTAs into the approved pill+secondary-text system.
   Scoped to .touch-home: the 12 approved internal pages are unchanged. */

/* On mobile the enormous editorial title has no supporting caption. */
@media(max-width:700px){
  .touch-home .at-grid__description{display:none!important}
}

/* Floating header disappears only after downward movement and reveals
   on upward movement; never hide it while the user navigates the menu. */
.touch-home .glass-header{
  transition:transform .35s cubic-bezier(.22,1,.36,1),
             background .25s ease,box-shadow .25s ease;
  will-change:transform;
}
.touch-home .glass-header.em-home-header-hidden:not(:focus-within){
  transform:translate3d(0,calc(-100% - 36px),0);
}
.touch-home .glass-header:focus-within{transform:translate3d(0,0,0)}

/* MENU 02 / A native-scroll editorial reading hold. The section provides
   travel distance and the inner stage holds at viewport top. Never intercept
   wheel, keyboard, or touch events. A scrubbed photograph-only zoom is
   managed by the already-installed GSAP/ScrollTrigger animation system. */
.touch-home .menu-pause{
  display:block;
  position:relative;
  height:174svh;
  min-height:1120px;
  padding:0;
  overflow:visible;
  isolation:auto;
  background:#19312d;
  color:#f7f8f3;
}
.touch-home .menu-pause__stage{
  display:grid;
  position:sticky;
  top:0;
  width:100%;
  height:100svh;
  min-height:650px;
  align-items:center;
  padding:0;
  overflow:hidden;
  isolation:isolate;
  background:#19312d;
}
.touch-home .menu-pause__photo img{
  object-position:70% 46%;
  transform-origin:67% 46%;
  transform:scale(1.015);
}
.touch-home .menu-pause__veil{
  background:
    linear-gradient(90deg,rgba(13,35,33,.89) 0%,rgba(17,41,39,.80) 31%,
                        rgba(18,38,37,.46) 64%,rgba(15,32,30,.14) 100%),
    linear-gradient(0deg,rgba(6,19,18,.55),transparent 42%,rgba(12,30,27,.16));
}
.touch-home .menu-pause__body{
  width:min(calc(100% - var(--gutter)*2),var(--max));
  padding-top:clamp(92px,9svh,125px);
  padding-bottom:clamp(30px,5svh,70px);
  color:#fff;
}
.touch-home .menu-pause__eyebrow{color:#d2e4d7}
.touch-home .menu-pause h2,.touch-home .menu-pause h2 em{color:#f8f9f6}
.touch-home .menu-pause__copy p{color:#f1f5f0}
.touch-home .menu-pause__footer{
  border-top-color:rgba(255,255,255,.42);
  color:#e4eee6;
  margin-top:clamp(38px,5.5svh,78px);
}
.touch-home .menu-pause__photo{z-index:-3}

/* Glass CTA capsules, one primary button; all other paired actions are
   simple underlined editorial links. Same interaction vocabulary as internal. */
.touch-home .glass-header__book,
.touch-home .intro__actions .button--garnet,
.touch-home .chapter__book,
.touch-home .menu-pause__cta,
.touch-home .real-place__action--primary,
.touch-home .visit--mapped .visit__actions .visit__book,
.touch-home .em-footer__book,
.touch-home .em-mobile-booking{
  display:inline-flex;align-items:center;justify-content:center;
  gap:clamp(16px,2vw,32px);
  min-height:54px;
  padding:13px clamp(23px,2.5vw,38px);
  border:1px solid rgba(248,253,250,.56);
  border-radius:999px;
  background:rgba(19,42,53,.77);
  color:#fff;
  box-shadow:0 12px 32px rgba(9,25,33,.19),inset 0 1px 0 rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(18px) saturate(118%);
  backdrop-filter:blur(18px) saturate(118%);
  font:700 clamp(.75rem,.9vw,.88rem)/1.4 var(--sans);
  letter-spacing:.075em;text-transform:uppercase;text-decoration:none;
  transition:background .23s,border-color .23s,transform .23s,box-shadow .23s;
}
.touch-home .glass-header__book{min-height:43px;padding:10px 20px;min-width:0;background:rgba(255,255,255,.14)}
.touch-home .glass-header__book:hover{background:rgba(255,255,255,.23)}
.touch-home .intro__actions .button--garnet,
.touch-home .real-place__action--primary{background:rgba(19,42,53,.64)}
.touch-home .glass-header__book:hover,
.touch-home .intro__actions .button--garnet:hover,
.touch-home .chapter__book:hover,
.touch-home .menu-pause__cta:hover,
.touch-home .real-place__action--primary:hover,
.touch-home .visit--mapped .visit__actions .visit__book:hover,
.touch-home .em-footer__book:hover,
.touch-home .em-mobile-booking:hover{
  color:#fff;background:rgba(18,41,53,.91);
  border-color:rgba(255,255,255,.82);
  box-shadow:0 16px 39px rgba(9,25,33,.26),inset 0 1px 0 rgba(255,255,255,.17);
  transform:translateY(-2px);
}
.touch-home .chapter__learn,
.touch-home .intro__actions .button--outline-light,
.touch-home .real-place__action:not(.real-place__action--primary),
.touch-home .visit--mapped .visit__actions .button--ink,
.touch-home .visit--mapped .visit__actions .button--outline-ink{
  display:inline-flex;
  align-items:center;justify-content:space-between;
  gap:clamp(16px,2.3vw,42px);
  min-height:0;
  width:auto;
  padding:10px 0 12px;
  border:0;
  border-bottom:1px solid currentColor;
  border-radius:0;
  color:#fff;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  font:700 clamp(.76rem,.9vw,.88rem)/1.45 var(--sans);
  letter-spacing:.075em;
  text-transform:uppercase;text-decoration:none;
  transition:color .23s,border-color .23s;
}
.touch-home .intro__actions .button--outline-light:hover,
.touch-home .real-place__action:not(.real-place__action--primary):hover,
.touch-home .chapter__learn:hover{
  color:#d2e4d7;background:transparent;border-bottom-color:#d2e4d7;
}
.touch-home .visit--mapped .visit__actions .button--ink,
.touch-home .visit--mapped .visit__actions .button--outline-ink{
  color:var(--agate-ocean);
}
.touch-home .visit--mapped .visit__actions .button--ink:hover,
.touch-home .visit--mapped .visit__actions .button--outline-ink:hover{
  color:#1c354d;background:transparent;border-bottom-color:#1c354d;
}
/* Booking is the only filled CTA in Visit Us; maps/contact are secondary. */
.touch-home .visit--mapped .visit__actions .visit__book{
  background:rgba(19,42,53,.84);
}
.touch-home .visit--mapped .visit__actions .button--ink{order:1}
.touch-home .visit--mapped .visit__actions .visit__book{order:0}
.touch-home .visit--mapped .visit__actions .button--outline-ink{order:2}

/* Keep the illustrated menu section distinct from the existing grid/chapter.
   Text is available immediately even if JS fails. */
@media(max-width:1023px){
  .touch-home .menu-pause__body{padding-top:85px}
  .touch-home .menu-pause__layout{gap:28px}
  .touch-home .menu-pause__photo img{object-position:72% 45%}
}
@media(max-width:767px){
  /* Short/mobile viewports keep normal reading flow; no sticky clipping. */
  .touch-home .menu-pause{height:auto;min-height:0;overflow:hidden}
  .touch-home .menu-pause__stage{position:relative;top:auto;height:auto;min-height:690px;padding:74px 0 42px;overflow:hidden}
  .touch-home .menu-pause__body{padding:0}
  .touch-home .menu-pause__photo img{object-position:72% center}
  .touch-home .menu-pause__veil{
    background:
      linear-gradient(180deg,rgba(13,35,33,.82),rgba(13,35,33,.75) 50%,rgba(15,34,32,.57)),
      linear-gradient(90deg,rgba(13,35,33,.46),transparent);
  }
  .touch-home .menu-pause__footer{margin-top:45px}
}
@media(max-width:430px){
  .touch-home .intro__actions .button--outline-light{width:auto;max-width:100%}
  .touch-home .menu-pause__cta{width:auto;max-width:100%}
  .touch-home .real-place--cinematic .real-place__actions{display:flex;flex-wrap:wrap;gap:24px}
  .touch-home .real-place--cinematic .real-place__action{width:auto}
  .touch-home .visit--mapped .visit__actions{display:flex;flex-wrap:wrap;gap:22px}
  .touch-home .visit--mapped .visit__actions .button,
  .touch-home .visit--mapped .visit__actions .visit__book{width:auto;max-width:100%}
}
@media(max-height:680px) and (min-width:768px){
  .touch-home .menu-pause{height:auto;min-height:0}
  .touch-home .menu-pause__stage{position:relative;top:auto;height:auto;min-height:670px;padding:90px 0 40px}
}
@media(prefers-reduced-motion:reduce){
  .touch-home .glass-header{transition:none;will-change:auto}
  .touch-home .menu-pause{height:auto;min-height:0}
  .touch-home .menu-pause__stage{position:relative;top:auto;height:auto;min-height:clamp(670px,90svh,820px);overflow:hidden}
  .touch-home .menu-pause__photo img{transform:none!important;will-change:auto}
  .touch-home .glass-header__book,
  .touch-home .intro__actions .button--garnet,
  .touch-home .chapter__book,
  .touch-home .menu-pause__cta,
  .touch-home .real-place__action,
  .touch-home .visit__actions a,
  .touch-home .em-footer__book,
  .touch-home .em-mobile-booking{transition:none;transform:none}
}

/* 2026-11-06 / The photographic bridge into the first service chapter.
   A deliberately quiet pale still-life replaces the solid ocean-blue canvas
   visible while the SVG blinds start opening. It is an original illustrative
   background only, not a photograph of Elegant Massage facilities.
   Keep Codrops/Hiroki masks, chapter text and native scroll untouched. */
.touch-home .treatments {
  background-color:#f8f7f4;
}
.touch-home .cinema-track{
  background-color:#f8f7f4;
}
.touch-home .at-mask-stage{
  background:
    /* Blend the top edge of the still-life into the ivory section above. */
    linear-gradient(180deg,
      #f8f7f4 0%,
      rgba(248,247,244,.96) 6%,
      rgba(248,247,244,.76) 14%,
      rgba(248,247,244,.34) 24%,
      rgba(248,247,244,0) 34%) center / cover no-repeat,
    linear-gradient(90deg,
      rgba(249,248,245,.995) 0%,
      rgba(249,248,245,.985) 32%,
      rgba(249,248,245,.90) 48%,
      rgba(249,248,245,.38) 69%,
      rgba(249,248,245,.02) 100%) center / cover no-repeat,
    url('../images/elegant-massage-spa-stilllife-blossoms-stones-candle.webp') 64% center / cover no-repeat,
    #f8f7f4;
}
@media(max-width:700px){
  .touch-home .at-mask-stage{
    background:
      linear-gradient(180deg,
        #f8f7f4 0%,
        rgba(248,247,244,.94) 6%,
        rgba(248,247,244,.65) 14%,
        rgba(248,247,244,.22) 25%,
        rgba(248,247,244,0) 35%) center / cover no-repeat,
      linear-gradient(180deg,rgba(249,248,245,.04) 0%,rgba(249,248,245,.13) 56%,rgba(249,248,245,.56) 100%) center / cover no-repeat,
      url('../images/elegant-massage-spa-stilllife-blossoms-stones-candle.webp') 62% center / cover no-repeat,
      #f8f7f4;
  }
}

/* In the original masked mobile sequence, the fallback chapter background
   was opaque. Once the mask engine is active it must be transparent so the
   floral background is genuinely visible before the first blind opens. */
@media(min-height:650px) and (prefers-reduced-motion:no-preference){
  .at-original-active .touch-home .at-mask-stage > .chapter{
    background:transparent;
  }
}


/* ATREZZO / SINGLE 01 introduction, INSIDE the photo + first SVG mask.
   Not a separate block above the photo: the actual DOM intro now lives in
   #atrezzo-mask-stage, before the five masked chapters. Keep text in HTML
   once, and never place a second isolated "intro" section in the flow. */
.touch-home .at-mask-stage > .treatments__opening{
  position:relative;
  z-index:12;
  box-sizing:border-box;
  width:100%;
  max-width:none;
  min-height:100svh;
  margin:0;
  padding:clamp(95px,11svh,145px) clamp(26px,7.6vw,145px) clamp(85px,9svh,120px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  color:var(--ink);
  text-align:left;
  /* Static fallback (short viewports / reduced motion): the same photo
     remains behind the INTRO, not under all five following articles. */
  background:
    linear-gradient(180deg,#f8f7f4 0%,rgba(248,247,244,.32) 17%,rgba(248,247,244,0) 45%,#f8f7f4 100%),
    linear-gradient(90deg,rgba(248,247,244,.91) 0%,rgba(248,247,244,.74) 36%,rgba(248,247,244,.15) 75%,transparent),
    url('../images/elegant-massage-spa-stilllife-blossoms-stones-candle.webp') 64% center / cover no-repeat,
    #f8f7f4;
}
.touch-home .at-mask-stage > .treatments__opening > :is(.eyebrow,h2,p,.chapter-jump){
  margin-left:0;
  margin-right:0;
  text-align:left;
}
.touch-home .at-mask-stage > .treatments__opening h2{
  max-width:min(720px,60vw);
  font-size:clamp(3.5rem,6.7vw,8rem);
  line-height:.98;
  text-wrap:balance;
  margin-top:clamp(18px,2vw,30px);
  margin-bottom:clamp(24px,3vw,40px);
}
.touch-home .at-mask-stage > .treatments__opening > p:not(.eyebrow){
  max-width:49ch;
  line-height:1.65;
}
.touch-home .at-mask-stage > .treatments__opening .chapter-jump{
  max-width:100%;
  margin-top:clamp(32px,5svh,55px);
}
/* In the animated SVG-mask track, this is ONE full-frame copy layer:
   100% overlay, transparent, over the same single photographic canvas. */
@media(min-height:650px) and (prefers-reduced-motion:no-preference){
  .at-original-active .touch-home .at-mask-stage > .treatments__opening{
    position:absolute;
    inset:0;
    height:100%;
    min-height:0;
    /* A soft, temporary reading veil accompanies the SINGLE intro only.
       It fades with the text, so it never obscures Body Massage's mask. */
    background:linear-gradient(90deg,
      rgba(248,247,244,.985) 0%,
      rgba(248,247,244,.95) 27%,
      rgba(248,247,244,.82) 43%,
      rgba(248,247,244,.42) 59%,
      rgba(248,247,244,0) 83%);
    isolation:auto;
    will-change:opacity,transform;
  }
}
/* Maintain a visibly photographic left margin, rather than an opaque ivory
   plate that makes a vertical split seem to exist despite background-size. */
.touch-home .at-mask-stage{
  background:
    linear-gradient(180deg,
      #f8f7f4 0%,rgba(248,247,244,.94) 6%,
      rgba(248,247,244,.66) 15%,rgba(248,247,244,.25) 26%,
      rgba(248,247,244,0) 36%),
    linear-gradient(90deg,
      rgba(248,247,244,.78) 0%,
      rgba(248,247,244,.66) 28%,
      rgba(248,247,244,.35) 54%,
      rgba(248,247,244,.03) 88%),
    url('../images/elegant-massage-spa-stilllife-blossoms-stones-candle.webp') 64% center / cover no-repeat,
    #f8f7f4;
}
@media(max-width:700px) and (min-height:650px) and (prefers-reduced-motion:no-preference){
  .at-original-active .touch-home .at-mask-stage > .treatments__opening{
    /* More opacity exactly where the narrow text column crosses the bowl. */
    background:linear-gradient(180deg,
      rgba(248,247,244,.12) 0%,
      rgba(248,247,244,.88) 23%,
      rgba(248,247,244,.94) 50%,
      rgba(248,247,244,.88) 74%,
      rgba(248,247,244,.06) 100%);
  }
}
@media(max-width:1023px){
  .touch-home .at-mask-stage > .treatments__opening{
    padding-inline:clamp(30px,6vw,75px);
    min-height:clamp(730px,100svh,980px);
  }
  .touch-home .at-mask-stage > .treatments__opening h2{
    max-width:min(670px,76vw);
    font-size:clamp(3.7rem,8.5vw,6rem);
  }
}
@media(max-width:700px){
  .touch-home .at-mask-stage > .treatments__opening{
    min-height:740px;
    padding:clamp(98px,12svh,130px) var(--gutter) 96px;
    background:
      linear-gradient(180deg,#f8f7f4 0%,rgba(248,247,244,.7) 16%,rgba(248,247,244,.35) 52%,#f8f7f4 100%),
      linear-gradient(90deg,rgba(248,247,244,.76),rgba(248,247,244,.25)),
      url('../images/elegant-massage-spa-stilllife-blossoms-stones-candle.webp') 60% center / cover no-repeat,
      #f8f7f4;
  }
  .touch-home .at-mask-stage > .treatments__opening h2{
    max-width:100%;
    font-size:clamp(3.1rem,11vw,5.1rem);
    text-wrap:wrap;
  }
  .touch-home .at-mask-stage > .treatments__opening > p:not(.eyebrow){max-width:38ch}
  .touch-home .at-mask-stage > .treatments__opening .chapter-jump{max-width:335px;margin-top:32px}
  .touch-home .at-mask-stage{
    background:
      linear-gradient(180deg,#f8f7f4 0%,rgba(248,247,244,.8) 9%,rgba(248,247,244,.30) 24%,transparent 38%),
      linear-gradient(90deg,rgba(248,247,244,.54),rgba(248,247,244,.06)),
      url('../images/elegant-massage-spa-stilllife-blossoms-stones-candle.webp') 60% center / cover no-repeat,
      #f8f7f4;
  }
}

/* ATREZZO 2026-11-07 / Home hero and handoff refinement, user-authorized.
   Only the intro and the gallery-to-mask seam are affected. */
/* The generic Agate eyebrow rule was overriding the light caption on video. */
.touch-home .intro__content > .eyebrow.eyebrow--light {
  color:#FAF8F2;
  opacity:1;
  text-shadow:0 2px 14px rgba(0,0,0,.78),0 0 2px rgba(0,0,0,.35);
  letter-spacing:.18em;
}
.touch-home .intro__content > p:not(.eyebrow) {
  color:#FAF8F2;
  text-shadow:0 2px 14px rgba(0,0,0,.72);
}
/* Preserve ONE primary booking action, but with the light visual weight of
   translucent smoked glass, not a filled callout competing with the H1. */
.touch-home .intro__actions .button--garnet{
  width:auto;
  min-height:47px;
  padding:11px 20px;
  gap:19px;
  border:1px solid rgba(255,255,255,.49);
  border-radius:999px;
  background:rgba(22,38,45,.28);
  color:#FAF8F2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(15px) saturate(110%);
  backdrop-filter:blur(15px) saturate(110%);
  font-weight:600;
  font-size:.77rem;
  letter-spacing:.075em;
}
.touch-home .intro__actions .button--garnet:hover,
.touch-home .intro__actions .button--garnet:focus-visible{
  color:#fff;
  background:rgba(21,40,48,.55);
  border-color:rgba(255,255,255,.79);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.19);
}
.touch-home .intro__actions .button--outline-light{
  font-weight:600;
  font-size:.77rem;
  letter-spacing:.075em;
}
@media(max-width:700px){
  .touch-home .intro__actions .button--garnet{
    width:auto;
    min-width:0;
    max-width:100%;
    min-height:46px;
    padding:11px 20px;
  }
}
/* One continuous photograph behind the single introductory copy block.
   Masked images render above this layer; no alternative stand-alone section. */
@media(min-height:650px) and (prefers-reduced-motion:no-preference){
  .at-original-active .touch-home .cinema-track{
    /* The +115svh is reading time, not a sixth service chapter. */
    height:881.6667vh;
    height:881.6667svh;
  }
  .at-original-active .touch-home .at-mask-stage{
    --at-intro-scale:1;
  }
  .at-original-active .touch-home .at-mask-stage::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    transform:scale(var(--at-intro-scale,1));
    transform-origin:66% 52%;
    will-change:transform;
    background:
      linear-gradient(180deg,
        #f8f7f4 0%,
        rgba(248,247,244,.94) 6%,
        rgba(248,247,244,.66) 15%,
        rgba(248,247,244,.25) 26%,
        rgba(248,247,244,0) 36%),
      linear-gradient(90deg,
        rgba(248,247,244,.78) 0%,
        rgba(248,247,244,.66) 28%,
        rgba(248,247,244,.35) 54%,
        rgba(248,247,244,.03) 88%),
      url('../images/elegant-massage-spa-stilllife-blossoms-stones-candle.webp') 64% center / cover no-repeat,
      #f8f7f4;
  }
}
/* Melt the gallery's true white (#fff) into the floral scene; the edge is
   independent of the zoom and preserves the editorial reading position. */
.touch-home .at-mask-stage::after{
  content:"";
  position:absolute;
  top:-1px;left:0;right:0;
  height:clamp(105px,19svh,240px);
  z-index:10;
  pointer-events:none;
  /* Only the gallery-to-floral handoff needs white. The value is
     scrubbed to zero BEFORE any treatment SVG blinds become visible. */
  opacity:var(--at-gallery-fade-opacity,1);
  background:linear-gradient(180deg,
    #fff 0%,
    rgba(255,255,255,.96) 12%,
    rgba(255,255,255,.78) 28%,
    rgba(255,255,255,.30) 65%,
    rgba(255,255,255,0) 100%);
}
@media(max-width:700px){
  .touch-home .at-mask-stage::after{height:clamp(100px,17svh,170px)}
  .at-original-active .touch-home .at-mask-stage::before{
    transform-origin:60% 47%;
    background:
      linear-gradient(180deg,
        #f8f7f4 0%,rgba(248,247,244,.8) 9%,
        rgba(248,247,244,.30) 24%,transparent 38%),
      linear-gradient(90deg,rgba(248,247,244,.54),rgba(248,247,244,.06)),
      url('../images/elegant-massage-spa-stilllife-blossoms-stones-candle.webp') 60% center / cover no-repeat,
      #f8f7f4;
  }
}
@media(prefers-reduced-motion:reduce){
  .touch-home .at-mask-stage::after{height:clamp(105px,19svh,220px)}
  .touch-home .at-mask-stage::before{content:none}
}

/* ATREZZO / 2026-11-07 / Two closing scenes: supplied backgrounds + native-scroll holds. */
/* The Home has one photographic chapter for the actual business and one
   location chapter, each with a single genuine map. Only the BACKGROUND
   images are zoomed; the text, buttons and map stay completely stationary.
   Never intercept touch, wheel, keyboard or navigation to emulate a stop. */
.touch-home .real-place--cinematic{
  display:block;
  min-height:0;
  padding:0;
  background:#1d3540;
  isolation:auto;
  overflow:visible;
}
.touch-home .real-place--cinematic .real-place__stage{
  position:relative;
  display:grid;
  align-items:center;
  width:100%;
  min-height:clamp(700px,100svh,1050px);
  padding:clamp(92px,10svh,130px) 0 clamp(54px,7svh,88px);
  overflow:hidden;
  isolation:isolate;
}
.touch-home .real-place--cinematic .real-place__scene{z-index:0}
.touch-home .real-place--cinematic .real-place__scrim{z-index:1}
.touch-home .real-place--cinematic .real-place__inner{z-index:2}
.touch-home .real-place--cinematic .real-place__scene img{
  object-position:61% 50%;
  transform:scale(1.01);
  transform-origin:65% 50%;
}
.touch-home .real-place--cinematic .real-place__scrim{
  background:
    linear-gradient(90deg,
      rgba(11,28,37,.75) 0%,rgba(11,28,37,.66) 30%,
      rgba(11,28,37,.40) 60%,rgba(11,28,37,.09) 100%),
    linear-gradient(0deg,rgba(7,18,25,.45),transparent 38%);
}
.touch-home .real-place--cinematic .real-place__source{
  color:rgba(255,255,255,.84);
  margin-top:clamp(30px,5svh,65px);
  max-width:580px;
}
/* Approved design language: one light, smoked-glass capsule; the other
   action is an underlined editorial text link, not a second button. */
.touch-home .real-place--cinematic .real-place__action--primary{
  min-height:49px;
  padding:11px 22px;
  border:1px solid rgba(255,255,255,.54);
  border-radius:999px;
  background:rgba(18,39,49,.37);
  color:#fff;
  -webkit-backdrop-filter:blur(16px) saturate(112%);
  backdrop-filter:blur(16px) saturate(112%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
  letter-spacing:.075em;
}
.touch-home .real-place--cinematic .real-place__action--primary:hover,
.touch-home .real-place--cinematic .real-place__action--primary:focus-visible{
  background:rgba(18,39,49,.72);
  border-color:rgba(255,255,255,.82);
  color:#fff;
}
.touch-home .real-place--cinematic .real-place__action:not(.real-place__action--primary){
  min-height:44px;
  padding:10px 0 12px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.79);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#fff;
}
/* The floral background is a true entire-section photographic layer. The
   live Google map remains in front and retains normal pointer interaction. */
.touch-home .visit--mapped{
  position:relative;
  display:block;
  min-height:0;
  padding:0;
  background:#f8f7f4;
  isolation:auto;
  overflow:visible;
}
.touch-home .visit--mapped .visit__stage{
  position:relative;
  display:grid;
  align-items:center;
  min-height:clamp(850px,100svh,1100px);
  width:100%;
  padding:clamp(65px,8svh,100px) 0;
  overflow:hidden;
  isolation:isolate;
  background:#f8f7f4;
}
.touch-home .visit--mapped .visit__backdrop,
.touch-home .visit--mapped .visit__veil{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  pointer-events:none;
}
.touch-home .visit--mapped .visit__backdrop{
  overflow:hidden;
  z-index:0;
}
.touch-home .visit--mapped .visit__backdrop img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.01);
  transform-origin:64% 51%;
  will-change:transform;
}
.touch-home .visit--mapped .visit__veil{
  z-index:1;
  background:
    linear-gradient(90deg,
      rgba(250,249,247,.92) 0%,rgba(250,249,247,.80) 32%,
      rgba(250,249,247,.51) 61%,rgba(250,249,247,.33) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.28),transparent 26%,
      transparent 75%,rgba(250,249,247,.48));
}
.touch-home .visit--mapped .visit__grid{
  position:relative;
  z-index:2;
}
.touch-home .visit--mapped .visit__map-frame{
  background:#fff;
  border-color:rgba(37,68,96,.26);
  box-shadow:0 22px 64px rgba(27,50,63,.14);
}
.touch-home .visit--mapped .visit__details,
.touch-home .visit--mapped .visit__map-column{
  position:relative;
  z-index:2;
}
/* At this Home location the user explicitly requested ALL THREE actions as
   plain text. Their hrefs remain functional, and the booking link is kept. */
.touch-home .visit--mapped .visit__actions .button,
.touch-home .visit--mapped .visit__actions .visit__book{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(13px,1.6vw,28px);
  width:auto;
  max-width:100%;
  min-width:0;
  min-height:44px;
  margin:0;
  padding:10px 0 12px;
  border:0;
  border-bottom:1px solid currentColor;
  border-radius:0;
  background:transparent;
  color:#254460;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  text-decoration:none;
  font:700 clamp(.74rem,.88vw,.86rem)/1.4 var(--sans);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.touch-home .visit--mapped .visit__actions .button:hover,
.touch-home .visit--mapped .visit__actions .visit__book:hover,
.touch-home .visit--mapped .visit__actions .button:focus-visible,
.touch-home .visit--mapped .visit__actions .visit__book:focus-visible{
  transform:none;
  color:#17364c;
  background:transparent;
  border-color:#17364c;
  box-shadow:none;
}
.touch-home .visit--mapped .visit__actions{gap:clamp(16px,2vw,30px)}
/* An actual pause: sticky storytelling stages with a full viewport and extra
   native scroll distance before the next chapter is allowed to enter. */
@media(min-width:768px) and (min-height:681px) and (prefers-reduced-motion:no-preference){
  .touch-home .real-place--cinematic{
    height:188svh;
    min-height:0;
    overflow:visible;
  }
  .touch-home .real-place--cinematic .real-place__stage{
    position:sticky;
    top:0;
    height:100svh;
    min-height:0;
    padding:clamp(70px,8svh,98px) 0 clamp(48px,6svh,70px);
  }
  .touch-home .visit--mapped{
    height:186svh;
    min-height:0;
  }
  .touch-home .visit--mapped .visit__stage{
    position:sticky;
    top:0;
    height:100svh;
    min-height:0;
    padding:clamp(48px,6svh,76px) 0;
  }
}
@media(max-width:767px){
  .touch-home .real-place--cinematic,
  .touch-home .visit--mapped{
    height:auto;
    min-height:0;
    padding:0;
  }
  .touch-home .real-place--cinematic .real-place__stage{
    position:relative;top:auto;height:auto;
    min-height:max(710px,100svh);
    padding:95px 0 53px;
  }
  .touch-home .real-place--cinematic .real-place__scene img{
    object-position:68% center;
  }
  .touch-home .real-place--cinematic .real-place__scrim{
    background:
      linear-gradient(90deg,rgba(9,27,35,.86),rgba(11,29,37,.56)),
      linear-gradient(0deg,rgba(9,27,35,.37),transparent 48%);
  }
  .touch-home .visit--mapped .visit__stage{
    position:relative;top:auto;height:auto;
    min-height:0;padding:90px 0 93px;
  }
  .touch-home .visit--mapped .visit__veil{
    background:
      linear-gradient(180deg,
        rgba(250,249,247,.95),rgba(250,249,247,.86) 47%,
        rgba(250,249,247,.76) 73%,rgba(250,249,247,.93)),
      linear-gradient(90deg,rgba(250,249,247,.55),transparent);
  }
  .touch-home .visit--mapped .visit__actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px 20px;
    width:100%;
  }
  .touch-home .visit--mapped .visit__actions .button,
  .touch-home .visit--mapped .visit__actions .visit__book{
    width:auto;
    grid-column:auto;
  }
}
@media(max-height:680px) and (min-width:768px){
  .touch-home .real-place--cinematic,
  .touch-home .visit--mapped{height:auto;min-height:0;padding:0}
  .touch-home .real-place--cinematic .real-place__stage,
  .touch-home .visit--mapped .visit__stage{
    position:relative;top:auto;height:auto;min-height:0;
  }
}
@media(prefers-reduced-motion:reduce){
  .touch-home .real-place--cinematic,
  .touch-home .visit--mapped{height:auto;min-height:0;padding:0}
  .touch-home .real-place--cinematic .real-place__stage,
  .touch-home .visit--mapped .visit__stage{
    position:relative;top:auto;height:auto;min-height:0;
  }
  .touch-home .real-place--cinematic .real-place__scene img,
  .touch-home .visit--mapped .visit__backdrop img{
    transform:none!important;will-change:auto;
  }
}

/* 2026-11-09 — Mobile editorial corrections.
   The 12-photo Sticky Grid is intentionally DESKTOP/TABLET only. On phones,
   move directly from the cinematic hero to the five treatment photographs. */
@media(max-width:870px){
 .touch-home #atrezzo-original-grid{display:none!important}
}
/* Phone treatment chapters use a dedicated native-scroll track: full-screen
   photo + copy, one reading hold, then the next image wipes down over it.
   No forced snap, no scroll-lock, and reversing scroll is supported. */
@media(max-width:870px) and (min-height:540px) and (prefers-reduced-motion:no-preference){
 .em-mobile-photo-slides .touch-home #cinema-track{
   position:relative!important;height:auto!important;overflow:visible!important;
   background:#111!important;isolation:isolate;
 }
 .em-mobile-photo-slides .touch-home #atrezzo-mask-stage{
   position:relative!important;top:auto!important;height:auto!important;
   overflow:visible!important;display:block!important;isolation:isolate;
   background:#111!important;
 }
 .em-mobile-photo-slides .touch-home #atrezzo-mask-stage > .treatments__opening{
   position:relative!important;inset:auto!important;height:auto!important;
   min-height:0!important;opacity:1!important;visibility:visible!important;
   transform:none!important;pointer-events:auto!important;
   background:#f8f7f4!important;padding:78px 22px 65px!important;
   isolation:isolate;
 }
 .em-mobile-photo-slides .touch-home #atrezzo-mask-stage > .chapter{
   position:sticky!important;top:0!important;inset:auto!important;
   height:100svh!important;min-height:0!important;
   display:flex!important;align-items:flex-end!important;
   overflow:hidden!important;isolation:isolate;
   margin:0 0 66svh!important;
   padding:105px 22px max(64px,9svh)!important;
   pointer-events:auto!important;
   clip-path:inset(calc(var(--em-mobile-slide-wipe,0)*100%) 0 0 0)!important;
   background:#111!important;
 }
 .em-mobile-photo-slides .touch-home #atrezzo-mask-stage > .chapter:nth-of-type(1){z-index:1}
 .em-mobile-photo-slides .touch-home #atrezzo-mask-stage > .chapter:nth-of-type(2){z-index:2}
 .em-mobile-photo-slides .touch-home #atrezzo-mask-stage > .chapter:nth-of-type(3){z-index:3}
 .em-mobile-photo-slides .touch-home #atrezzo-mask-stage > .chapter:nth-of-type(4){z-index:4}
 .em-mobile-photo-slides .touch-home #atrezzo-mask-stage > .chapter:nth-of-type(5){z-index:5;margin-bottom:0!important}
 .em-mobile-photo-slides .touch-home #atrezzo-mask-stage > .chapter:first-of-type{clip-path:none!important}
 .em-mobile-photo-slides .touch-home .chapter__image{
   display:block!important;position:absolute!important;inset:0!important;
   z-index:-2!important;width:100%;height:100%;
 }
 .em-mobile-photo-slides .touch-home .chapter__image img{
   width:100%;height:100%;object-fit:cover;
   transform:scale(var(--em-mobile-slide-zoom,1.015));
 }
 .em-mobile-photo-slides .touch-home .chapter__shade{
   display:block!important;position:absolute!important;inset:0!important;z-index:-1!important;
   background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.44) 48%,rgba(0,0,0,.15) 100%)!important;
 }
 .em-mobile-photo-slides .touch-home .chapter__content{
   position:relative!important;z-index:2!important;
   width:100%!important;max-width:100%;margin:0!important;
   clip-path:none!important;opacity:1!important;visibility:visible!important;
   transform:none!important;pointer-events:auto!important;
   text-align:left;
 }
 .em-mobile-photo-slides .touch-home .chapter h3{
   font-size:clamp(3.9rem,14vw,6.4rem)!important;line-height:.91!important;
   max-width:100%;margin:18px 0 18px;
 }
 .em-mobile-photo-slides .touch-home .chapter__content > p:not(.chapter__index):not(.chapter__duration){
   font-size:.95rem;line-height:1.55;max-width:43ch;
 }
 .em-mobile-photo-slides .touch-home .chapter__duration{margin:19px 0 21px}
 .em-mobile-photo-slides .touch-home .chapter__actions{gap:12px 22px}
 .em-mobile-photo-slides .touch-home .at-mask-layer,
 .em-mobile-photo-slides .touch-home .at-mask-progress{display:none!important}
 /* The last chapter retains its own reading pause before Menu 02 enters. */
 .em-mobile-photo-slides .touch-home #atrezzo-mask-stage::after{
   content:"";display:block;height:73svh;pointer-events:none;background:#111;
 }
}
/* Native sticky reading holds on phones with sufficient vertical space.
   Short landscape displays and reduced-motion users retain ordinary flow. */
@media(max-width:870px) and (min-height:740px) and (prefers-reduced-motion:no-preference){
 .touch-home .menu-pause{height:176svh!important;min-height:0!important;overflow:visible!important}
 .touch-home .menu-pause .menu-pause__stage{
   position:sticky!important;top:0!important;height:100svh!important;
   min-height:0!important;overflow:hidden!important;
   padding:clamp(28px,5svh,55px) 0!important;
 }
 .touch-home .menu-pause .menu-pause__body{padding:0!important}
 .touch-home .menu-pause h2{font-size:clamp(3.1rem,10vw,5rem);line-height:.98}
 .touch-home .menu-pause__footer{margin-top:24px}
 .touch-home .real-place--cinematic{height:175svh!important;min-height:0!important;overflow:visible!important}
 .touch-home .real-place--cinematic .real-place__stage{
   position:sticky!important;top:0!important;height:100svh!important;
   min-height:0!important;overflow:hidden!important;
   padding:clamp(40px,6svh,70px) 0!important;
 }
 .touch-home .real-place--cinematic h2{font-size:clamp(3.2rem,10.5vw,5rem)!important}
 .touch-home .real-place--cinematic .real-place__source{margin-top:24px!important}
}
/* All photographic dark grades are NEUTRAL BLACK rather than green/teal.
   Light legibility layer over the visit/map photograph is intentionally kept. */
.touch-home .menu-pause .menu-pause__veil{
 background:linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.61) 55%,rgba(0,0,0,.24)),
 linear-gradient(0deg,rgba(0,0,0,.47),transparent 48%)!important;
}
.touch-home .real-place--cinematic .real-place__scrim{
 background:linear-gradient(90deg,rgba(0,0,0,.79),rgba(0,0,0,.54) 56%,rgba(0,0,0,.12)),
 linear-gradient(0deg,rgba(0,0,0,.46),transparent 45%)!important;
}
.touch-home .chapter__shade{
 background:linear-gradient(90deg,rgba(0,0,0,.77),rgba(0,0,0,.28) 64%,rgba(0,0,0,.10)),
 linear-gradient(0deg,rgba(0,0,0,.65),transparent 67%)!important;
}

/* iPhone photographic direction: prioritize hands and subjects, not a shared
   50/50 landscape crop. Each service can be framed independently. */
@media(max-width:870px) and (min-height:540px) and (prefers-reduced-motion:no-preference){
 .em-mobile-photo-slides .touch-home .chapter__image{background:#101010}
 .em-mobile-photo-slides .touch-home .chapter__image img{
   object-fit:cover!important;
   object-position:var(--em-photo-x,50%) var(--em-photo-y,45%)!important;
 }
 .em-mobile-photo-slides .touch-home .chapter--body{--em-photo-x:57%;--em-photo-y:48%}
 .em-mobile-photo-slides .touch-home .chapter--combo{--em-photo-x:50%;--em-photo-y:50%}
 .em-mobile-photo-slides .touch-home .chapter--couples{--em-photo-x:51%;--em-photo-y:49%}
 .em-mobile-photo-slides .touch-home .chapter--chair{--em-photo-x:49%;--em-photo-y:42%}
 .em-mobile-photo-slides .touch-home .chapter--four{--em-photo-x:48%;--em-photo-y:46%}
}
/* Hide mosaic across ALL responsive phone orientations, before/after JS.
   The interaction engine adds the hidden property as a second safeguard. */
@media(max-width:870px){
 .touch-home #atrezzo-original-grid,
 .touch-home #atrezzo-original-grid[hidden]{display:none!important}
}

/* ATREZZO / MENU 02 — approved lower mobile editorial alignment.
   Match the vertical anchoring of the treatment scenes above without touching
   images, sticky scroll timing, CTA styling, tablet or desktop. */
@media (max-width:767px) and (min-height:740px) and (prefers-reduced-motion:no-preference){
  .touch-home #massage-menu-preview .menu-pause__stage{
    align-items:end!important;
    padding-top:clamp(16px,2svh,25px)!important;
    padding-bottom:calc(98px + env(safe-area-inset-bottom,0px))!important;
  }
  .touch-home #massage-menu-preview .menu-pause__body{
    padding:0!important;
    margin:0 auto!important;
  }
  .touch-home #massage-menu-preview .menu-pause__layout{
    margin-top:16px!important;
    gap:16px!important;
  }
  .touch-home #massage-menu-preview .menu-pause__copy p{
    margin-bottom:16px!important;
  }
  .touch-home #massage-menu-preview .menu-pause__footer{
    margin-top:17px!important;
    padding-top:15px!important;
  }
}