:root{
  --ivory:#F5F0EA; --espresso:#453B36; --blush:#E7C6C2; --rose:#EFD9D5;
  --copper:#9C5F3F; --copper-l:#C08560; --muted:#6E5F57;
  --rule:rgba(69,59,54,.13); --rule-2:rgba(69,59,54,.24);
  --gutter:clamp(1.25rem,5vw,6rem); --maxw:1500px; --gap:clamp(1rem,1.6vw,2rem);
  --t-hero:clamp(3.1rem, 1.7rem + 6.6vw, 8.5rem);
  --t-disp:clamp(2.3rem, 1.5rem + 3.6vw, 5rem);
  --t-h3:clamp(1.25rem, 1.1rem + 0.8vw, 1.7rem);
  --t-body:1.0625rem; --t-label:.6875rem;
  --ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.175,.885,.32,1.6); --ease-l:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ivory);color:var(--espresso);font-family:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:var(--t-body);line-height:1.72;letter-spacing:.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--copper);text-decoration:none}

body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

h1,h2,h3{font-family:'Bodoni Moda','Prata',Georgia,serif;font-weight:400;font-optical-sizing:auto;text-wrap:balance}
h1{font-size:var(--t-hero);line-height:.9;letter-spacing:-.035em;font-variation-settings:"opsz" 92}
h2{font-size:var(--t-disp);line-height:.96;letter-spacing:-.026em;font-variation-settings:"opsz" 80;margin-bottom:1.1rem}
h3{font-size:var(--t-h3);line-height:1.12;letter-spacing:-.008em}
.it{font-style:italic}
p{margin-bottom:.9rem;max-inline-size:62ch;text-wrap:pretty}

.label{display:block;font:500 var(--t-label)/1 'Montserrat',sans-serif;text-transform:uppercase;
  letter-spacing:.22em;color:var(--copper);margin-bottom:1.4rem}
.label::before{content:"";display:inline-block;width:2.4rem;height:1px;background:var(--copper);
  vertical-align:middle;margin-right:.9rem;opacity:.85}
.muted{color:var(--muted)}

/* ---- liquid glass: refraction + bevel + specular, pure CSS/SVG ---- */
.glass{position:relative;isolation:isolate;
  background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.16) 42%,rgba(255,255,255,.34));
  -webkit-backdrop-filter:blur(13px) saturate(1.7) brightness(1.06);
  backdrop-filter:blur(13px) saturate(1.7) brightness(1.06);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 3px 3px .5px -3px rgba(255,255,255,.95),
    inset -3px -3px .5px -3px rgba(255,255,255,.75),
    inset 1px 1px 1px -.5px rgba(255,255,255,.7),
    inset -1px -1px 1px -.5px rgba(255,255,255,.7),
    inset 0 0 6px 6px rgba(255,255,255,.14),
    inset 0 0 2px 2px rgba(255,255,255,.08),
    0 0 6px rgba(69,59,54,.04),
    0 2px 6px rgba(69,59,54,.09),
    0 16px 40px -20px rgba(69,59,54,.28)}
/* specular sweep across the top edge */
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(160deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.08) 32%,transparent 55%)}
/* tint + inner rim, the reference's layers 2 and 3. The heavy SVG lens the
   reference stacks on top renders dark on repaint in Chrome, so the
   refraction stays on backdrop-filter where it is stable. */
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:rgba(255,255,255,.16);
  box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.5),
             inset -1px -1px 1px 1px rgba(255,255,255,.45)}

/* every glass surface reacts — grows, lifts and brightens on the spring curve */
.glass{transition:box-shadow .7s var(--spring),transform .7s var(--spring),
  background .5s var(--ease)}
.glass:hover{background:linear-gradient(135deg,rgba(255,255,255,.56),rgba(255,255,255,.24) 42%,rgba(255,255,255,.46))}
a.glass:hover,button.glass:hover,.menubtn:hover{
  transform:translateY(-1px) scale(1.015)}

/* The header bar keeps the glass look but never animates: growing its padding
   and easing border-radius from 999px to 2.2rem turned the pill into a box on
   hover. Only the things INSIDE it react. */
.bar{transition:background .5s var(--ease)}
/* the wordmark inside it */
.bar>a:first-child{display:inline-flex;padding:.28rem .55rem;border-radius:14px;
  transition:transform .7s var(--spring),background .45s var(--ease)}
.bar>a:first-child:hover{transform:scale(1.05);background:rgba(255,255,255,.5)}
/* each nav item becomes its own little glass pill */
header nav ul a{display:inline-block;padding:.42rem .78rem;border-radius:999px;
  transition:color .4s var(--ease),background .45s var(--ease),
    transform .7s var(--spring),box-shadow .6s var(--spring)}
header nav ul a:hover,header nav ul a:focus-visible{color:var(--copper);outline:none;
  background:rgba(255,255,255,.55);transform:translateY(-2px) scale(1.02);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 16px -11px rgba(69,59,54,.55)}
/* language toggle */
.lang button{transition:color .4s var(--ease),background .45s var(--ease),transform .6s var(--spring)}
.lang button:hover{transform:scale(1.08)}

/* glass buttons: .btn declares its own transition below, so restate the
   spring properties here or they get dropped */
.btn.glass{transition:color .5s var(--ease),background .5s var(--ease),
  transform .7s var(--spring),box-shadow .7s var(--spring)}
.btn.glass:hover{transform:translateY(-2px) scale(1.025);
  box-shadow:inset 3px 3px .5px -3px rgba(255,255,255,.95),
    inset -3px -3px .5px -3px rgba(255,255,255,.75),
    inset 0 0 8px 8px rgba(255,255,255,.18),
    0 22px 44px -22px rgba(69,59,54,.42)}
.btn.glass:active{transform:translateY(-1px) scale(1.01)}

@media(prefers-reduced-motion:reduce){
  .glass,.bar,.btn.glass,header nav ul a,.lang button,.bar>a:first-child{transition:none}
  a.glass:hover,button.glass:hover,.dk:hover,.lang:hover,.menubtn:hover,
  .bar:hover,.btn.glass:hover,header nav ul a:hover,.bar>a:first-child:hover{transform:none}}
/* NO SVG filter in backdrop-filter. Chrome composites an SVG-filtered backdrop
   over the filter region as a RECTANGLE and ignores border-radius, which is what
   produced the box leaking out of every pane. Plain CSS filter functions are
   clipped to the rounded border-box correctly, so the glass stays a pill. */
@media(max-width:760px){
  .glass{-webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5)}
}
.glass>*{position:relative;z-index:2}
/* keep every control clickable and every label painted above the glass pane */
.glass,.glass *{pointer-events:auto!important}
.glass>*,.glass span{position:relative;z-index:3}
.btn.glass{isolation:isolate}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border-radius:999px;padding:1rem 2rem;
  font:500 .75rem/1 'Montserrat',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--espresso);cursor:pointer;transition:color .5s var(--ease),background .5s var(--ease);border:0}
/* solid buttons: an animated radial bloom in Blush & Stone.
   @property lets the colour stops themselves transition rather than
   cross-fading two flat backgrounds. Unsupported browsers just snap. */
@property --pos-x   {syntax:'<percentage>';initial-value:12%;inherits:false}
@property --pos-y   {syntax:'<percentage>';initial-value:140%;inherits:false}
@property --sp-x    {syntax:'<percentage>';initial-value:150%;inherits:false}
@property --sp-y    {syntax:'<percentage>';initial-value:180%;inherits:false}
@property --c1 {syntax:'<color>';initial-value:#2E2724;inherits:false}
@property --c2 {syntax:'<color>';initial-value:#3B322D;inherits:false}
@property --c3 {syntax:'<color>';initial-value:#453B36;inherits:false}
@property --c4 {syntax:'<color>';initial-value:#5A4A41;inherits:false}
@property --c5 {syntax:'<color>';initial-value:#7A5B47;inherits:false}
@property --s1 {syntax:'<percentage>';initial-value:37%;inherits:false}
@property --s2 {syntax:'<percentage>';initial-value:61%;inherits:false}
@property --s3 {syntax:'<percentage>';initial-value:78%;inherits:false}
@property --s4 {syntax:'<percentage>';initial-value:90%;inherits:false}
@property --s5 {syntax:'<percentage>';initial-value:100%;inherits:false}
@property --ba  {syntax:'<angle>';initial-value:20deg;inherits:true}
@property --bc1 {syntax:'<color>';initial-value:rgba(231,198,194,.18);inherits:true}
@property --bc2 {syntax:'<color>';initial-value:rgba(231,198,194,.55);inherits:true}

.btn.solid{position:relative;appearance:none;color:var(--ivory);background:var(--espresso);
  background:radial-gradient(var(--sp-x) var(--sp-y) at var(--pos-x) var(--pos-y),
    var(--c1) var(--s1),var(--c2) var(--s2),var(--c3) var(--s3),
    var(--c4) var(--s4),var(--c5) var(--s5));
  transition:color .5s var(--ease),
    --pos-x .55s var(--ease),--pos-y .55s var(--ease),
    --sp-x .55s var(--ease),--sp-y .55s var(--ease),
    --c1 .55s var(--ease),--c2 .55s var(--ease),--c3 .55s var(--ease),
    --c4 .55s var(--ease),--c5 .55s var(--ease),
    --s1 .55s var(--ease),--s2 .55s var(--ease),--s3 .55s var(--ease),
    --s4 .55s var(--ease),--s5 .55s var(--ease),
    --ba .55s var(--ease),--bc1 .55s var(--ease),--bc2 .55s var(--ease)}
.btn.solid::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(var(--ba),var(--bc1),var(--bc2));pointer-events:none;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.btn.solid>*{position:relative;z-index:1}
.btn.solid:hover,.btn.solid:focus-visible{
  --pos-x:0%;--pos-y:92%;--sp-x:120%;--sp-y:103%;
  --c1:#C08560;--c2:#9C5F3F;--c3:#6E5F57;--c4:#453B36;--c5:#2E2724;
  --s1:0%;--s2:15%;--s3:41%;--s4:78%;--s5:92%;
  --ba:190deg;--bc1:rgba(245,240,234,.12);--bc2:rgba(231,198,194,.7)}
.btn.glass:hover{color:var(--copper)}
@media(prefers-reduced-motion:reduce){.btn.solid{transition:color .2s}}
.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem}

header{position:fixed;top:0;left:0;right:0;z-index:90;padding:.85rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.bar{display:flex;align-items:center;gap:1.6rem;border-radius:999px;padding:.55rem 1.4rem}
.wordmark{display:inline-flex;flex-direction:column;line-height:1.05;text-align:center;color:var(--espresso)}
.wm-name{font-family:'Bodoni Moda','Prata',Georgia,serif;font-size:21px;letter-spacing:.115em;text-indent:.115em}
.wm-sub{font-family:'Bodoni Moda','Prata',Georgia,serif;font-size:6.6px;letter-spacing:.42em;text-indent:.42em;margin-top:2px}
header nav ul{display:flex;flex-wrap:nowrap;gap:1.5rem;list-style:none;font-size:.82rem}
/* nothing in the bar may wrap: a wrapped link turns the pill into a tall box */
header nav ul a,.hdr-right .btn,.lang button,.bar>a:first-child{white-space:nowrap}
header{flex-wrap:nowrap}
.bar,.hdr-right{flex:0 1 auto;min-width:0}
/* between 1080 and 1360 the full header no longer fits at ease, so tighten
   it rather than let flexbox squeeze the nav into wrapping */
@media(max-width:1360px){
  :root{--hdr-h:3.625rem}
  header nav ul{gap:.85rem;font-size:.76rem}
  header nav ul a{padding:.36rem .58rem}
  .bar{gap:1rem;padding:.5rem 1.05rem}
  .hdr-right{gap:.4rem}
  .dkh{padding:.2rem;gap:.05rem}
  .dkh .dk__s{width:2rem;height:2rem;border-radius:50%}
  .dkh .dk__s svg{width:1rem;height:1rem}
  .dkh .dk__i{padding:.14rem}
  .lang button{padding:.36rem .58rem;font-size:.62rem}
  .hdr-right .btn{padding-left:1.1rem;padding-right:1.1rem;font-size:.66rem}
}
header nav a{color:var(--espresso);opacity:.78;transition:opacity .4s var(--ease)}
header nav a:hover{opacity:1}
.lang{position:relative;display:flex;border-radius:999px;padding:.28rem}
.lang button{position:relative;z-index:4;border:0;background:none;cursor:pointer;
  padding:.42rem .72rem;border-radius:999px;flex:1 1 50%;
  font:500 .66rem/1 'Montserrat',sans-serif;letter-spacing:.15em;color:var(--espresso);opacity:.55;
  transition:color .42s var(--ease),opacity .42s var(--ease)}
.lang button[aria-pressed="true"]{color:var(--ivory);opacity:1}
/* the knob: it slides on the spring curve and squashes on the way, so the
   switch flows across rather than snapping like a checkbox */
/* scoped past .glass>* , which would otherwise force this back to static flow */
.lang>.lang__p{position:absolute;z-index:3;top:.28rem;bottom:.28rem;left:.28rem;
  width:calc(50% - .28rem);border-radius:999px;pointer-events:none;
  background:linear-gradient(140deg,var(--copper-l),var(--copper) 58%,#7C4A31);
  box-shadow:0 8px 16px -10px rgba(69,59,54,.7),
             inset 0 1px 0 rgba(255,255,255,.42),
             inset 0 -1px 2px rgba(69,59,54,.28);
  transform:translate3d(0,0,0);transform-origin:50% 50%;
  transition:transform .66s var(--spring)}
/* the pane is now 60px tall, so inset the knob or it reads as a circle */
.lang>.lang__p{top:.72rem;bottom:.72rem}
.lang button{padding:.42rem .82rem}
.lang.mn>.lang__p{transform:translate3d(100%,0,0)}
.lang.go>.lang__p{animation:langFlow .66s var(--ease)}
@keyframes langFlow{
  0%  {scale:1 1}
  30% {scale:1.16 .86}
  62% {scale:.95 1.05}
  100%{scale:1 1}}
@media(prefers-reduced-motion:reduce){
  .lang>.lang__p{transition-duration:1ms}.lang.go>.lang__p{animation:none}}

/* ---- staggered reveal for retranslated copy ---- */
.te__w{display:inline-block;white-space:pre-wrap;
  animation:teIn .58s var(--ease) both;animation-delay:calc(var(--i,0) * 24ms)}
@keyframes teIn{
  from{opacity:0;filter:blur(9px);transform:translateY(9px)}
  to  {opacity:1;filter:blur(0);transform:none}}
@media(prefers-reduced-motion:reduce){.te__w{animation:none}}
.hdr-right{display:flex;gap:.6rem;align-items:center}
@media(max-width:1080px){header nav{display:none}}
@media(max-width:620px){.bar{padding:.55rem 1rem;gap:.8rem}.hdr-right .btn{display:none}.lang{padding:.2rem}}

.hero{min-height:100svh;align-items:end;padding-top:8rem;padding-bottom:clamp(3rem,9vh,7rem)}
.hero__vert{grid-column:1;align-self:end;writing-mode:vertical-rl;transform:rotate(180deg);
  font:500 var(--t-label)/1 'Montserrat',sans-serif;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(69,59,54,.5);padding-bottom:.5rem}
.hero__type{grid-column:2/8;padding-bottom:6vh}
.hero__img{grid-column:8/-1;align-self:start;margin-top:5vh;margin-right:calc(-1*var(--gutter));
  aspect-ratio:4/5;overflow:hidden}
.hero__img img{width:100%;height:118%;object-fit:cover;object-position:center 28%}
.hero p{font-size:clamp(1rem, 0.95rem + 0.3vw, 1.2rem);color:var(--muted);margin-top:1.6rem;max-inline-size:46ch}
@media(max-width:900px){
  .hero{min-height:auto;padding-top:6.5rem;padding-bottom:3rem}
  .hero__vert{display:none}
  .hero__type{grid-column:1/-1;order:2;padding-bottom:0;padding-top:2rem}
  .hero__img{grid-column:1/-1;order:1;margin:0 calc(-1*var(--gutter));aspect-ratio:4/3}
}

/* ---- location card: tilts to the cursor, opens to a street plan ---- */
.lmap{margin-top:2.4rem;perspective:1000px;width:max-content}
.lmap__c{position:relative;width:15rem;height:8.75rem;border-radius:1.25rem;overflow:hidden;
  cursor:pointer;outline:none;background:var(--ivory);border:1px solid rgba(69,59,54,.12);
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  box-shadow:0 18px 42px -30px rgba(69,59,54,.5);
  transition:width .75s var(--spring),height .75s var(--spring),
    transform .5s cubic-bezier(.2,.8,.3,1),box-shadow .6s var(--ease)}
.lmap__c:focus-visible{box-shadow:0 0 0 2px var(--copper),0 18px 42px -30px rgba(69,59,54,.5)}
.lmap__c.on{width:22.5rem;height:17.5rem;box-shadow:0 34px 70px -34px rgba(69,59,54,.55)}
.lmap__st{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  transition:opacity .5s var(--ease) .05s}
.lmap__c.on .lmap__st{opacity:1}
.lmap__st .rd{stroke:var(--espresso);stroke-linecap:round;fill:none;
  stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset .9s var(--ease)}
.lmap__st .rd.a{stroke-width:5;opacity:.2}
.lmap__st .rd.b{stroke-width:3.5;opacity:.16}
.lmap__st .rd.c{stroke-width:1.4;opacity:.1}
.lmap__c.on .rd{stroke-dashoffset:0}
.lmap__c.on .rd.b{transition-delay:.12s}
.lmap__c.on .rd.c{transition-delay:.22s}
/* soft ivory scrim so the address stays readable over the open street plan */
.lmap__c::after{content:"";position:absolute;inset:auto 0 0;height:56%;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .5s var(--ease) .1s;
  background:linear-gradient(to top,rgba(245,240,234,.97) 26%,rgba(245,240,234,.74) 58%,transparent)}
.lmap__c.on::after{opacity:1}
.lmap__st .bl{fill:var(--espresso);opacity:0;transform-origin:center;
  transition:opacity .5s var(--ease) .3s}
.lmap__c.on .bl{opacity:.11}
.lmap__pin{position:absolute;left:50%;top:44%;width:2rem;height:2rem;margin:-1rem 0 0 -1rem;z-index:2;
  opacity:0;transform:translateY(-14px) scale(.5);pointer-events:none;
  transition:opacity .4s var(--ease) .25s,transform .7s var(--spring) .25s}
.lmap__c.on .lmap__pin{opacity:1;transform:none}
.lmap__pin svg{width:100%;height:100%;filter:drop-shadow(0 6px 12px rgba(156,95,63,.45))}
.lmap__pin path{fill:var(--copper)}
.lmap__pin circle{fill:var(--ivory)}
.lmap__top{position:absolute;inset:1.1rem 1.1rem auto;z-index:2;
  display:flex;align-items:flex-start;justify-content:space-between}
.lmap__ic{width:1.15rem;height:1.15rem;color:var(--copper-l);
  transition:opacity .3s var(--ease),filter .3s var(--ease)}
.lmap__c:hover .lmap__ic{filter:drop-shadow(0 0 7px rgba(192,133,96,.55))}
.lmap__c.on .lmap__ic{opacity:0}
.lmap__live{display:inline-flex;align-items:center;gap:.4rem;padding:.24rem .58rem;
  border-radius:999px;background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font:500 .55rem/1 'Montserrat',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);transition:transform .4s var(--spring)}
.lmap__c:hover .lmap__live{transform:scale(1.06)}
.lmap__live i{width:.36rem;height:.36rem;border-radius:50%;background:#5E8B60;
  box-shadow:0 0 0 3px rgba(94,139,96,.18)}
.lmap__live.shut i{background:var(--copper)}
.lmap__s,.lmap__live.shut .lmap__o{display:none}
.lmap__live.shut .lmap__s{display:inline}
.lmap__bot{position:absolute;inset:auto 1.1rem 1.05rem;z-index:2}
.lmap__bot h3{font-family:'Montserrat',sans-serif;font-size:.86rem;font-weight:500;
  letter-spacing:-.01em;color:var(--espresso);transition:transform .5s var(--spring)}
.lmap__c:hover .lmap__bot h3{transform:translateX(4px)}
.lmap__co,.lmap__go{display:block;opacity:0;max-height:0;overflow:hidden;
  transition:opacity .3s var(--ease),max-height .5s var(--ease),transform .5s var(--spring)}
.lmap__co{font:400 .68rem/1.5 ui-monospace,'SF Mono',Menlo,monospace;color:var(--muted);
  transform:translateY(-6px)}
.lmap__go{margin-top:.35rem;font:500 .62rem/1 'Montserrat',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--copper);text-decoration:none;transform:translateY(-6px)}
.lmap__go:hover{color:var(--espresso)}
.lmap__c.on .lmap__co,.lmap__c.on .lmap__go{opacity:1;max-height:3rem;transform:none}
.lmap__c.on .lmap__co{transition-delay:.1s}
.lmap__c.on .lmap__go{transition-delay:.18s}
.lmap__ul{display:block;height:1px;margin-top:.5rem;transform:scaleX(.28);transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(192,133,96,.75),rgba(192,133,96,.3),transparent);
  transition:transform .5s var(--ease)}
.lmap__c:hover .lmap__ul,.lmap__c.on .lmap__ul{transform:scaleX(1)}
.lmap__hint{margin-top:.55rem;font:500 .58rem/1 'Montserrat',sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);opacity:0;transform:translateY(4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.lmap:hover .lmap__hint{opacity:.75;transform:none}
.lmap__c.on ~ .lmap__hint{opacity:0}
@media(max-width:620px){.lmap__c.on{width:min(88vw,22.5rem)}}
@media(prefers-reduced-motion:reduce){.lmap__c,.lmap__st,.rd,.bl,.lmap__pin{transition-duration:1ms}}

/* ---- membership ---- */
#membership{position:relative}
.mb__lede{grid-column:3/11;text-align:center}
.mb__grid{grid-column:1/-1}
.mb__lead{grid-column:3/11}
@media(max-width:900px){.mb__lede,.mb__lead{grid-column:1/-1}}
.mb__lede p{margin-top:1.1rem}
/* billing switch, same knob physics as the language toggle */
.mtg{position:relative;display:inline-flex;margin:2.2rem auto 0;border-radius:999px;padding:.3rem}
.mtg>.mtg__k{position:absolute;z-index:3;top:.3rem;bottom:.3rem;left:.3rem;
  width:calc(50% - .3rem);border-radius:999px;pointer-events:none;
  background:linear-gradient(140deg,var(--copper-l),var(--copper) 58%,#7C4A31);
  box-shadow:0 8px 16px -10px rgba(69,59,54,.7),inset 0 1px 0 rgba(255,255,255,.42);
  transform:translate3d(0,0,0);transform-origin:50% 50%;
  transition:transform .66s var(--spring)}
.mtg.yr>.mtg__k{transform:translate3d(100%,0,0)}
.mtg.go>.mtg__k{animation:langFlow .66s var(--ease)}
.mtg button{position:relative;z-index:4;flex:1 1 50%;border:0;background:none;cursor:pointer;
  padding:.5rem 1.5rem;border-radius:999px;white-space:nowrap;
  font:500 .68rem/1 'Montserrat',sans-serif;letter-spacing:.15em;text-transform:uppercase;
  color:var(--espresso);opacity:.55;transition:color .42s var(--ease),opacity .42s var(--ease)}
.mtg button[aria-pressed="true"]{color:var(--ivory);opacity:1}
.mb__sw{display:flex;justify-content:center}

.mb__grid{display:grid;gap:clamp(1rem,1.8vw,1.8rem);margin-top:3.2rem;
  grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
@media(max-width:940px){.mb__grid{grid-template-columns:1fr;max-width:26rem;margin-inline:auto}}
.mp{position:relative;display:flex;flex-direction:column;padding:2rem 1.7rem 1.8rem;border-radius:1.5rem;
  transition:transform .7s var(--spring),box-shadow .7s var(--spring),background .5s var(--ease)}
.mp:hover{transform:translateY(-4px)}
.mp--pop{outline:1px solid rgba(156,95,63,.42);outline-offset:-1px}
@media(min-width:941px){.mp--pop{transform:scale(1.035)}.mp--pop:hover{transform:scale(1.035) translateY(-4px)}}
.mp>.mp__badge{position:absolute;top:-.72rem;left:50%;transform:translateX(-50%);z-index:4;
  padding:.32rem .8rem;border-radius:999px;white-space:nowrap;
  background:linear-gradient(140deg,var(--copper-l),var(--copper));color:var(--ivory);
  font:500 .55rem/1 'Montserrat',sans-serif;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 8px 18px -12px rgba(69,59,54,.8)}
.mp__name{font-family:'Bodoni Moda','Prata',Georgia,serif;font-weight:400;font-size:1.7rem;
  letter-spacing:-.015em;color:var(--espresso)}
.mp__desc{margin-top:.4rem;font-size:.9rem;line-height:1.6;color:var(--muted)}
.mp__price{margin-top:1.2rem;display:flex;align-self:flex-start;align-items:baseline;gap:.35rem}
.mp__price b{font-family:'Bodoni Moda','Prata',Georgia,serif;font-weight:400;font-size:2.7rem;
  line-height:1;color:var(--espresso)}
.mp__per{font:500 .68rem/1 'Montserrat',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.mp__soon{margin-top:1.2rem;padding:.5rem .85rem;border-radius:999px;align-self:flex-start;
  background:rgba(231,198,194,.5);color:var(--copper);
  font:500 .6rem/1.4 'Montserrat',sans-serif;letter-spacing:.16em;text-transform:uppercase}
.mp__f{list-style:none;margin:1.5rem 0 1.7rem;padding:0;flex:1 1 auto}
.mp__r{display:flex;align-items:flex-start;gap:.65rem;padding:.42rem 0;
  font-size:.88rem;line-height:1.5;color:var(--espresso)}
.mp__r.off{color:rgba(110,95,87,.55)}
.mp__i{width:1.05rem;height:1.05rem;flex:0 0 auto;margin-top:.22rem;color:var(--copper)}
.mp__i--no{color:rgba(110,95,87,.42)}
.mp__cta{width:100%;justify-content:center}
.mp__cta.on{--c1:#C08560;--c2:#9C5F3F}

.mb__lead{margin-top:3.4rem;padding:2rem 1.8rem;border-radius:1.5rem;text-align:center}
.mb__lead h3{font-family:'Bodoni Moda','Prata',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,1.1rem+.7vw,1.8rem);color:var(--espresso)}
.ctarow{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem;align-items:center}
.mb__lead .ctarow{justify-content:center}
.ctarow .btn{justify-content:center}
@media(max-width:520px){.ctarow{flex-direction:column;align-items:stretch}}

.mb__form{display:grid;gap:.6rem;margin-top:1.4rem;
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:720px){.mb__form{grid-template-columns:1fr}}
.mb__form input{width:100%;padding:.85rem 1.1rem;border-radius:999px;
  border:1px solid var(--rule-2);background:rgba(255,255,255,.7);
  font:400 .88rem/1 'Montserrat',sans-serif;color:var(--espresso)}
.mb__form input:focus{outline:none;border-color:var(--copper);
  box-shadow:0 0 0 3px rgba(192,133,96,.18)}
.mb__form .btn{grid-column:1/-1;justify-content:center;margin-top:.3rem}
.mb__pick{margin-top:.9rem;font:500 .6rem/1.5 'Montserrat',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--copper);min-height:1.1rem}
.mb__ok{display:none;margin-top:1.1rem;padding:.9rem 1.2rem;border-radius:1rem;
  background:rgba(231,198,194,.45);font-size:.9rem;line-height:1.6;color:var(--espresso)}
.mb__ok.on{display:block}
.mb__fine{margin-top:.9rem;font-size:.74rem;line-height:1.6;color:var(--muted)}

/* ---- glass social dock ---- */
.dk__k{display:block;margin-top:2.6rem}
.dk{display:inline-flex;align-items:center;gap:.35rem;margin-top:.9rem;
  padding:.7rem;border-radius:999px}
/* every glass control in the header shares one height so the row lines up.
   The bar keeps its own natural size; the others are matched to it. */
:root{--hdr-h:3.75rem}
header{align-items:center}
.bar{min-height:var(--hdr-h)}
.hdr-right{align-items:center}
.dkh,.lang,.hdr-right .btn{height:var(--hdr-h)}
.dkh,.lang{align-items:center}
.hdr-right .btn{display:inline-flex;align-items:center;justify-content:center;
  padding-top:0;padding-bottom:0}
.dkh .dk__s{width:2.2rem;height:2.2rem}
.dkh .dk__s svg{width:1.08rem;height:1.08rem}

/* ---- compact variant that lives in the header bar ---- */
.dkh{margin-top:0;gap:.1rem;padding:.26rem;border-radius:999px}
.dkh .dk__i{padding:.2rem}
.dkh .dk__s{width:2.05rem;height:2.05rem;border-radius:50%}
.dkh .dk__s svg{width:1.02rem;height:1.02rem}
.dkh .dk__t{display:none}
@media(max-width:1080px){.dkh{display:none}}
/* ...and the full-size one folded into the mobile sheet */
.dkm{display:none;margin-top:1.4rem}
@media(max-width:1080px){.dkm{display:inline-flex}}
@media(max-width:420px){
  .dkm{gap:.05rem;padding:.45rem}
  .dkm .dk__i{padding:.4rem .24rem .34rem}
  .dkm .dk__s{width:2.5rem;height:2.5rem;border-radius:50%}
  .dkm .dk__s svg{width:1.2rem;height:1.2rem}
}
.dk__i{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:.55rem .5rem .45rem;border-radius:999px;text-decoration:none;color:var(--espresso);
  transition:transform .7s var(--spring),color .45s var(--ease),background .45s var(--ease)}
.dk__s{display:grid;place-items:center;width:3.05rem;height:3.05rem;border-radius:50%;
  background:linear-gradient(150deg,rgba(255,255,255,.7),rgba(231,198,194,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 8px 18px -12px rgba(69,59,54,.5);
  transition:transform .7s var(--spring),box-shadow .5s var(--ease),background .45s var(--ease)}
.dk__s svg{width:1.42rem;height:1.42rem}
.dk__t{font:500 .58rem/1 'Montserrat',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);opacity:0;transform:translateY(-3px);
  transition:opacity .45s var(--ease),transform .5s var(--spring)}
.dk__i:hover,.dk__i:focus-visible{color:var(--copper);outline:none}
.dk__i:hover .dk__s,.dk__i:focus-visible .dk__s{transform:translateY(-5px) scale(1.11);
  background:linear-gradient(150deg,rgba(255,255,255,.86),rgba(239,217,213,.8));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 16px 26px -14px rgba(69,59,54,.55)}
.dk__i:hover .dk__t,.dk__i:focus-visible .dk__t{opacity:1;transform:none}
@media(max-width:620px){.dk{gap:.1rem;padding:.55rem}.dk__s{width:2.7rem;height:2.7rem}.dk__t{display:none}}
@media(prefers-reduced-motion:reduce){.dk,.dk__i,.dk__s,.dk__t{transition:none}}

/* ---- email capture popup ---- */
#zwov{position:fixed;inset:0;z-index:10000;background:rgba(43,35,31,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
#zwov.on{opacity:1;pointer-events:auto}
#zwpop{position:fixed;left:50%;top:50%;z-index:10001;width:min(92vw,470px);
  transform:translate(-50%,-46%) scale(.97);opacity:0;pointer-events:none;
  background:var(--ivory);border-radius:20px;padding:46px 40px 38px;text-align:center;
  box-shadow:0 30px 80px rgba(43,35,31,.35);
  transition:opacity .35s var(--ease),transform .45s var(--ease-l)}
#zwpop.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
#zwpop .zwx{position:absolute;top:12px;right:16px;border:0;background:none;padding:8px;
  font-size:24px;line-height:1;color:#a8988e;cursor:pointer}
#zwpop .zweb{font:600 .69rem/1 'Montserrat',sans-serif;letter-spacing:.3em;
  text-transform:uppercase;color:var(--copper-l);margin:0 0 14px}
#zwpop h2{font-family:'Bodoni Moda','Prata',Georgia,serif;font-weight:500;font-size:clamp(1.55rem,4.4vw,1.9rem);
  line-height:1.18;margin:0 0 14px;color:var(--espresso);text-wrap:balance}
#zwpop .zwsub{font-size:.92rem;line-height:1.62;color:var(--muted);margin:0 0 22px}
#zwpop input[type=email]{width:100%;box-sizing:border-box;padding:15px 18px;
  border:1px solid #d6cec7;border-radius:12px;background:#fff;font:400 .95rem/1 'Montserrat',sans-serif;
  color:var(--espresso);outline:none;margin-bottom:12px}
#zwpop input[type=email]:focus{border-color:var(--copper-l)}
#zwpop .zwgo{width:100%;padding:16px;border:0;border-radius:12px;background:var(--espresso);
  color:var(--ivory);font:600 .82rem/1 'Montserrat',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;transition:background .25s var(--ease)}
#zwpop .zwgo:hover{background:var(--copper-l)}
#zwpop .zwno{display:inline-block;margin-top:16px;border:0;background:none;cursor:pointer;
  font:400 .78rem/1.4 'Montserrat',sans-serif;color:#a8988e;text-decoration:underline}
#zwpop .zwdone{display:none}
#zwpop.claimed .zwform{display:none}
#zwpop.claimed .zwdone{display:block}
#zwpop .zwbook{display:block;box-sizing:border-box;margin-top:20px;text-decoration:none}
@media(max-width:420px){#zwpop{padding:38px 24px 30px}}
@media(prefers-reduced-motion:reduce){#zwov,#zwpop{transition-duration:1ms}}

/* ---- lash style accordion: strips that open on hover / tap ---- */
.xpand{display:flex;gap:.45rem;align-items:stretch;justify-content:center;
  margin-top:clamp(1.8rem,3.4vw,3rem);padding:0 var(--gutter)}
.xp{position:relative;flex:0 0 auto;isolation:isolate;
  width:clamp(4rem,7vw,7.5rem);height:clamp(21rem,42vw,28rem);
  border-radius:1.35rem;overflow:hidden;cursor:pointer;outline:none;
  background:var(--rose) var(--img) center 46%/cover no-repeat;
  box-shadow:0 18px 42px -32px rgba(69,59,54,.55);
  transition:width 680ms var(--ease-l),box-shadow 680ms var(--ease-l)}
.xp[data-on="1"]{width:clamp(17rem,38vw,29rem);box-shadow:0 34px 74px -36px rgba(69,59,54,.6)}
.xp:focus-visible{box-shadow:0 0 0 2px var(--copper),0 24px 56px -34px rgba(69,59,54,.6)}
.xp::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(38,31,28,.72),rgba(38,31,28,.16) 46%,transparent 74%);
  opacity:0;transition:opacity 520ms var(--ease)}
.xp[data-on="1"]::after{opacity:1}
.xp__v{position:absolute;inset:auto 0 1.15rem 0;z-index:2;display:grid;place-items:center;
  pointer-events:none;opacity:.92;transition:opacity 300ms var(--ease)}
.xp__v span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  font:500 .62rem/1 'Montserrat',sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.xp[data-on="1"] .xp__v{opacity:0}
.xp__body{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.4rem clamp(1.1rem,2vw,1.6rem) clamp(1.3rem,2vw,1.6rem);
  display:flex;flex-direction:column;align-items:flex-start;gap:.42rem;
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity 400ms var(--ease) 170ms,transform 560ms var(--ease-l) 150ms}
.xp[data-on="1"] .xp__body{opacity:1;transform:none;pointer-events:auto}
.xp__n{font-family:'Bodoni Moda','Prata',Georgia,serif;line-height:1;color:#fff;white-space:nowrap;
  font-size:clamp(1.45rem,2.5vw,2.1rem)}
.xp__p{font:500 .68rem/1 'Montserrat',sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.74)}
.xp__cta{margin-top:.6rem;font-size:.68rem;padding:.7rem 1.2rem}
.xhint{margin-top:1.3rem;text-align:center;pointer-events:none;
  font:500 var(--t-label)/1 'Montserrat',sans-serif;letter-spacing:.24em;text-transform:uppercase;
  color:var(--copper);opacity:.6}
@media(max-width:900px){
  .xpand{justify-content:flex-start;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .xpand::-webkit-scrollbar{display:none}
  .xp,.xp[data-on="1"]{width:min(74vw,20rem);height:24rem;scroll-snap-align:center}
  .xp::after{opacity:1}
  .xp .xp__v{display:none}
  .xp .xp__body{opacity:1;transform:none;pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){.xp,.xp__body,.xp::after{transition-duration:1ms}}

.strip{background:var(--blush);overflow:hidden;padding:.9rem 0;white-space:nowrap;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.strip .run{display:inline-block;animation:slide 46s linear infinite}
.strip span{font:500 var(--t-label)/1 'Montserrat',sans-serif;letter-spacing:.24em;text-transform:uppercase;
  color:var(--espresso);padding:0 1.1rem;opacity:.8}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

section{padding:clamp(4.5rem,11vh,9rem) 0}
section+section{border-top:1px solid var(--rule)}
section.dark{background:var(--espresso);color:var(--ivory);border-top:0}
section.dark h2,section.dark h3{color:var(--ivory)}
section.dark p{color:rgba(245,240,234,.8)}
section.dark .label{color:var(--copper-l)}
section.dark .label::before{background:var(--copper-l)}
section.blush{background:var(--rose);border-top:0}
.lede{grid-column:2/9}
@media(max-width:900px){.lede{grid-column:1/-1}}

.ed{margin-top:clamp(2.5rem,6vh,4.5rem)}
.ed a{display:block;position:relative;overflow:hidden}
.ed a img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 1200ms var(--ease-l)}
@media(hover:hover){.ed a:hover img{transform:scale(1.045)}}
.ed .cap{position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1.2rem;
  background:linear-gradient(to top,rgba(69,59,54,.75),rgba(69,59,54,0));color:var(--ivory)}
.ed .cap b{display:block;font:500 var(--t-label)/1.3 'Montserrat',sans-serif;letter-spacing:.2em;text-transform:uppercase}
.ed .cap i{display:block;font-style:normal;font-size:.72rem;letter-spacing:.08em;color:rgba(245,240,234,.8);margin-top:.3rem}
.ed>:nth-child(1){grid-column:1/6;aspect-ratio:4/5}
.ed>:nth-child(2){grid-column:7/11;aspect-ratio:1/1;margin-top:9vh}
.ed>:nth-child(3){grid-column:2/7;aspect-ratio:16/11;margin-top:5vh}
.ed>:nth-child(4){grid-column:8/-1;aspect-ratio:3/4;margin-top:-6vh}
.ed>:nth-child(5){grid-column:1/5;aspect-ratio:1/1;margin-top:4vh}
.ed>:nth-child(6){grid-column:6/11;aspect-ratio:5/4;margin-top:-2vh}
@media(max-width:900px){.ed>*{grid-column:1/-1!important;margin-top:0!important;aspect-ratio:4/3!important}}

.pair{align-items:start}
.pair__a{grid-column:1/7;aspect-ratio:3/4;overflow:hidden}
.pair__a img{width:100%;height:112%;object-fit:cover}
.pair__txt{grid-column:8/-1;padding-top:12vh}
@media(max-width:900px){.pair__a{grid-column:1/-1;aspect-ratio:4/3}.pair__txt{grid-column:1/-1;padding-top:2.5rem}}

.ledger{grid-column:1/-1;margin-top:clamp(2rem,5vh,3.5rem)}
.lgroup+.lgroup{margin-top:clamp(2.5rem,6vh,4rem)}
.lgroup h3{padding-bottom:.9rem;border-bottom:1px solid var(--rule-2)}
.lrow,.lhead{display:grid;grid-template-columns:2.6rem 1fr 5.5rem 6.5rem;align-items:baseline;gap:1rem}
.lrow{padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.lhead{padding:.7rem 0;font:500 var(--t-label)/1 'Montserrat',sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.lrow .n{font:500 var(--t-label)/1 'Montserrat',sans-serif;letter-spacing:.18em;color:var(--copper);opacity:.75}
.lrow .nm{font-family:'Bodoni Moda','Prata',serif;font-size:clamp(1.05rem, 0.98rem + 0.35vw, 1.35rem)}
.lrow .pr,.lhead .pr{font-variant-numeric:lining-nums tabular-nums;text-align:right}
.lrow .pr{font-family:'Bodoni Moda','Prata',serif;font-size:1.15rem}
.lrow .dp,.lhead .dp{text-align:right;font-variant-numeric:lining-nums tabular-nums}
.lrow .dp{font-size:.78rem;letter-spacing:.06em;color:var(--copper);opacity:.9}
@media(max-width:640px){
  .lrow,.lhead{grid-template-columns:1.8rem 1fr auto}
  .lrow .dp,.lhead .dp{grid-column:2/-1;text-align:left;margin-top:.15rem}
}

.bk__txt{grid-column:1/7}
.calc{grid-column:8/-1;background:var(--ivory);color:var(--espresso);padding:clamp(1.75rem,3vw,2.5rem)}
.calc .label{color:var(--copper)}
.calc select{width:100%;padding:.95rem 2.4rem .95rem 1rem;border:1px solid var(--rule-2);background-color:#fff;
  color:var(--espresso);font:400 .95rem 'Montserrat',sans-serif;border-radius:0;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239C5F3F' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center}
.calc .big{font-family:'Bodoni Moda','Prata',serif;font-size:clamp(3rem,6vw,4.5rem);line-height:1;
  font-variant-numeric:lining-nums;margin:1.2rem 0 .2rem}
.calc .of{font-size:.8rem;letter-spacing:.1em;color:var(--muted)}
@media(max-width:900px){.bk__txt,.calc{grid-column:1/-1}.calc{margin-top:2.5rem}}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.2rem;
  padding-top:1.6rem;border-top:1px solid rgba(245,240,234,.18)}
.steps .n{font-family:'Bodoni Moda','Prata',serif;font-size:1.9rem;color:var(--copper-l);line-height:1}
.steps p{font-size:.8rem;line-height:1.5;margin:.35rem 0 0}
@media(max-width:560px){.steps{grid-template-columns:1fr;gap:.9rem}}

.em{grid-column:2/9}
.em form{display:flex;gap:.6rem;margin-top:1.8rem;flex-wrap:wrap}
.em input{flex:1 1 17rem;padding:1rem 1.2rem;border:1px solid var(--rule-2);background:rgba(255,255,255,.7);
  font:400 .95rem 'Montserrat',sans-serif;color:var(--espresso);border-radius:0}
.em input:focus{outline:none;border-color:var(--copper)}
.em .fine{font-size:.74rem;color:var(--muted);margin-top:1rem}
.em .ok{display:none;margin-top:1.2rem;padding:1rem 1.2rem;border:1px solid var(--copper);color:var(--copper);font-size:.88rem}
.em .err{display:none;margin-top:.7rem;font-size:.8rem;color:var(--copper)}
.em form .btn{flex:0 0 auto}
.em .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.em__code{display:flex;gap:.6rem;margin-top:1.8rem;flex-wrap:wrap;align-items:center}
.em__chip{padding:.95rem 1.4rem;border:1px dashed var(--copper);background:rgba(255,255,255,.7);color:var(--copper);font-size:1rem;letter-spacing:.24em;font-weight:500;user-select:all}
.em .fine a{color:var(--copper);text-decoration:none;border-bottom:1px solid rgba(156,95,63,.35)}
.em .fine.alt{margin-top:.55rem}
@media(max-width:520px){.em form .btn{width:100%}}
@media(max-width:900px){.em{grid-column:1/-1}}

.vs__txt{grid-column:1/6}
.vs__faq{grid-column:7/-1}
@media(max-width:900px){.vs__txt,.vs__faq{grid-column:1/-1}.vs__faq{margin-top:3rem}}
details{border-bottom:1px solid var(--rule);padding:1.15rem 0}
details summary{cursor:pointer;font-weight:500;font-size:.98rem;list-style:none;display:flex;
  justify-content:space-between;gap:1rem;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+';color:var(--copper);font-size:1.35rem;line-height:1;font-weight:300}
details[open] summary::after{content:'\2013'}
details p{margin-top:.75rem;color:var(--muted);font-size:.92rem}

footer{background:var(--espresso);color:var(--ivory);padding:clamp(3rem,7vh,4.5rem) 0 2rem;font-size:.9rem}
footer a{color:#D9C3B4}
footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.2rem;margin-bottom:2.5rem}
footer h4{font:500 var(--t-label)/1 'Montserrat',sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:var(--copper-l);margin-bottom:.9rem}
footer ul{list-style:none;line-height:2.1}
footer .tag{color:rgba(245,240,234,.62);font-size:.82rem;margin-top:1rem;max-inline-size:34ch}
footer .legal-links{margin:1.4rem 0 .5rem;font-size:.72rem;line-height:2;color:rgba(245,240,234,.55)}
footer .legal-links a{color:rgba(245,240,234,.72);text-decoration:none;border-bottom:1px solid rgba(245,240,234,.22)}
footer .legal-links a:hover{color:var(--ivory);border-color:var(--ivory)}
.legal{border-top:1px solid rgba(245,240,234,.16);padding-top:1.2rem;font-size:.76rem;
  color:rgba(245,240,234,.55);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
@media(max-width:820px){footer .cols{grid-template-columns:1fr 1fr}}

.bookbar{position:fixed;left:0;right:0;bottom:0;z-index:88;display:flex;gap:.5rem;padding:.6rem;
  transform:translateY(130%);transition:transform 560ms var(--ease);
  padding-bottom:calc(.6rem + env(safe-area-inset-bottom))}
.bookbar.on{transform:none}
.bookbar .btn{flex:1}
@media(min-width:901px){.bookbar{display:none}}

@media(prefers-reduced-motion:no-preference){
  [data-rv]{opacity:0;transform:translateY(22px);
    transition:opacity 900ms var(--ease),transform 900ms var(--ease);transition-delay:var(--d,0ms)}
  [data-rv].in{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------------- testimonials: one quote at a time ---------------- */
.tm{grid-column:2/11}
.tmq{position:relative;min-height:15rem}
.tmq figure{position:absolute;inset:0;opacity:0;transition:opacity 900ms var(--ease);pointer-events:none}
.tmq figure.on{opacity:1;position:relative;pointer-events:auto}
.tmq blockquote{font-family:'Bodoni Moda','Prata',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.35rem, 1.05rem + 1.5vw, 2.6rem);line-height:1.22;letter-spacing:-.015em;
  text-indent:-.42em;max-inline-size:34ch;text-wrap:pretty}
.tmq figcaption{margin-top:1.6rem;font:500 var(--t-label)/1.6 'Montserrat',sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--copper)}
.tmq figcaption span{display:block;letter-spacing:.12em;color:var(--muted);text-transform:none;font-weight:400}
/* keyboard users land here first; it stays off-screen until focused */
.skip{position:absolute;left:-9999px;top:0;z-index:10001;padding:.85rem 1.4rem;
  border-radius:0 0 999px 0;background:var(--copper);color:#fff;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:0}

.tmdots{display:flex;gap:.55rem;margin-top:2.2rem}
/* the visible dash is 2px, but the button itself keeps a 24px tap target
   (WCAG 2.2 SC 2.5.8) via transparent padding and a background-clip trick. */
.tmdots button{width:2.2rem;height:24px;border:0;padding:11px 0;cursor:pointer;
  background:var(--rule-2);background-clip:content-box;
  transition:background .5s var(--ease)}
.tmdots button[aria-selected="true"]{background:var(--copper)}
.tmstars{font-size:.9rem;letter-spacing:.3em;color:var(--copper);margin-bottom:1.2rem}
@media(max-width:900px){.tm{grid-column:1/-1}.tmq{min-height:19rem}}

/* ---------------- mobile menu ---------------- */
.menubtn{display:none;align-items:center;justify-content:center;width:2.9rem;height:2.9rem;
  border-radius:999px;border:0;cursor:pointer;padding:0}
.menubtn i{display:block;width:1.05rem;height:1px;background:var(--espresso);position:relative;
  transition:transform .45s var(--ease),background .3s}
.menubtn i::before,.menubtn i::after{content:"";position:absolute;left:0;width:1.05rem;height:1px;
  background:var(--espresso);transition:transform .45s var(--ease)}
.menubtn i::before{top:-6px} .menubtn i::after{top:6px}
.menubtn[aria-expanded="true"] i{background:transparent}
.menubtn[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.menubtn[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
.mobnav{position:fixed;top:4.6rem;left:var(--gutter);right:var(--gutter);z-index:89;
  border-radius:1.4rem;padding:.6rem;opacity:0;transform:translateY(-10px) scale(.98);
  pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.mobnav.on{opacity:1;transform:none;pointer-events:auto}
.mobnav a{display:block;padding:.95rem 1.1rem;border-radius:1rem;color:var(--espresso);
  font-size:.95rem;transition:background .35s var(--ease)}
.mobnav a+a{border-top:1px solid var(--rule)}
.mobnav a:active{background:rgba(69,59,54,.06)}
@media(max-width:1080px){.menubtn{display:inline-flex}}
@media(min-width:1081px){.mobnav{display:none}}

/* ---------------- photo cursor trail (site-wide, desktop, fine pointer) ----------------
   Fixed overlay so the photos ride above every section instead of being buried behind
   opaque backgrounds. pointer-events:none on the layer AND the images, so nothing on the
   page can be blocked from being clicked. Sits under the header (90) and book bar (88). */
/* z-index:-1 drops the whole layer behind the page's own content, so photos
   pass BEHIND the headline, the buttons and the hero image instead of over
   them. Body's background propagates to the canvas, so they still show. */
#ptrail{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:layout style paint}
#ptrail img{position:absolute;top:0;left:0;width:10.5rem;height:13.5rem;object-fit:cover;
  opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(var(--r,0deg));
  transition:transform 760ms cubic-bezier(.19,1,.22,1),opacity 760ms cubic-bezier(.19,1,.22,1);
  will-change:transform,opacity;pointer-events:none;
  box-shadow:0 24px 60px -28px rgba(69,59,54,.45)}
#ptrail img[data-on="1"]{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(var(--r,0deg))}
@media(hover:none),(max-width:900px){#ptrail{display:none}}

/* the interlude band keeps its line; the trail now runs everywhere */
.trail{position:relative;overflow:hidden;border-top:0;isolation:isolate;
  background:linear-gradient(128deg,#F5F0EA 0%,#EFD9D5 38%,#E7C6C2 64%,#C08560 100%);
  min-height:clamp(18rem,42vh,26rem);display:grid;place-content:center;text-align:center;
  padding:clamp(3rem,8vh,6rem) var(--gutter)}
/* the drifting mesh: two blurred blob fields crossing each other on different
   clocks, so the field never repeats a pose you have already seen */
.trail::before,.trail::after{content:"";position:absolute;inset:-38%;z-index:0;
  pointer-events:none;will-change:transform}
.trail::before{
  background:
    radial-gradient(34% 38% at 28% 30%,rgba(247,243,238,.96),rgba(247,243,238,0) 70%),
    radial-gradient(30% 34% at 71% 24%,rgba(231,198,194,.92),rgba(231,198,194,0) 72%),
    radial-gradient(36% 40% at 47% 76%,rgba(192,133,96,.58),rgba(192,133,96,0) 70%);
  filter:blur(34px);
  animation:meshA 27s ease-in-out infinite alternate}
.trail::after{
  background:
    radial-gradient(32% 36% at 79% 74%,rgba(156,95,63,.46),rgba(156,95,63,0) 70%),
    radial-gradient(34% 38% at 17% 63%,rgba(245,240,234,.88),rgba(245,240,234,0) 71%),
    radial-gradient(30% 34% at 58% 13%,rgba(239,217,213,.9),rgba(239,217,213,0) 72%);
  filter:blur(42px);
  animation:meshB 34s ease-in-out infinite alternate}
@keyframes meshA{
  0%  {transform:translate3d(-4%,-3%,0) scale(1)    rotate(0deg)}
  50% {transform:translate3d( 5%, 4%,0) scale(1.13) rotate(7deg)}
  100%{transform:translate3d(-2%, 6%,0) scale(1.05) rotate(-6deg)}}
@keyframes meshB{
  0%  {transform:translate3d( 4%, 3%,0) scale(1.07) rotate(0deg)}
  50% {transform:translate3d(-6%,-2%,0) scale(1)    rotate(-9deg)}
  100%{transform:translate3d( 3%,-5%,0) scale(1.11) rotate(6deg)}}
@media(prefers-reduced-motion:reduce){.trail::before,.trail::after{animation:none}}
.trail__line{font-family:'Bodoni Moda','Prata',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.6rem, 1.1rem + 2.4vw, 3.4rem);line-height:1.1;letter-spacing:-.02em;
  color:var(--espresso);position:relative;z-index:2;max-inline-size:22ch;margin:0 auto;
  pointer-events:none}
.trail__hint{position:relative;z-index:2;margin-top:1.6rem;pointer-events:none;
  font:500 var(--t-label)/1 'Montserrat',sans-serif;letter-spacing:.24em;text-transform:uppercase;
  color:var(--copper);opacity:.65}
.hero__hint{margin-top:2.2rem;display:flex;align-items:center;gap:.7rem;opacity:0;
  animation:hintIn 900ms var(--ease) 2.6s forwards}
.hero__hint::before{content:"";width:2.4rem;height:1px;background:currentColor;opacity:.55}
@keyframes hintIn{to{opacity:.62}}
@media(hover:none),(max-width:900px){.trail__hint{display:none}}

/* hero image grows with natural scroll — no scroll hijacking */
.hero__img{will-change:transform}
.calc{align-self:start}
.calc .label::before{display:none}


/* --- Mongolian typography ------------------------------------------------
   Bodoni Moda ships no Cyrillic at all, so every Mongolian heading was
   falling back to Georgia (Times on Android) while the Latin ones stayed
   Didone. Prata is the Didone that does carry Ө, Ү, Э and Ж. Browsers fall
   back per character, so Latin still renders in Bodoni and only the Cyrillic
   glyphs come from Prata. Prata ships Regular only — never let a browser
   synthesise an italic from it. ------------------------------------------ */
:lang(mn) .tmq blockquote,
:lang(mn) .trail__line,
:lang(mn) .mb__lead h3,
:lang(mn) h1 .it,
:lang(mn) h2 .it { font-style: normal; }

/* --- phone header: stop the wordmark, the toggle and the button colliding ---
   `.hdr-right .btn{display:none}` was declared at ≤620px, then a later rule
   re-declared `.hdr-right .btn{display:inline-flex}` further down the sheet and
   won on source order. So on a 390px screen all three glass pills fought for
   the same row and overlapped, and at 360px the page scrolled sideways. The
   sticky bottom book bar already carries that action on mobile. ---------- */
@media(max-width:620px){
  .hdr-right .btn{display:none!important}
  .bar{gap:.7rem;padding:.5rem .95rem}
  .wm-name{font-size:17px;letter-spacing:.085em;text-indent:.085em}
  .wm-sub{font-size:5.5px;letter-spacing:.33em;text-indent:.33em}
}
@media(max-width:400px){
  .wm-name{font-size:15.5px}
  .wm-sub{font-size:5px;letter-spacing:.3em;text-indent:.3em}
}