/* très j — site.css · bone & sage · the room's tempo. Buck's laws: type +25%, big masthead w/ phone over Book, img{height:auto}, every clickable = rest+hover+click (.ix). */
:root{
  --bone:#F6F2EC;--cream:#EFE8DF;--linen:#E4DCD1;--sage:#98ABB0;--sage-deep:#5F7A80;--sage-ink:#2E3D42;--ink:#23272A;--graphite:#5B6166;--aqua:#9FD8D2;--white:#fff;
  --wrap:min(1440px,100% - 48px);--ease:cubic-bezier(.45,0,.2,1);--display:"Cormorant Garamond",Georgia,serif;--text:"Figtree",system-ui,sans-serif;
  --mast:190px;--r:32px;--shadow:0 30px 70px -36px rgb(95 122 128 / .45);
}
@media (min-width:1500px){:root{--wrap:min(1600px,100% - 64px)}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bone)}
body{margin:0;background:var(--bone);color:var(--ink);font:400 22px/1.55 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden;cursor:none}
@media (hover:none),(pointer:coarse){body{cursor:auto}}
img{height:auto;max-width:100%;display:block}
video{display:block}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:rgb(152 171 176 / .45)}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bone);padding:10px 16px;border-radius:999px;z-index:99}
.skip:focus{left:16px}
/* grain */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;opacity:.035;z-index:60;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-2%,1%)}40%{transform:translate(1%,-2%)}60%{transform:translate(-1%,2%)}80%{transform:translate(2%,-1%)}100%{transform:translate(0,0)}}
/* type */
.label{font:600 15px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--sage-deep);margin:0 0 24px}
h1{font:300 clamp(62px,8vw,164px)/1 var(--display);letter-spacing:-.01em;margin:0 0 32px}
h2{font:300 clamp(46px,5vw,96px)/1.05 var(--display);margin:0 0 28px;letter-spacing:-.01em}
h3{font:400 clamp(28px,2.4vw,42px)/1.15 var(--display);margin:0 0 12px}
h1 em,h2 em,h3 em{font-style:italic;font-weight:300;color:var(--sage-deep)}
p{margin:0 0 18px}
.lede{font-size:clamp(22px,1.65vw,28px);max-width:880px;color:var(--graphite)}
.small{font-size:17px;color:var(--graphite)}
ul.clean{list-style:none;padding:0;margin:0}
/* masthead */
.mast{position:sticky;top:0;z-index:40;background:rgb(246 242 236 / .9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgb(152 171 176 / .3);transition:height .5s var(--ease)}
.mast .wrap{display:flex;align-items:center;gap:36px;height:var(--mast);transition:height .5s var(--ease);width:min(100% - 96px,2240px)}
.mast.scrolled .wrap{height:120px}
.mark{display:flex;align-items:center;gap:16px;text-decoration:none;flex:none;padding:0;height:100%;overflow:visible}
a.mark.ix:hover,a.mark.ix:focus-visible{transform:none!important;box-shadow:none!important}   /* no box on hover — the magic is in the mark itself */
.markbox{position:relative;display:inline-flex;height:172px;transition:height .5s var(--ease)}
.markbox img{height:100%;width:auto;object-fit:contain;display:block;transition:filter .9s var(--ease),transform .9s var(--ease)}
.mast.scrolled .markbox{height:106px}
/* a gold light shining through the mark, left to right, slowly, on a loop — masked to the logo's own shape. 10/02: logo v2 = the ORIGINAL lowercase trés j mark (Jill #1), traced to vector + satin sage; the mask is its flat silhouette */
.sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.95;
  background:linear-gradient(100deg,transparent 34%,rgb(255 236 190 / .55) 44%,rgb(255 226 150 / 1) 50%,rgb(255 236 190 / .55) 56%,transparent 66%);
  background-size:220% 100%;background-repeat:no-repeat;background-position:-140% 0;
  -webkit-mask:url(/img/logo-v3-1000.png) center/100% 100% no-repeat;mask:url(/img/logo-v3-1000.png) center/100% 100% no-repeat;
  animation:sheen-sweep 26s linear infinite}
@keyframes sheen-sweep{0%{background-position:-140% 0}62%{background-position:140% 0}100%{background-position:140% 0}}
@keyframes sheen-hover{0%{background-position:-140% 0}62%{background-position:140% 0}100%{background-position:140% 0}}
.mark:hover .sheen,.mark:focus-visible .sheen{animation:sheen-hover 7s linear infinite;opacity:1}   /* 10/02: same 7 s pace as 1earth.ai's hover, but a different keyframe NAME so the sweep restarts the moment you hover; at rest the 26 s drift is unchanged */
.mark:hover .markbox img{filter:drop-shadow(0 0 18px rgb(232 199 122 / .35)) brightness(1.05) saturate(1.05);transform:scale(1.025)}
.mark .drop{display:none}                                               /* the click ripple would draw a circle over the mark; the sheen answers instead */
.mark.pressed .markbox img{transform:scale(.985)}
.markbox.foot{height:auto;width:300px;max-width:100%}
.markbox.foot img{width:100%;height:auto}
.markbox.foot .sheen{opacity:.55;animation-duration:34s}
.mast nav{display:flex;gap:38px;margin-left:auto;font-size:25px}
.mast nav a{text-decoration:none;position:relative;padding:8px 0;white-space:nowrap}
.mast nav a::after{content:"";position:absolute;left:50%;bottom:0;width:3px;height:3px;border-radius:50%;background:var(--sage);transform:translateX(-50%);animation:dot 5s var(--ease) infinite}
.mast nav a:nth-child(2)::after{animation-delay:.4s}.mast nav a:nth-child(3)::after{animation-delay:.8s}.mast nav a:nth-child(4)::after{animation-delay:1.2s}.mast nav a:nth-child(5)::after{animation-delay:1.6s}.mast nav a:nth-child(6)::after{animation-delay:2s}
.mast nav a[aria-current="page"]::after{width:18px;border-radius:2px;animation:none;opacity:1}
@keyframes dot{0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.6)}}
.mast .cta{display:flex;flex-direction:row;align-items:center;gap:30px;flex:none;margin-left:10px}
.mast .phone{font:500 25px/1 var(--text);letter-spacing:.02em;text-decoration:none;color:var(--ink);white-space:nowrap;position:relative;padding:8px 0}
.mast .phone::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.mast .phone:hover::after{transform:scaleX(1)}
.mast .phone:hover,.mast .phone:focus-visible{transform:none;box-shadow:none}
.mast .cta .btn{height:66px;padding:0 36px;font-size:21px}
.rain{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--sage-deep);border-radius:999px;padding:13px 18px;background:transparent;font:500 14px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--sage-deep);flex:none}
.rain .bars{display:inline-flex;gap:3px;align-items:flex-end;height:14px}
.rain .bars i{display:block;width:3px;height:6px;background:var(--sage-deep);border-radius:2px;animation:bar 2.4s var(--ease) infinite;opacity:.75}
.rain .bars i:nth-child(2){animation-delay:.3s;height:12px}.rain .bars i:nth-child(3){animation-delay:.6s;height:8px}
.rain[aria-pressed="false"] .bars i{animation-play-state:paused;height:3px}
@keyframes bar{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.2)}}
.burger{display:none;width:52px;height:52px;border-radius:50%;border:1px solid var(--sage-deep);background:transparent;place-items:center}
.burger i{display:block;width:20px;height:1.5px;background:var(--ink);margin:3px auto;transition:transform .4s var(--ease),opacity .4s var(--ease)}
.menu{display:none}
/* buttons + the interaction law */
.ix{position:relative;isolation:isolate;transition:transform .55s var(--ease),box-shadow .55s var(--ease),letter-spacing .55s var(--ease),font-variation-settings .55s var(--ease),background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);-webkit-tap-highlight-color:transparent}
.ix:hover,.ix:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow);outline:none}
.ix.pressed{transform:scale(.97)!important;transition-duration:.11s}
.ix .drop{position:absolute;border-radius:50%;border:1.5px solid var(--aqua);pointer-events:none;transform:translate(-50%,-50%) scale(0);animation:drop .7s var(--ease) forwards;z-index:3}
.ix .drop.two{animation-delay:.12s}
@keyframes drop{0%{opacity:.65;transform:translate(-50%,-50%) scale(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.clip{overflow:hidden}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;padding:0 36px;height:62px;text-decoration:none;font:500 18px/1 var(--text);letter-spacing:.01em;border:1px solid var(--sage-deep);color:var(--ink);background:transparent;cursor:none;animation:breathe 7s var(--ease) infinite alternate;overflow:hidden;white-space:nowrap}
@media (hover:none),(pointer:coarse){.btn{cursor:pointer}}
.btn.primary{background:var(--sage-deep);color:var(--bone)}
.btn.light{border-color:rgb(246 242 236 / .7);color:var(--bone)}
.btn.light.primary{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--a,0deg),transparent 0 78%,var(--aqua) 86%,transparent 94%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:seam 9s linear infinite;opacity:.55;pointer-events:none}
.btn:hover::before,.btn:focus-visible::before{opacity:1}
.btn:hover,.btn:focus-visible{letter-spacing:.03em;font-variation-settings:"wght" 560}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes seam{to{--a:360deg}}
@keyframes breathe{from{scale:1}to{scale:1.012}}
.btn .arr{transition:transform .55s var(--ease)}.btn:hover .arr{transform:translateX(6px)}
.textlink{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:500;color:var(--sage-deep);padding:4px 0}
.textlink .arr{transition:transform .55s var(--ease)}.textlink:hover .arr{transform:translateX(6px)}
.textlink:hover,.textlink:focus-visible{transform:none;box-shadow:none}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{border:1px solid rgb(95 122 128 / .5);border-radius:999px;padding:8px 14px;font:500 14px/1 var(--text);letter-spacing:.04em;color:var(--sage-deep);background:rgb(246 242 236 / .6);text-decoration:none;display:inline-block}
.bgfilm{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bgfilm video{width:100%;height:100%;object-fit:cover;opacity:.16;filter:saturate(.6)}
/* sections — the room's light changes as you walk: bone → cream → pale sage → deep sage; never two whites in a row */
section{padding:120px 0;position:relative}
.band{background:var(--cream)}
.tint{background:linear-gradient(180deg,#E9EEEE 0%,#E4EAEA 100%)}
.tint .label{color:var(--sage-deep)}
.bgfilm{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bgfilm video{width:100%;height:100%;object-fit:cover;opacity:.16;filter:saturate(.6)}
.bgfilm.soft video{opacity:.14;filter:saturate(.35) brightness(1.05)}
.bgfilm.softer video{opacity:.07;filter:saturate(.3) brightness(1.08)}
.orn{position:absolute;width:64px;height:auto;opacity:.9;pointer-events:none;animation:drift 11s var(--ease) infinite alternate}
.orn-tl{left:-90px;top:-10px;transform:rotate(-12deg)}
.orn-label{display:flex;align-items:center;gap:14px}
.orn-label::before{content:"";width:46px;height:1px;background:var(--sage)}
.divider{display:flex;align-items:center;gap:22px;width:var(--wrap);margin:-40px auto 0;position:relative;z-index:2}
.divider span{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgb(152 171 176 / .6),transparent)}
.divider img{width:40px;height:auto;opacity:.85}
.markband{overflow:hidden}
.markfaint{position:absolute;right:-6%;top:-8%;width:min(60vw,900px);height:auto;pointer-events:none;transform:rotate(-8deg);animation:kb 40s var(--ease) infinite alternate}
/* tonal room cards (no video on the front page — the room's film lives on its own page) */
.room.tonal{background:linear-gradient(160deg,var(--linen),var(--cream));color:var(--ink);min-height:400px;border:1px solid rgb(152 171 176 / .35)}
.room.tonal::before{background:radial-gradient(120% 90% at 100% 0%,rgb(152 171 176 / .35),transparent 60%)}
.room.tonal .num{position:absolute;left:30px;top:26px;z-index:2;font:300 22px/1 var(--display);letter-spacing:.08em;color:var(--sage-deep)}
.room.tonal .leaf{position:absolute;right:26px;top:22px;width:64px;height:auto;z-index:2;opacity:.9;transition:transform 1.2s var(--ease),opacity .8s var(--ease);transform:rotate(-10deg)}
.room.tonal:hover .leaf{transform:rotate(0deg) translateY(-4px) scale(1.06)}
.room.tonal b{color:var(--ink)}.room.tonal small{color:var(--graphite)}
.room.tonal .more{color:var(--sage-deep)}
.room.tonal .inside{position:absolute;left:30px;top:72px;z-index:2;list-style:none;margin:0;padding:0;display:grid;gap:6px}
.room.tonal .inside li{font:400 17px/1.3 var(--text);color:var(--graphite);opacity:.85}
.room.tonal .inside li::before{content:"·";color:var(--sage);margin-right:8px}
.room.r-injectables{background:linear-gradient(160deg,#E7E1D6,#EFE8DF)}
.room.r-skin{background:linear-gradient(160deg,#E4EAEA,#EEF1F0)}
.room.r-laser{background:linear-gradient(160deg,#DCE4E5,#E9EEEE)}
.room.r-body{background:linear-gradient(160deg,#EAE3DA,#F1ECE4)}
.room.r-wellness{background:linear-gradient(160deg,#E0E7E3,#EBEFEC)}
.room.r-massage{background:linear-gradient(160deg,#D8DFE0,#E5EAEA)}
.roomfilm{position:relative;border-radius:var(--r);overflow:hidden;background:var(--linen);box-shadow:var(--shadow)}
.roomfilm video{width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.92)}
.roomfilm .cap{position:absolute;left:18px;bottom:16px;padding:8px 14px;border-radius:999px;background:rgb(46 61 66 / .5);color:var(--bone);font:500 13px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(6px)}
.dark{background:var(--sage-ink);color:var(--bone)}
.dark .label{color:var(--aqua)}.dark h2 em,.dark h3 em{color:var(--aqua)}.dark .lede,.dark .small{color:rgb(246 242 236 / .72)}
.dark .btn{border-color:rgb(246 242 236 / .6);color:var(--bone)}.dark .btn.primary{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.split.rev>:first-child{order:2}
/* hero */
.hero{position:relative;min-height:calc(100svh - var(--mast));display:grid;align-items:end;color:var(--bone);padding:0;overflow:hidden;background:var(--sage-ink)}
.hero .film{position:absolute;inset:0}
.hero .film video,.hero .film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s var(--ease);transform-origin:center;animation:kb 32s var(--ease) infinite alternate}
.hero .film video.on,.hero .film img.on{opacity:1}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.06)}}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgb(46 61 66 / .25) 0%,rgb(46 61 66 / .05) 35%,rgb(46 61 66 / .62) 100%)}
.hero .wm{position:absolute;right:22px;top:18px;font:500 12px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:rgb(246 242 236 / .55);background:rgb(46 61 66 / .35);padding:8px 12px;border-radius:999px;backdrop-filter:blur(6px)}
.hero .inner{position:relative;padding:160px 0 70px;display:grid;gap:34px}
.hero h1{color:var(--bone);max-width:1150px;text-wrap:balance;text-shadow:0 2px 28px rgb(46 61 66 / .45)}
.hero h1 em{color:var(--aqua)}
.hero .lede{color:rgb(246 242 236 / .88);max-width:760px;text-shadow:0 1px 16px rgb(46 61 66 / .5)}
.hero .label{color:var(--bone)!important;opacity:.9;text-shadow:0 1px 14px rgb(46 61 66 / .6)}
.hero .ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;font-size:16px;color:rgb(246 242 236 / .7)}
.hero .foot a{color:inherit;text-decoration:none}
.hero .dots{display:flex;gap:8px}
.hero .dots i{display:block;width:22px;height:2px;background:rgb(246 242 236 / .35);border-radius:2px;transition:background .6s}
.hero .dots i.on{background:var(--aqua)}
/* trust */
.trust{padding:64px 0;border-bottom:1px solid rgb(152 171 176 / .3)}
.trust .row{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.trust b{display:block;font:300 clamp(40px,3.5vw,66px)/1 var(--display);margin-bottom:8px}
.trust small{display:block;font-size:18px;color:var(--graphite);letter-spacing:.02em}
.trust .g{color:var(--sage-deep)}
/* rooms */
.rooms{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.room{grid-column:span 2;position:relative;border-radius:var(--r);overflow:hidden;background:var(--linen);min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;color:var(--bone);animation:drift 11s var(--ease) infinite alternate}
.room:nth-child(2n){animation-delay:-3s}.room:nth-child(3n){animation-delay:-7s}
.room video,.room img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;filter:saturate(.85) blur(1.5px);transform:scale(1.04);transition:opacity 1s var(--ease),filter 1s var(--ease),transform 1.4s var(--ease)}
.room:hover video,.room:hover img.bg{opacity:.95;filter:saturate(1) blur(0);transform:scale(1.0)}
.room::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(46 61 66 / .05),rgb(46 61 66 / .78));z-index:1}
.room .txt{position:relative;z-index:2;padding:30px 30px 30px;display:grid;gap:8px}
.room b{font:400 clamp(34px,3vw,52px)/1.05 var(--display)}
.room small{font-size:18px;color:rgb(246 242 236 / .85)}
.room .more{margin-top:10px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--aqua);opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.room:hover .more{opacity:1;transform:none}
@keyframes drift{from{translate:0 0}to{translate:0 -3px}}
/* promos */
.promo{background:var(--bone);border-radius:28px;padding:32px 30px 30px;border:1px solid rgb(152 171 176 / .35);display:flex;flex-direction:column;gap:12px;animation:drift 11s var(--ease) infinite alternate}
.promo .tag{font:600 14px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep)}
.promo b{font:400 33px/1.1 var(--display)}
.promo p{color:var(--graphite);font-size:19px;flex:1}
/* steps */
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.steps li{counter-increment:s;background:var(--bone);border-radius:28px;padding:32px 30px 30px;border:1px solid rgb(152 171 176 / .35)}
.steps li::before{content:counter(s,decimal-leading-zero);font:300 56px/1 var(--display);color:var(--sage);display:block;margin-bottom:14px}
.steps b{display:block;font:400 31px/1.15 var(--display);margin-bottom:10px}
.steps p{color:var(--graphite);font-size:19px;margin:0}
/* results */
.ba{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;background:var(--linen);user-select:none;touch-action:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--x,50%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--bone);transform:translateX(-1px);box-shadow:0 0 0 1px rgb(46 61 66 / .2)}
.ba .knob{position:absolute;top:50%;left:var(--x,50%);width:58px;height:58px;border-radius:50%;background:var(--bone);transform:translate(-50%,-50%);display:grid;place-items:center;font-size:18px;color:var(--sage-deep);box-shadow:0 10px 30px -10px rgb(46 61 66 / .5);animation:breathe 7s var(--ease) infinite alternate}
.ba .tag{position:absolute;bottom:18px;padding:8px 14px;border-radius:999px;background:rgb(46 61 66 / .55);color:var(--bone);font:500 13px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(6px)}
.ba .tag.l{left:18px}.ba .tag.r{right:18px}
.sidefilm{border-radius:var(--r);overflow:hidden;background:var(--linen);position:relative}
.sidefilm video{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.92)}
.sidefilm.portrait video{aspect-ratio:4/5}
/* team */
.owners{border-radius:var(--r);overflow:hidden;background:var(--linen)}
.owners img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.95)}
.quote{font:300 italic clamp(28px,2.6vw,44px)/1.25 var(--display);color:var(--sage-deep);margin:0 0 26px}
.qa{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.qa div{background:var(--bone);border:1px solid rgb(152 171 176 / .35);border-radius:22px;padding:20px 22px}
.qa small{display:block;font:600 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:8px}
.qa span{font-size:18px}
/* reviews */
.reviews .card{background:rgb(246 242 236 / .06);border:1px solid rgb(246 242 236 / .14);border-radius:28px;padding:34px 32px 30px;display:flex;flex-direction:column;gap:18px;min-height:280px}
.reviews .card p{font:300 clamp(22px,1.65vw,28px)/1.45 var(--display);margin:0;flex:1}
.reviews .card b{font:500 15px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--aqua)}
.gbadge{display:inline-flex;align-items:center;gap:12px;font-size:17px;color:rgb(246 242 236 / .85);text-decoration:none;border:1px solid rgb(246 242 236 / .3);border-radius:999px;padding:12px 20px}
.stars{color:#E8C77A;letter-spacing:.1em}
/* space */
.space .film{border-radius:var(--r);overflow:hidden;background:var(--linen)}
.space .film video{width:100%;aspect-ratio:21/9;object-fit:cover;filter:saturate(.9)}
.hours{display:grid;gap:10px;font-size:18px}
.hours div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid rgb(152 171 176 / .3);padding:10px 0}
.hours div span:last-child{color:var(--graphite)}
.mapf{border:0;width:100%;aspect-ratio:4/3;border-radius:22px;filter:saturate(.7) contrast(.95)}
/* brands */
.brands{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between}
.brands span{font:400 clamp(22px,1.8vw,30px)/1 var(--display);letter-spacing:.04em;color:var(--graphite)}
/* faq */
details{border-top:1px solid rgb(152 171 176 / .35)}
details:last-of-type{border-bottom:1px solid rgb(152 171 176 / .35)}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font:400 clamp(22px,1.8vw,30px)/1.2 var(--display);cursor:none}
@media (hover:none){summary{cursor:pointer}}
summary::-webkit-details-marker{display:none}
summary .pm{width:40px;height:40px;border-radius:50%;border:1px solid var(--sage-deep);display:grid;place-items:center;color:var(--sage-deep);font-size:22px;line-height:1;flex:none;transition:transform .5s var(--ease),background .4s,color .4s}
details[open] summary .pm{transform:rotate(45deg);background:var(--sage-deep);color:var(--bone)}
details .body{padding:0 0 26px;color:var(--graphite);font-size:19px;max-width:900px}
details::details-content{block-size:0;overflow:hidden;transition:block-size .55s var(--ease),content-visibility .55s allow-discrete}
details[open]::details-content{block-size:auto}
/* forms */
.form{display:grid;gap:16px}
.form label{display:grid;gap:8px;font:500 14px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--sage-deep)}
.form input,.form textarea,.form select{font:400 19px/1.4 var(--text);color:var(--ink);background:var(--white);border:1px solid rgb(152 171 176 / .5);border-radius:18px;padding:16px 18px;width:100%;transition:border-color .4s,box-shadow .4s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--sage-deep);box-shadow:0 0 0 4px rgb(159 216 210 / .35)}
.form textarea{min-height:120px;resize:vertical}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .ok{color:var(--sage-deep);font-size:17px}
/* footer */
footer{background:var(--sage-ink);color:var(--bone);padding:90px 0 40px}
footer .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px;align-items:start}
footer .fmark{display:grid;gap:6px}
footer h4{font:600 14px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--aqua);margin:0 0 18px}
footer a{color:rgb(246 242 236 / .85);text-decoration:none;display:block;padding:6px 0;font-size:18px}
footer .fine{margin-top:60px;padding-top:24px;border-top:1px solid rgb(246 242 236 / .15);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px;color:rgb(246 242 236 / .55)}
footer .fine a{display:inline;padding:0;font-size:inherit}
/* treatment pages */
.thead{padding:90px 0 60px;background:var(--cream)}
.thead .meta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 34px}
.tbody{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
.tbody .blocks h3{margin-top:30px}
.tbody .blocks ul{padding-left:0;list-style:none;display:grid;gap:10px;margin:0 0 20px}
.tbody .blocks li{position:relative;padding-left:30px;font-size:21px}
.tbody .blocks li::before{content:"";position:absolute;left:0;top:12px;width:14px;height:14px;border-radius:50%;background:rgb(152 171 176 / .35);box-shadow:inset 0 0 0 3px var(--bone)}
.tbody .blocks p{font-size:21px;color:var(--graphite)}
.aside{position:sticky;top:calc(var(--mast) + 24px);display:grid;gap:22px}
.aside .card{background:var(--cream);border-radius:28px;padding:30px;display:grid;gap:14px}
.aside .card b{font:400 28px/1.1 var(--display)}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rel{background:var(--bone);border:1px solid rgb(152 171 176 / .35);border-radius:24px;padding:26px;text-decoration:none;display:grid;gap:8px;animation:drift 11s var(--ease) infinite alternate}
.rel b{font:400 26px/1.1 var(--display)}
.rel small{color:var(--graphite);font-size:16px}
.tlist{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:var(--bone);border:1px solid rgb(152 171 176 / .35);border-radius:28px;padding:28px 28px 26px;text-decoration:none;display:grid;gap:10px;animation:drift 11s var(--ease) infinite alternate}
.tcard b{font:400 33px/1.1 var(--display)}
.tcard small{color:var(--graphite);font-size:18px}
.tcard .meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.tcard .meta span{font:500 13px/1 var(--text);letter-spacing:.06em;color:var(--sage-deep);border:1px solid rgb(95 122 128 / .4);border-radius:999px;padding:7px 12px}
/* generic pages */
.page{padding:90px 0 40px}
.prose{max-width:900px;font-size:21px;color:var(--graphite)}
details .body{font-size:21px}
summary{font-size:clamp(24px,2vw,33px)}
.hours{font-size:19px}
.qa span{font-size:19px}
.rel small,.chip{font-size:15px}
.prose h3{color:var(--ink);margin-top:34px}
.prose li{margin:0 0 10px}
/* reveal + motion */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.cur{position:fixed;left:0;top:0;width:8px;height:8px;border-radius:50%;background:var(--sage-deep);pointer-events:none;z-index:70;translate:-50% -50%;transition:width .45s var(--ease),height .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease);mix-blend-mode:multiply}
.cur.on{width:34px;height:34px;background:rgb(159 216 210 / .28);border:1.5px solid var(--aqua)}
.cur::after{content:"";position:absolute;inset:0;margin:auto;width:6px;height:8px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--sage-deep);opacity:0;transition:opacity .45s var(--ease)}
.cur.on::after{opacity:.8}
.dark .cur{mix-blend-mode:normal}
@media (hover:none),(pointer:coarse){.cur{display:none}}
.whisper{position:fixed;left:50%;bottom:34px;translate:-50% 0;background:rgb(46 61 66 / .9);color:var(--bone);border-radius:999px;padding:12px 22px;font:500 14px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity 1.2s var(--ease);z-index:65;pointer-events:none}
.whisper.show{opacity:1}
::view-transition-old(root),::view-transition-new(root){animation-duration:.55s}
@media (prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none}
  .ix,.ix:hover{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  /* ambient layer stays on purpose (brand): breathe, seam, drift, dots, grain, hero Ken Burns */
}
/* responsive */
@media (max-width:1180px){
  .rooms{grid-template-columns:repeat(2,1fr)}.room,.room:nth-child(1),.room:nth-child(2){grid-column:span 1;min-height:360px}
  .g4,.g3,.trust .row,.steps,.related,.tlist,.qa{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:40px}.split.rev>:first-child{order:0}
  .tbody{grid-template-columns:1fr}.aside{position:static}
  footer .cols{grid-template-columns:1fr 1fr}
  :root{--mast:140px}
  .mast.scrolled .wrap{height:104px}
  .markbox{height:120px}.mast.scrolled .markbox{height:90px}
  .mast nav{display:none}.burger{display:grid;margin-left:0}
  .mast .cta{display:flex;margin-left:auto;gap:14px}
  .mast .phone{display:none}
  .mast .cta .btn{height:54px;padding:0 24px;font-size:17px;animation:none}
  .mast .wrap{gap:18px}
  .orn,.divider{display:none}
  .trust .row{grid-template-columns:repeat(2,1fr);gap:30px 20px}
  .menu{display:none;position:fixed;inset:var(--mast) 0 0 0;background:var(--bone);z-index:39;padding:40px 24px;overflow:auto}
  .menu.open{display:block}
  .menu a{display:block;font:300 clamp(34px,7vw,56px)/1.15 var(--display);text-decoration:none;padding:12px 0;border-bottom:1px solid rgb(152 171 176 / .3)}
  .menu .mcta{display:grid;gap:14px;margin-top:30px}
}
@media (max-width:720px){
  :root{--mast:96px;--wrap:min(1440px,100% - 40px)}
  body{font-size:19px}
  section{padding:72px 0}
  .g4,.g3,.g2,.steps,.related,.tlist,.qa,.rooms{grid-template-columns:1fr}
  .trust{padding:44px 0}.trust .row{grid-template-columns:repeat(2,1fr);gap:26px 16px}
  .trust b{font-size:clamp(34px,9vw,44px)}.trust small{font-size:15px}
  .mast .wrap{width:calc(100% - 36px);gap:14px}
  .mast .cta .btn{height:48px;padding:0 20px;font-size:16px}
  .burger{width:48px;height:48px}
  .markbox{height:82px}.mast.scrolled .markbox{height:68px}
  .hero .inner{padding:96px 0 40px;gap:24px}
  .hero h1{font-size:clamp(50px,13.5vw,62px)}
  .hero .lede{font-size:20px}
  .hero .ctas .btn{width:100%}
  .label{font-size:13px;letter-spacing:.14em}
  h2{font-size:clamp(40px,10.5vw,46px)}
  .lede{font-size:20px}
  .room.tonal{min-height:0;justify-content:flex-start;padding-top:64px}
  .room.tonal .leaf{width:52px;right:22px;top:20px}
  .room.tonal .num{top:24px;left:26px}
  .room.tonal .inside{position:static;margin:0 26px 6px}
  .room.tonal .inside li{font-size:16px}
  .room .txt{padding:14px 26px 26px}
  .hero .film video,.hero .film img{object-position:center 62%}
  .room b{font-size:36px}
  .thead{padding:56px 0 44px}
  .thead h1{font-size:clamp(44px,11.5vw,56px)!important}
  .thead .meta{margin:18px 0 24px}
  .tbody{gap:36px}
  .steps li,.promo{padding:26px 24px 24px}
  .reviews .card{padding:28px 24px 26px;min-height:0}
  .reviews .card p{font-size:22px}
  .gbadge{font-size:16px;padding:10px 16px}
  footer{padding:64px 0 32px}
  .markbox.foot{width:220px}
  .menu{padding:28px 20px}
  .menu a{font-size:clamp(30px,8vw,38px)}
  .hero .inner{padding:120px 0 40px}
  .hero .foot{display:none}
  .form .row{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
  .promo b{font-size:26px}
}

/* ---- 9/22 late · true full-screen film with the glass masthead floating over it (Buck: "move the vids up to true full screen, header partially transparent over it") ---- */
.mast{background:rgb(246 242 236 / .42);border-bottom-color:rgb(246 242 236 / .28);transition:height .5s var(--ease),background .7s var(--ease),border-color .7s var(--ease)}
.mast.scrolled{background:rgb(246 242 236 / .9);border-bottom-color:rgb(152 171 176 / .3)}
body[data-route="home"] .hero{margin-top:calc(-1 * var(--mast) - 1px);min-height:calc(100svh + 1px)}
body[data-route="home"] .hero .inner{padding-top:calc(var(--mast) + 60px)}
body[data-route="home"] .mast:not(.scrolled) nav a,body[data-route="home"] .mast:not(.scrolled) .phone{text-shadow:0 1px 14px rgb(246 242 236 / .55)}
/* 10/02 logo v3 = Buck's GPT metallic render of the ORIGINAL lowercase mark (Desktop "NEW Trés J MEDSPA Metallic Logo.png"); glow/hover/sheen = exactly 1earth.ai; firmer bone glass at rest (.42 → .58) + the mark nudged right on desktop stay from Buck's round-2 asks */
body[data-route="home"] .mast:not(.scrolled){background:rgb(246 242 236 / .58);border-bottom-color:rgb(246 242 236 / .34)}
@media (min-width:1181px){.mast .mark{margin-left:96px}}
/* 10/02 Buck: "glam up Book now, halfway between flat and the logo — don't change the font": satin sage body, gold hairline edge, a soft top highlight, the logo's gold sheen sweep (slower, quieter), gold glow on hover. Font untouched. */
.mast .cta .btn.primary{position:relative;background:linear-gradient(165deg,#88A3A8 0%,#66818A 38%,#53696F 72%,#465A60 100%);border-color:rgb(214 184 126 / .75);box-shadow:inset 0 1px 0 rgb(255 255 255 / .28),inset 0 -1px 0 rgb(0 0 0 / .18),0 10px 24px -12px rgb(46 61 66 / .55);transition:box-shadow .6s var(--ease),filter .6s var(--ease)}
.mast .cta .btn.primary::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;opacity:.8;
  background:linear-gradient(100deg,transparent 34%,rgb(255 236 190 / .32) 44%,rgb(255 226 150 / .62) 50%,rgb(255 236 190 / .32) 56%,transparent 66%);
  background-size:220% 100%;background-repeat:no-repeat;background-position:-140% 0;animation:sheen-sweep 26s linear -9s infinite}
.mast .cta .btn.primary:hover,.mast .cta .btn.primary:focus-visible{box-shadow:inset 0 1px 0 rgb(255 255 255 / .32),inset 0 -1px 0 rgb(0 0 0 / .18),0 0 18px rgb(232 199 122 / .38),0 10px 24px -12px rgb(46 61 66 / .55);filter:brightness(1.05) saturate(1.05)}
.mast .cta .btn.primary:hover::after,.mast .cta .btn.primary:focus-visible::after{animation:sheen-hover 7s linear infinite;opacity:1}
#main [id]{scroll-margin-top:130px}
@media (max-width:1180px){#main [id]{scroll-margin-top:112px}}
@media (max-width:720px){#main [id]{scroll-margin-top:100px}}
.skip,.skip.ix{position:absolute}   /* .ix made it relative → a 34px ghost strip above the masthead on every page */
@media (max-width:720px){.mast.scrolled .wrap{height:80px}}   /* was inheriting the tablet 104px → header GREW on scroll on phones */

/* ---- 9/22 late · the six room cards carry their room's film at half strength under a tonal veil; every word stays (Buck) ---- */
.room.tonal.film video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(.82) contrast(.96);transform:scale(1.03);transition:opacity 1.2s var(--ease),transform 1.8s var(--ease),filter 1.2s var(--ease);z-index:0}
.room.tonal.film:hover video.bg{opacity:.82;transform:scale(1);filter:saturate(1) contrast(1)}
.room.tonal.film::before{background:linear-gradient(180deg,rgb(241 236 228 / .5) 0%,rgb(241 236 228 / .14) 36%,rgb(241 236 228 / .6) 68%,rgb(241 236 228 / .92) 100%);z-index:1}
.room.tonal.film .inside{background:rgb(246 242 236 / .6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:12px 16px 12px 14px;border-radius:16px;border:1px solid rgb(246 242 236 / .55)}
.room.tonal.film .inside li{color:var(--ink);opacity:.9}
.room.tonal.film .num,.room.tonal.film .leaf{z-index:2}
.room.tonal.film b{text-shadow:0 1px 18px rgb(246 242 236 / .8)}
@media (max-width:720px){.room.tonal.film .inside{margin:0 22px 10px}.room.tonal.film video.bg{opacity:.42}}

/* ---- 9/22 late · hero copy +20% (Buck): label, lede, both buttons, address line ---- */
.hero .label{font-size:18px}
.hero .lede{font-size:clamp(26px,2vw,34px);max-width:920px}
.hero .ctas .btn{height:74px;padding:0 43px;font-size:22px;gap:14px}
.hero .foot{font-size:19px}
@media (max-width:720px){.hero .lede{font-size:24px}.hero .ctas .btn{height:66px;font-size:20px}}

/* ---- 9/22 late · Buck: no half transparency on the six room films — full film, text stays (now light over a soft dark base) ---- */
.room.tonal.film{border-color:rgb(46 61 66 / .18)}
.room.tonal.film video.bg{opacity:1;filter:saturate(.96) contrast(1);transform:scale(1.02)}
.room.tonal.film:hover video.bg{opacity:1;transform:scale(1.06);filter:saturate(1.02)}
.room.tonal.film::before{background:linear-gradient(180deg,rgb(46 61 66 / .22) 0%,rgb(46 61 66 / .08) 34%,rgb(46 61 66 / .5) 66%,rgb(46 61 66 / .84) 100%)}
.room.tonal.film b{color:var(--bone);text-shadow:0 2px 26px rgb(46 61 66 / .65)}
.room.tonal.film small{color:rgb(246 242 236 / .9)}
.room.tonal.film .more{color:var(--aqua)}
.room.tonal.film .num{color:rgb(246 242 236 / .88);text-shadow:0 1px 10px rgb(46 61 66 / .6)}
.room.tonal.film .inside{background:rgb(46 61 66 / .4);border-color:rgb(246 242 236 / .2)}
.room.tonal.film .inside li{color:var(--bone);opacity:.94}
.room.tonal.film .inside li::before{color:var(--aqua)}
@media (max-width:720px){.room.tonal.film video.bg{opacity:1}}

/* ---- 9/22 late · Buck: no half-transparent panels on the six room buttons at all — the list sits straight on the film ---- */
.room.tonal.film .inside{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;padding:0;border-radius:0}
.room.tonal.film .inside li{text-shadow:0 1px 14px rgb(46 61 66 / .85),0 0 3px rgb(46 61 66 / .6)}
.room.tonal.film small{text-shadow:0 1px 14px rgb(46 61 66 / .8)}
@media (max-width:720px){.room.tonal.film .inside{margin:0 26px 6px}}

/* 10/01 Jill's list: brand name never shouts; XERF feature tile; 5th stat tile spans on 2-col layouts */
.brand{text-transform:none}
.promo.feature{grid-column:1/-1}.promo.feature b{font-size:clamp(34px,3vw,46px)}
@media (max-width:1180px){.trust .row>div:nth-child(5){grid-column:1/-1}}