[hidden]{display:none !important}
:root{
  --w-color:#F3D9D8; --w-accent:#231F20; --gold:#B08D57;
  --porcelain:#F1ECE9; --surface:#FAF6F4; --blush:var(--w-color); --blush-deep:color-mix(in srgb,var(--w-color) 82%,#8C6C63);
  --rose-ink:color-mix(in srgb,var(--w-accent) 45%,#8C6C63); --ink:#231F20; --muted:#6E6360;
  --line:rgba(35,31,32,.13); --sage-deep:#557058; --night:#231F20;
  --bg:var(--porcelain); --text:var(--ink); --on-dark:#F1ECE9;
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Avenir Next","Avenir","Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1180px; --ease:cubic-bezier(.22,.61,.36,1); --head:72px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#121011; --surface:#1C1819; --text:#F1ECE9; --muted:#A99D99; --line:rgba(241,236,233,.12); --gold:#CDB287;
  --blush:color-mix(in srgb,var(--w-color) 16%,#121011); --blush-deep:color-mix(in srgb,var(--w-color) 26%,#121011); --porcelain:#121011; --night:#0A0909;
  --sage-deep:#9FBFA2; --rose-ink:#E0B9B3; color-scheme:dark;
}
:root[data-theme="dark"] .logo-ink{filter:invert(1) brightness(.93)}
:root[data-theme="dark"] .tinted{background:color-mix(in srgb,var(--room) 12%,#121011) !important}

html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--head) + 16px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background-color .5s, color .5s}
body.locked{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit}
button{font-family:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; margin:0; line-height:1.06; letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,4vw,48px)}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--rose-ink); outline-offset:3px}

.btn{--b:var(--w-accent); display:inline-flex; align-items:center; justify-content:center; gap:.5em; font:600 15px/1 var(--sans); letter-spacing:.02em; padding:16px 28px; border-radius:999px; text-decoration:none; border:1px solid var(--b); background:var(--b); color:#F7F3F0; cursor:pointer; transition:background .3s,color .3s,opacity .3s}
@media (hover:hover){ .btn:hover{background:transparent; color:var(--b)} }
.btn.ghost{background:transparent; color:var(--b)}
:root[data-theme="dark"] .btn{--b:var(--text); color:var(--bg)}
@media (hover:hover){ .btn.ghost:hover{background:var(--b); color:#F7F3F0} :root[data-theme="dark"] .btn.ghost:hover{color:var(--bg)} }
.btn.light{background:var(--on-dark); color:#231F20; border-color:var(--on-dark)}
@media (hover:hover){ .btn.light:hover{background:transparent; color:var(--on-dark)} }
.btn[disabled]{opacity:.35; pointer-events:none}
.link{font-weight:600; font-size:15px; text-decoration:none; border:0; border-bottom:1px solid currentColor; padding:0 0 2px; background:none; cursor:pointer}

.ph{position:relative; background:linear-gradient(160deg,var(--blush) 0%,var(--blush-deep) 100%); overflow:hidden}
.ph::after{content:attr(data-label); position:absolute; left:50%; bottom:14px; transform:translateX(-50%); font:600 12px/1 var(--sans); letter-spacing:.03em; color:var(--rose-ink); background:rgba(255,255,255,.6); padding:7px 12px; border-radius:99px; white-space:nowrap; max-width:90%; overflow:hidden; text-overflow:ellipsis}
:root[data-theme="dark"] .ph::after{background:rgba(0,0,0,.35); color:#E6C3BF}
.ph[data-label=""]::after{display:none}
.ph img,.ph video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ph.filled::after{display:none}
.oval{border-radius:50%}

.section{padding:clamp(70px,9vw,120px) 0}
.flush{padding-top:0}
.sec-head{display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap}
.sec-head h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.sec-head p{max-width:26em; color:var(--muted)}

/* Reveal (works on mobile, respects reduced motion) */
.rv{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--i,0) * 90ms)}
.rv.in{opacity:1; transform:none}

/* ---------- Envelope ---------- */
.note{position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:radial-gradient(120% 90% at 50% 40%,#F8E6E4 0%,#EFCFCC 70%,#E6BFBB 100%); transition:opacity .9s var(--ease), visibility .9s; overflow:hidden; padding:env(safe-area-inset-top,0px) 20px env(safe-area-inset-bottom,0px)}
:root[data-theme="dark"] .note{background:radial-gradient(120% 90% at 50% 40%,#3A2B2C 0%,#1E1718 75%,#121011 100%)}
:root[data-theme="dark"] .note-prompt{color:#F1ECE9}
.note.gone{opacity:0; visibility:hidden}
.note-inner{display:flex; flex-direction:column; align-items:center; gap:28px; width:min(440px,100%); padding-top:clamp(40px,12vh,120px)}
.note-prompt{font-family:var(--serif); font-size:clamp(1.3rem,3.4vw,1.6rem); color:#5E4540; text-align:center; transition:opacity .5s}
.note-prompt small{display:block; font:400 14px/1.4 var(--sans); color:#8C6C63; margin-top:6px}
.note.open .note-prompt{opacity:0}
.envelope{position:relative; width:min(360px,86vw); aspect-ratio:1.45; border:0; padding:0; background:none; cursor:pointer; perspective:1200px; -webkit-tap-highlight-color:transparent; animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.note.open .envelope{animation:none; cursor:default}
.envelope:focus:not(:focus-visible){outline:none}
.env-back{position:absolute; inset:0; background:#E3C4C0; border-radius:6px; box-shadow:0 30px 60px -25px rgba(94,69,64,.45)}
.env-card{position:absolute; left:5%; right:5%; top:6%; height:88%; z-index:2; background:#FBF7F5; border-radius:4px; padding:10% 9% 8%; display:flex; flex-direction:column; justify-content:center; text-align:center; transition:transform 1.1s var(--ease) 1.1s, box-shadow 1.1s}
.note.open .env-card{transform:translateY(-78%) scale(1.06); box-shadow:0 30px 50px -25px rgba(94,69,64,.4)}
.env-card .msg{font-family:var(--serif); font-size:clamp(1.15rem,3.6vw,1.4rem); line-height:1.35; color:#2E2526}
.env-card .sig{margin-top:14px; font-size:13px; color:#8C6C63}
.env-front{position:absolute; inset:0; z-index:3; background:linear-gradient(180deg,#EDD3CF,#E8CAC6); clip-path:polygon(0 0,50% 64%,100% 0,100% 100%,0 100%); border-radius:0 0 6px 6px}
.env-front::before{content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.35),transparent 40%)}
.env-flap{position:absolute; left:0; right:0; top:0; height:68%; z-index:4; background:linear-gradient(180deg,#E9CDC9,#E1BFBA); clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:top center; transition:transform .8s var(--ease) .35s, z-index 0s linear .75s}
.note.open .env-flap{transform:rotateX(180deg); z-index:1}
.seal{position:absolute; left:50%; top:62%; z-index:5; width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#C99F94,#A77B70 60%,#8E655B); box-shadow:0 6px 14px -4px rgba(94,50,40,.55), inset 0 0 0 5px rgba(255,255,255,.08); display:grid; place-items:center; transition:transform .45s var(--ease), opacity .45s}
.seal img{width:34px; filter:invert(1) brightness(1.4)}
.note.open .seal{transform:scale(1.35); opacity:0}
.note-actions{opacity:0; transform:translateY(10px); transition:opacity .6s, transform .6s; pointer-events:none}
.note.ready .note-actions{opacity:1; transform:none; pointer-events:auto}
.note .btn{background:#2E2526; border-color:#2E2526; color:#F1ECE9}
@media (hover:hover){ .note .btn:hover{background:transparent; color:#2E2526} }
:root[data-theme="dark"] .note .btn{background:#F1ECE9; border-color:#F1ECE9; color:#231F20}
.note-skip{position:absolute; top:calc(env(safe-area-inset-top,0px) + 18px); right:20px; background:none; border:0; font:600 13px var(--sans); color:#8C6C63; cursor:pointer; padding:8px}

/* ---------- Header ---------- */
.top{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex; align-items:center; gap:22px; height:var(--head)}
.brand img{height:28px; width:auto}
.nav{display:flex; gap:24px; margin-left:auto}
.nav a{text-decoration:none; font-size:15px; color:var(--muted); transition:color .2s; padding:6px 0; border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]{border-bottom-color:currentColor}
.icon-btn{width:42px; height:42px; flex:none; border-radius:50%; border:1px solid var(--line); background:transparent; display:grid; place-items:center; cursor:pointer; transition:border-color .3s}
.icon-btn:hover{border-color:var(--text)}
.icon-btn svg{width:18px; height:18px}
.theme-btn .moon{display:none} :root[data-theme="dark"] .theme-btn .sun{display:none} :root[data-theme="dark"] .theme-btn .moon{display:block}
.room-btn{white-space:nowrap; display:inline-flex; align-items:center; gap:10px; border:1px solid var(--text); background:transparent; border-radius:99px; padding:11px 18px; font:600 14px/1 var(--sans); cursor:pointer}
.room-btn .count{min-width:22px; height:22px; padding:0 6px; border-radius:99px; background:var(--text); color:var(--bg); display:inline-grid; place-items:center; font-size:12px}
.room-btn.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.1)}}
.menu-btn{display:none; background:none; border:0; font:600 14px var(--sans); cursor:pointer; padding:8px 0}
.mnav{position:fixed; inset:0; z-index:80; display:flex; flex-direction:column; overflow-y:auto;
  background:var(--blush); background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 22px,rgba(35,31,32,.035) 22px 44px);
  padding:calc(env(safe-area-inset-top,0px) + 16px) 22px calc(env(safe-area-inset-bottom,0px) + 24px);
  clip-path:inset(0 0 100% 0); visibility:hidden; transition:clip-path .75s cubic-bezier(.7,0,.2,1), visibility .75s}
.mnav.open{clip-path:inset(0 0 0 0); visibility:visible}
.mn-top{display:flex; justify-content:space-between; align-items:center; padding-bottom:10px}
.mn-top img{height:26px}
.mn-close{background:rgba(255,255,255,.55); border:0; border-radius:99px; padding:10px 16px; font:600 14px var(--sans); cursor:pointer}
:root[data-theme="dark"] .mn-close{background:rgba(0,0,0,.3)}
.mn-doors{margin:auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px 14px; padding:28px 4px}
.mn-door{display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; opacity:0; transform:translateY(-26px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(var(--i) * 70ms + 250ms)}
.mnav.open .mn-door{opacity:1; transform:none}
.mn-door i{display:block; width:100%; aspect-ratio:3/4; border-radius:999px 999px 10px 10px; background:var(--c); border:1px solid rgba(35,31,32,.12); position:relative; box-shadow:0 18px 30px -22px rgba(94,69,64,.6); transition:transform .4s var(--ease)}
.mn-door i::before{content:""; position:absolute; left:16%; right:16%; top:10%; bottom:42%; border:1px solid rgba(35,31,32,.14); border-radius:999px 999px 5px 5px}
.mn-door i::after{content:""; position:absolute; right:13%; top:58%; width:4px; height:16px; border-radius:4px; background:rgba(35,31,32,.35)}
:root[data-theme="dark"] .mn-door i{background:color-mix(in srgb,var(--c) 92%,#121011)}
.mn-door span{font-family:var(--serif); font-size:1.2rem}
.mn-door[aria-current="page"] i{box-shadow:0 0 0 2px var(--blush),0 0 0 3px var(--text)}
.mn-door:active i{transform:scale(.96)}
.mn-foot{display:grid; gap:14px; opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease) .6s, transform .6s var(--ease) .6s}
.mnav.open .mn-foot{opacity:1; transform:none}
.mn-theme{display:grid; grid-template-columns:1fr 1fr; background:rgba(255,255,255,.5); border-radius:99px; padding:4px}
:root[data-theme="dark"] .mn-theme{background:rgba(0,0,0,.28)}
.mn-theme button{border:0; background:none; border-radius:99px; padding:11px; font:600 14px var(--sans); cursor:pointer; color:var(--muted)}
.mn-theme button[aria-pressed="true"]{background:var(--text); color:var(--bg)}
.mn-links{display:grid; gap:8px}
.mn-links a{display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:14px; background:rgba(255,255,255,.5); text-decoration:none; font-weight:600; font-size:15px}
:root[data-theme="dark"] .mn-links a{background:rgba(0,0,0,.28)}
.mn-links svg{width:20px; height:20px; flex:none}
.mn-foot .btn{width:100%; padding:18px}
@media (max-width:1040px){
  .nav{display:none}
  .menu-btn{display:block}
  .top .wrap{gap:12px}
  .top .theme-btn{margin-left:auto}
}
@media (max-width:420px){ .room-btn .label{display:none} .room-btn{padding:10px 12px} }

#app{min-height:70vh; transition:opacity .28s}
#app.leaving{opacity:0}

/* ---------- Room entry wipe ---------- */
.wipe{position:fixed; inset:0; z-index:150; display:none; place-items:center; background:var(--room); pointer-events:none}
.wipe p{font-family:var(--serif); font-size:clamp(2.4rem,8vw,5rem); color:#231F20; opacity:0; text-align:center; padding:0 20px}
:root[data-theme="dark"] .wipe p{color:#F1ECE9}

/* ---------- Home ---------- */
.hero{padding:clamp(40px,7vw,90px) 0 clamp(60px,8vw,100px)}
.hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,6vw,90px); align-items:center}
.hero h1{font-size:clamp(3rem,7.4vw,6.4rem)}
.hero .lede{margin-top:26px; max-width:28em; font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--muted)}
.hero .ctas{margin-top:36px; display:flex; flex-wrap:wrap; gap:22px; align-items:center}
.mirror-wrap{position:relative; width:min(100%,430px); margin-left:auto; padding:22px}
.mirror-wrap::before{content:""; position:absolute; inset:0; border:1px solid var(--text); border-radius:50%; opacity:.5}
.mirror{aspect-ratio:3/4}
.mirror::after{bottom:12%}
.dia{position:absolute; width:9px; height:9px; background:var(--text); transform:rotate(45deg); opacity:.7}
.dia.n{top:-4px; left:calc(50% - 4px)} .dia.s{bottom:-4px; left:calc(50% - 4px)}
.dia.w{left:-4px; top:calc(50% - 4px)} .dia.e{right:-4px; top:calc(50% - 4px)}
.hero .mirror-wrap{animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.015)}}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr}
  .mirror-wrap{margin:0 auto; width:min(80%,360px); order:-1}
}

/* Doors */
.doors{margin-top:50px; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.6vw,30px)}
.door{position:relative; display:block; text-decoration:none; perspective:1400px; -webkit-tap-highlight-color:transparent}
.door-frame{position:relative; aspect-ratio:3/4.1; border-radius:999px 999px 10px 10px; overflow:hidden; background:radial-gradient(80% 55% at 50% 35%,#FFF4E8 0%,#F2D6C4 45%,#D9B09C 100%)}
.door-frame::before{content:""; position:absolute; inset:0; background:radial-gradient(40% 30% at 50% 40%,rgba(255,255,255,.9),transparent 70%); opacity:.6}
.door-leaf{position:absolute; inset:0; border-radius:inherit; background:var(--room); transform-origin:left center; transition:transform .9s var(--ease); display:flex; flex-direction:column; justify-content:flex-end; padding:0 clamp(18px,2.4vw,28px) clamp(20px,2.6vw,30px); box-shadow:inset 0 0 0 1px rgba(35,31,32,.06); backface-visibility:hidden}
.door-leaf::before{content:""; position:absolute; left:14%; right:14%; top:9%; bottom:40%; border:1px solid rgba(35,31,32,.14); border-radius:999px 999px 6px 6px}
.door-leaf::after{content:""; position:absolute; right:10%; top:58%; width:6px; height:26px; border-radius:6px; background:rgba(35,31,32,.35)}
:root[data-theme="dark"] .door-leaf{background:color-mix(in srgb,var(--room) 92%,#121011)}
:root[data-theme="dark"] .door-frame{box-shadow:0 30px 60px -30px color-mix(in srgb,var(--room) 40%,transparent)}
@media (hover:hover){ .door:hover .door-leaf{transform:rotateY(-24deg)} }
.door.opening .door-leaf{transform:rotateY(-100deg) !important; transition-duration:.55s}
.door h3{position:relative; font-size:clamp(1.35rem,2.2vw,1.9rem); color:#231F20}
.door .meta{position:relative; margin-top:6px; font-size:14px; color:#5E5452}
.door .tag{position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:2; font-size:12px; font-weight:600; color:#F1ECE9; background:#557058; padding:6px 12px; border-radius:99px}
@media (max-width:900px){ .doors{grid-template-columns:repeat(2,1fr); gap:14px} .door-leaf{padding:0 16px 18px} }

/* What's new */
.news{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(16px,2.6vw,30px); margin-top:50px}
.drop-card{background:var(--night); color:var(--on-dark); border-radius:12px; display:grid; grid-template-columns:.75fr 1.25fr; overflow:hidden; min-height:380px; border:1px solid var(--line)}
.drop-card .ph{background:linear-gradient(160deg,#4A3A3B,#2E2627)}
.drop-card .ph::after{background:rgba(255,255,255,.12); color:#E6C3BF}
.drop-card .body{padding:clamp(24px,3vw,40px); display:flex; flex-direction:column}
.drop-card .k{color:#E6C3BF; font-size:14px}
.drop-card h3{margin-top:10px; font-size:clamp(1.8rem,3vw,2.6rem)}
.drop-card .d{margin-top:12px; color:#C9BCB8; font-size:15px}
.drop-card .pr{margin-top:auto; padding-top:20px; display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; white-space:nowrap}
.drop-card .pr b{font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,2.4vw,2rem)}
.drop-card .pr s{color:#9D8F8B}
.drop-card .left{font-size:13px; color:#9D8F8B; margin-top:4px}
.drop-card .btn{margin-top:20px; align-self:flex-start}
.new-list{display:flex; flex-direction:column; gap:14px}
.new-item{display:flex; gap:18px; align-items:center; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); text-align:left; cursor:pointer; width:100%; transition:border-color .3s}
.new-item:hover{border-color:var(--text)}
.new-item .ph{width:84px; aspect-ratio:1; flex:none; border-radius:999px 999px 6px 6px}
.new-item h4{font-size:1.2rem}
.new-item p{font-size:14px; color:var(--muted); margin-top:2px}
.badge{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.03em; padding:4px 9px; border-radius:99px; background:var(--blush); color:var(--rose-ink); margin-bottom:6px}
@media (max-width:900px){ .news{grid-template-columns:1fr} }
@media (max-width:560px){ .drop-card{grid-template-columns:1fr} .drop-card .ph{aspect-ratio:16/10} }

.teaser{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,7vw,100px); align-items:center}
.teaser .portrait{aspect-ratio:3/4}
.teaser h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.teaser p{margin-top:20px; max-width:30em; font-size:18px}
.teaser .link{display:inline-block; margin-top:28px}
@media (max-width:820px){ .teaser{grid-template-columns:1fr} .teaser .portrait{width:min(66%,300px)} }
.peek{margin-top:44px; display:grid; grid-template-columns:1.2fr .8fr 1fr .9fr; gap:14px; align-items:end}
.peek .ph{border-radius:8px}
.peek .ph:nth-child(1){aspect-ratio:4/5} .peek .ph:nth-child(2){aspect-ratio:3/4; border-radius:999px 999px 8px 8px}
.peek .ph:nth-child(3){aspect-ratio:1} .peek .ph:nth-child(4){aspect-ratio:3/4; border-radius:50%}
@media (max-width:700px){ .peek{grid-template-columns:1fr 1fr} }
.visit-strip{background:var(--blush); padding:clamp(60px,8vw,100px) 0}
.visit-strip .wrap{display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap}
.visit-strip h2{font-size:clamp(2rem,4.4vw,3.4rem)}
.visit-strip p{margin-top:10px; color:var(--muted)}

/* ---------- MedSpa ---------- */
.ms-band{--room:#DCE6D9; background:var(--room); padding:clamp(70px,9vw,120px) 0}
.ms-band .wrap{display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(30px,7vw,100px); align-items:center}
.ms-band .portrait{aspect-ratio:3/4}
.ms-band h2{font-size:clamp(2.2rem,4.8vw,3.8rem)}
.ms-lede{margin:18px 0 30px; max-width:30em; font-size:18px; color:var(--muted)}
.ms-kicker{font-size:14px; font-weight:600; color:var(--sage-deep); margin-bottom:12px}
.ms-page{--room:#DCE6D9; background:var(--room); padding-bottom:clamp(60px,8vw,100px)}
.ms-page .portrait{aspect-ratio:3/4; box-shadow:0 0 0 14px color-mix(in srgb,var(--bg) 40%,transparent)}
.creds{background:color-mix(in srgb,var(--bg) 70%,transparent); border:1px solid var(--line); border-radius:16px; padding:clamp(22px,3vw,32px); align-self:start}
.creds h3{font-size:1.5rem}
.creds ul{list-style:none; margin:16px 0 0; padding:0}
.creds li{padding:12px 0; border-bottom:1px solid var(--line); font-size:16px}
.creds li:last-child{border-bottom:0}
.back-ms{display:inline-block; margin-bottom:16px; font-size:14px; font-weight:600; color:var(--sage-deep); text-decoration:none; border-bottom:1px solid currentColor}
@media (max-width:820px){ .ms-band .wrap{grid-template-columns:1fr} .ms-band .portrait{width:min(62%,280px)} }
.map{display:block; width:100%; aspect-ratio:16/10; border:0; border-top:1px solid var(--line); filter:grayscale(.35) contrast(.95)}
:root[data-theme="dark"] .map{filter:grayscale(.6) invert(.9) hue-rotate(180deg) contrast(.9)}

/* ---------- Rooms page ---------- */
.rooms-page{--room:var(--blush); background:var(--room); transition:background-color 1s var(--ease); padding:clamp(28px,4vw,50px) 0 clamp(110px,12vw,150px)}
.door-nav{display:flex; gap:10px; overflow-x:auto; padding:6px clamp(20px,4vw,48px) 10px; scrollbar-width:none; margin:0 calc(-1 * clamp(20px,4vw,48px))}
.door-nav::-webkit-scrollbar{display:none}
.mini-door{flex:none; display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; width:100px}
.mini-door i{display:block; width:58px; height:76px; border-radius:999px 999px 6px 6px; background:var(--c); border:1px solid rgba(35,31,32,.18); transition:transform .45s var(--ease), box-shadow .45s}
:root[data-theme="dark"] .mini-door i{background:color-mix(in srgb,var(--c) 75%,#121011); border-color:rgba(241,236,233,.2)}
.mini-door span{font-size:13px; font-weight:600; text-align:center; line-height:1.25; color:var(--muted)}
.mini-door[aria-current="true"] i{transform:translateY(-4px); box-shadow:0 0 0 3px var(--bg), 0 0 0 4px var(--text)}
.mini-door[aria-current="true"] span{color:var(--text)}
.room-body{transition:opacity .28s}
.room-body.fading{opacity:0}
.room-head{margin-top:clamp(30px,5vw,56px); display:grid; grid-template-columns:1fr minmax(180px,300px); gap:clamp(24px,5vw,70px); align-items:end}
.room-head h1{font-size:clamp(2.6rem,6.4vw,5rem)}
.room-head .intro{margin-top:16px; max-width:32em; color:var(--muted); font-size:18px}
.room-head .row{margin-top:22px; display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center}
.room-head .count{font-size:14px; color:var(--muted)}
.room-arch{aspect-ratio:3/4; border-radius:999px 999px 10px 10px}
.medspa-tag{display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--sage-deep)}
.medspa-tag::before{content:""; width:9px; height:9px; border-radius:50%; background:currentColor}
@media (max-width:760px){
  .room-head{grid-template-columns:1fr 34%; align-items:center}
  .room-head .intro{font-size:16px}
}
.grp{margin-top:clamp(40px,6vw,64px)}
.grp-head{display:flex; align-items:baseline; gap:14px; padding-bottom:14px; border-bottom:1px solid color-mix(in srgb,var(--text) 20%,transparent)}
.grp-head h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.grp-head span{font-size:14px; color:var(--muted)}
.svc-grid{margin-top:18px; display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.svc{position:relative; display:flex; align-items:stretch; background:color-mix(in srgb,var(--bg) 72%,transparent); border:1px solid color-mix(in srgb,var(--text) 10%,transparent); border-radius:14px; transition:border-color .3s, background .3s; animation:rise .7s var(--ease) both; animation-delay:calc(var(--i,0) * 45ms)}
@keyframes rise{from{opacity:0; transform:translateY(16px)}}
.svc:hover{border-color:color-mix(in srgb,var(--text) 30%,transparent)}
.svc.in{border-color:var(--text)}
.svc .thumb{width:74px; flex:none; margin:14px 0 14px 14px; border-radius:999px 999px 8px 8px}
.svc-open{flex:1; min-width:0; text-align:left; background:none; border:0; padding:20px 12px 20px 22px; cursor:pointer; display:flex; flex-direction:column; gap:4px}
.svc-open h3{font-size:1.28rem; line-height:1.2}
.svc-open .s{font-size:14px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.svc-open .p{margin-top:8px; font-weight:600; font-size:15px; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline}
.svc-open .p small{font-weight:400; color:var(--muted); font-size:13px}
.svc-open .details{font-size:13px; color:var(--muted); font-weight:600; text-decoration:underline; text-underline-offset:3px; margin-top:6px}
.add{flex:none; align-self:center; margin-right:16px; width:46px; height:46px; border-radius:50%; border:1px solid var(--text); background:transparent; cursor:pointer; display:grid; place-items:center; transition:background .3s, color .3s, transform .2s}
.add:active{transform:scale(.92)}
.add svg{width:18px; height:18px; transition:transform .35s var(--ease)}
.add.on{background:var(--text); color:var(--bg)}
.add.on svg{transform:rotate(45deg)}
@media (hover:hover){ .add:hover{background:var(--text); color:var(--bg)} }
@media (max-width:760px){ .svc-grid{grid-template-columns:1fr} }
.fly{position:fixed; left:0; top:0; z-index:300; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--text); pointer-events:none}

/* ---------- Sheet ---------- */
.scrim{position:fixed; inset:0; z-index:90; background:rgba(18,16,17,.4); opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s}
.scrim.open{opacity:1; visibility:visible}
.sheet{position:fixed; z-index:95; top:0; right:0; bottom:0; width:min(500px,100%); background:var(--bg); transform:translateX(100%); visibility:hidden; transition:transform .55s var(--ease), visibility .55s; display:flex; flex-direction:column; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
.sheet.open{transform:none; visibility:visible}
.sheet-bar{display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--line)}
.sheet-bar b{font-family:var(--serif); font-weight:400; font-size:1.3rem}
.sheet-bar button{background:none; border:0; font:600 14px var(--sans); cursor:pointer; padding:6px 0}
.sheet-body{flex:1; overflow-y:auto; padding:24px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.sheet-foot{padding:18px 24px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px}
.sheet-foot .btn{width:100%}
@media (max-width:640px){
  .sheet{top:auto; left:0; width:100%; max-height:92vh; border-radius:20px 20px 0 0; transform:translateY(100%)}
  .sheet::before{content:""; width:40px; height:4px; border-radius:4px; background:var(--line); margin:10px auto 0; flex:none}
}
.detail .hero-img{aspect-ratio:4/3; border-radius:999px 999px 12px 12px}
.detail h2{margin-top:22px; font-size:2.1rem}
.detail .lead{margin-top:10px; font-size:17px}
.detail h4{margin-top:26px; font:600 13px var(--sans); letter-spacing:.04em; color:var(--muted)}
.detail .about{margin-top:8px; font-size:16px}
.chips-row{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px}
.chips-row span{font-size:13px; padding:7px 12px; border-radius:99px; background:var(--surface); border:1px solid var(--line)}
.facts{margin:24px 0 0; display:grid; gap:8px; font-size:14px}
.facts div{display:flex; justify-content:space-between; gap:16px; padding-bottom:8px; border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted)} .facts dd{margin:0; text-align:right}
.opts{margin-top:24px; display:grid; gap:10px}
.opt{display:flex; align-items:center; gap:14px; padding:14px 14px 14px 18px; border:1px solid var(--line); border-radius:14px; transition:border-color .3s}
.opt.in{border-color:var(--text)}
.opt .l{flex:1} .opt .l small{display:block; color:var(--muted); font-size:13px}
.opt .l b{font-weight:600}
.opt .add{margin:0}
.fine{font-size:13px; color:var(--muted)}
.room-list{display:grid; gap:12px}
.room-item{display:flex; gap:14px; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--line)}
.room-item i{width:12px; height:16px; border-radius:99px 99px 2px 2px; background:var(--c); border:1px solid rgba(35,31,32,.2); flex:none}
.room-item .l{flex:1; min-width:0}
.room-item .l b{font-family:var(--serif); font-weight:400; font-size:1.1rem; display:block}
.room-item .l small{color:var(--muted); font-size:13px}
.room-item .x{background:none; border:0; font-size:13px; color:var(--muted); text-decoration:underline; cursor:pointer}
.total{display:flex; justify-content:space-between; align-items:baseline; font-size:15px}
.total b{font-family:var(--serif); font-weight:400; font-size:1.6rem}
.empty-room{text-align:center; padding:40px 10px}
.empty-room i{display:block; width:70px; height:92px; margin:0 auto 22px; border-radius:999px 999px 6px 6px; border:1px dashed var(--muted)}

.pill{position:fixed; z-index:70; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 18px); transform:translate(-50%,140%); display:flex; align-items:center; gap:14px; padding:10px 10px 10px 22px; background:#231F20; color:#F1ECE9; border-radius:99px; box-shadow:0 20px 40px -18px rgba(0,0,0,.6); visibility:hidden; transition:transform .5s var(--ease), visibility .5s; max-width:calc(100% - 32px); border:1px solid rgba(241,236,233,.12); cursor:pointer; font:inherit}
.pill.show{transform:translate(-50%,0); visibility:visible}
.pill .t{font-size:14px; white-space:nowrap}
.pill .t b{font-weight:600}
.pill .go{background:#F1ECE9; color:#231F20; border-radius:99px; padding:11px 18px; font-weight:600; font-size:14px; white-space:nowrap}

/* ---------- Quiz ---------- */
.quiz-btn{margin-top:26px; display:flex; align-items:center; gap:14px; text-align:left; background:color-mix(in srgb,var(--bg) 70%,transparent); border:1px solid color-mix(in srgb,var(--text) 18%,transparent); border-radius:18px; padding:14px 20px 14px 14px; cursor:pointer; transition:border-color .3s, transform .3s; max-width:100%}
.quiz-btn:hover{border-color:var(--text); transform:translateY(-2px)}
.quiz-btn .sp{width:44px; height:44px; flex:none; border-radius:50%; background:var(--text); color:var(--bg); display:grid; place-items:center; font-size:18px; animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{50%{transform:rotate(18deg) scale(1.08)}}
.quiz-btn b{display:block; font-family:var(--serif); font-weight:400; font-size:1.2rem}
.quiz-btn small{color:var(--muted); font-size:14px}
.quiz{position:fixed; inset:0; z-index:88; --room:var(--blush); background:var(--room); display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:scale(1.02); transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-theme="dark"] .quiz{background:color-mix(in srgb,var(--room) 14%,#121011)}
.quiz.open{opacity:1; visibility:visible; transform:none}
.quiz-bar{display:flex; align-items:center; gap:16px; padding:16px clamp(20px,4vw,40px)}
.quiz-bar b{font-family:var(--serif); font-weight:400; font-size:1.15rem; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.quiz-bar button{background:color-mix(in srgb,var(--bg) 60%,transparent); border:0; border-radius:99px; padding:10px 16px; font:600 14px var(--sans); cursor:pointer}
.quiz-dots{display:flex; gap:6px}
.quiz-dots span{width:8px; height:8px; border-radius:50%; background:color-mix(in srgb,var(--text) 18%,transparent); transition:all .4s var(--ease)}
.quiz-dots span.done{background:var(--text)}
.quiz-dots span.now{width:24px; border-radius:8px; background:var(--text)}
.quiz-stage{flex:1; overflow-y:auto; width:min(640px,100%); margin:0 auto; padding:clamp(20px,5vh,60px) clamp(20px,4vw,40px) 40px}
.quiz-stage.q-in > *{animation:rise .55s var(--ease) both}
.quiz-stage.q-in > *:nth-child(2){animation-delay:.06s}
.q-count{font-size:14px; font-weight:600; color:var(--muted)}
.quiz-stage h2{margin-top:10px; font-size:clamp(2rem,6vw,3rem)}
.q-opts{margin-top:30px; display:grid; gap:12px}
.q-opt{display:flex; align-items:center; gap:16px; text-align:left; font:600 16px var(--sans); padding:18px 20px; border-radius:18px; border:1px solid color-mix(in srgb,var(--text) 14%,transparent); background:color-mix(in srgb,var(--bg) 75%,transparent); cursor:pointer; transition:border-color .25s, background .25s, transform .25s; animation:rise .55s var(--ease) both; animation-delay:calc(var(--i) * 60ms + .1s)}
.q-opt i{width:20px; height:26px; flex:none; border-radius:99px 99px 4px 4px; border:1.5px solid color-mix(in srgb,var(--text) 40%,transparent); transition:background .25s}
.q-opt:hover{border-color:var(--text)}
.q-opt:active{transform:scale(.98)}
.q-opt.on{border-color:var(--text); background:var(--bg)}
.q-opt.on i{background:var(--text); border-color:var(--text)}
.q-back{margin-top:24px}
.q-note{margin-top:12px; color:var(--muted)}
.q-results{grid-template-columns:1fr !important; margin-top:26px}
.q-end{margin-top:26px; display:flex; gap:12px; flex-wrap:wrap}

/* ---------- Book (concierge) ---------- */
.bk-page{--room:#F4DCDA; background:var(--room); min-height:calc(100vh - var(--head)); padding:clamp(20px,4vw,50px) 0 0}
.bk-wrap{width:min(640px,100%); margin:0 auto; padding:0 clamp(20px,4vw,32px); display:flex; flex-direction:column; min-height:calc(100vh - var(--head) - 50px)}
.bk-progress{display:flex; gap:6px}
.bk-progress span{flex:1; height:4px; border-radius:4px; background:color-mix(in srgb,var(--text) 14%,transparent); transition:background .5s}
.bk-progress span.done,.bk-progress span.now{background:var(--text)}
.bk-progress span.now{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55}}
.bk-label{margin-top:10px; font-size:13px; font-weight:600; color:var(--muted)}
.bk-stage{flex:1; padding:clamp(22px,4vh,44px) 0 30px}
.bk-stage.in-next > *{animation:slideN .55s var(--ease) both}
.bk-stage.in-prev > *{animation:slideP .55s var(--ease) both}
.bk-stage > *:nth-child(2){animation-delay:.05s} .bk-stage > *:nth-child(3){animation-delay:.1s}
@keyframes slideN{from{opacity:0; transform:translateX(28px)}}
@keyframes slideP{from{opacity:0; transform:translateX(-28px)}}
.bk-stage h1{font-size:clamp(2.2rem,7vw,3.4rem)}
.bk-sub{margin-top:10px; color:var(--muted); font-size:17px}
.bk-items{margin-top:26px; display:grid; gap:10px}
.bk-items.tight{margin-top:18px; gap:0}
.bk-item{display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; background:color-mix(in srgb,var(--bg) 78%,transparent); animation:rise .5s var(--ease) both; animation-delay:calc(var(--i) * 60ms)}
.bk-items.tight .bk-item{background:none; padding:12px 0; border-radius:0; border-bottom:1px solid var(--line)}
.bk-item i{width:26px; height:34px; flex:none; border-radius:99px 99px 4px 4px; background:var(--c); border:1px solid rgba(35,31,32,.15)}
.bk-item .l{flex:1; min-width:0}
.bk-item b{display:block; font-family:var(--serif); font-weight:400; font-size:1.15rem; line-height:1.25}
.bk-item small{color:var(--muted); font-size:13px}
.bk-item .pr{font-weight:600; font-size:15px; white-space:nowrap}
.bk-item .x{width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:transparent; cursor:pointer; font-size:12px; flex:none}
.bk-total{margin-top:18px; display:flex; justify-content:space-between; align-items:baseline}
.bk-total b{font-family:var(--serif); font-weight:400; font-size:1.8rem}
.bk-branches{margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:14px}
.bk-branch{position:relative; text-align:left; border:1.5px solid transparent; background:color-mix(in srgb,var(--bg) 78%,transparent); border-radius:22px; padding:12px 12px 18px; cursor:pointer; display:flex; flex-direction:column; gap:4px; transition:border-color .3s, transform .3s, box-shadow .3s; animation:rise .55s var(--ease) both; animation-delay:calc(var(--i) * 80ms + .08s)}
.bk-branch .arch-img{aspect-ratio:4/5; border-radius:999px 999px 12px 12px; margin-bottom:10px}
.bk-branch b{font-family:var(--serif); font-weight:400; font-size:1.4rem; padding:0 4px}
.bk-branch small{color:var(--muted); font-size:13px; padding:0 4px}
.bk-branch.on{border-color:var(--text); transform:translateY(-3px); box-shadow:0 24px 40px -26px rgba(94,69,64,.7)}
.bk-branch .tick{position:absolute; top:20px; right:20px; width:30px; height:30px; border-radius:50%; background:var(--text); opacity:0; transform:scale(.4); transition:all .35s cubic-bezier(.3,1.6,.5,1)}
.bk-branch .tick::after{content:""; position:absolute; left:10px; top:7px; width:8px; height:13px; border:solid var(--bg); border-width:0 2px 2px 0; transform:rotate(45deg)}
.bk-branch.on .tick{opacity:1; transform:none}
.bk-days{margin:26px calc(-1 * clamp(20px,4vw,32px)) 0; padding:6px clamp(20px,4vw,32px) 12px; display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none}
.bk-days::-webkit-scrollbar{display:none}
.bk-day{flex:none; width:74px; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 6px 12px; border-radius:999px 999px 18px 18px; border:1.5px solid transparent; background:color-mix(in srgb,var(--bg) 78%,transparent); cursor:pointer; transition:all .3s var(--ease); animation:rise .5s var(--ease) both; animation-delay:calc(var(--i) * 40ms)}
.bk-day small{font-size:12px; color:var(--muted); font-weight:600}
.bk-day b{font-family:var(--serif); font-weight:400; font-size:1.9rem; line-height:1.1}
.bk-day.on{background:var(--text); color:var(--bg); transform:translateY(-4px)}
.bk-day.on small{color:color-mix(in srgb,var(--bg) 75%,transparent)}
.bk-other{margin-top:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:14px; color:var(--muted)}
.bk-other input{font:inherit; color:var(--text); border:1px solid var(--line); background:color-mix(in srgb,var(--bg) 78%,transparent); border-radius:99px; padding:8px 14px}
.bk-chosen{margin-top:20px; font-family:var(--serif); font-size:1.5rem}
.bk-times{margin-top:26px; display:grid; gap:12px}
.bk-time{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:18px; align-items:center; text-align:left; padding:18px 20px; border-radius:22px; border:1.5px solid transparent; background:color-mix(in srgb,var(--bg) 78%,transparent); cursor:pointer; transition:all .3s var(--ease); animation:rise .55s var(--ease) both; animation-delay:calc(var(--i) * 80ms + .08s)}
.bk-time .ic{grid-row:1/3; width:60px; height:60px; border-radius:50%; background:var(--room); display:grid; place-items:center}
.bk-time .ic svg{width:34px; height:34px}
.bk-time b{font-family:var(--serif); font-weight:400; font-size:1.45rem}
.bk-time small{color:var(--muted); font-size:14px}
.bk-time.on{border-color:var(--text); transform:translateX(4px)}
.bk-time.on .ic{background:var(--text); color:var(--bg)}
.bk-field{display:grid; gap:8px; margin-top:22px}
.bk-field span{font-family:var(--serif); font-size:1.25rem}
.bk-field input,.bk-field textarea{font:inherit; font-size:17px; color:var(--text); background:color-mix(in srgb,var(--bg) 82%,transparent); border:1.5px solid transparent; border-radius:16px; padding:16px 18px; width:100%; transition:border-color .25s}
.bk-field input:focus,.bk-field textarea:focus{outline:none; border-color:var(--text)}
.invite{position:relative; margin-top:26px; background:var(--bg); border-radius:24px; padding:30px 24px 24px; box-shadow:0 30px 60px -36px rgba(94,69,64,.6); border:1px solid var(--line)}
.invite::before{content:""; position:absolute; inset:8px; border:1px solid color-mix(in srgb,var(--text) 14%,transparent); border-radius:18px; pointer-events:none}
.invite img{width:44px; margin:0 auto}
.inv-k{text-align:center; font-family:var(--serif); font-size:1.4rem; margin-top:10px}
.invite dl{margin:20px 0 0; display:grid; gap:0}
.invite dl div{display:grid; grid-template-columns:70px 1fr auto; gap:12px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--line)}
.invite dt{color:var(--muted); font-size:13px; font-weight:600}
.invite dd{margin:0; font-size:15px}
.invite dd small{color:var(--muted)}
.invite .edit{background:none; border:0; font-size:13px; color:var(--muted); text-decoration:underline; cursor:pointer}
.bk-bar{position:sticky; bottom:0; display:flex; gap:12px; padding:16px 0 calc(env(safe-area-inset-bottom,0px) + 18px); background:linear-gradient(transparent,var(--room) 30%)}
:root[data-theme="dark"] .bk-bar{background:linear-gradient(transparent,color-mix(in srgb,var(--room) 12%,#121011) 30%)}
.bk-bar #bkNext{flex:1; padding:18px}
.bk-bar #bkBack{padding:18px 22px}
.bk-bar .btn[disabled]{opacity:.3}
.sealer{position:fixed; inset:0; z-index:220; display:grid; place-items:center; align-content:center; gap:30px; background:radial-gradient(120% 90% at 50% 40%,#F8E6E4 0%,#EFCFCC 70%,#E6BFBB 100%); animation:fadeIn .4s both; transition:opacity .6s}
:root[data-theme="dark"] .sealer{background:radial-gradient(120% 90% at 50% 40%,#3A2B2C 0%,#1E1718 75%,#121011 100%)}
.sealer.gone{opacity:0}
@keyframes fadeIn{from{opacity:0}}
.sealer-t{font-family:var(--serif); font-size:1.3rem; color:#5E4540}
:root[data-theme="dark"] .sealer-t{color:#F1ECE9}
.envelope.sealing{animation:none; cursor:default; width:min(320px,80vw)}
.sealing .env-card{animation:cardIn .8s var(--ease) .2s both}
.sealing .env-card .msg{font-size:1.1rem}
@keyframes cardIn{from{transform:translateY(-85%) scale(1.04)}}
.sealing .env-flap{transform:rotateX(180deg); z-index:1; animation:flapClose .6s var(--ease) 1s forwards}
@keyframes flapClose{0%{transform:rotateX(180deg); z-index:4} 100%{transform:rotateX(0deg); z-index:4}}
.sealing .seal{opacity:0; transform:scale(1.9); animation:stamp .5s cubic-bezier(.3,1.6,.5,1) 1.6s forwards}
@keyframes stamp{to{opacity:1; transform:scale(1)}}
.done-page{--room:#F4DCDA; background:var(--room); padding:clamp(50px,8vw,100px) 0}
.done-seal{width:96px; height:96px; margin:0 auto 26px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%,#C99F94,#A77B70 60%,#8E655B); box-shadow:0 10px 24px -8px rgba(94,50,40,.55); animation:stamp2 .7s cubic-bezier(.3,1.6,.5,1) both}
.done-seal img{width:44px; filter:invert(1) brightness(1.4)}
@keyframes stamp2{from{opacity:0; transform:scale(1.8)}}
.done-note{margin:28px auto 0; max-width:30em; font-family:var(--serif); font-size:1.35rem; line-height:1.4; padding:22px; border-radius:18px; background:color-mix(in srgb,var(--bg) 70%,transparent)}
.done-note span{display:block; margin-top:10px; font:400 13px var(--sans); color:var(--muted)}

/* ---------- Book ---------- */
.book{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(30px,5vw,70px); align-items:start}
.book h1{font-size:clamp(2.6rem,6vw,4.4rem)}
.step{margin-top:44px}
.step h2{font-size:1.5rem; display:flex; gap:14px; align-items:baseline}
.step h2 span{font:600 13px var(--sans); color:var(--muted)}
.choices{margin-top:18px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.choice{position:relative}
.choice input{position:absolute; opacity:0; inset:0; cursor:pointer; margin:0}
.choice label{display:block; padding:18px 20px; border:1px solid var(--line); border-radius:14px; cursor:pointer; transition:border-color .25s, background .25s}
.choice label b{display:block; font-family:var(--serif); font-weight:400; font-size:1.25rem}
.choice label small{color:var(--muted); font-size:13px}
.choice input:checked + label{border-color:var(--text); background:var(--surface)}
.choice input:focus-visible + label{outline:2px solid var(--rose-ink); outline-offset:2px}
.chips{margin-top:14px; display:flex; flex-wrap:wrap; gap:10px}
.chips .choice label{padding:11px 18px; border-radius:99px; font-size:14px; font-weight:600}
.field{margin-top:16px; display:grid; gap:6px}
.field label{font-size:14px; font-weight:600}
.field input,.field textarea{font:inherit; font-size:16px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; width:100%}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--text)}
.field .err{font-size:13px; color:#C4574B; display:none}
.field.bad .err{display:block}
.field.bad input{border-color:#C4574B}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.summary{position:sticky; top:calc(var(--head) + 24px); background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px}
.summary h3{font-size:1.4rem; margin-bottom:18px}
.summary .btn{width:100%; margin-top:18px}
.warn{margin-top:12px; font-size:13px; color:#C4574B}
@media (max-width:900px){ .book{grid-template-columns:1fr} .summary{position:static} }
@media (max-width:520px){ .choices{grid-template-columns:1fr} .two{grid-template-columns:1fr} }
.done{text-align:center; max-width:560px; margin:0 auto}
.done img{width:86px; margin:0 auto 26px}
.done h1{font-size:clamp(2.4rem,6vw,4rem)}
.done p{margin-top:16px; color:var(--muted)}
.done .card{margin-top:30px; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px}

/* ---------- Gallery ---------- */
.g-filters{margin-top:34px; display:flex; gap:8px; flex-wrap:wrap}
.g-filters button{border:1px solid color-mix(in srgb,var(--text) 22%,transparent); background:transparent; font:600 14px/1 var(--sans); padding:12px 18px; border-radius:99px; cursor:pointer}
.g-filters button[aria-pressed="true"]{background:var(--text); color:var(--bg); border-color:var(--text)}
.g-grid{margin-top:34px; columns:3; column-gap:16px}
.g-grid .ph{break-inside:avoid; margin-bottom:16px; border-radius:10px; border:0; width:100%; cursor:zoom-in; padding:0; display:block}
.g-grid .ph.s1{aspect-ratio:3/4} .g-grid .ph.s2{aspect-ratio:1; border-radius:999px 999px 10px 10px}
.g-grid .ph.s3{aspect-ratio:4/5} .g-grid .ph.s4{aspect-ratio:3/4; border-radius:50%} .g-grid .ph.s5{aspect-ratio:4/3}
@media (max-width:900px){ .g-grid{columns:2; column-gap:12px} .g-grid .ph{margin-bottom:12px} }
.lightbox{position:fixed; inset:0; z-index:150; background:rgba(18,16,17,.95); display:grid; grid-template-rows:auto 1fr auto; opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; padding:calc(env(safe-area-inset-top,0px) + 10px) 16px calc(env(safe-area-inset-bottom,0px) + 16px); color:#F1ECE9}
.lightbox.open{opacity:1; visibility:visible}
.lightbox .bar{display:flex; justify-content:space-between; align-items:center; font-size:14px; padding:6px 4px}
.lightbox button{background:none; border:0; color:inherit; font:600 14px var(--sans); cursor:pointer; padding:10px}
.lightbox .stage{display:grid; place-items:center; min-height:0}
.lightbox .stage .ph{width:min(560px,86vw); aspect-ratio:3/4; max-height:72vh; border-radius:12px}
.lightbox .nav2{display:flex; justify-content:center; gap:40px}

/* ---------- About ---------- */
.about-hero{padding:clamp(40px,7vw,90px) 0}
.about-hero .wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(30px,6vw,90px); align-items:center}
.about-hero h1{font-size:clamp(3rem,7.2vw,6rem)}
.about-hero p{margin-top:24px; font-size:19px; color:var(--muted); max-width:28em}
.about-hero .portrait{aspect-ratio:3/4}
.story-cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px); font-size:18px}
.story-cols p + p{margin-top:18px}
.pull{font-family:var(--serif); font-size:clamp(1.8rem,3.6vw,2.8rem); line-height:1.2}
.pull span{display:block; margin-top:18px; font:400 15px var(--sans); color:var(--muted)}
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,4vw,50px); margin-top:50px}
.values div{border-top:1px solid var(--text); padding-top:22px}
.values h3{font-size:1.7rem}
.values p{margin-top:10px; color:var(--muted)}
.two-rooms{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,30px); margin-top:50px}
.two-rooms figure{margin:0}
.two-rooms .ph{aspect-ratio:4/5; border-radius:999px 999px 12px 12px}
.two-rooms figcaption{margin-top:16px; font-family:var(--serif); font-size:1.6rem}
@media (max-width:820px){ .about-hero .wrap,.story-cols{grid-template-columns:1fr} .about-hero .portrait{width:min(70%,320px); order:-1} .values{grid-template-columns:1fr} }
@media (max-width:520px){ .two-rooms{grid-template-columns:1fr} }

/* ---------- Contact ---------- */
.contact-grid{margin-top:50px; display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,30px)}
.branch-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.branch-card .ph{aspect-ratio:16/9}
.branch-card .in{padding:clamp(22px,3vw,34px)}
.branch-card h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.branch-card dl{margin:22px 0 0; display:grid; gap:10px; font-size:15px}
.branch-card dl div{display:grid; grid-template-columns:90px 1fr; gap:16px}
.branch-card dt{color:var(--muted)} .branch-card dd{margin:0; white-space:pre-line}
.empty{color:var(--muted); font-style:italic}
.branch-card .acts{margin-top:26px; display:flex; flex-wrap:wrap; gap:10px}
.branch-card .acts .btn{padding:13px 20px; font-size:14px}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr} }
.socials{margin-top:40px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.social{display:flex; align-items:center; gap:16px; padding:20px 22px; border:1px solid var(--line); border-radius:16px; text-decoration:none; background:var(--bg); transition:border-color .3s, transform .3s}
a.social:hover{border-color:var(--text); transform:translateY(-2px)}
.social .ic{width:48px; height:48px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--blush)}
.social .ic svg{width:22px; height:22px}
.social b{display:block; font-family:var(--serif); font-weight:400; font-size:1.3rem}
.social small{font-size:14px; color:var(--muted)}
.social.off{opacity:.7}

/* ---------- Footer ---------- */
footer{background:var(--night); color:#C9BCB8; padding:60px 0 calc(40px + env(safe-area-inset-bottom,0px)); font-size:14px; border-top:1px solid var(--line)}
footer .wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
footer img{height:30px; width:auto; filter:invert(1) brightness(.93)}
footer .tag{margin-top:14px; letter-spacing:.05em}
footer h4{font:600 14px var(--sans); color:#F1ECE9; margin-bottom:10px}
footer a{color:#F1ECE9; text-decoration:none; display:block; padding:3px 0}
footer .soc{display:flex; gap:10px; margin-top:20px}
footer .soc a{width:40px; height:40px; border-radius:50%; border:1px solid rgba(241,236,233,.2); display:grid; place-items:center; padding:0}
footer .soc svg{width:18px; height:18px}
footer .copy{grid-column:1/-1; border-top:1px solid rgba(241,236,233,.12); padding-top:20px; margin-top:10px}
@media (max-width:700px){ footer .wrap{grid-template-columns:1fr 1fr} footer .wrap > div:first-child{grid-column:1/-1} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; transition-delay:0s !important; animation:none !important}
  .rv{opacity:1; transform:none}
}

/* ================= Worlds ================= */
.world-switch{display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:99px; margin-left:6px}
.world-switch a{display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:99px; font-size:13px; font-weight:600; text-decoration:none; color:var(--muted); white-space:nowrap; transition:background .3s, color .3s}
.world-switch a i{width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(35,31,32,.2)}
.world-switch a[aria-current="true"]{background:var(--text); color:var(--bg)}
.world-switch a:hover{color:var(--text)}
.world-switch a[aria-current="true"]:hover{color:var(--bg)}
body.on-map .world-switch,body.on-map .map-btn,body.on-map .nav{display:none}
@media (max-width:1240px){ .world-switch a{padding:8px 10px} }
@media (max-width:1040px){ .world-switch{display:none} .map-btn{margin-left:auto} .top .theme-btn{margin-left:0} }
.brand img{max-width:150px; height:26px; object-fit:contain; object-position:left center}
.world-mark{height:74px; width:auto; margin-bottom:22px}

/* hero media per world */
.hero-arch{width:min(100%,420px); margin-left:auto; padding:18px; border:1px solid color-mix(in srgb,var(--text) 30%,transparent); border-radius:999px 999px 16px 16px}
.hero-arch .ph{aspect-ratio:3/4; border-radius:999px 999px 10px 10px}
.hero-ring{position:relative; width:min(100%,420px); margin-left:auto}
.hero-ring .ph{aspect-ratio:1; border-radius:50%; box-shadow:0 0 0 1px var(--text), 0 0 0 16px var(--bg), 0 0 0 17px color-mix(in srgb,var(--text) 40%,transparent)}
.ring-emblem{position:absolute; right:-6px; bottom:6%; width:92px; background:var(--bg); border-radius:50%; padding:6px; animation:spinSlow 30s linear infinite}
:root[data-theme="dark"] .ring-emblem{filter:invert(1); background:#EDEAE6}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.circle{border-radius:50%}
.teaser .portrait.circle{aspect-ratio:1}
.about-hero .portrait.circle{aspect-ratio:1}
@media (max-width:820px){ .hero-arch,.hero-ring{margin:0 auto; width:min(80%,340px); order:-1} }
[data-world="bysoha"] .door-frame{border-radius:14px}
[data-world="bysoha"] .door-leaf{border-radius:14px}
[data-world="bysoha"] .door-leaf::before{border-radius:999px 999px 6px 6px}

.soon-pill{display:inline-flex; align-items:center; gap:10px; margin-top:30px; padding:10px 16px; border-radius:99px; background:var(--blush); color:var(--text); font-size:14px; font-weight:600; text-decoration:none}
.soon-pill i{width:8px; height:8px; border-radius:50%; background:var(--w-accent); animation:pulse 1.8s ease-in-out infinite}
:root[data-theme="dark"] .soon-pill i{background:var(--text)}

.best-grid{margin-top:34px; display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.svc-open .rm{font-size:12px; font-weight:600; color:var(--rose-ink); letter-spacing:.02em}
@media (max-width:760px){ .best-grid{grid-template-columns:1fr} }

.also{margin-top:34px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.also-card{position:relative; display:flex; flex-direction:column; gap:8px; min-height:170px; justify-content:flex-end; padding:26px; border-radius:20px; background:var(--c); color:#231F20; text-decoration:none; overflow:hidden; transition:transform .45s var(--ease)}
:root[data-theme="dark"] .also-card{background:color-mix(in srgb,var(--c) 88%,#121011)}
.also-card::before{content:""; position:absolute; right:-40px; top:-40px; width:160px; height:200px; border:1px solid rgba(35,31,32,.14); border-radius:999px 999px 10px 10px; transition:transform .6s var(--ease)}
.also-card:hover{transform:translateY(-4px)}
.also-card:hover::before{transform:translate(-14px,14px)}
.also-card img{height:28px; width:auto; align-self:flex-start; filter:none}
.also-n{font-family:var(--serif); font-size:1.7rem}
.also-l{font-size:14px; color:#5E5452}
.also-go{position:absolute; right:24px; bottom:22px; font-size:20px; transition:transform .4s var(--ease)}
.also-card:hover .also-go{transform:translateX(6px)}

.branch-card.soon{position:relative; background:repeating-linear-gradient(135deg,var(--surface) 0 14px,color-mix(in srgb,var(--blush) 40%,var(--surface)) 14px 28px)}

.ribbon{position:absolute; z-index:2; top:18px; left:-6px; background:var(--w-accent); color:#F7F3F0; font-size:12px; font-weight:600; letter-spacing:.04em; padding:8px 16px 8px 18px; border-radius:0 99px 99px 0; box-shadow:0 8px 16px -8px rgba(0,0,0,.4)}
:root[data-theme="dark"] .ribbon{background:var(--text); color:var(--bg)}

/* ================= Back button ================= */
.back{display:inline-flex; align-items:center; gap:12px; margin-bottom:26px; padding:6px 18px 6px 6px; border-radius:99px; border:1px solid color-mix(in srgb,var(--text) 14%,transparent); background:color-mix(in srgb,var(--bg) 70%,transparent); cursor:pointer; text-align:left; transition:border-color .3s, transform .3s}
.back:hover{border-color:var(--text)}
.back-door{position:relative; width:34px; height:40px; border-radius:99px 99px 6px 6px; background:var(--w-color); border:1px solid color-mix(in srgb,var(--text) 22%,transparent); perspective:200px; overflow:hidden}
:root[data-theme="dark"] .back-door{background:color-mix(in srgb,var(--w-color) 70%,#121011)}
.back-door i{position:absolute; inset:0; border-radius:inherit; background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.1)); transform-origin:right center; transition:transform .55s var(--ease)}
.back-door b{position:absolute; inset:0; display:grid; place-items:center; font:600 15px var(--sans); color:#231F20; transition:transform .45s var(--ease)}
.back:hover .back-door i{transform:rotateY(70deg)}
.back:hover .back-door b{transform:translateX(-3px)}
.back-l{display:flex; flex-direction:column; line-height:1.2; font-family:var(--serif); font-size:1.02rem}
.back-l small{font:600 11px var(--sans); letter-spacing:.05em; color:var(--muted)}
[data-world="bysoha"] .back-door{border-radius:50%; width:38px; height:38px; background:#000; border-color:#000}
[data-world="bysoha"] .back-door b{color:#FEF3FF}
[data-world="bysoha"] .back-door i{background:linear-gradient(160deg,rgba(254,243,255,.25),transparent); border-radius:50%}
[data-world="medspa"] .back-door{background:var(--w-accent); border-color:var(--w-accent)}
[data-world="medspa"] .back-door b{color:#F1F4EE}
[data-world="medspa"] .back-door i{background:linear-gradient(160deg,rgba(255,255,255,.28),transparent)}
.hero .back,.about-hero .back{margin-bottom:34px}
.bk-wrap .back{align-self:flex-start; margin-bottom:18px}

/* ================= The maison map ================= */
.map-page{--paper:#FBF7F1; min-height:calc(100vh - var(--head)); background-color:var(--paper);
  background-image:linear-gradient(color-mix(in srgb,var(--gold) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--gold) 9%,transparent) 1px,transparent 1px);
  background-size:36px 36px; display:flex; flex-direction:column; align-items:center; padding:clamp(22px,4vh,44px) 18px 40px; overflow:hidden}
:root[data-theme="dark"] .map-page{--paper:#171314}
.map-grid{width:min(1180px,100%); display:grid; grid-template-columns:minmax(260px,1fr) auto; gap:clamp(30px,6vw,90px); align-items:center}
.map-side h1{font-size:clamp(2.6rem,5vw,4.2rem); font-style:italic}
.map-hint{margin-top:10px; color:var(--muted)}
.legend{margin-top:34px; display:grid; gap:10px; max-width:360px}
.leg{display:flex; align-items:center; gap:16px; text-align:left; padding:14px 18px; border:1px solid color-mix(in srgb,var(--gold) 45%,transparent); border-radius:16px; background:color-mix(in srgb,var(--paper) 80%,transparent); cursor:pointer; opacity:0; animation:legIn .6s var(--ease) forwards; animation-delay:calc(var(--i) * 120ms + 1.2s); transition:border-color .3s, transform .3s}
.leg:hover{border-color:var(--gold); transform:translateX(4px)}
.leg i{width:22px; height:28px; flex:none; border-radius:99px 99px 4px 4px; background:var(--c); border:1px solid color-mix(in srgb,var(--gold) 70%,transparent)}
.leg b{display:block; font-family:var(--serif); font-weight:400; font-size:1.25rem; font-style:italic}
.leg small{color:var(--muted); font-size:13px}
.map-sheet{position:relative; width:min(94vw, calc((100vh - var(--head) - 70px) * 600 / 760), 660px); aspect-ratio:600/760; transition:transform 1s cubic-bezier(.7,0,.25,1)}
@media (max-width:900px){
  .map-grid{grid-template-columns:1fr; justify-items:center; gap:10px}
  .map-side{text-align:center; display:flex; flex-direction:column; align-items:center}
  .legend{display:none}
  .map-side .cartouche{display:none}
  .map-sheet{width:min(96vw, calc((100svh - var(--head) - 170px) * 600 / 760))}
}
.map-sheet.zoom{transform:scale(2.3)}
.map-sheet.unfold{animation:unfold 1.2s cubic-bezier(.3,.7,.2,1) both}
@keyframes unfold{0%{transform:perspective(1200px) translateY(-30vh) scale(.28) rotateX(60deg) rotate(-8deg); opacity:0} 35%{opacity:1} 70%{transform:perspective(1200px) scale(1.02) rotateX(0) rotate(0)} 100%{transform:none}}
.creases{position:absolute; inset:0; pointer-events:none; opacity:0}
.unfold .creases{animation:crease 1.8s ease both}
.creases i{position:absolute; background:linear-gradient(90deg,transparent,rgba(120,90,60,.16),transparent)}
.creases i:nth-child(1){left:33.3%; top:0; bottom:0; width:10px} .creases i:nth-child(2){left:66.6%; top:0; bottom:0; width:10px}
.creases i:nth-child(3){top:50%; left:0; right:0; height:10px; background:linear-gradient(180deg,transparent,rgba(120,90,60,.16),transparent)}
@keyframes crease{0%,40%{opacity:1} 100%{opacity:0}}
.plan{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.plan .ink{fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.plan .ink:nth-child(-n+5){stroke-width:2.2}
.plan .zone{fill-opacity:0; stroke:var(--gold); stroke-opacity:0; stroke-width:2; cursor:pointer; transition:fill-opacity .6s var(--ease), stroke-opacity .5s}
.plan text{font-family:var(--serif); fill:var(--text); text-anchor:middle; opacity:0}
.plan .lbl-n{font-size:22px; font-style:italic}
.plan .lbl-l{font-family:var(--sans); font-size:10.5px; fill:var(--muted); letter-spacing:.03em}
.plan .lbl-r{font-size:12px; font-style:italic; fill:var(--muted)}
.map-sheet.idle .ink{stroke-dasharray:1; stroke-dashoffset:1}
.map-sheet.draw .ink{stroke-dasharray:1; stroke-dashoffset:1; animation:inkDraw 1.5s cubic-bezier(.6,.1,.3,1) forwards; animation-delay:calc(var(--d) * 1ms + 300ms)}
.map-sheet.quick .ink{stroke-dasharray:1; stroke-dashoffset:1; animation:inkDraw .8s ease forwards; animation-delay:calc(var(--d) * .25ms)}
@keyframes inkDraw{to{stroke-dashoffset:0}}
.map-sheet.draw .zone{animation:zoneIn 1s ease 1.9s forwards} .map-sheet.quick .zone{animation:zoneIn .6s ease .5s forwards}
@keyframes zoneIn{to{fill-opacity:.42}}
.map-sheet.draw text{animation:fadeIn2 .9s ease 2.3s forwards} .map-sheet.quick text{animation:fadeIn2 .5s ease .7s forwards}
@keyframes fadeIn2{to{opacity:1}}
.map-sheet[data-hover="spa"] .zone[data-zone="spa"],.map-sheet[data-hover="medspa"] .zone[data-zone="medspa"],.map-sheet[data-hover="bysoha"] .zone[data-zone="bysoha"]{fill-opacity:.85 !important; stroke-opacity:1}
:root[data-theme="dark"] .map-sheet.draw .zone,:root[data-theme="dark"] .map-sheet.quick .zone{animation-name:zoneInDark}
@keyframes zoneInDark{to{fill-opacity:.2}}
:root[data-theme="dark"] .map-sheet[data-hover] .zone{--x:0}
.pearl{position:absolute; width:46px; height:58px; margin:-50px 0 0 -23px; border:0; background:none; padding:0; cursor:pointer; opacity:0; transform:translateY(-40px); -webkit-tap-highlight-color:transparent}
.map-sheet.draw .pearl{animation:pearlDrop .9s cubic-bezier(.3,1.5,.5,1) forwards; animation-delay:calc(var(--i) * 220ms + 2.6s)}
.map-sheet.quick .pearl{animation:pearlDrop .7s cubic-bezier(.3,1.5,.5,1) forwards; animation-delay:calc(var(--i) * 120ms + .8s)}
@keyframes pearlDrop{to{opacity:1; transform:none}}
.pearl .orb{position:absolute; left:50%; bottom:0; width:30px; height:30px; margin-left:-15px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0 12%,#F7F0EA 30%,#E4D6CD 62%,#C9B6AB 100%);
  box-shadow:0 6px 12px -4px rgba(94,69,64,.5), inset -3px -4px 8px rgba(150,120,110,.35), 0 0 0 3px color-mix(in srgb,var(--c) 70%,transparent); transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.pearl .orb::after{content:""; position:absolute; inset:0; border-radius:50%; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%); background-size:250% 100%; animation:sheen 3.6s ease-in-out infinite; animation-delay:calc(var(--i) * .8s)}
@keyframes sheen{0%,60%{background-position:120% 0} 100%{background-position:-120% 0}}
.pearl .bow{position:absolute; left:50%; top:0; width:44px; margin-left:-22px; overflow:visible}
.pearl .bow path{fill:color-mix(in srgb,var(--c) 70%,#C9A6A0); stroke:var(--gold); stroke-width:.8}
.pearl .bow .tail{fill:none; stroke:color-mix(in srgb,var(--c) 55%,#A77B70); stroke-width:2.2; stroke-linecap:round}
.pearl .bow circle{fill:var(--gold)}
.pearl:hover .orb,.pearl:focus-visible .orb{transform:scale(1.15)}
.pearl:hover .bow,.pearl:focus-visible .bow{animation:wiggle .6s ease}
@keyframes wiggle{30%{transform:rotate(-8deg)} 60%{transform:rotate(6deg)}}
.map-card{position:absolute; z-index:5; width:230px; margin:18px 0 0 -115px; padding:18px 20px 20px; border-radius:18px; background:var(--bg); border:1px solid var(--gold); box-shadow:0 30px 50px -30px rgba(94,69,64,.6); text-align:center; opacity:0; visibility:hidden; transform-origin:50% 0; transform:scaleY(.2) translateY(-10px)}
.map-card.open{visibility:visible; animation:unfurl .55s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes unfurl{to{opacity:1; transform:none}}
.map-card::before{content:""; position:absolute; top:-7px; left:50%; width:12px; height:12px; margin-left:-6px; background:var(--bg); border-left:1px solid var(--gold); border-top:1px solid var(--gold); transform:rotate(45deg)}
.map-card .mc-k{font-family:var(--serif); font-size:1.5rem; font-style:italic}
.map-card .mc-l{margin-top:4px; font-size:13px; color:var(--muted)}
.map-card .btn{margin-top:14px; padding:12px 24px; width:100%; background:var(--text); border-color:var(--text); color:var(--bg)}
.cartouche{margin-top:34px; width:max-content; display:flex; align-items:center; gap:12px; padding:8px 18px 8px 8px; border:1px solid var(--gold); border-radius:99px; font-family:var(--serif); font-style:italic; color:var(--muted); font-size:15px; opacity:0; animation:fadeIn2 .8s ease 1s forwards}
.cartouche img{width:30px}
.note.flying .envelope{animation:flyAway .7s cubic-bezier(.6,0,.4,1) forwards}
.note.flying .note-actions{opacity:0}
@keyframes flyAway{to{transform:translateY(-60vh) rotate(-14deg) scale(.5); opacity:0}}

/* mobile menu worlds */
.mn-worlds{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px; background:rgba(255,255,255,.45); border-radius:99px; padding:4px}
:root[data-theme="dark"] .mn-worlds{background:rgba(0,0,0,.28)}
.mn-worlds a{display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 6px; border-radius:99px; text-decoration:none; font-weight:600; font-size:13px; white-space:nowrap}
.mn-worlds a i{width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(35,31,32,.25)}
.mn-worlds a[aria-current="true"]{background:var(--text); color:var(--bg)}
.mn-door i{background:var(--w-color) !important}
.mn-door:nth-child(2) i{background:color-mix(in srgb,var(--w-color) 80%,#fff) !important}
.mn-door:nth-child(3) i{background:color-mix(in srgb,var(--w-color) 70%,#F1ECE9) !important}
.mn-door:nth-child(4) i{background:color-mix(in srgb,var(--w-color) 85%,#E6C3BF) !important}
.mn-door:nth-child(5) i{background:color-mix(in srgb,var(--w-color) 60%,#fff) !important}
.mn-door.is-map i{background:#FBF7F1 !important; display:grid; place-items:center; color:var(--gold)}
.mn-door.is-map i svg{width:40%; height:auto}
.mn-door.is-map i::before,.mn-door.is-map i::after{display:none}

@media (max-width:1320px){ .top .room-btn .label{display:none} .top .room-btn{padding:10px 12px} .nav{gap:18px} }
[data-world="medspa"]:not([data-theme="dark"]){--porcelain:#EFF2EC; --surface:#F7F9F5}
[data-world="bysoha"]:not([data-theme="dark"]){--porcelain:#F6F5F2; --surface:#FDFBFD}

@keyframes legIn{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
:root[data-theme="dark"][data-world="bysoha"] .back-door{background:#F1ECE9; border-color:#F1ECE9}
:root[data-theme="dark"][data-world="bysoha"] .back-door b{color:#000}
@media (max-width:760px){ .room-head{grid-template-columns:1fr 26%} .quiz-btn{width:100%} }

/* ---------- home: 3 doors + all rooms ---------- */
.home-doors{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .home-doors{grid-template-columns:repeat(2,1fr)} }
.all-rooms{position:relative; display:flex; flex-direction:column; text-decoration:none; -webkit-tap-highlight-color:transparent}
.ar-frame{position:relative; display:block; aspect-ratio:3/4.1; border-radius:999px 999px 10px 10px; border:1.5px dashed color-mix(in srgb,var(--gold) 80%,transparent); background:radial-gradient(70% 50% at 50% 45%,color-mix(in srgb,var(--w-color) 55%,transparent),transparent 75%); overflow:hidden; transition:border-color .4s}
[data-world="bysoha"] .ar-frame{border-radius:14px}
.ar-fan{position:absolute; left:50%; top:46%; width:0; height:0}
.ar-fan i{position:absolute; left:-26px; bottom:0; width:52px; height:70px; border-radius:99px 99px 6px 6px; background:var(--c); border:1px solid rgba(35,31,32,.14); box-shadow:0 10px 18px -12px rgba(94,69,64,.6); transform-origin:50% 140%;
  transform:rotate(calc(var(--k) * 9deg)) translateX(calc(var(--k) * 6px)); transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.ar-fan i::after{content:""; position:absolute; right:7px; top:52%; width:3px; height:10px; border-radius:3px; background:rgba(35,31,32,.3)}
.all-rooms:hover .ar-fan i,.all-rooms:focus-visible .ar-fan i{transform:rotate(calc(var(--k) * 20deg)) translateX(calc(var(--k) * 16px)) translateY(-10px)}
.all-rooms:hover .ar-frame{border-color:var(--gold); border-style:solid}
.all-rooms .ar-fan i{animation:fanIdle 4s ease-in-out infinite; animation-delay:calc(var(--k) * .2s)}
.all-rooms:hover .ar-fan i{animation:none}
@keyframes fanIdle{50%{transform:rotate(calc(var(--k) * 12deg)) translateX(calc(var(--k) * 9px)) translateY(-3px)}}
.ar-spark b{position:absolute; width:8px; height:8px; background:var(--gold); clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); opacity:0; animation:twinkle2 2.8s ease-in-out infinite}
.ar-spark b:nth-child(1){left:24%; top:26%} .ar-spark b:nth-child(2){right:22%; top:34%; animation-delay:.9s} .ar-spark b:nth-child(3){left:50%; top:16%; animation-delay:1.7s}
@keyframes twinkle2{0%,100%{opacity:0; transform:scale(.4)} 50%{opacity:1; transform:scale(1) rotate(45deg)}}
.ar-txt{position:absolute; left:0; right:0; bottom:0; padding:0 14px clamp(16px,2.4vw,24px); display:flex; flex-direction:column; gap:4px; text-align:center}
.ar-txt b{font-family:var(--serif); font-weight:400; font-size:clamp(1.3rem,2vw,1.6rem)}
.ar-txt small{font-size:12.5px; color:var(--muted); line-height:1.35}
.ar-txt em{font-style:normal; font-size:13px; font-weight:600; margin-top:8px; align-self:center; padding:8px 14px; border-radius:99px; background:var(--text); color:var(--bg); display:inline-flex; gap:6px; transition:gap .3s}
.all-rooms:hover .ar-txt em{gap:12px}
.ar-frame{margin-bottom:0}
@media (max-width:900px){ .ar-fan{top:40%} .ar-fan i{width:38px; height:50px; left:-19px} .ar-txt{padding:0 8px 14px} .ar-txt small{display:none} }

/* ---------- coming soon, animated ---------- */
.soon-top{position:relative; aspect-ratio:16/9; overflow:hidden; background:radial-gradient(90% 80% at 50% 100%,color-mix(in srgb,var(--w-color) 70%,#fff),var(--surface) 75%)}
.soon-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(3px) saturate(.7); opacity:.45}
.soon-scene{position:absolute; inset:0; display:grid; place-items:end center}
.soon-scene svg{position:relative; width:auto; height:88%; overflow:visible}
.soon-scene .frame{fill:none; stroke:var(--gold); stroke-width:2}
.soon-scene .step{stroke:var(--gold); stroke-width:2}
.soon-scene .leaf path{fill:color-mix(in srgb,var(--w-color) 80%,#fff); stroke:var(--gold); stroke-width:1.2}
.soon-scene .leaf circle{fill:var(--gold)}
.soon-scene .leaf.l{transform-origin:44px 120px; animation:doorL 5s ease-in-out infinite}
.soon-scene .leaf.r{transform-origin:156px 120px; animation:doorR 5s ease-in-out infinite}
@keyframes doorL{0%,20%,100%{transform:scaleX(1)} 50%,70%{transform:scaleX(.72)}}
@keyframes doorR{0%,20%,100%{transform:scaleX(1)} 50%,70%{transform:scaleX(.72)}}
.soon-scene .glow{position:absolute; left:50%; bottom:6%; width:34%; aspect-ratio:1; margin-left:-17%; border-radius:50%; background:radial-gradient(circle,rgba(255,236,200,.95),rgba(255,214,170,.35) 45%,transparent 70%); animation:glowP 5s ease-in-out infinite; filter:blur(4px)}
@keyframes glowP{0%,20%,100%{opacity:.25; transform:scale(.8)} 50%,70%{opacity:1; transform:scale(1.15)}}
.soon-scene .sp{position:absolute; width:9px; height:9px; background:var(--gold); clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); opacity:0; animation:floatUp 4.5s ease-in infinite}
.soon-scene .s1{left:40%; bottom:20%} .soon-scene .s2{left:55%; bottom:26%; animation-delay:.9s} .soon-scene .s3{left:47%; bottom:14%; animation-delay:1.8s}
.soon-scene .s4{left:60%; bottom:12%; animation-delay:2.7s} .soon-scene .s5{left:35%; bottom:30%; animation-delay:3.4s}
@keyframes floatUp{0%{opacity:0; transform:translateY(0) scale(.5)} 30%{opacity:1} 100%{opacity:0; transform:translateY(-90px) scale(1.1) rotate(90deg)}}
.branch-card.soon .ribbon{transform-origin:0 50%; animation:ribbonSway 3.2s ease-in-out infinite}
@keyframes ribbonSway{50%{transform:rotate(-3deg) translateX(3px)}}
.branch-card.soon .ribbon::after{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%); background-size:250% 100%; animation:sheen 3s ease-in-out infinite}
.soon-k{font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--rose-ink); margin-bottom:6px}
.soon-dots{margin-top:18px; font-family:var(--serif); font-style:italic; color:var(--muted)}
.soon-dots span{display:inline-block; animation:dotB 1.4s ease-in-out infinite}
.soon-dots span:nth-child(2){animation-delay:.2s} .soon-dots span:nth-child(3){animation-delay:.4s}
@keyframes dotB{0%,60%,100%{transform:none; opacity:.4} 30%{transform:translateY(-4px); opacity:1}}
:root[data-theme="dark"] .soon-top{background:radial-gradient(90% 80% at 50% 100%,color-mix(in srgb,var(--w-color) 25%,#1C1819),#1C1819 75%)}
:root[data-theme="dark"] .soon-scene .leaf path{fill:color-mix(in srgb,var(--w-color) 30%,#2A2324)}