/* bantr hospitality v2
   Concept: a warm editorial site that moves. The page itself changes color as you
   travel through it (ink, paper, coral, sky, pine), photos wipe and zoom into place,
   headlines rise letter by letter, and there is always something reacting to you. */
@font-face{font-family:"Nunito Sans";src:url(fonts/nunito-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(fonts/nunito-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(fonts/nunito-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(fonts/nunito-sans-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(fonts/nunito-sans-latin-900-normal.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
:root{
  --ink:#171E22; --ink-2:#232A2E; --ink-3:#2E373C;
  --paper:#F3F6F7; --paper-2:#E3E9EC; --white:#FFFFFF;
  --coral:#FF664D; --coral-2:#FF836E; --coral-d:#E64A31;
  --sky:#C2E8F5; --sun:#FFC24B; --pine:#0E4447;
  --font:"Avenir LT","Avenir Next",Avenir,"Nunito Sans",system-ui,sans-serif;
  --serif:"Instrument Serif","Times New Roman",serif;
  --ease:cubic-bezier(.2,.75,.15,1); --ease-io:cubic-bezier(.75,0,.2,1);
  --wrap:1440px; --gut:clamp(16px,4.2vw,64px); --hdr:76px; --r:22px;
  --bg:var(--ink); --fg:#F2EEE8; --fg-2:#B9C1C6; --rule:rgba(255,255,255,.14); --accent:var(--coral);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; transition:background-color .7s var(--ease), color .7s var(--ease)}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote{margin:0; padding:0}
ul,ol{list-style:none}
h1,h2,h3{font-weight:900; letter-spacing:-.035em; line-height:1; text-wrap:balance}
p{text-wrap:pretty}
em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--accent)}
h1 em,h2 em,.big em{letter-spacing:-.02em; padding-right:.04em}
::selection{background:var(--coral); color:var(--ink)}
:focus-visible{outline:3px solid var(--coral); outline-offset:3px}
.skip{position:absolute; left:-9999px; top:8px; z-index:3000; background:var(--coral); color:var(--ink); padding:10px 14px; font-weight:800}
.skip:focus{left:8px}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- themes: the body color morphs between these as sections pass ---------- */
[data-theme="ink"],body[data-theme="ink"]{--bg:var(--ink); --fg:#F2EEE8; --fg-2:#B9C1C6; --rule:rgba(255,255,255,.14); --accent:var(--coral)}
[data-theme="paper"],body[data-theme="paper"]{--bg:var(--paper); --fg:var(--ink); --fg-2:#535C61; --rule:rgba(23,30,34,.14); --accent:#C0371F}
[data-theme="coral"],body[data-theme="coral"]{--bg:var(--coral); --fg:var(--ink); --fg-2:#3A2420; --rule:rgba(23,30,34,.2); --accent:var(--ink)}
[data-theme="sky"],body[data-theme="sky"]{--bg:var(--sky); --fg:var(--ink); --fg-2:#38515B; --rule:rgba(23,30,34,.16); --accent:#B8341C}
[data-theme="pine"],body[data-theme="pine"]{--bg:var(--pine); --fg:#F2EEE8; --fg-2:#B6CFCB; --rule:rgba(255,255,255,.16); --accent:var(--sun)}
section[data-theme],div[data-theme]{background:var(--bg); color:var(--fg)}
/* with the morph running, sections go see-through and the body carries the color */
html.morph main section[data-theme],html.morph main div[data-theme]{--bg:inherit; --fg:inherit; --fg-2:inherit; --rule:inherit; --accent:inherit; background:transparent; color:inherit}

@supports not (overflow:clip){ body{overflow-x:hidden} }
.wi-map .st{fill:rgba(128,128,128,.06)}
/* single-file build: tiny previews show blurred until the full photos arrive */
html.lq img,html.lq .sl,html.lq .ph,html.lq .bg,html.lq .zoom-img,html.lq .grow-img,html.lq .pill,html.lq .pm-fx-bg,html.lq .pm-case{filter:blur(14px)}
/* film grain */
body::after{content:""; position:fixed; inset:-50%; z-index:2400; pointer-events:none; opacity:.07; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,3%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}

/* ---------- layout + type ---------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut)}
.sec{position:relative; padding-block:clamp(88px,12vw,180px)}
.sec.tight{padding-block:clamp(64px,8vw,110px)}
.eyebrow{display:inline-flex; align-items:center; gap:12px; font-size:12.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--fg)}
.eyebrow::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 var(--accent); animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}70%,100%{box-shadow:0 0 0 12px transparent}}
.h-xxl{font-size:clamp(64px,13.5vw,236px); letter-spacing:-.06em; line-height:.92}
.h-xl{font-size:clamp(52px,9vw,148px); letter-spacing:-.055em; line-height:.95}
.h-l{font-size:clamp(42px,6.4vw,104px); letter-spacing:-.05em; line-height:.94}
.h-m{font-size:clamp(32px,4vw,60px); letter-spacing:-.04em; line-height:1}
.h-s{font-size:clamp(23px,2.2vw,32px); letter-spacing:-.025em; line-height:1.1}
.lede{font-size:clamp(18px,1.55vw,22px); line-height:1.55; max-width:34em; color:var(--fg-2)}
.head{max-width:980px}
.head>*+*{margin-top:24px}
.center{text-align:center; margin-inline:auto}
.center .lede{margin-inline:auto}
.stack>*+*{margin-top:24px}

/* ---------- buttons ---------- */
.btn{--b:var(--coral); --t:var(--ink); position:relative; display:inline-flex; align-items:center; gap:12px; background:var(--b); color:var(--t); font-weight:900; font-size:16px; line-height:1; padding:20px 28px; border-radius:999px; border:0; cursor:pointer; letter-spacing:-.01em; overflow:hidden; isolation:isolate; white-space:nowrap; transition:color .35s var(--ease)}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--ink); border-radius:inherit; transform:translateY(101%); transition:transform .5s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:#fff}
.btn .arr{display:inline-grid; place-items:center; width:26px; height:26px; margin:-4px -10px -4px 0; border-radius:50%; background:var(--t); color:var(--b); font-size:14px; transition:transform .45s var(--ease), background-color .35s, color .35s}
.btn:hover .arr{transform:rotate(-45deg); background:#fff; color:var(--ink)}
.btn.ext:hover .arr{transform:rotate(0) scale(1.1)}
.btn.ghost{--b:transparent; --t:var(--fg); box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost .arr{background:var(--fg); color:var(--bg)}
.btn.ghost::before{background:var(--fg)}
.btn.ghost:hover{color:var(--bg)}
.btn.ink{--b:var(--ink); --t:#fff}
.btn.ink::before{background:#fff}
.btn.ink:hover{color:var(--ink)}
.btn.ink .arr{background:#fff; color:var(--ink)}
.btn.ink:hover .arr{background:var(--ink); color:#fff}
.btn.light{--b:#fff; --t:var(--ink)}
.btns{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.ulink{display:inline-block; padding-block:6px 3px; background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat; padding-bottom:3px; font-weight:800; transition:background-size .45s var(--ease)}
.tlink{color:inherit; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:.18em; text-decoration-color:color-mix(in srgb,currentColor 45%,transparent); transition:text-decoration-color .25s, color .25s}
.tlink:hover,.tlink:focus-visible{text-decoration-color:var(--accent,currentColor); color:var(--accent,inherit)}
@supports not (color:color-mix(in srgb,red,blue)){.tlink{text-decoration-color:currentColor}}
figcaption .tlink{display:inline-block; padding-block:10px; margin-block:-10px}
.ulink:hover{background-size:0 2px; background-position:100% 100%}

/* ---------- loader + page curtain ---------- */
#loader{position:fixed; inset:0; z-index:2600; background:var(--ink); color:#fff; display:none; place-items:center}
html.first #loader{display:grid}
#loader .ld-logo{width:min(54vw,420px); overflow:visible}
#loader .ld-logo path,#loader .ld-logo rect{fill:transparent; stroke:#fff; stroke-width:.6}
#loader .ld-logo rect{stroke:var(--coral)}
#loader .ld-n{position:absolute; right:var(--gut); bottom:28px; font-size:clamp(64px,12vw,180px); font-weight:900; letter-spacing:-.06em; line-height:.8; font-variant-numeric:tabular-nums}
#loader .ld-t{position:absolute; left:var(--gut); bottom:34px; font-size:13px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#B9C1C6}
#loader .ld-bar{position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--coral); transform-origin:left; transform:scaleX(0)}
#curtain{position:fixed; inset:0; z-index:2500; pointer-events:none; display:grid; grid-template-columns:repeat(5,1fr)}
#curtain i{background:var(--coral); transform:scaleY(0); transform-origin:bottom}
#curtain i:nth-child(2n){background:var(--ink)}
html.arriving #curtain i{transform:scaleY(1); transform-origin:top}
#curtain .ct-logo{position:fixed; inset:0; display:grid; place-items:center; opacity:0}
#curtain .ct-logo svg{width:160px}
#curtain .ct-logo .lg{fill:#fff}

/* ---------- cursor ---------- */
.cur,.cur-ring{position:fixed; left:0; top:0; z-index:2700; pointer-events:none; border-radius:50%; display:none}
html.has-cursor .cur,html.has-cursor .cur-ring{display:block}
html.has-cursor,html.has-cursor a,html.has-cursor button{cursor:none}
.cur{width:8px; height:8px; margin:-4px 0 0 -4px; background:var(--coral)}
.cur-ring{width:44px; height:44px; margin:-22px 0 0 -22px; border:1.5px solid color-mix(in srgb,var(--fg) 55%,transparent); display:none; place-items:center; transition:width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background-color .35s, border-color .35s}
html.has-cursor .cur-ring{display:grid}
.cur-ring span{font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); opacity:0; transform:scale(.6); transition:opacity .3s, transform .45s var(--ease)}
.cur-ring.hover{width:70px; height:70px; margin:-35px 0 0 -35px; border-color:var(--coral); background:color-mix(in srgb,var(--coral) 18%,transparent)}
.cur-ring.label{width:104px; height:104px; margin:-52px 0 0 -52px; background:var(--coral); border-color:var(--coral)}
.cur-ring.label span{opacity:1; transform:none}
.cur.hide{opacity:0}
.cur-ring.down{transform:scale(.85)}

/* ---------- header ---------- */
.hdr{position:fixed; inset:0 0 auto 0; z-index:2000; height:var(--hdr); color:#fff; transition:transform .55s var(--ease), background-color .45s, color .45s, height .45s var(--ease)}
.hdr.solid{height:64px; background:rgba(23,30,34,.92); background:color-mix(in srgb,var(--bg) 82%,transparent); color:var(--fg); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); box-shadow:0 1px 0 var(--rule)}
.hdr.away{transform:translateY(-110%)}
body.menu-open .hdr{transform:none; background:transparent; box-shadow:none; color:#fff; -webkit-backdrop-filter:none; backdrop-filter:none}
.hdr-in{max-width:var(--wrap); height:100%; margin:0 auto; padding-inline:var(--gut); display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:12px; flex:none; padding-block:8px}
.brand svg{height:28px; width:auto; display:block}
.lg{fill:currentColor} .lc{fill:var(--coral)}
.brand-t{font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; padding-left:12px; border-left:1px solid currentColor; line-height:1.2; opacity:.85}
.nav{display:flex; align-items:center; gap:2px}
.nav a{position:relative; font-size:14.5px; font-weight:800; padding:10px 13px; overflow:hidden; display:inline-flex}
.nav a .roll{display:inline-flex; flex-direction:column; height:1.4em; line-height:1.4em; overflow:hidden}
.nav a .roll span{transition:transform .5s var(--ease)}
.nav a:hover .roll span{transform:translateY(-100%)}
.nav a[aria-current="page"]::after{content:""; position:absolute; left:50%; bottom:3px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--coral)}
.nav .ext sup{font-size:11px; margin-left:3px; top:0}
.nav .btn{margin-left:12px; padding:14px 20px; font-size:14.5px}
.nav .btn .arr{width:22px; height:22px; font-size:12px}
.burger{display:none; width:52px; height:52px; border-radius:50%; border:0; background:var(--coral); color:var(--ink); cursor:pointer; position:relative}
.burger span{position:absolute; left:15px; right:15px; height:2.5px; background:currentColor; border-radius:2px; transition:transform .45s var(--ease), opacity .3s}
.burger span:nth-child(1){top:20px} .burger span:nth-child(2){top:25px} .burger span:nth-child(3){top:30px}
body.menu-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.prog{position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--coral); transform-origin:left; transform:scaleX(var(--p,0))}

/* full-screen menu */
.menu{position:fixed; inset:0; z-index:1900; background:var(--ink); color:#fff; clip-path:circle(0% at calc(100% - 50px) 38px); transition:clip-path .9s var(--ease-io); display:grid; grid-template-columns:1fr; align-content:center; padding:110px var(--gut) 40px; visibility:hidden}
body.menu-open .menu{clip-path:circle(150% at calc(100% - 50px) 38px); visibility:visible}
.menu a.big{display:flex; align-items:baseline; gap:16px; font-size:clamp(44px,11vw,110px); font-weight:900; letter-spacing:-.05em; line-height:1.02; overflow:hidden}
.menu a.big i{font-style:normal; font-size:14px; font-weight:800; letter-spacing:.1em; color:var(--coral)}
.menu a.big span{display:inline-block; transform:translateY(110%); transition:transform .8s var(--ease)}
body.menu-open .menu a.big span{transform:none}
.menu a.big:nth-child(2) span{transition-delay:.05s} .menu a.big:nth-child(3) span{transition-delay:.1s} .menu a.big:nth-child(4) span{transition-delay:.15s} .menu a.big:nth-child(5) span{transition-delay:.2s} .menu a.big:nth-child(6) span{transition-delay:.25s}
.menu a.big:hover span{color:var(--coral)}
.menu-foot{margin-top:40px; display:flex; flex-wrap:wrap; gap:10px 28px; font-weight:700; color:#B9C1C6; font-size:15px}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100vh; min-height:100svh; overflow:hidden; color:#fff; background:var(--ink)}
.hero.short{min-height:92vh; min-height:92svh}
.hero-media{position:absolute; inset:0; overflow:hidden; will-change:transform,clip-path}
.sl{position:absolute; inset:0; background:center/cover no-repeat; background-position:var(--pos,50% 50%); clip-path:inset(0 0 0 100%); transform:scale(1.18)}
.sl.on{clip-path:inset(0 0 0 0); transform:scale(1); z-index:2}
.sl.prev{clip-path:inset(0 0 0 0); z-index:1}
html:not(.anim) .sl{transform:none}
.hero-media::after{content:""; position:absolute; inset:0; z-index:3; background:linear-gradient(90deg,rgba(15,20,23,.5) 0%,rgba(15,20,23,.12) 55%,rgba(15,20,23,0) 75%),linear-gradient(180deg,rgba(15,20,23,.55) 0%,rgba(15,20,23,.05) 30%,rgba(15,20,23,.2) 55%,rgba(15,20,23,.85) 100%)}
.hero-in .wrap{width:100%; min-width:0}
.hero-in{position:relative; min-height:inherit; z-index:4; display:flex; flex-direction:column; justify-content:flex-end; padding:calc(var(--hdr) + 30px) 0 clamp(28px,4vw,48px)}
.hero h1{max-width:13ch; text-shadow:0 2px 40px rgba(0,0,0,.25)}
.hero h1.h-xxl{max-width:none; font-size:clamp(52px,min(12vw,17vh),220px)}
.hero h1.h-xl{font-size:clamp(44px,min(9vw,13.5vh),148px)}
.hero .lede{color:#E9EEF0; margin-top:26px}
.hero .btns{margin-top:34px}
.hero-row{display:flex; align-items:flex-end; justify-content:space-between; gap:40px}
.hero-foot{display:flex; align-items:center; gap:22px; margin-top:44px; padding-top:20px; border-top:1px solid rgba(255,255,255,.25); font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#DDE4E7}
.hero-count{font-variant-numeric:tabular-nums; white-space:nowrap}
.hero-count b{color:#fff}
.hero-bars{display:flex; gap:6px}
.hero-bars button{position:relative; width:38px; height:24px; border:0; padding:0; background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)) center/100% 3px no-repeat; cursor:pointer}
.hero-bars button::after{content:""; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px; background:var(--coral); transform:scaleX(0); transform-origin:left}
.hero-bars button.on::after{animation:bar 6s linear forwards}
.hero-bars button.done::after{transform:scaleX(1)}
@keyframes bar{to{transform:scaleX(1)}}
.hero-cap{margin-left:auto; text-align:right}
.scroll-cue{display:inline-flex; align-items:center; gap:10px}
.scroll-cue i{width:1.5px; height:28px; background:rgba(255,255,255,.35); position:relative; overflow:hidden}
.scroll-cue i::after{content:""; position:absolute; left:0; right:0; top:-40%; height:40%; background:#fff; animation:cue 1.8s var(--ease) infinite}
@keyframes cue{to{top:100%}}

/* rotating circle badge */
.badge{position:relative; flex:none; width:clamp(120px,11vw,168px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; color:#fff}
.badge svg{position:absolute; inset:0; width:100%; height:100%; animation:spin 16s linear infinite}
.badge text{font-size:9.6px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; fill:currentColor}
.badge .core{width:42%; aspect-ratio:1; border-radius:50%; background:var(--coral); color:var(--ink); display:grid; place-items:center; font-size:22px; transition:transform .5s var(--ease)}
.badge:hover .core{transform:scale(1.15) rotate(45deg)}
@keyframes spin{to{transform:rotate(360deg)}}

/* split text */
.split-w{display:inline-block; overflow:hidden; vertical-align:top; padding:.16em .12em .1em; margin:-.16em -.12em -.1em}
.split-done .split-w{overflow:visible}
.split-w>span{display:inline-block}
html.anim .split-w>span{will-change:transform}
.split-c{display:inline-block}
html.anim .split-c{will-change:transform}
.split-done .split-w>span,.split-done .split-c{will-change:auto}

/* ---------- marquee ---------- */
.mq{position:relative; overflow:hidden; padding-block:26px; border-block:1px solid var(--rule); user-select:none}
.mq-track{display:flex; width:max-content; will-change:transform}
.mq-track span{display:inline-flex; align-items:center; gap:clamp(22px,3vw,48px); padding-right:clamp(22px,3vw,48px); font-size:clamp(34px,5.2vw,82px); font-weight:900; letter-spacing:-.045em; line-height:1; white-space:nowrap}
.mq-track span::after{content:""; width:.42em; height:.42em; border-radius:50%; background:var(--accent); flex:none}
.mq.outline .mq-track span:nth-child(even){color:transparent; -webkit-text-stroke:1.5px var(--fg)}
.mq.small .mq-track span{font-size:clamp(20px,2.2vw,30px); letter-spacing:-.02em}
.mq.tilt{transform:rotate(-2.2deg) scale(1.04); background:var(--coral); color:var(--ink); border:0; --accent:var(--ink); z-index:5}
.mq.tilt.r{transform:rotate(1.8deg) scale(1.04); background:var(--ink); color:#fff; --accent:var(--coral)}
.mq-pair{position:relative; padding-block:30px; overflow:hidden}

/* ---------- words that light up ---------- */
.lightup{font-size:clamp(30px,4.3vw,70px); font-weight:900; letter-spacing:-.04em; line-height:1.1; max-width:20ch}
.lightup .lw{opacity:.16; transition:none}
html:not(.anim) .lightup .lw{opacity:1}
.pill{display:inline-block; vertical-align:middle; width:1.9em; height:.92em; margin:-.12em .12em 0; border-radius:999px; background:center/cover no-repeat; transform:scale(0); transform-origin:center}
html:not(.anim) .pill{transform:none}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule)}
.stat{padding:34px 26px 8px 0; border-right:1px solid var(--rule)}
.stat+.stat{padding-left:26px}
.stat:last-child{border-right:0}
.stat b{display:block; white-space:nowrap; font-size:clamp(44px,6.2vw,104px); font-weight:900; letter-spacing:-.06em; line-height:.9; font-variant-numeric:tabular-nums}
.stat b sup{font-size:.42em; vertical-align:top; position:relative; top:.12em; color:var(--accent)}
.stat p{margin-top:16px; color:var(--fg-2); font-size:16px; max-width:18em}

/* ---------- horizontal pinned panels ---------- */
.hpin{position:relative; overflow:hidden}
.hpin-track{display:flex; gap:clamp(16px,2vw,28px); padding-inline:var(--gut); width:max-content; will-change:transform}
.hpin-track::after{content:""; flex:none; width:1px; margin-left:calc(-1 * clamp(16px,2vw,28px))}
.hpin-intro{flex:none; width:min(520px,80vw); display:flex; flex-direction:column; justify-content:center; padding-right:3vw}
.panel{position:relative; flex:none; width:min(72vw,980px); height:min(74svh,720px); border-radius:var(--r); overflow:hidden; color:#fff; display:block; isolation:isolate}
.panel .ph{position:absolute; inset:-6% -14%; background:center/cover no-repeat; background-position:var(--pos,50% 50%); z-index:-2; transition:transform 1.2s var(--ease)}
.panel::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(15,20,23,.15),rgba(15,20,23,.15) 40%,rgba(15,20,23,.85))}
.panel:hover .ph{transform:scale(1.06)}
.panel-in{position:absolute; inset:auto 0 0 0; padding:clamp(24px,3vw,44px); display:grid; grid-template-columns:1fr auto; align-items:end; gap:24px}
.panel .n{position:absolute; top:clamp(20px,2.4vw,34px); left:clamp(24px,3vw,44px); font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase}
.panel .tag{position:absolute; top:clamp(20px,2.4vw,34px); right:clamp(24px,3vw,44px); background:var(--coral); color:var(--ink); font-size:13px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; padding:8px 14px; border-radius:999px}
.panel h3{font-size:clamp(46px,6.6vw,112px); letter-spacing:-.055em; line-height:.9}
.panel p{margin-top:14px; max-width:30em; color:#E4EAEC; font-size:17px}
.panel .go{width:clamp(64px,6vw,88px); aspect-ratio:1; border-radius:50%; background:#fff; color:var(--ink); display:grid; place-items:center; font-size:26px; transition:transform .6s var(--ease), background-color .3s}
.panel:hover .go{transform:rotate(-45deg); background:var(--coral)}
.panel.ext:hover .go{transform:scale(1.1)}
.hpin-bar{position:absolute; left:var(--gut); right:var(--gut); bottom:28px; height:2px; background:var(--rule)}
.hpin-bar i{position:absolute; inset:0; background:var(--accent); transform-origin:left; transform:scaleX(0)}

/* ---------- zoom-through mask ---------- */
.zoom{position:relative; height:100vh; height:100svh; overflow:hidden; background:var(--ink)}
.zoom-img{position:absolute; inset:0; background:center/cover no-repeat; background-position:var(--pos,50% 50%); clip-path:inset(30% 34% round 400px); will-change:clip-path,transform}
.zoom-img::after{content:""; position:absolute; inset:0; background:rgba(15,20,23,.28)}
.zoom-t{position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#fff; z-index:2; pointer-events:none; padding:0 var(--gut)}
.zoom-t .big{font-size:clamp(48px,8.4vw,150px); font-weight:900; letter-spacing:-.055em; line-height:.92}
.zoom-t .a,.zoom-t .b{display:block}
.zoom-t .b{opacity:0; text-shadow:0 4px 40px rgba(0,0,0,.45)}
.zoom-t .b em{color:#fff}
html:not(.anim) .zoom-img{clip-path:none}
html:not(.anim) .zoom-t .b{opacity:1}

/* ---------- split + photo frames ---------- */
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(40px,7vw,120px); align-items:center}
.split.rev>:first-child{order:2}
.frame{position:relative; overflow:hidden; border-radius:var(--r); background:var(--ink-3)}
.frame img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transform-origin:center}
.r-45{aspect-ratio:4/5} .r-34{aspect-ratio:3/4} .r-11{aspect-ratio:1} .r-32{aspect-ratio:3/2} .r-169{aspect-ratio:16/9} .r-23{aspect-ratio:2/3} .r-219{aspect-ratio:21/9}
.duo{position:relative; padding:0 12% 14% 0}
.duo .frame.sm{position:absolute; right:0; bottom:0; width:48%; box-shadow:0 30px 80px rgba(0,0,0,.35); border:6px solid var(--bg); transition:border-color .7s}
.sticker{position:absolute; z-index:3; left:-24px; top:12%; background:var(--sun); color:var(--ink); font-weight:900; font-size:14px; letter-spacing:.06em; text-transform:uppercase; padding:14px 18px; border-radius:999px; transform:rotate(-8deg); box-shadow:0 12px 30px rgba(0,0,0,.25)}
.checks{display:grid; gap:14px; margin-top:30px}
.checks li{display:flex; gap:14px; align-items:flex-start; font-weight:700}
.checks li::before{content:"\2713"; flex:none; width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--bg); display:grid; place-items:center; font-size:13px; font-weight:900; margin-top:1px}

/* ---------- tilt cards ---------- */
.tgrid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2vw,28px); perspective:1400px}
.tcard{position:relative; display:block; min-height:min(78svh,760px); border-radius:var(--r); overflow:hidden; color:#fff; transform-style:preserve-3d; isolation:isolate; transition:transform .6s var(--ease)}
.tcard .ph{position:absolute; inset:-4%; background:center/cover no-repeat; background-position:var(--pos,50% 50%); z-index:-2; transition:transform 1.2s var(--ease)}
.tcard::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(15,20,23,0) 30%,rgba(15,20,23,.88))}
.tcard .glare{position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),transparent 45%); opacity:0; transition:opacity .4s}
.tcard:hover .glare{opacity:1}
.tcard:hover .ph{transform:scale(1.08)}
.tcard-in{position:absolute; inset:auto 0 0 0; padding:clamp(24px,3vw,44px); transform:translateZ(60px)}
.tcard .k{font-size:12.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--sky)}
.tcard h3{font-size:clamp(38px,4.6vw,76px); letter-spacing:-.05em; line-height:.92; margin-top:12px}
.tcard p{margin-top:14px; color:#E4EAEC; max-width:30em}
.tcard .btns{margin-top:24px}

/* ---------- image trail playground ---------- */
.trail{position:relative; height:min(100svh,900px); overflow:hidden; display:grid; place-items:center; text-align:center}
.trail .h-xxl{position:relative; z-index:1; pointer-events:none; color:var(--fg)}
.trail .hint{position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:3; font-size:12.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-2)}
.trail-img{position:absolute; left:0; top:0; width:clamp(170px,17vw,280px); aspect-ratio:3/4; object-fit:cover; border-radius:16px; pointer-events:none; z-index:2; opacity:0; will-change:transform,opacity; box-shadow:0 24px 60px rgba(0,0,0,.3)}

/* ---------- stacking cards ---------- */
.stackc{display:grid; gap:0}
.scard{position:sticky; top:calc(var(--hdr) + 10px); min-height:min(82svh,760px); border-radius:calc(var(--r) + 6px); overflow:hidden; display:grid; grid-template-columns:1fr 1.1fr; background:var(--c,var(--ink-2)); color:var(--t,#fff); margin-bottom:24px; transform-origin:center top; box-shadow:0 -20px 60px rgba(0,0,0,.18)}
.scard-txt{padding:clamp(28px,4vw,64px); display:flex; flex-direction:column; justify-content:space-between; gap:30px}
.scard .k{font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; opacity:.8}
.scard h3{font-size:clamp(40px,5vw,84px); letter-spacing:-.05em; line-height:.92; margin-top:16px}
.scard p{font-size:clamp(17px,1.4vw,20px); max-width:28em; opacity:.85}
.scard .pull{font-family:var(--serif); font-style:italic; font-size:clamp(24px,2.4vw,36px); line-height:1.15; opacity:1}
.scard .big-n{font-size:clamp(90px,12vw,200px); font-weight:900; letter-spacing:-.07em; line-height:.8; opacity:.18}
.scard-img{position:relative; overflow:hidden}
.scard-img img{position:absolute; inset:0; width:100%; height:115%; object-fit:cover; object-position:var(--pos,50% 50%)}

/* ---------- pillar switcher (apartments) ----------
   Default (mobile, no JS): four compact cards. Desktop with JS: tabs on the left, one photo panel on the right. */
.p4-wrap{display:grid; gap:16px}
.p4{border-radius:var(--r); background:color-mix(in srgb,var(--fg) 5%,transparent); border:1px solid var(--rule); overflow:hidden}
.p4-tab{all:unset; box-sizing:border-box; display:flex; gap:18px; align-items:baseline; width:100%; padding:24px 24px 6px; position:relative; color:var(--fg)}
.p4-tab .n{font-size:13px; font-weight:800; letter-spacing:.14em; color:var(--accent)}
.p4-tab .k{display:block; font-size:12.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-2)}
.p4-tab b{display:block; margin-top:8px; font-size:clamp(26px,3vw,40px); font-weight:900; letter-spacing:-.04em; line-height:1.02}
.p4-tab .bar{display:none}
.p4-panel{padding:14px 24px 24px 24px}
.p4-img{border-radius:calc(var(--r) - 6px); overflow:hidden; aspect-ratio:16/10; background:var(--ink-3)}
.p4-img img{width:100%; height:100%; object-fit:cover}
.p4-txt{margin-top:18px}
.p4-txt p{color:var(--fg-2); max-width:34em}
.p4-txt .pull{margin-top:12px; font-family:var(--serif); font-style:italic; font-size:clamp(22px,2vw,30px); line-height:1.15; color:var(--fg)}
@media (min-width:861px){
  .p4-wrap.tabs{grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr); grid-auto-rows:auto; gap:0 clamp(30px,5vw,80px); align-items:start}
  .p4-wrap.tabs .p4{display:contents}
  .p4-wrap.tabs .p4-tab{grid-column:1; padding:26px 0 26px 4px; border-top:1px solid var(--rule); cursor:pointer; opacity:.5; transition:opacity .4s}
  .p4-wrap.tabs .p4:last-child .p4-tab{border-bottom:1px solid var(--rule)}
  .p4-wrap.tabs .p4-tab:hover,.p4-wrap.tabs .p4.on .p4-tab{opacity:1}
  .p4-wrap.tabs .p4-tab:focus-visible{outline:3px solid var(--coral); outline-offset:4px}
  .p4-wrap.tabs .p4-tab .bar{display:block; position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left}
  .p4-wrap.tabs .p4.on .p4-tab .bar{transform:scaleX(1)}
  .p4-wrap.tabs.auto .p4.on .p4-tab .bar{transform:scaleX(0); animation:bar var(--dur,7s) linear forwards}
  .p4-wrap.tabs .p4-panel{grid-column:2; grid-row:1 / span 4; padding:0; opacity:0; visibility:hidden; transform:translateY(16px); transition:opacity .5s var(--ease), transform .7s var(--ease), visibility 0s .5s}
  .p4-wrap.tabs .p4.on .p4-panel{opacity:1; visibility:visible; transform:none; transition:opacity .6s var(--ease), transform .8s var(--ease), visibility 0s}
  .p4-wrap.tabs .p4-img{aspect-ratio:4/3}
  .p4-wrap.tabs .p4.on .p4-img img{animation:p4zoom 1.4s var(--ease)}
  @keyframes p4zoom{from{transform:scale(1.12)}to{transform:none}}
}
/* ---------- furnished / unfurnished ---------- */
.mv-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,32px); margin-top:clamp(44px,5vw,72px)}
.mv-card{border-radius:var(--r); overflow:hidden; background:rgba(255,255,255,.55); background:color-mix(in srgb,#fff 55%,transparent); border:1px solid var(--rule); display:flex; flex-direction:column}
[data-theme="ink"] .mv-card,html.morph body[data-theme="ink"] .mv-card,body[data-theme="pine"] .mv-card{background:rgba(255,255,255,.05)}
.mv-card .frame{border-radius:0}
.mv-txt{padding:clamp(22px,2.6vw,36px)}
.mv-tag{display:inline-block; padding:7px 14px; border-radius:999px; background:var(--coral); color:var(--ink); font-size:12.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase}
.mv-tag.alt{background:var(--ink); color:#fff}
[data-theme="ink"] .mv-tag.alt,body[data-theme="ink"] .mv-tag.alt{background:#fff; color:var(--ink)}
.mv-txt h3{margin-top:16px; font-size:clamp(30px,3.2vw,48px); letter-spacing:-.045em; line-height:1}
.mv-txt>p{margin-top:14px; color:var(--fg-2)}
.mv-txt .checks{margin-top:20px; gap:10px}
.mv-for{margin-top:20px!important; padding-top:16px; border-top:1px solid var(--rule); font-family:var(--serif); font-style:italic; font-size:21px; line-height:1.3; color:var(--fg)!important}
.mv-note{font-size:14.5px; color:var(--fg-2); max-width:34em}
@media (max-width:860px){ .mv-grid{grid-template-columns:1fr} }
/* ---------- hover list (image follows cursor) ---------- */
.hlist{border-top:1px solid var(--rule)}
.hrow{position:relative; display:grid; grid-template-columns:72px 1fr auto auto; gap:24px; align-items:center; padding:clamp(18px,2.2vw,30px) 0; border-bottom:1px solid var(--rule); overflow:hidden; isolation:isolate}
.hrow::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--fg); transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--ease)}
.hrow:hover::before{transform:scaleY(1); transform-origin:top}
.hrow:hover{color:var(--bg)}
.hrow .i{font-size:13px; font-weight:800; letter-spacing:.14em; color:var(--fg-2); padding-left:12px; transition:color .4s}
.hrow:hover .i{color:var(--accent)}
.hrow h3{font-size:clamp(32px,4.4vw,72px); letter-spacing:-.05em; line-height:1; transition:transform .6s var(--ease)}
.hrow:hover h3{transform:translateX(16px)}
.hrow .city{font-size:15px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-2); transition:color .4s}
.hrow:hover .city{color:inherit}
.hrow .arrow{width:56px; height:56px; margin-right:12px; border-radius:50%; border:1.5px solid currentColor; display:grid; place-items:center; font-size:20px; transition:transform .6s var(--ease), background-color .3s, color .3s}
.hrow:hover .arrow{transform:rotate(-45deg); background:var(--accent); border-color:var(--accent); color:var(--ink)}
.hrow .thumb{display:none}
.hfloat{position:fixed; left:0; top:0; z-index:1500; width:clamp(240px,22vw,360px); aspect-ratio:4/5; border-radius:18px; overflow:hidden; pointer-events:none; opacity:0; transform:scale(.6); box-shadow:0 30px 80px rgba(0,0,0,.35)}
.hfloat img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.25); transition:opacity .45s, transform .9s var(--ease)}
.hfloat img.on{opacity:1; transform:none}
.hrow.soon h3{color:transparent; -webkit-text-stroke:1.5px var(--fg)}
.hrow.soon:hover h3{color:var(--bg); -webkit-text-stroke:0}

/* ---------- map ---------- */
.map-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,100px); align-items:center}
.wi-map{width:100%; max-width:520px; height:auto; margin-inline:auto; display:block; overflow:visible}
.wi-map .st{fill:color-mix(in srgb,var(--fg) 6%,transparent); stroke:var(--fg); stroke-width:1.3; stroke-linejoin:round}
.wi-map .dot{fill:var(--coral)}
.wi-map .ring{fill:none; stroke:var(--coral); stroke-width:2; transform-box:fill-box; transform-origin:center; animation:ring 2.6s var(--ease) infinite}
.wi-map .ring:nth-of-type(2n){animation-delay:.8s} .wi-map .ring:nth-of-type(3n){animation-delay:1.5s}
@keyframes ring{0%{transform:scale(.4); opacity:1}80%,100%{transform:scale(2.2); opacity:0}}
.mkts{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px}
.mkts li{padding:9px 16px; border-radius:999px; border:1.5px solid var(--rule); font-weight:800; font-size:14.5px; transition:background-color .3s, color .3s, border-color .3s}
.mkts li:hover{background:var(--coral); border-color:var(--coral); color:var(--ink)}

/* ---------- polaroid wall ---------- */
.pwall{position:relative; height:min(110svh,980px); overflow:hidden}
.pwall-t{position:absolute; inset:0; display:grid; place-items:center; text-align:center; pointer-events:none; padding:0 var(--gut)}
.pwall-t .h-xxl{opacity:.95}
.pol{position:absolute; width:clamp(140px,13.5vw,230px); background:#FFFFFF; padding:10px 10px 46px; border-radius:4px; box-shadow:0 18px 40px rgba(0,0,0,.28); cursor:grab; touch-action:none; user-select:none; will-change:transform}
.pol img{width:100%; aspect-ratio:1; object-fit:cover; pointer-events:none; -webkit-user-drag:none}
.pol span{position:absolute; left:12px; right:12px; bottom:12px; font-family:var(--serif); font-style:italic; font-size:19px; color:var(--ink); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pol.drag{cursor:grabbing; box-shadow:0 30px 70px rgba(0,0,0,.4)}
.pwall .hint{position:absolute; left:50%; bottom:28px; transform:translateX(-50%); font-size:12.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-2); white-space:nowrap}

/* ---------- drag gallery ---------- */
.dgal{overflow:hidden; cursor:grab; touch-action:pan-y; padding-block:10px}
.dgal.drag{cursor:grabbing}
.dgal-track{display:flex; gap:18px; padding-inline:var(--gut); width:max-content; will-change:transform}
.dgal figure{flex:none; width:clamp(240px,28vw,420px)}
.dgal figure:nth-child(3n+2){width:clamp(200px,20vw,320px); margin-top:60px}
.dgal .frame{aspect-ratio:3/4; pointer-events:none}
.dgal figcaption{margin-top:12px; font-weight:800; font-size:15px; display:flex; justify-content:space-between; color:var(--fg-2)}
.dgal figcaption b{color:var(--fg)}

/* ---------- chapters ---------- */
.chap-head{display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,70px); align-items:end}
.onum{font-size:clamp(130px,20vw,330px); font-weight:900; letter-spacing:-.08em; line-height:.72; color:transparent; -webkit-text-stroke:2px var(--fg); background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 0 no-repeat; -webkit-background-clip:text; background-clip:text}
.mosaic{display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(120px,13vw,200px); gap:clamp(12px,1.4vw,20px); margin-top:clamp(48px,6vw,90px)}
.mosaic .frame{border-radius:calc(var(--r) - 4px)}
.mosaic figure{position:relative}
.mosaic figcaption{position:absolute; left:16px; bottom:16px; z-index:2; background:rgba(15,20,23,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:13px; font-weight:800; letter-spacing:.06em; padding:8px 14px; border-radius:999px}
.w3{grid-column:span 3}.w4{grid-column:span 4}.w5{grid-column:span 5}.w6{grid-column:span 6}.w7{grid-column:span 7}.w8{grid-column:span 8}.w12{grid-column:span 12}
.h1r{grid-row:span 1}.h2r{grid-row:span 2}.h3r{grid-row:span 3}
.mosaic .frame{height:100%}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.chips li{padding:11px 18px; border:1.5px solid var(--rule); border-radius:999px; font-weight:800; font-size:15px; transition:transform .4s var(--ease), background-color .3s, color .3s, border-color .3s}
.chips li:hover{transform:translateY(-4px) rotate(-2deg); background:var(--accent); border-color:var(--accent); color:var(--ink)}
.facts{display:grid; gap:0; border-top:1px solid var(--rule)}
.facts li{display:grid; grid-template-columns:140px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid var(--rule); color:var(--fg-2)}
.facts b{color:var(--fg); font-size:13px; letter-spacing:.14em; text-transform:uppercase; padding-top:3px}
.info{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:clamp(40px,5vw,70px)}
.icard{padding:26px; border-radius:var(--r); background:rgba(128,128,128,.08); background:color-mix(in srgb,var(--fg) 6%,transparent); border:1px solid var(--rule)}
.icard b{display:block; font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-2); margin-bottom:10px}
.icard p,.icard dl{font-size:17px; font-weight:700}
.hours{display:grid; grid-template-columns:auto 1fr; gap:4px 16px}
.hours dt{color:var(--fg-2); font-weight:700}
.hours dd{font-weight:800}

/* grow: a small image that expands to fill the screen */
.grow{position:relative; height:180svh}
.grow-stick{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:grid; place-items:center}
.grow-img{position:absolute; inset:0; background:center/cover no-repeat; background-position:var(--pos,50% 50%); clip-path:inset(14% 20% round 28px); will-change:clip-path}
.grow-img::after{content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(15,20,23,.45),rgba(15,20,23,.2) 70%),linear-gradient(180deg,transparent 40%,rgba(15,20,23,.7))}
.grow-t{position:relative; z-index:2; text-align:center; color:#fff; padding:0 var(--gut)}
.grow-t .h-xl{text-shadow:0 4px 50px rgba(0,0,0,.4)}
.grow-t p{margin:22px auto 0; max-width:30em; color:#E8EDEF; font-size:clamp(17px,1.4vw,20px)}
html:not(.anim) .grow{height:auto}
html:not(.anim) .grow-stick{position:relative}
html:not(.anim) .grow-img{clip-path:none}

/* quote band with fixed photo */
.qband{position:relative; min-height:96svh; display:grid; align-items:center; overflow:hidden; color:#fff; clip-path:inset(0)}
.qband .bg{position:fixed; inset:0; background:center/cover no-repeat; background-position:var(--pos,50% 50%); z-index:-1}
.qband::before{content:""; position:absolute; inset:0; background:rgba(15,20,23,var(--scrim,.45)); z-index:0}
.qband .wrap{position:relative; z-index:1}
.qband .big{font-size:clamp(46px,7.4vw,124px); font-weight:900; letter-spacing:-.055em; line-height:.94; max-width:14ch}
.qband em{color:var(--coral)}
html.nofx .qband .bg{position:absolute}

/* parallax image strip */
.pstrip{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding-inline:var(--gut)}
.pstrip .frame{aspect-ratio:3/4}
.pstrip>:nth-child(even){margin-top:120px}

/* CTA */
.cta-big{display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:end}
.cta-big .btns{justify-content:flex-end}
.fxsec{position:relative; overflow:hidden; color:#fff; isolation:isolate}
.fxsec .bg{position:absolute; inset:-15% 0; background:center/cover no-repeat; background-position:var(--pos,50% 50%); z-index:-2}
.fxsec::before{content:""; position:absolute; inset:0; z-index:-1; background:rgba(15,20,23,var(--scrim,.65))}
.fxsec .lede{color:#E2E8EA}
.fxsec .eyebrow{color:#fff}
.caps{display:grid; grid-template-columns:repeat(3,1fr); margin-top:56px; border-top:1.5px solid var(--rule)}
.caps li{padding:22px 0; border-bottom:1.5px solid var(--rule); font-weight:900; font-size:clamp(18px,1.7vw,24px); letter-spacing:-.02em; display:flex; gap:14px; align-items:baseline; transition:padding .5s var(--ease)}
.caps li:hover{padding-left:12px}
.caps li span{font-size:13px; letter-spacing:.12em; opacity:.6}

/* footer */
.ftr{position:relative; background:var(--ink); color:#F2EEE8; padding-top:clamp(80px,10vw,150px); overflow:hidden; --fg:#F2EEE8; --fg-2:#B9C1C6; --rule:rgba(255,255,255,.14); --bg:var(--ink)}
.ftr-cta{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; padding-bottom:clamp(60px,7vw,100px); border-bottom:1px solid var(--rule)}
.ftr-cta a.mail{font-size:clamp(28px,4vw,62px); font-weight:900; letter-spacing:-.045em; line-height:1}
.ftr-grid{display:grid; grid-template-columns:1.2fr repeat(3,1fr); gap:40px; padding-block:60px}
.ftr h4{font-size:12.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--coral); margin:0 0 18px}
.ftr-grid a,.ftr-grid p{display:block; color:#C9D1D5; font-size:16px; padding:8px 0; transition:color .25s, transform .4s var(--ease)}
.ftr-grid a:hover{color:#fff; transform:translateX(6px)}
.ftr-grid .socials a{padding:0}
.ftr-tag{font-family:var(--serif); font-style:italic; font-size:30px; line-height:1.15; color:#fff; max-width:12em}
.ftr-word{display:block; width:100%; padding:0 var(--gut); margin-top:10px; line-height:0}
.ftr-word svg{width:100%; height:auto; overflow:visible}
.ftr-word .lg{fill:#F2EEE8}
.ftr-bot{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-block:28px; padding-right:84px; font-size:14px; color:#9AA4AA; border-top:1px solid var(--rule)}
.socials{display:flex; gap:10px}
.socials a{width:44px; height:44px; border-radius:50%; border:1px solid var(--rule); display:grid; place-items:center; transition:background-color .3s, transform .4s var(--ease)}
.socials a:hover{background:var(--coral); transform:translateY(-4px)}
.socials svg{width:18px; height:18px; fill:#fff}
.totop{position:fixed; right:22px; bottom:22px; z-index:1800; width:58px; height:58px; border-radius:50%; border:0; background:var(--ink); color:#fff; cursor:pointer; display:grid; place-items:center; opacity:0; transform:translateY(20px) scale(.8); transition:opacity .4s, transform .5s var(--ease); box-shadow:0 10px 30px rgba(0,0,0,.25)}
.totop.show{opacity:1; transform:none}
.totop svg{position:absolute; inset:0; transform:rotate(-90deg)}
.totop circle{fill:none; stroke:var(--coral); stroke-width:3; stroke-dasharray:163.4; stroke-dashoffset:calc(163.4 - 163.4 * var(--p,0))}
.totop span{font-size:18px}

/* ---------- interaction hints: only where they apply ---------- */
.trail .hint{display:none}
html.has-cursor .trail .hint{display:block}
html:not(.anim) .pwall .hint{display:none}
.hint-touch{display:none}
@media (hover:none){ .hint-desk{display:none} .hint-touch{display:inline} }

/* ---------- reduced motion / no-JS fallbacks for the interactive sections ---------- */
html:not(.anim) .hpin{overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:thin}
html:not(.anim) .hpin-intro{scroll-snap-align:start}
html:not(.anim) .hpin-track{padding-right:var(--gut)}
html:not(.anim) .hpin-bar{display:none}
html:not(.anim) .panel{scroll-snap-align:start}
html:not(.anim) .dgal{overflow-x:auto; cursor:auto; scrollbar-width:thin}
html:not(.anim) .pwall{height:auto; display:flex; flex-direction:column; align-items:center; gap:clamp(30px,4vw,60px); padding:clamp(80px,10vw,140px) var(--gut)}
html:not(.anim) .pwall-t{position:static; order:-1; padding:0}
html:not(.anim) .pwall-pols{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:22px; width:100%; max-width:var(--wrap)}
html:not(.anim) .pol{position:relative; width:auto; cursor:auto}
html:not(.anim) .pol:nth-child(3n+1){transform:rotate(-3deg)} html:not(.anim) .pol:nth-child(3n+2){transform:rotate(2deg)} html:not(.anim) .pol:nth-child(3n){transform:rotate(-1deg)}
.pwall-pols{display:contents}

/* ---------- work with us dialog ---------- */
.ww{border:0; padding:0; margin:auto; width:min(980px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); border-radius:28px; background:var(--paper); color:var(--ink); --fg:var(--ink); --fg-2:#535C61; --rule:rgba(23,30,34,.14); --accent:#C93B22; --bg:var(--paper); overflow:auto; overscroll-behavior:contain; box-shadow:0 40px 120px rgba(0,0,0,.45)}
.ww::backdrop{background:rgba(15,20,23,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.ww[open]{animation:wwin .55s var(--ease)}
@keyframes wwin{from{opacity:0; transform:translateY(30px) scale(.97)}to{opacity:1; transform:none}}
.ww-in{position:relative; padding:clamp(28px,4vw,52px)}
.ww-x{position:absolute; right:18px; top:18px; width:48px; height:48px; border-radius:50%; border:1.5px solid var(--rule); background:transparent; color:var(--ink); font-size:26px; line-height:1; cursor:pointer; transition:background-color .25s, transform .4s var(--ease)}
.ww-x:hover{background:var(--ink); color:#fff; transform:rotate(90deg)}
.ww-list{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:28px}
.ww-opt{position:relative; display:block; height:100%; padding:20px 64px 20px 22px; border-radius:18px; border:1px solid var(--rule); background:#fff; transition:border-color .3s, transform .4s var(--ease), box-shadow .4s}
.ww-opt:hover,.ww-opt:focus-visible{border-color:var(--coral); transform:translateY(-3px); box-shadow:0 14px 34px rgba(23,30,34,.1)}
.ww-k{display:block; font-size:12.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2)}
.ww-opt b{display:block; margin-top:6px; font-size:22px; font-weight:900; letter-spacing:-.03em; line-height:1.1}
.ww-d{display:block; margin-top:6px; font-size:15.5px; line-height:1.45; color:var(--fg-2)}
.ww-go{position:absolute; right:18px; top:20px; width:36px; height:36px; border-radius:50%; background:var(--coral); color:var(--ink); display:grid; place-items:center; font-size:16px; transition:transform .4s var(--ease)}
.ww-opt:hover .ww-go{transform:rotate(-45deg)}
.ww-foot{margin-top:24px; font-size:15.5px; color:var(--fg-2)}
@media (max-width:640px){ .ww-list{grid-template-columns:1fr} .ww{border-radius:22px} }
.menu-ww{color:var(--coral)}
html:not(.lenis):has(dialog.ww[open]){overflow:hidden}
.ftr-credit{padding-top:26px; font-size:14.5px; color:#B9C1C6; border-top:1px solid var(--rule)}
.ftr-credit+.ftr-bot{border-top:0}

/* ---------- reveal defaults (only hidden when motion runs) ---------- */
html.anim [data-reveal]{opacity:0; transform:translateY(46px)}
html.anim [data-reveal="fade"]{transform:none}
html.anim [data-reveal="scale"]{transform:scale(.92)}
html.anim [data-img]{clip-path:inset(100% 0 0 0)}
html.anim [data-img] img{transform:scale(1.35)}
html.anim [data-split]{visibility:hidden}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hpin{overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .hpin::-webkit-scrollbar{display:none}
  .hpin-track{padding-right:var(--gut)}
  .hpin-intro{width:84vw; scroll-snap-align:start}
  .panel{scroll-snap-align:center}
  .hpin-bar{display:none}
}
@media (max-width:1100px){
  .nav a:not(.btn){display:none}
  .nav .btn{display:none}
  .burger{display:block}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(3){padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--rule)}
  .scard{grid-template-columns:1fr; grid-template-rows:auto 42svh}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--hdr:68px; --r:18px}
  body{font-size:17px}
  .split,.map-grid,.cta-big,.tgrid{grid-template-columns:1fr}
  .split.rev>:first-child{order:0}
  .cta-big .btns{justify-content:flex-start}
  .hero-row{flex-direction:column; align-items:flex-start; gap:24px}
  .badge{display:none}
  .hero-foot .scroll-cue{display:none}
  .hero-cap{display:none}
  .panel{width:84vw; height:68svh}
  .tcard{min-height:72svh}
  .hrow{grid-template-columns:64px 1fr auto; gap:16px}
  .hrow .i{display:none}
  .hrow .city{display:none}
  .hrow .thumb{display:block; width:64px; height:64px; border-radius:12px; overflow:hidden; order:-1}
  .hrow .thumb img{width:100%; height:100%; object-fit:cover}
  .hrow .thumb.mono{display:grid; place-items:center; background:var(--coral); color:var(--ink); font-size:28px; font-weight:900; letter-spacing:-.04em}
  .hrow .arrow{width:44px; height:44px; margin-right:0}
  .hrow h3 small{display:block}
  .chap-head{grid-template-columns:1fr; gap:10px}
  .mosaic{grid-template-columns:repeat(6,1fr); grid-auto-rows:clamp(110px,28vw,180px)}
  .mosaic figure{grid-column:span 3!important; grid-row:span 2!important}
  .mosaic figure:first-child{grid-column:span 6!important}
  .facts li{grid-template-columns:1fr; gap:6px}
  .caps{grid-template-columns:1fr}
  .pstrip{grid-template-columns:1fr 1fr}
  .pstrip>:nth-child(even){margin-top:60px}
  .pstrip>:nth-child(n+3){display:none}
  .duo{padding:0 8% 16% 0}
  .sticker{left:-6px}
  .ftr-grid{grid-template-columns:1fr}
  .zoom-img{clip-path:inset(32% 18% round 300px)}
  .grow-img{clip-path:inset(18% 8% round 22px)}
  .dgal figure:nth-child(3n+2){margin-top:30px}
}
@media (max-width:560px){
  .ftr-bot{padding-right:0; padding-bottom:84px}
  .hero-media::after{background:linear-gradient(180deg,rgba(15,20,23,.55) 0%,rgba(15,20,23,.15) 28%,rgba(15,20,23,.55) 52%,rgba(15,20,23,.9) 100%)}
  .ftr-bot{flex-direction:column; gap:6px}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding-right:14px}
  .stat+.stat{padding-left:14px}
  .stat:nth-child(3){padding-left:0}
  .stat p{font-size:14.5px}
  .btn{padding:18px 22px; font-size:15px}
  .hero-bars button{width:24px}
  .info{grid-template-columns:1fr}
  .totop{right:14px; bottom:14px; width:52px; height:52px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  body::after{animation:none}
  .qband .bg{position:absolute}
}

/* ---------- who we are: statement + photo stack ---------- */
.is-wrap{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:clamp(40px,6vw,110px); align-items:center; margin-top:34px}
.is-wrap .lightup{max-width:16ch}
.kw{color:inherit; text-decoration:none; position:relative; white-space:nowrap; transition:color .45s var(--ease)}
.kw::after{content:""; position:absolute; left:0; right:0; bottom:.02em; height:.09em; border-radius:9px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease)}
.kw.on{color:var(--accent)}
.kw.on .lw{opacity:1!important}
.kw.on::after,a.kw:hover::after,a.kw:focus-visible::after{transform:scaleX(1)}
.is-stack{position:relative; aspect-ratio:4/5; width:100%; max-width:480px; justify-self:end; cursor:pointer; isolation:isolate}
.is-card{position:absolute; inset:0; margin:0; border-radius:28px; overflow:hidden; background:var(--ink); box-shadow:0 30px 70px -20px rgba(23,30,34,.45); transition:transform .9s var(--ease), opacity .9s var(--ease), filter .9s var(--ease); will-change:transform}
.is-card img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.12); transition:transform 1.4s var(--ease)}
.is-card figcaption{position:absolute; left:16px; bottom:16px; right:16px; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; padding:10px 14px; border-radius:999px; width:max-content; max-width:calc(100% - 32px); background:rgba(23,30,34,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; font-size:14px; opacity:0; transform:translateY(10px); transition:opacity .5s .25s, transform .5s .25s var(--ease)}
.is-card figcaption b{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sun)}
.is-card[data-pos="0"]{z-index:4; transform:none}
.is-card[data-pos="0"] img{transform:scale(1)}
.is-card[data-pos="0"] figcaption{opacity:1; transform:none}
.is-card[data-pos="1"]{z-index:3; transform:translate(9%,-5%) rotate(6deg) scale(.93); filter:brightness(.92)}
.is-card[data-pos="2"]{z-index:2; transform:translate(-8%,-8%) rotate(-7deg) scale(.86); filter:brightness(.85)}
.is-card[data-pos="3"]{z-index:1; transform:translate(3%,-11%) rotate(2deg) scale(.8); opacity:.7; filter:brightness(.8)}
@media (max-width:860px){
  .is-wrap{grid-template-columns:1fr; gap:56px}
  .is-stack{max-width:none; aspect-ratio:4/3; justify-self:stretch; width:calc(100% - 30px); margin:20px auto 0}
}

/* ---------- stat odometers ---------- */
.odo{display:inline-flex; align-items:flex-start; line-height:1}
.odo-d{position:relative; display:inline-block; height:1em; overflow:hidden}
.odo-sz{display:block; visibility:hidden; line-height:1}
.odo-col{position:absolute; left:0; top:0; width:100%; display:flex; flex-direction:column}
.odo-col span{display:block; height:1em; line-height:1; text-align:center}
.odo-x{line-height:1}
.odo sup{top:.06em}

/* ---------- move-in comparison ---------- */
.mv .lede b{color:var(--fg)}
.mv-table{margin-top:clamp(44px,5vw,72px); border-radius:var(--r); overflow:hidden; border:1px solid var(--rule); background:rgba(255,255,255,.6); background:color-mix(in srgb,#fff 60%,transparent)}
.mv-row{display:grid; grid-template-columns:1.1fr 1fr 1fr; align-items:center}
.mv-row>span{padding:16px clamp(14px,2vw,28px); font-size:16.5px}
.mv-row+.mv-row{border-top:1px solid var(--rule)}
.mv-row>span+span{border-left:1px solid var(--rule)}
.mv-k{font-weight:800}
.mv-th>span{font-size:12.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; padding-block:18px; background:var(--ink); color:#fff; display:flex; align-items:center; gap:10px}
.mv-th>span+span{border-left-color:rgba(255,255,255,.14)}
.mv-dot{width:10px; height:10px; border-radius:50%; background:var(--coral); flex:none}
.mv-dot.alt{background:var(--sky)}
.mv-y,.mv-n{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; margin-right:10px; font-size:12px; font-weight:900; vertical-align:-4px}
.mv-y{background:var(--accent); color:var(--bg)}
.mv-n{background:transparent; border:1.5px solid var(--rule); color:var(--fg-2)}
.mv-row:hover>span{background:rgba(23,30,34,.03)}
.mv-steps{list-style:none; padding:0; margin:clamp(44px,5vw,72px) 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); counter-reset:none}
.mv-steps li{padding:clamp(20px,2.4vw,30px); border-radius:var(--r); border:1px solid var(--rule)}
.mv-num{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff; font-weight:900; font-size:18px}
.mv-steps h4{margin-top:18px; font-size:clamp(20px,1.8vw,26px); letter-spacing:-.03em; line-height:1.1}
.mv-steps p{margin-top:10px; color:var(--fg-2); font-size:16px}
@media (max-width:860px){
  .mv-steps{grid-template-columns:1fr}
  .mv-row{grid-template-columns:1fr 1fr}
  .mv-row .mv-k{grid-column:1/-1; padding-bottom:4px; border-bottom:0}
  .mv-row>span+span{border-left:0}
  .mv-row>span:nth-child(3){border-left:1px solid var(--rule)}
  .mv-row>span{font-size:15px; padding:12px 14px}
  .mv-th .mv-k,.mv-th>span:first-child{display:none}
  .mv-row:not(.mv-th) .mv-k{background:rgba(23,30,34,.04); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; padding-top:10px; padding-bottom:8px}
}
@media (prefers-reduced-motion:reduce){ .is-card,.is-card img,.is-card figcaption,.kw,.kw::after{transition:none} }
.mv-row>span[role="cell"]{display:flex; align-items:center}
.mv-y,.mv-n{flex:none; vertical-align:0}
.odo-d{-webkit-mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
#intro{overflow-x:hidden}
@supports (overflow:clip){#intro{overflow-x:clip; overflow-clip-margin:0}}

/* ================= v8: gyms theme ================= */
[data-theme="base"],body[data-theme="base"]{--bg:#0B0C0C; --fg:#F4F6F2; --fg-2:#B4BAB0; --rule:rgba(255,255,255,.14); --accent:#E2FF66}

/* ================= owner CTA band (every page but PM) ================= */
.own{padding-block:clamp(44px,6vw,80px); background:var(--coral); color:var(--ink); --fg:var(--ink); --accent:var(--ink); --rule:rgba(23,30,34,.2)}
body[data-page="pm"] .own{display:none}
.own-in{display:flex; flex-wrap:wrap; gap:28px 48px; align-items:center; justify-content:space-between}
.own-h{margin-top:14px; font-size:clamp(28px,3.6vw,54px); font-weight:900; letter-spacing:-.045em; line-height:1}
.own-h em{font-family:var(--serif); font-weight:400; letter-spacing:-.02em}
.own-r{display:flex; flex-direction:column; gap:18px; align-items:flex-start}
.own-t,.pm-trust{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px 22px; font-weight:800; font-size:15px}
.own-t li::before,.pm-trust li::before{content:"\2713"; margin-right:8px; font-weight:900}
.pm-trust{margin-top:26px; color:#fff}
.pm-trust li::before{color:var(--coral)}
.pm-trust.dark{color:var(--fg)}

/* ================= hotels: two-hotel chooser ================= */
.hh{padding-top:calc(var(--hdr) + clamp(36px,5vw,70px)); background:var(--ink); color:#fff}
.hh-top{display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(26px,3vw,44px)}
.hh-grid{display:flex; gap:clamp(8px,1vw,14px); padding-inline:clamp(8px,1vw,14px); height:min(78svh,820px); min-height:520px}
.hh-c{position:relative; flex:1 1 0; min-width:0; border-radius:28px; overflow:hidden; display:flex; align-items:flex-end; transition:flex-grow .9s var(--ease); isolation:isolate}
.hh-c::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(23,30,34,0) 30%,rgba(23,30,34,.9) 100%)}
.hh-ph{position:absolute; inset:-2%; background:center/cover no-repeat; transition:transform 1.4s var(--ease); z-index:0}
.hh-in{position:relative; z-index:2; padding:clamp(22px,3vw,44px); max-width:620px}
.hh-n{display:inline-block; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:12.5px; font-weight:900; letter-spacing:.16em; text-transform:uppercase}
.hh-in h2{margin-top:16px; font-size:clamp(36px,4.6vw,76px); font-weight:900; letter-spacing:-.05em; line-height:.95}
.hh-in p{margin-top:14px; color:#D9DEE1; font-size:17px; max-width:34em}
.hh-tags{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-wrap:wrap; gap:8px}
.hh-tags li{padding:7px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.3); font-size:13.5px; font-weight:700}
.hh-in .btns{margin-top:22px}
@media (hover:hover) and (min-width:861px){
  .hh-grid:hover .hh-c{flex-grow:.8}
  .hh-grid .hh-c:hover{flex-grow:1.35}
  .hh-c:hover .hh-ph{transform:scale(1.05)}
}
@media (max-width:860px){
  .hh-grid{flex-direction:column; height:auto; min-height:0}
  .hh-c{min-height:72svh}
}
.hsw{position:sticky; top:calc(var(--hdr) + 10px); z-index:30; display:flex; gap:6px; width:max-content; max-width:calc(100% - 32px); margin:16px auto -64px; padding:6px; border-radius:999px; background:rgba(23,30,34,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 12px 40px rgba(0,0,0,.25)}
.hsw a{display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px; color:#fff; font-weight:800; font-size:14.5px; white-space:nowrap; transition:background .35s, color .35s}
.hsw a i{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); transition:background .35s}
.hsw a.on{background:#fff; color:var(--ink)}
.hsw a.on i{background:var(--coral)}
@media (max-width:420px){ .hsw a{padding:10px 12px; font-size:13px} }

/* ================= gyms ================= */
.gh .lede{max-width:32em}
.gtabs-wrap{padding-block:26px 0}
.gtabs{display:flex; gap:12px; flex-wrap:wrap}
.gtab{display:flex; flex-direction:column; gap:4px; padding:16px 22px; border-radius:18px; border:1px solid var(--rule); min-width:220px}
.gtab b{font-size:19px; letter-spacing:-.02em}
.gtab span{font-size:13.5px; color:var(--fg-2)}
.gtab.on{background:#E2FF66; color:#0B0C0C; border-color:#E2FF66}
.gtab.on span{color:#3E4A12}
.gtab.soon{opacity:.6; border-style:dashed}
.base-head{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(30px,6vw,100px); align-items:center}
.base-mark{color:#E2FF66}
.base-logo{width:100%; height:auto; display:block}
.base-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1.4vw,20px); margin-top:clamp(50px,6vw,90px)}
.base-grid figure{margin:0}
.base-grid .w7{grid-column:span 7} .base-grid .w5{grid-column:span 5}
.base-grid .frame{aspect-ratio:3/2}
.base-grid .tall{grid-row:span 2} .base-grid .tall .frame{aspect-ratio:auto; height:100%}
.base-cap{display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,5vw,80px); align-items:center}
.base-big{font-size:clamp(120px,22vw,340px); font-weight:900; letter-spacing:-.07em; line-height:.85; color:#E2FF66; font-variant-numeric:tabular-nums}
.base-cap h3{font-size:clamp(30px,3.6vw,56px); letter-spacing:-.045em; line-height:1}
.base-cap h3 em{font-family:var(--serif); font-weight:400; color:#E2FF66}
.base-cap p{margin-top:16px; color:var(--fg-2); font-size:18px; max-width:30em}
.base-cap .btn{margin-top:26px; --b:#E2FF66; --t:#0B0C0C}
[data-theme="base"] .btn:not(.ghost){--b:#E2FF66; --t:#0B0C0C}
@media (max-width:860px){
  .base-head,.base-cap{grid-template-columns:1fr}
  .base-mark{max-width:260px}
  .base-grid .w7,.base-grid .w5{grid-column:1/-1} .base-grid .tall{grid-row:auto} .base-grid .tall .frame{aspect-ratio:4/5}
}

/* ================= property management ================= */
.pmh .lede{max-width:34em}
.pm-stats{padding-block:clamp(56px,7vw,100px)}
.sgs{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.sg{width:100%; display:flex; align-items:center; gap:16px; padding:20px 22px; border-radius:18px; border:1px solid var(--rule); background:rgba(255,255,255,.04); color:var(--fg); font:inherit; font-size:18px; font-weight:700; text-align:left; cursor:pointer; transition:background .3s, border-color .3s, transform .35s var(--ease)}
.sg:hover{transform:translateX(6px); border-color:rgba(255,255,255,.35)}
.sg-box{flex:none; width:28px; height:28px; border-radius:9px; border:2px solid rgba(255,255,255,.4); display:grid; place-items:center; transition:background .3s, border-color .3s}
.sg[aria-pressed="true"]{background:rgba(255,102,77,.14); border-color:var(--coral)}
.sg[aria-pressed="true"] .sg-box{background:var(--coral); border-color:var(--coral)}
.sg[aria-pressed="true"] .sg-box::after{content:"\2713"; color:var(--ink); font-weight:900; font-size:15px}
.dg-out{margin-top:34px; padding:24px; border-radius:var(--r); border:1px solid var(--rule)}
.dg-meter{height:10px; border-radius:9px; background:rgba(255,255,255,.1); overflow:hidden}
.dg-fill{display:block; height:100%; width:0; border-radius:9px; background:linear-gradient(90deg,var(--sun),var(--coral)); transition:width .7s var(--ease)}
.dg-msg{margin-top:16px; font-size:19px; font-weight:800; min-height:2.6em}
.dg-cta{margin-top:10px; opacity:.45; pointer-events:none; transition:opacity .4s}
.dg-out.lit .dg-cta{opacity:1; pointer-events:auto}
.cs-list{display:grid; gap:clamp(60px,8vw,120px); margin-top:clamp(50px,6vw,90px)}
.cs{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(30px,5vw,80px); align-items:center}
.cs.flip .cs-media{order:2}
.cs-media{position:relative}
.cs-media .frame{aspect-ratio:4/3}
.cs-k{position:absolute; top:-26px; left:-10px; font-size:clamp(70px,9vw,140px); font-weight:900; letter-spacing:-.06em; line-height:1; color:transparent; -webkit-text-stroke:2px var(--fg); opacity:.35; pointer-events:none}
.cs-txt h3{margin-top:14px; font-size:clamp(30px,3.4vw,52px); letter-spacing:-.045em; line-height:1}
.cs-dl{margin-top:22px; display:grid; gap:6px}
.cs-dl dt{font-size:12.5px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-top:12px}
.cs-dl dd{margin:0; color:var(--fg-2)}
.cs-nums{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; margin-top:26px}
.cs-n{padding:18px; border-radius:18px; background:var(--ink); color:#fff}
.cs-n .pm-num{display:block; font-size:clamp(34px,3.4vw,52px); font-weight:900; letter-spacing:-.05em; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums}
.cs-n .pm-num sup{font-size:.5em; vertical-align:top; color:var(--coral)}
.cs-n>span{display:block; margin-top:10px; font-size:14px; color:#B9C1C6; line-height:1.35}
.cs-note{margin-top:16px; font-size:14.5px; color:var(--fg-2)}
.vs{margin-top:clamp(44px,5vw,72px); border-radius:var(--r); overflow:hidden; border:1px solid var(--rule)}
.vs-row{display:grid; grid-template-columns:1fr 1.25fr 1fr; align-items:stretch}
.vs-row>span{padding:18px clamp(14px,2vw,26px); font-size:16.5px; display:flex; align-items:center; gap:10px}
.vs-row+.vs-row{border-top:1px solid var(--rule)}
.vs-row>span+span{border-left:1px solid var(--rule)}
.vs-k{font-weight:800}
.vs-row>span:nth-child(2){background:rgba(255,102,77,.1); font-weight:700}
.vs-row>span:nth-child(3){color:var(--fg-2)}
.vs-y{flex:none; display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--coral); color:var(--ink); font-style:normal; font-size:12px; font-weight:900}
.vs-th>span{font-size:12.5px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; padding-block:16px}
.vs-th>span:nth-child(2){background:var(--coral); color:var(--ink)}
.pm-blds{list-style:none; padding:0; margin:30px 0 0; display:flex; flex-wrap:wrap; gap:10px}
.pm-blds li{display:flex; flex-direction:column; padding:12px 16px; border-radius:16px; border:1px solid var(--rule); background:rgba(255,255,255,.05)}
.pm-blds b{font-size:16px}
.pm-blds span{font-size:13px; color:var(--fg-2)}
.pm-map{margin:0; max-width:480px; justify-self:center; width:100%}
.pm-map-svg{display:block; width:100%; height:auto; overflow:visible}
.pm-state{fill:rgba(255,255,255,.08); stroke:var(--sky); stroke-width:1.5; stroke-linejoin:round}
.pm-dot{fill:var(--coral); stroke:var(--pine); stroke-width:1.5}
.pm-dot-ring{fill:var(--coral); opacity:.25; transform-box:fill-box; transform-origin:center; animation:pmPulse 2.2s var(--ease) infinite}
.pm-labels text{fill:#F2EEE8; font-size:14px; font-weight:800}
@keyframes pmPulse{0%{transform:scale(.6); opacity:.5}100%{transform:scale(2.2); opacity:0}}
.of-list{list-style:none; padding:0; margin:clamp(44px,5vw,72px) 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,20px)}
.of-list li{padding:clamp(20px,2.2vw,30px); border-radius:var(--r); background:rgba(255,255,255,.28); border:1px solid rgba(23,30,34,.16)}
.of-n{font-size:14px; font-weight:900; letter-spacing:.14em}
.of-list h3{margin-top:30px; font-size:clamp(21px,1.9vw,27px); letter-spacing:-.03em; line-height:1.08}
.of-list p{margin-top:12px; font-size:15.5px; color:#3A2420}
.of-promise{margin-top:clamp(30px,4vw,50px); display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; padding:clamp(22px,2.6vw,34px); border-radius:var(--r); background:var(--ink); color:#fff}
.of-promise b{font-size:clamp(22px,2.2vw,32px); letter-spacing:-.035em}
.of-promise span{color:#B9C1C6; flex:1 1 260px}
.of-promise .btn{--b:var(--coral); --t:var(--ink)}
.mv-steps.st4{grid-template-columns:repeat(4,1fr)}
.fqs{display:grid; gap:10px}
.fq{border-radius:18px; border:1px solid var(--rule); background:rgba(255,255,255,.6); background:color-mix(in srgb,#fff 60%,transparent)}
.fq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 22px; font-size:18px; font-weight:800}
.fq summary::-webkit-details-marker{display:none}
.fq summary i{flex:none; position:relative; width:26px; height:26px; border-radius:50%; background:var(--ink)}
.fq summary i::before,.fq summary i::after{content:""; position:absolute; left:50%; top:50%; width:11px; height:2px; margin:-1px 0 0 -5.5px; background:#fff; transition:transform .35s var(--ease)}
.fq summary i::after{transform:rotate(90deg)}
.fq[open] summary i::after{transform:rotate(0)}
.fq p{padding:0 22px 22px; color:var(--fg-2); max-width:44em}
.ceo{display:flex; gap:16px; align-items:center; margin-top:30px; padding:18px; border-radius:var(--r); border:1px solid var(--rule)}
.ceo-i{flex:none; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:var(--coral); color:var(--ink); font-weight:900; font-size:19px}
.ceo b{display:block; font-size:19px}
.ceo>div>span{display:block; color:var(--fg-2); font-size:14.5px}
.ceo .ulink{margin-top:4px; font-size:15px}
.pmf{display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:clamp(20px,2.6vw,36px); border-radius:28px; background:#fff; color:var(--ink)}
.pmf-f{display:flex; flex-direction:column; gap:8px}
.pmf-f.full{grid-column:1/-1}
.pmf label{font-size:14.5px; font-weight:800}
.pmf label span{font-weight:500; color:#5E676C}
.pmf input,.pmf select,.pmf textarea{font:inherit; font-size:16px; padding:14px 16px; border-radius:12px; border:1.5px solid #C9D2D6; background:#F7F9FA; color:var(--ink); transition:border-color .2s, box-shadow .2s}
.pmf textarea{min-height:120px; resize:vertical}
.pmf input:focus,.pmf select:focus,.pmf textarea:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 4px rgba(255,102,77,.25)}
.pmf [aria-invalid="true"]{border-color:#C0371F}
.pmf-err{font-size:13.5px; color:#B02A14; font-weight:700; min-height:0}
.pmf-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.pmf-sub{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:16px}
.pmf-status{font-size:14.5px; color:#3A4247}
.pmf-done h3{font-size:30px; letter-spacing:-.04em}
.pmf-done p{margin-top:8px; color:#3A4247}
.pm-sticky{position:fixed; left:50%; bottom:18px; z-index:60; display:inline-flex; align-items:center; gap:12px; padding:14px 18px 14px 22px; border-radius:999px; background:var(--coral); color:var(--ink); font-weight:900; box-shadow:0 14px 40px rgba(0,0,0,.3); transform:translate(-50%,140%); transition:transform .6s var(--ease)}
.pm-sticky .arr{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--coral)}
.pm-sticky.on{transform:translate(-50%,0)}
@media (max-width:1100px){ .of-list,.mv-steps.st4{grid-template-columns:1fr 1fr} }
@media (max-width:860px){
  .cs,.cs.flip{grid-template-columns:1fr} .cs.flip .cs-media{order:0}
  .vs-row{grid-template-columns:1fr 1fr} .vs-row .vs-k{grid-column:1/-1; border-bottom:1px solid var(--rule); font-size:13px; letter-spacing:.12em; text-transform:uppercase; padding-block:10px} .vs-row>span:nth-child(2){border-left:0} .vs-th>span:first-child{display:none}
  .of-list,.mv-steps.st4{grid-template-columns:1fr}
  .pmf{grid-template-columns:1fr}
  .pm-map{max-width:360px}
}
@media (prefers-reduced-motion:reduce){ .pm-dot-ring{animation:none} .hh-c,.hh-ph,.sg,.pm-sticky{transition:none} }
.base-grid .w12{grid-column:1/-1} .base-grid .wide .frame{aspect-ratio:21/9}
.cs-n .pm-num{font-size:clamp(28px,2.7vw,46px)}
.pm-start h2 + .lede{margin-top:22px}
.split>*{min-width:0}
.pmf input,.pmf select,.pmf textarea{width:100%; min-width:0}
.pmf-f{min-width:0}

/* ================= smoothness: no live blur over scrolling content, no filter animation ================= */
.mosaic figcaption,.is-card figcaption,.hh-n,.hsw{-webkit-backdrop-filter:none!important; backdrop-filter:none!important}
.mosaic figcaption{background:rgba(15,20,23,.82)}
.is-card figcaption{background:rgba(23,30,34,.88)}
.hh-n{background:rgba(23,30,34,.6)}
.hsw{background:rgba(23,30,34,.94)}
.is-card{filter:none!important; transition:transform .9s var(--ease), opacity .9s var(--ease)}
.is-card::after{content:""; position:absolute; inset:0; background:#000; opacity:0; transition:opacity .9s var(--ease); pointer-events:none}
.is-card[data-pos="1"]::after{opacity:.08} .is-card[data-pos="2"]::after{opacity:.15} .is-card[data-pos="3"]::after{opacity:.2}
.hh-c{contain:paint}
.mq,.hpin,.dgal{contain:layout paint}
.cur,.cur-ring{contain:layout style}
.hdr{contain:layout style}
.dg-fill{width:100%!important; transform:scaleX(var(--f,0)); transform-origin:left; transition:transform .7s var(--ease)}
.nav a,.nav a .roll span{white-space:nowrap}
@media (max-width:1280px){ .nav a{padding:10px 9px; font-size:14px} .nav .btn{margin-left:8px; padding:13px 16px} .brand-t{display:none} }

/* ---- chooser: make "you can switch" obvious ---- */
.hh-hint{display:flex; align-items:center; gap:12px; color:#C9D0D4; font-size:16px; font-weight:600}
.hh-tap{position:relative; flex:none; width:30px; height:30px; border-radius:50%; border:2px solid var(--coral)}
.hh-tap::after{content:""; position:absolute; inset:7px; border-radius:50%; background:var(--coral); animation:tapPing 1.8s var(--ease) infinite}
@keyframes tapPing{0%{transform:scale(.6); opacity:1}70%{transform:scale(1.6); opacity:0}100%{opacity:0}}
.hh-hit{position:absolute; inset:0; z-index:2; border-radius:inherit}
.hh-in{z-index:3; pointer-events:none}
.hh-in .btns{pointer-events:auto}
.hh-c:focus-within{outline:3px solid var(--coral); outline-offset:3px}
.hsw{align-items:center}
.hsw-l{padding:0 8px 0 14px; font-size:11.5px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:#9DA7AC; white-space:nowrap}
.hsw a:not(.on){position:relative}
.hsw a:not(.on)::after{content:"\2192"; margin-left:2px; opacity:.7; transition:transform .35s var(--ease)}
.hsw a:not(.on):hover{background:rgba(255,255,255,.12)}
.hsw a:not(.on):hover::after{transform:translateX(3px)}
.hsw.nudge a:not(.on){animation:swNudge 1.6s var(--ease) 2}
@keyframes swNudge{0%,100%{box-shadow:0 0 0 0 rgba(255,102,77,0)}40%{box-shadow:0 0 0 6px rgba(255,102,77,.45)}}
@media (max-width:560px){ .hsw-l{display:none} }
@media (prefers-reduced-motion:reduce){ .hh-tap::after,.hsw.nudge a{animation:none} }

/* ---- tighter rhythm: no double-padding canyons between back-to-back sections ---- */
.sec{padding-block:clamp(64px,8.5vw,124px)}
.sec + .sec{padding-top:clamp(28px,4vw,60px)}
.pm-stats{padding-block:clamp(40px,5vw,72px)}
.pm-stats + .sec{padding-top:clamp(56px,6vw,96px)}
.cs-list{gap:clamp(48px,6vw,88px)}

/* ---- mobile swipe cues for sideways rows ---- */
.swipe-cue{display:none}
@media (max-width:860px){
  .hpin{scroll-padding-inline:var(--gut); padding-block:clamp(56px,9vw,90px)!important}
  .hpin-intro{width:78vw}
  .swipe-cue{display:inline-flex; align-items:center; gap:10px; align-self:flex-start; margin-top:26px; padding:12px 18px 12px 14px; border-radius:999px; background:var(--coral); color:var(--ink); font-weight:900; font-size:15px; box-shadow:0 10px 30px rgba(255,102,77,.3)}
  .swipe-cue i{font-style:normal; display:inline-block; animation:scArrow 1.2s var(--ease) infinite}
  .sc-hand{position:relative; width:22px; height:22px; border-radius:50%; background:var(--ink)}
  .sc-hand::after{content:""; position:absolute; inset:6px; border-radius:50%; background:var(--coral); animation:tapPing 1.6s var(--ease) infinite}
  .hpin-bar{display:block; position:relative; left:auto; right:auto; bottom:auto; margin:26px var(--gut) 0; width:auto}
  .hpin.peek .hpin-track{animation:hpPeek 1.4s var(--ease) .2s 1}
  .dgal-cue{display:flex; align-items:center; gap:10px; margin:0 var(--gut) 14px; font-size:13px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2)}
  .dgal-cue i{font-style:normal; color:var(--accent); animation:scArrow 1.2s var(--ease) infinite}
  .dgal.peek .dgal-track{animation:hpPeek 1.4s var(--ease) .2s 1}
}
@media (min-width:861px){ .dgal-cue{display:none} }
@keyframes scArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes hpPeek{0%,100%{transform:translateX(0)}45%{transform:translateX(-56px)}}
@media (prefers-reduced-motion:reduce){ .swipe-cue i,.sc-hand::after,.dgal-cue i{animation:none} .hpin.peek .hpin-track,.dgal.peek .dgal-track{animation:none} }

/* ---- PM: timed owner popup ---- */
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.pm-pop{position:fixed; right:20px; bottom:20px; z-index:2600; width:min(420px,calc(100vw - 24px)); padding:26px; border-radius:24px; background:var(--ink); color:#fff; --fg:#fff; --fg-2:#B9C1C6; --accent:var(--coral); box-shadow:0 30px 80px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.1); transform:translateY(24px) scale(.97); opacity:0; transition:transform .6s var(--ease), opacity .5s}
.pm-pop.on{transform:none; opacity:1}
.pm-pop[hidden]{display:none}
.pm-pop h3{margin-top:14px; font-size:clamp(30px,3vw,40px); letter-spacing:-.045em; line-height:1}
.pm-pop h3 em{font-family:var(--serif); font-weight:400; color:var(--coral)}
.pm-pop>p{margin-top:12px; color:#C9D0D4; font-size:15.5px}
.pm-pop-f{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.pm-pop-f input{flex:1 1 180px; min-width:0; font:inherit; font-size:16px; padding:13px 16px; border-radius:999px; border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff}
.pm-pop-f input:focus{outline:none; border-color:var(--coral)}
.pm-pop-f input[aria-invalid="true"]{border-color:#FF8A75}
.pm-pop-s{margin-top:10px; font-size:14px; color:#E8EDEF; min-height:0}
.pm-pop-alt{display:inline-block; margin-top:12px; font-size:14px; color:#fff}
.pm-pop-x{position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:0; background:rgba(255,255,255,.1); color:#fff; font-size:20px; cursor:pointer}
.pm-pop-x:hover{background:rgba(255,255,255,.2)}
body.pop-open .pm-sticky{transform:translate(-50%,140%)!important}
@media (max-width:560px){ .pm-pop{left:12px; right:12px; bottom:12px; width:auto; padding:22px} }
@media (prefers-reduced-motion:reduce){ .pm-pop{transition:none} }

/* ===== mobile/tablet audit fixes ===== */
.ftr-cta a.mail{display:inline-block; padding-block:8px}
.ceo .tlink{display:inline-block; padding-block:9px; margin-block:-9px}
@media (max-width:860px){
  .zoom-t .big{font-size:clamp(38px,11vw,72px)}
  /* venue switcher moves to the bottom-left on phones so it never sits over content under the header */
  .hsw{position:fixed; top:auto; bottom:14px; left:12px; margin:0; max-width:calc(100% - 90px); padding:5px; transform:translateY(160%); transition:transform .5s var(--ease)}
  .hsw.vis{transform:none}
  .hsw a{padding:9px 11px; font-size:12.5px; gap:7px}
  .hsw-l{display:none}
}
.pm-sticky.hide-foot{transform:translate(-50%,140%)!important}
/* audit round 2 */
.ftr-credit{position:relative; z-index:3}
.hsw-l{font-size:12.5px}
@media (max-width:860px){ .hsw a{min-height:44px; padding:0 13px} }
body.pop-open .totop{opacity:0; pointer-events:none}
@media (max-width:560px){
  .pm-pop{padding:18px 18px 16px}
  .pm-pop h3{margin-top:10px; font-size:28px}
  .pm-pop>p:not(.pm-pop-s){display:none}
  .pm-pop-f{margin-top:12px}
  .pm-pop-alt{margin-top:8px}
}
@media (max-height:500px){ .pm-pop>p:not(.pm-pop-s){display:none} .pm-pop{padding:16px} }
/* iPhone pass */
.facts li{display:block; position:relative; padding-left:160px}
.facts li b{position:absolute; left:0; top:20px; width:140px}
@media (max-width:860px){
  .facts li{padding-left:0}
  .facts li b{position:static; display:block; width:auto; margin-bottom:6px}
  .hh-c::after{background:linear-gradient(180deg,rgba(23,30,34,.05) 20%,rgba(23,30,34,.72) 55%,rgba(23,30,34,.94) 100%)}
  .hh-in p{color:#E6EAEC}
  .hsw a{font-size:12px; padding:0 11px; gap:6px}
  .hsw a::after{display:none}
  .hsw{max-width:calc(100% - 96px)}
  .pm-sticky{white-space:nowrap; padding:12px 14px 12px 18px; font-size:15px}
}