:root{
  --page:#f5f3ed;--ink:#1d3a33;--body:#34443e;--muted:#7c8580;--line:#e6eae7;
  --green:#173c37;--green-2:#2e5e4b;--mint:#e4eee2;--track:#d9dcd5;--red:#c4544f;--amber:#e6c27a;--gold:#b9893e;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--serif:var(--sans);--cta:var(--sans);
  --s:1;color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:#0f1714;font-family:var(--sans);color:var(--body);overflow:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
svg{display:block}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===== App shell =====
   The app fills the viewport on phones and is centred as a column (max 600px) on wider touch screens.
   app.js sets --H (screen height), --seam (where the agent video meets the property), --sat/--sab (safe areas)
   and the --clip-* shapes from the real screen size, so nothing is scaled. */
.stage{position:fixed;inset:0;overflow:hidden;display:flex;justify-content:center}
.phone{position:relative;width:100%;max-width:600px;height:100%;background:#fff}
.screen{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background:#fff;transform-origin:0 0;
  --H:780px;--seam:393px;--sat:0px;--sab:0px}
.view{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s;background:#fff;overflow:hidden}
.view.on{opacity:1;visibility:visible;transition:opacity .4s ease}
.scroll{overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
.scroll::-webkit-scrollbar{display:none}

.phone.land{max-width:none}
/* desktop-only parts of the website layout (see "Desktop website" below) */
.post{display:contents}
.rail,.topbar,.side,.detail{display:none}

/* ===== Feed ===== */
.feed{overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.feed::-webkit-scrollbar{display:none}
.short .feed{scroll-snap-type:y proximity}
.hdr{background:#fff;scroll-snap-align:start;padding-top:var(--sat)}
.toprow{height:46px;position:relative;display:flex;align-items:center;justify-content:center}
.burger{position:absolute;left:6px;top:1px;width:44px;height:44px;display:grid;place-items:center}
.burger span{display:block;width:14px;height:1.6px;background:#2a3833;box-shadow:0 -4.5px 0 #2a3833,0 4.5px 0 #2a3833}
.logo{width:84px;height:26px;margin-top:-2px}
.nav{display:flex;height:54px;border-bottom:1px solid #eceeec}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:6px;font-size:10.5px;color:#4c5a55;position:relative}
.nav button.act{color:var(--green)}
.nav button.act svg{stroke:var(--green)}
.nav button.act::after{content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--green-2)}
.nav svg{width:19px;height:19px;stroke:#3a4a44;fill:none;stroke-width:1.4}
.badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--green);color:#fff;font-size:9px;line-height:15px;text-align:center}
.disc{padding:14px 17px 18px}
.disc-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.disc-h b{font-size:14px;color:#2a3a35}
.disc-h span{font-size:10.5px;color:#8d9591}
.avs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:16px -17px 0;padding:0 17px}
.avs::-webkit-scrollbar{display:none}
.av{flex:0 0 74px;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11px;color:#3c4a45;position:relative}
.av .ring{width:52px;height:52px;border-radius:50%;border:2px solid #4e6a5f;padding:1.5px;background:#fff}
.av .ring>div{width:100%;height:100%;border-radius:50%;overflow:hidden}
.av.off .ring{border-color:#c4c9c6}
.av i{position:absolute;top:40px;left:calc(50% + 15px);width:10px;height:10px;border-radius:50%;background:#3aa27a;border:2px solid #fff}
.av.off i{background:#b9bfbc}
.fchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.fchip{height:30px;padding:0 11px;border-radius:15px;background:var(--mint);color:#2f5a45;font-size:11px;display:inline-flex;align-items:center;gap:5px}
.fchip.clear{background:none;color:var(--muted);text-decoration:underline}
.play-all{margin-top:16px;height:36px;padding:0 16px;border-radius:18px;background:var(--green);color:#fff;font-size:12.5px}
.empty{height:calc(var(--H) - 300px);min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;gap:10px;color:var(--muted);font-size:12.5px;scroll-snap-align:start}
.empty h3{font-weight:700;letter-spacing:-.01em;font-size:22px;color:var(--ink)}
.minihdr{position:absolute;left:0;right:0;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transform:translateY(-102%);transition:transform .35s ease;padding-top:var(--sat)}
.minihdr.show{transform:none}
.minihdr .nav{border-bottom:0}
.phone.land .minihdr{display:none}

/* ===== Agent card =====
   Top: agent video, cut by --clip-card. Bottom (from --seam): the property tour. Overlays hang off the
   top edge, the seam, or the bottom edge, so the card works at any width and height. */
.card{position:relative;height:var(--H);scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#0f2f2e}
.media-agent{position:absolute;left:0;top:0;width:100%;height:calc(var(--seam) + 59px);clip-path:var(--clip-card);z-index:2;background:#cfd6d2}
.media-agent .agentsvg{width:100%;height:100%}
.wave{position:absolute;left:0;top:0;width:100%;height:calc(var(--seam) + 67px);z-index:3;pointer-events:none;overflow:visible}
.wave path{fill:none;stroke:#fff;stroke-width:2.6}
.prop{position:absolute;left:0;right:0;top:var(--seam);bottom:0;z-index:1;background:#0e3332;overflow:hidden;touch-action:pan-y}
.prop .ph{position:absolute;inset:0;z-index:0;transition:opacity .3s,transform .3s}
.prop .ph svg{width:100%;height:100%}
.prop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,40,40,0) 0%,rgba(9,40,40,0) 42%,rgba(10,44,43,.55) 64%,rgba(9,40,40,.94) 100%);pointer-events:none}
.ov{position:absolute;z-index:4}
.namechip{left:12px;top:calc(18px + var(--sat));padding:6px 10px 6px 8px;border-radius:7px;background:rgba(255,255,255,.86);min-width:100px;max-width:calc(100% - 96px)}
.namechip b{display:flex;align-items:center;gap:4px;font-size:12.5px;color:#1f2b28}
.namechip b .vf{width:11px;height:11px;flex:none}
.namechip small{display:block;font-size:9.5px;color:#6d7672;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{height:28px;padding:0 11px;border-radius:14px;background:rgba(255,255,255,.88);font-size:10.5px;color:#2a3632;display:inline-flex;align-items:center;gap:5px}
.chip svg{width:9px;height:9px;fill:currentColor}
.pausechip{left:12px;top:calc(66px + var(--sat))}
.livechip{left:12px;top:calc(100px + var(--sat));height:20px;padding:0 8px;font-size:9px;letter-spacing:.06em;background:rgba(23,60,55,.78);color:#fff}
.livechip i{width:5px;height:5px;border-radius:50%;background:#7fe0b0}
.stats{right:8px;top:calc(55px + var(--sat));width:62px;padding:8px 0 6px;border-radius:10px;background:rgba(255,255,255,.9);text-align:center}
.stats>*{display:block;margin-bottom:6px;width:100%}
.stats b{display:block;font-size:12.5px;color:#1f2b28}
.stats span{font-size:9px;color:#56605c}
.demolbl{left:12px;top:calc(var(--seam) - 21px);font-size:9px;letter-spacing:.12em;color:rgba(255,255,255,.9);background:rgba(23,40,35,.32);padding:2px 6px;border-radius:3px;text-transform:uppercase;max-width:calc(100% - 210px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cta{right:8px;top:calc(var(--seam) - 9px);width:178px;height:60px;border-radius:30px;z-index:5;background:linear-gradient(180deg,#fff 0%,#fbfbfb 55%,#ececec 100%);box-shadow:inset 0 -2px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:space-between;padding:0 6px 0 20px;transition:transform .15s}
.cta:active{transform:scale(.97)}
.cta span{font-family:var(--cta);font-weight:700;font-size:14.5px;color:#141414;text-transform:uppercase;white-space:nowrap;flex:1;text-align:center;padding-right:4px}
.cta i{width:46px;height:46px;border-radius:50%;background:#000;display:grid;place-items:center;flex:none}
.cta i svg{width:22px;height:22px;stroke:#fff;stroke-width:1.5;fill:none;stroke-linecap:round}
.ptitle{left:16px;right:120px;font-size:16px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psub{left:16px;right:120px;font-size:11.5px;color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.price{right:16px;font-weight:700;font-size:17px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.prow{left:14px;right:14px;height:32px;display:flex;align-items:center}
.circ{width:32px;height:32px;border-radius:50%;border:1.4px solid rgba(255,255,255,.75);background:rgba(255,255,255,.12);display:grid;place-items:center;flex:none;position:relative}
.circ::before{content:"";position:absolute;inset:-6px}
.circ svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:1.6}
.circ.saved svg{fill:#fff}
.dots{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:9.5px;letter-spacing:.16em;color:rgba(255,255,255,.88);text-transform:uppercase}
.dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.45)}
.dots i.on{background:#fff;width:14px;border-radius:3px}
.prow .gap{width:12px}
.meta{left:16px;right:14px;font-size:11.5px;color:rgba(255,255,255,.92);display:flex;align-items:center}
.meta button{color:inherit;font-size:11.5px;padding:6px 0}
.meta .rv{margin-left:20px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
.meta .pos{margin-left:auto;font-size:10px}
.who{left:16px;right:14px;font-size:11px;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who b{color:#fff}
.tiny{left:16px;right:14px;font-size:9.5px;color:rgba(255,255,255,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .ptitle{bottom:calc(171px + var(--sab))}
.card .psub{bottom:calc(154px + var(--sab))}
.card .price{bottom:calc(158px + var(--sab))}
.card .prow{bottom:calc(107px + var(--sab))}
.card .meta{bottom:calc(64px + var(--sab))}
.card .who{bottom:calc(41px + var(--sab))}
.card .tiny{bottom:calc(22px + var(--sab))}
.paused .agentsvg *{animation-play-state:paused!important}

/* agent svg motion */
.agentsvg .sway{transform-origin:195px 400px;transform-box:view-box;animation:sway 7s ease-in-out infinite}
.agentsvg .eyes{transform-box:fill-box;transform-origin:center;animation:blink 5.2s infinite}
.agentsvg .mouth{transform-box:fill-box;transform-origin:center top;animation:talk .42s ease-in-out infinite alternate}
.agentsvg .pfr{transform-box:fill-box;transform-origin:bottom center;animation:leaf 6s ease-in-out infinite}
.agentsvg .clouds{animation:drift 30s linear infinite alternate}
.still .agentsvg *{animation:none!important}
.quiet .agentsvg .mouth{animation:none}
@keyframes sway{0%,100%{transform:rotate(-.8deg) translateY(0)}50%{transform:rotate(.9deg) translateY(-2px)}}
@keyframes blink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
@keyframes talk{from{transform:scaleY(.55)}to{transform:scaleY(1.35)}}
@keyframes leaf{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes drift{from{transform:translateX(-12px)}to{transform:translateX(14px)}}
.prop .ripple,.full .ripple{animation:ripple 3.5s ease-in-out infinite alternate}
@keyframes ripple{from{transform:translateX(-6px)}to{transform:translateX(6px)}}

/* ===== Full property ===== */
.gal{position:absolute;left:0;right:0;top:0;height:62%;overflow:hidden;background:#0e3332;touch-action:pan-y}
.gal .track{display:flex;height:100%;transition:transform .45s cubic-bezier(.3,.8,.3,1)}
.gal .slide{flex:0 0 100%;height:100%}
.gal .slide svg{width:100%;height:100%}
.gal::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 70%,rgba(0,0,0,.3));pointer-events:none}
.gdots{position:absolute;bottom:30px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:3}
.gdots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.55);transition:width .3s}
.gdots i.on{width:16px;background:#fff}
.gcap{position:absolute;bottom:28px;left:16px;z-index:3;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:.9}
.viewer .gdots{bottom:calc(20px + var(--sab))}.viewer .gcap{bottom:calc(18px + var(--sab))}
.pill-w{position:absolute;z-index:3;top:calc(14px + var(--sat));height:40px;padding:0 15px;border-radius:20px;background:#fff;font-size:12px;color:#2a3632;display:flex;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.pill-w svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}
.pill-w.saved svg{fill:var(--red);stroke:var(--red)}
.sheetpanel{position:absolute;left:0;right:0;bottom:0;top:calc(62% - 22px);background:#fff;border-radius:22px 22px 0 0;padding:20px 20px calc(16px + var(--sab));display:flex;flex-direction:column;z-index:2;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
.sheetpanel::-webkit-scrollbar{display:none}
.sheetpanel h2{font-weight:700;letter-spacing:-.01em;font-size:clamp(22px,6.6vw,28px);color:#22362f;line-height:1.1}
.sheetpanel .actions{position:sticky;bottom:0;background:#fff;padding-top:10px}
.loc{font-size:11.5px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:4px}
.specs{display:flex;gap:8px;margin:14px 0}
.spec{flex:1;border:1px solid var(--line);border-radius:10px;padding:8px 6px;text-align:center}
.spec b{display:block;font-size:13.5px;color:var(--ink)}
.spec span{font-size:9.5px;color:var(--muted)}
.pricebig{font-weight:700;font-size:22px;color:var(--ink)}
.pricebig small{font-family:var(--sans);font-size:10px;color:var(--muted);margin-left:6px;font-weight:400}
.actions{display:flex;gap:8px;margin-top:auto}
.xtra{margin:14px 0 10px}
.calc{border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.calc h4,.near h4{font-size:12.5px;color:var(--ink);margin-bottom:6px}
.cm{font-size:20px;font-weight:700;color:var(--ink)}
.cm small{font-size:10.5px;font-weight:400;color:var(--muted);margin-left:6px}
.calc label{display:block;font-size:11.5px;color:#55605b;margin-top:10px}
.calc label b{float:right;color:var(--ink)}
.calc input[type=range]{width:100%;height:28px;accent-color:var(--green);margin-top:2px}
.near{margin-top:14px}
.near>div:not(.amen){display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#55605b;padding:8px 0;border-bottom:1px solid var(--line)}
.near b{color:var(--ink);font-weight:600;white-space:nowrap}

/* ===== Paper screens ===== */
.bar{height:calc(60px + var(--sat));padding:var(--sat) 14px 0;border-bottom:1px solid #edf0ed;display:flex;align-items:center;gap:12px;background:#fff;position:relative;z-index:3}
.back{width:40px;height:40px;border-radius:50%;background:#f0f3f0;display:grid;place-items:center;flex:none}
.back svg{width:14px;height:14px;stroke:#495650;fill:none;stroke-width:1.8}
.bar h3{font-size:15.5px;color:#22332e;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pad{padding:0 clamp(16px,5.6vw,24px);max-width:560px;margin:0 auto}
.body{position:absolute;left:0;right:0;top:calc(60px + var(--sat));bottom:0;overflow-y:auto;padding-bottom:calc(84px + var(--sab));scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.body::-webkit-scrollbar{display:none}
.center{text-align:center}
.tag{display:inline-block;padding:4px 9px;border-radius:10px;background:var(--mint);color:#4c7659;font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.serif{font-weight:700;letter-spacing:-.01em;color:#263b35}
h2.serif{letter-spacing:-.015em}
.btn{display:flex;width:100%;min-height:48px;border-radius:24px;align-items:center;justify-content:center;gap:6px;font-size:13px;padding:0 16px;text-align:center;transition:transform .12s,background .2s}
.btn:active{transform:scale(.98)}
.btn.dark{background:var(--green);color:#fff}
.btn.line{border:1px solid #d6dbd7;color:#33413c;background:#fff}
.btn.redb{background:var(--red);color:#fff}
.btn.auto{width:auto;padding:0 20px;display:inline-flex;min-height:44px}
.btn.sm{min-height:40px;padding:0 16px;font-size:11.5px}
.link{font-size:12px;color:#33413c;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#9aa49f;padding:10px 6px}
.note{font-size:10px;line-height:1.5;color:#727a77}
.avbig{width:178px;height:178px;border-radius:50%;margin:0 auto;position:relative;display:grid;place-items:center}
.avbig .pic{width:132px;height:132px;border-radius:50%;overflow:hidden;position:relative;z-index:2;border:4px solid #fff;box-shadow:0 6px 18px rgba(23,60,55,.18)}
.avbig::before,.avbig::after{content:"";position:absolute;inset:0;border-radius:50%;background:#e4eee2;border:1px solid #d5e1d3}
.avbig::after{inset:16px;background:#f1f5ef}
.pulse::before{animation:pulse 2s ease-out infinite}
.pulse::after{animation:pulse 2s ease-out .6s infinite}
@keyframes pulse{0%{transform:scale(.75);opacity:1}100%{transform:scale(1.08);opacity:0}}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3aa27a;margin-right:4px}
.dot.off{background:#b9bfbc}
.statebox{border-radius:12px;padding:12px 14px;font-size:12px;line-height:1.5;text-align:left}
.statebox.warn{background:#f6ece8;color:#7a3e33;border:1px solid #edd7cf}
.statebox.ok{background:var(--mint);color:#2f5a45;border:1px solid #d3e3d0}
.favcard{display:flex;gap:13px;padding:11px 12px;border:1px solid #e7ebe8;border-radius:12px;margin-bottom:12px;position:relative}
.favcard .th{width:84px;height:84px;border-radius:9px;overflow:hidden;flex:none}
.favcard .th svg{width:100%;height:100%}
.favcard>div:nth-child(2){min-width:0}
.favcard b{display:block;font-size:12.5px;color:#22302b;margin-top:4px;padding-right:32px}
.favcard small{display:block;font-size:10px;color:#6f7975;margin:5px 0 7px}
.favcard .pr{font-weight:700;font-size:13.5px;color:var(--ink);margin-bottom:6px}
.favcard .rm{position:absolute;top:4px;right:4px;width:40px;height:40px;display:grid;place-items:center}
.favcard .rm svg{width:15px;height:15px;fill:var(--red)}
.sbtn{height:32px;padding:0 13px;border-radius:16px;border:1px solid #d6dbd7;font-size:11px;color:#33413c;background:#fff;flex:none}
.plan{border-radius:6px;overflow:hidden}
.plan svg{width:100%;height:auto}
.notice{background:#f2ebd9;border:1px solid #e8dcc1;border-radius:9px;padding:12px 13px;font-size:11.5px;color:#4b4a3f}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;font-size:11.5px;color:#55605b}
.facts b{color:var(--ink);font-weight:700}
.amen{display:flex;flex-wrap:wrap;gap:6px}
.amen span{font-size:11px;padding:6px 10px;border-radius:14px;border:1px solid var(--line);color:#44514c}
.rlist label{display:flex;align-items:center;gap:10px;font-size:12px;color:#36433e;min-height:48px;border-bottom:1px solid var(--line);cursor:pointer}
.rlist label small{margin-left:auto;color:var(--muted);font-size:10.5px;white-space:nowrap}
.rlist input,.chk{width:18px;height:18px;flex:none;accent-color:var(--green)}
.fld{font-size:10.5px;color:#58625e;margin:16px 0 6px}
/* 16px keeps iOS Safari from zooming the page when a field is focused */
.inp{width:100%;height:44px;border:1px solid #dfe3df;background:#f6f7f5;border-radius:10px;padding:0 12px;font-size:16px;color:#2a3632;font-family:var(--sans)}
textarea.inp{height:96px;padding:10px 12px;line-height:1.4;resize:none}
.vrow{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
.vrow .when{width:48px;text-align:center;border-radius:9px;background:var(--mint);padding:6px 0;color:var(--ink);flex:none}
.vrow .when b{display:block;font-size:16px}
.vrow .when small{font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.vrow .info{flex:1;min-width:0;font-size:11.5px;color:var(--muted);line-height:1.45}
.vrow .info b{color:var(--ink);font-size:12.5px;display:block}

/* ===== Call ===== */
.call{background:#0f2f2e}
.call .media-agent{height:calc(var(--seam) + 47px);clip-path:var(--clip-call)}
.call .media-agent .agentsvg{transform:scale(1.12);transform-origin:50% 30%}
.callchip{left:10px;top:calc(10px + var(--sat));height:20px;padding:0 8px;border-radius:10px;background:rgba(255,255,255,.8);font-size:9px;letter-spacing:.06em;color:#3b4542;display:flex;align-items:center;gap:5px}
.callchip i{width:6px;height:6px;border-radius:50%;background:#e0524c;animation:rec 1.4s infinite}
@keyframes rec{50%{opacity:.25}}
.call .namechip{left:14px;top:calc(36px + var(--sat))}
.cbtns{left:14px;top:calc(84px + var(--sat));display:flex;gap:6px;flex-wrap:wrap;right:14px}
.cbtns .chip{height:32px;background:#fff;font-size:11px;padding:0 12px}
.inset{left:calc(100% - 103px);top:calc(var(--seam) - 90px);width:89px;height:114px;border-radius:10px;border:2px solid #fff;overflow:hidden;background:#3b4a45;z-index:6;touch-action:none;cursor:grab;transition:left .25s,top .25s}
.inset.drag{transition:none;cursor:grabbing}
.inset .agentsvg{width:100%;height:100%}
.inset span{position:absolute;left:0;right:0;bottom:0;height:19px;background:#1f4a3e;color:#fff;font-size:9px;display:grid;place-items:center}
.inset .camoff{position:absolute;inset:0 0 19px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#2f3d39;color:#cfd8d4;font-size:10px;text-align:center}
.inset .camoff svg{width:20px;height:20px;stroke:#cfd8d4;fill:none;stroke-width:1.3}
.inset.off .camoff{display:flex}
.inset .muted{position:absolute;top:5px;right:5px;width:16px;height:16px;border-radius:50%;background:var(--red);display:none;place-items:center;z-index:2}
.inset .muted svg{width:9px;height:9px;stroke:#fff;fill:none;stroke-width:2}
.inset.mic-off .muted{display:grid}
.prerec{left:12px;top:calc(var(--seam) + 12px);font-size:9px;letter-spacing:.12em;color:rgba(255,255,255,.9);background:rgba(23,40,35,.32);padding:2px 6px;border-radius:3px;text-transform:uppercase}
.call .ptitle{bottom:calc(152px + var(--sab))}
.call .psub{bottom:calc(135px + var(--sab))}
.call .price{bottom:calc(139px + var(--sab))}
.call .prow{bottom:calc(88px + var(--sab))}
.callbar{left:8px;right:8px;bottom:calc(28px + var(--sab));display:flex;justify-content:center;gap:8px}
.callbar button{height:40px;padding:0 13px;border-radius:20px;background:rgba(240,242,238,.94);color:#1f2b28;font-size:11px;display:flex;align-items:center;gap:5px;white-space:nowrap}
.callbar button svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none}
.callbar button.end{background:var(--red);color:#fff}
.callbar button.off{background:rgba(255,255,255,.22);color:#fff}
.phone:not(.land) .call .cbtns .por{display:none}
/* narrow phones: tighter call bar */
@media (max-width:374px){
  .callbar{gap:6px}
  .callbar button{padding:0 11px}
}

/* Landscape call: agent on the left half, shared property on the right half */
.phone.land .call .media-agent{width:50%;height:100%;clip-path:none;border-right:3px solid #fff}
.phone.land .call .media-agent .agentsvg{transform:none}
.phone.land .call .wave{display:none}
.phone.land .call .prop{top:0;left:50%}
.phone.land .call .namechip{left:calc(var(--sal,0px) + 14px)}
.phone.land .call .callchip{left:calc(var(--sal,0px) + 10px)}
.phone.land .call .cbtns{left:calc(var(--sal,0px) + 14px);right:calc(50% + 14px)}
.phone.land .call .cbtns .rot{display:none}
.phone.land .call .inset{left:auto!important;top:auto!important;right:calc(50% + 14px);bottom:calc(14px + var(--sab));width:76px;height:96px;cursor:default}
.phone.land .call .prerec{top:auto;bottom:calc(14px + var(--sab));left:calc(var(--sal,0px) + 12px)}
.phone.land .call .ptitle{left:calc(50% + 18px);right:calc(var(--sar,0px) + 110px);bottom:calc(120px + var(--sab))}
.phone.land .call .psub{left:calc(50% + 18px);right:calc(var(--sar,0px) + 16px);bottom:calc(103px + var(--sab))}
.phone.land .call .price{right:calc(var(--sar,0px) + 16px);bottom:calc(124px + var(--sab))}
.phone.land .call .prow{left:calc(50% + 14px);right:calc(var(--sar,0px) + 12px);bottom:calc(60px + var(--sab))}
.phone.land .call .callbar{left:50%;right:var(--sar,0px);bottom:calc(12px + var(--sab));gap:6px;padding:0 8px}
.phone.land .call .callbar button{padding:0 10px;font-size:10.5px}
.phone.land .call .fbar{top:14px}.phone.land .call .flab{top:24px}
.callbanner{position:absolute;left:12px;right:12px;bottom:calc(14px + var(--sab));z-index:35;height:48px;border-radius:24px;background:var(--green);color:#fff;display:none;align-items:center;gap:10px;padding:0 6px 0 16px;font-size:12px;box-shadow:0 10px 24px -8px rgba(10,30,25,.5)}
.callbanner.show{display:flex}
.callbanner i{width:7px;height:7px;border-radius:50%;background:#7fe0b0;animation:rec 1.4s infinite;flex:none}
.callbanner b{font-weight:400;opacity:.8;margin-left:2px}
.callbanner button{margin-left:auto;height:36px;padding:0 16px;border-radius:18px;background:#fff;color:var(--green);font-size:11.5px}

/* ===== Sheets, drawer, toast ===== */
.scrim{position:absolute;inset:0;z-index:50;background:rgba(12,24,20,.38);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}
.scrim.on{opacity:1;visibility:visible;transition:opacity .3s}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:51;background:#fff;border-radius:22px 22px 0 0;padding:10px 20px calc(20px + var(--sab));max-height:88%;overflow-y:auto;overscroll-behavior:contain;transform:translateY(105%);transition:transform .38s cubic-bezier(.3,.8,.3,1);scrollbar-width:none}
.sheet::-webkit-scrollbar{display:none}
.sheet.on{transform:none}
.grab{width:38px;height:4px;border-radius:2px;background:#d8ddd9;margin:0 auto 14px}
.sheet h4{font-weight:700;letter-spacing:-.01em;font-size:22px;color:var(--ink);margin-bottom:4px}
.sheet .sub{font-size:11.5px;color:var(--muted);margin-bottom:14px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{min-height:40px;padding:0 15px;border-radius:20px;border:1px solid #d6dbd7;font-size:12px;color:#33413c;background:#fff}
.opt[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff}
.opt:disabled{text-decoration:line-through}
.seg{display:flex;background:#f0f3f0;border-radius:12px;padding:3px;margin-bottom:14px}
.seg button{flex:1;height:40px;border-radius:10px;font-size:12px;color:#55605b}
.seg button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.days{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px 2px}
.days::-webkit-scrollbar{display:none}
.day{flex:none;width:56px;height:66px;border-radius:12px;border:1px solid #d6dbd7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;color:var(--muted)}
.day b{font-size:16px;color:var(--ink)}
.day[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#cfe3da}
.day[aria-pressed=true] b{color:#fff}
.sheet .sec{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.ctable{width:100%;border-collapse:collapse;font-size:11.5px;color:#3c4945}
.ctable th,.ctable td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ctable td{min-width:96px}
.ctable th{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:400;white-space:nowrap}
.ctable td.best{color:var(--green-2);font-weight:700}
.rev{padding:12px 0;border-bottom:1px solid var(--line);font-size:12px;line-height:1.5}
.rev b{color:var(--ink)}
.stars{color:var(--gold);letter-spacing:1px;font-size:12px}
.bars div{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--muted);margin-bottom:4px}
.bars span{flex:1;height:5px;border-radius:3px;background:#eef1ee;overflow:hidden}
.bars span i{display:block;height:100%;background:var(--gold)}
.drawer{position:absolute;left:0;top:0;bottom:0;width:min(82%,340px);z-index:51;background:#fff;transform:translateX(-102%);transition:transform .38s cubic-bezier(.3,.8,.3,1);padding:calc(24px + var(--sat)) 20px calc(20px + var(--sab));display:flex;flex-direction:column;overflow-y:auto}
.drawer.on{transform:none}
.prof{display:flex;gap:12px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line)}
.prof .pa{width:46px;height:46px;border-radius:50%;background:var(--mint);display:grid;place-items:center;font-weight:700;font-size:18px;color:var(--ink)}
.prof b{display:block;font-size:13.5px;color:var(--ink)}
.prof small{font-size:11px;color:var(--muted)}
.mitem{display:flex;align-items:center;gap:12px;min-height:50px;font-size:13.5px;color:#2b3a35;border-bottom:1px solid #f1f3f1;width:100%;text-align:left;flex:none}
.mitem svg{width:18px;height:18px;stroke:#4c5a55;fill:none;stroke-width:1.5}
.mitem em{margin-left:auto;font-style:normal;font-size:11px;color:var(--muted)}
.drawer .note{padding-top:16px}
.toast{position:absolute;left:50%;bottom:calc(70px + var(--sab));transform:translate(-50%,20px);z-index:60;background:rgba(23,40,35,.95);color:#fff;font-size:12px;padding:10px 8px 10px 15px;border-radius:18px;max-width:calc(100% - 24px);width:max-content;display:flex;align-items:center;gap:12px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility 0s linear .25s;box-shadow:0 10px 24px -8px rgba(0,0,0,.4)}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s,transform .25s}
.toast button{color:#9fe3c2;font-size:12px;font-weight:700;padding:6px 8px;flex:none}
.viewer{position:absolute;inset:0;z-index:55;background:#0b1512;display:none}
.viewer.on{display:block}
.viewer .gal{height:100%}
.viewer .pill-w{left:16px}
.viewer .gal .phwrap img{object-fit:contain}

/* ===== Guided tour ===== */
.ring-box{position:fixed;z-index:90;pointer-events:none;border:2px solid var(--amber);border-radius:6px;box-shadow:0 0 12px rgba(230,194,122,.5);opacity:0;transition:opacity .2s}
.ring-box.on{opacity:1}
.tourbtn{display:grid;place-items:center;position:absolute;right:6px;top:max(calc(var(--seam) - 80px),calc(var(--sat) + 250px));z-index:40;width:44px;height:44px;border-radius:50%;background:rgba(23,60,55,.86);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.tourbtn svg{width:15px;height:15px;fill:#fff}
.phone.land .tourbtn,.screen:not([data-view=feed]) .tourbtn{display:none}
.tour{position:absolute;left:10px;right:10px;bottom:calc(10px + var(--sab));z-index:70;border-radius:18px;padding:14px 16px 12px;background:rgba(250,249,245,.97);box-shadow:0 18px 40px -12px rgba(10,30,25,.45);transform:translateY(calc(100% + 30px));visibility:hidden;transition:transform .4s cubic-bezier(.3,.8,.3,1),visibility 0s linear .4s}
.tour.open{transform:none;visibility:visible;transition:transform .4s cubic-bezier(.3,.8,.3,1)}
.phone.land .tour{left:auto;width:min(360px,calc(100% - 20px))}
.tour .tl{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tour h4{font-size:16px;color:var(--ink);margin:6px 0 4px}
.tour p{font-size:12px;line-height:1.5}
.prog{background:var(--track);border-radius:2px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--green-2);transition:width .6s ease}
.tour .prog{margin-top:10px;height:2.5px}
.tour .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.tour .row button{height:36px;padding:0 14px;border-radius:18px;border:1px solid #d6dbd7;font-size:11.5px;color:var(--ink);background:#fff}
.tour .row button.pri{background:var(--green);color:#fff;border-color:var(--green)}
.tour .row .x{margin-left:auto;border:0;background:none;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01s!important;animation-duration:.01s!important;animation-iteration-count:1!important}}

/* ===== Photos ===== */
.phwrap{position:relative;width:100%;height:100%;overflow:hidden;background:linear-gradient(135deg,#d5ddd8,#a9b9b1)}
.phwrap img{width:100%;height:100%;object-fit:cover;display:block}
.phwrap.noimg::after{content:attr(data-ini);position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;text-align:center;padding:8px}
.favcard .th .phwrap.noimg::after{font-size:0}
.agentimg img.kb{animation:kb 16s ease-in-out infinite alternate;transform-origin:50% 30%}
.inset img.kb{animation:kb 12s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,1%)}}
.paused .kb,.still .kb{animation-play-state:paused}
.avimg{font-size:0;color:transparent}
.fbx{position:absolute;inset:0}
.fbx>svg,.fbx>video,.fbx>img{width:100%;height:100%;object-fit:cover;display:block}
.agentimg .fbx video{transform-origin:50% 30%}

/* ===== Home-tour film ===== */
.film{position:absolute;inset:0;z-index:0}
.fslide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.fslide.on{opacity:1}
.fslide img{transform-origin:50% 50%}
.fslide .phwrap>.fbx{transform-origin:50% 50%}
.fslide.on.k0 .phwrap>*{animation:kbA 7s ease-out forwards}
.fslide.on.k1 .phwrap>*{animation:kbB 7s ease-out forwards}
.fslide.on.k2 .phwrap>*{animation:kbC 7s ease-out forwards}
@keyframes kbA{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-2%,1%)}}
@keyframes kbB{from{transform:scale(1.14) translate(2%,0)}to{transform:scale(1.03)}}
@keyframes kbC{from{transform:scale(1.04) translate(0,2%)}to{transform:scale(1.13) translate(1%,-1%)}}
.paused .fslide .phwrap>*,.still .fslide .phwrap>*{animation-play-state:paused}
.filmvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fbar{position:absolute;left:12px;right:12px;top:62px;display:flex;gap:4px;z-index:2}
.fbar i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.35)}
.fbar i.on{background:#fff}
.flab{position:absolute;left:12px;top:72px;z-index:2;font-size:10px;letter-spacing:.06em;color:#fff;background:rgba(23,60,55,.55);padding:3px 8px;border-radius:9px}
.call .fbar{top:56px}.call .flab{top:66px}

.voicebox{display:none}.voicebox.on{display:block;position:fixed;right:16px;bottom:calc(16px + var(--sab,0px));z-index:95}

.vlayer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s;z-index:1}
.vlayer.on{opacity:1}
.prop .vlayer{z-index:3}
.paused .vlayer{filter:none}

/* ===== Live Zoom call: the agent's video (with the unit as virtual background) covers the placeholder ===== */
.zoomv{position:absolute;inset:0;z-index:3;background:#0f2f2e;opacity:0;transition:opacity .5s}
.zoomv.on{opacity:1}
.zoomv video-player-container,.zoomv video-player{display:block;width:100%;height:100%}
/* the SDK renders a <video> with object-fit:contain; fill the area like a background video instead of letterboxing */
.zoomv video-player video{object-fit:cover!important}

/* ===== Desktop website (html.desk, ≥1024px): top bar, sidebar, feed with action rail, property details panel ===== */
html.desk body{background:#f5f3ed;overflow:hidden}
html.desk .topbar{display:flex;position:fixed;top:0;left:0;right:0;height:60px;z-index:30;background:#fff;border-bottom:1px solid #e6e1d6;align-items:center;padding:0 20px;gap:20px}
.topbar .logo{width:92px;height:28px}
.search{flex:1;max-width:520px;margin:0 auto;position:relative}
.search input{width:100%;height:40px;border-radius:20px;border:1px solid #e3ded2;background:#f5f3ed;padding:0 16px 0 40px;font:inherit;font-size:14px;color:#1f2b28}
.search svg{position:absolute;left:14px;top:12px;width:16px;height:16px;stroke:#7c8580;fill:none;stroke-width:1.8}
.qres{position:absolute;top:46px;left:0;right:0;background:#fff;border-radius:14px;box-shadow:0 16px 40px -12px rgba(0,0,0,.25);padding:6px;display:none;max-height:420px;overflow:auto}
.qres.on{display:block}
.qres button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:10px;text-align:left;font-size:13px;color:#1f2b28}
.qres button:hover,.qres button:focus-visible{background:#efece4}
.qres .qi{width:36px;height:36px;border-radius:8px;overflow:hidden;flex:none}
.qres .qi.r{border-radius:50%}
.qres small{display:block;color:var(--muted);font-size:11px}
.qres p{font-size:12px;color:var(--muted);padding:10px}
.tb-act{display:flex;gap:6px;align-items:center}
.tb-act .ib{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;position:relative}
.tb-act .ib:hover{background:#efece4}
.tb-act .ib svg{width:20px;height:20px;stroke:#2a3833;fill:none;stroke-width:1.6}
.tb-act .badge{top:4px;left:24px}
.tb-act .sign{height:36px;padding:0 16px;border-radius:18px;background:var(--green);color:#fff;font-size:13px;font-weight:600;margin-left:6px}
html.desk .detail{display:block;position:fixed;top:60px;right:0;bottom:0;width:380px;overflow-y:auto;background:#fff;border-left:1px solid #e6e1d6;z-index:5;scrollbar-width:thin}
.detail .dg{height:250px;position:relative;background:#ebe7dd}
.detail .thumbs{display:flex;gap:6px;padding:8px 18px 0}
.detail .thumbs button{width:64px;height:46px;border-radius:8px;overflow:hidden;opacity:.6;border:2px solid transparent}
.detail .thumbs button.on{opacity:1;border-color:var(--green)}
.detail .dc{padding:16px 18px 24px}
.detail h2{font-size:21px;color:var(--ink);line-height:1.2}
.detail .pricebig{font-size:22px;font-weight:700}
.detail .agcard{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;margin-top:16px}
.detail .agcard .sa{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none}
.detail .agcard b{font-size:14px;color:var(--ink);display:block}
.detail .agcard small{font-size:11.5px;color:var(--muted)}
.detail .more{margin-top:16px}
.detail .more h4{font-size:13px;color:var(--ink);margin-bottom:8px}
.detail .mi{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:6px;border-radius:10px}
.detail .mi:hover{background:#efece4}
.detail .mi .t{width:60px;height:44px;border-radius:8px;overflow:hidden;flex:none}
.detail .mi b{font-size:12.5px;color:var(--ink);display:block}
.detail .mi small{font-size:11px;color:var(--muted)}
.detail .mi.on{background:#e4eee2}
html.desk .stage{position:fixed;top:60px;left:248px;right:380px;bottom:0;width:auto;height:auto;display:block}
html.desk.focus .side,html.desk.focus .detail{display:none}
html.desk.focus .stage{left:0;right:0}
html.desk .phone,html.desk .phone.land{position:absolute;inset:0;max-width:none;width:auto;height:auto;transform:none;border:0;border-radius:0;box-shadow:none;background:#f5f3ed;transition:none}
html.desk .screen{border-radius:0;background:#f5f3ed}
html.desk .view{background:#f5f3ed}
html.desk .feed{scroll-snap-type:y mandatory}
html.desk .hdr,html.desk .minihdr,html.desk .burger{display:none}
html.desk .post{display:flex;justify-content:center;align-items:center;gap:18px;height:calc(var(--H) + 32px);scroll-snap-align:start}
html.desk .card{width:390px;flex:none;border-radius:18px;box-shadow:0 18px 40px -18px rgba(20,40,32,.35);scroll-snap-align:none}
html.desk .rail{display:flex;flex-direction:column;gap:16px;align-self:flex-end;margin-bottom:30px}
.rail button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:600;color:#2a3833}
.rail .rc{width:48px;height:48px;border-radius:50%;background:#ebe7dd;display:grid;place-items:center;transition:background .15s}
.rail button:hover .rc{background:#e2ddd0}
.rail .rc svg{width:22px;height:22px;stroke:#1f2b28;fill:none;stroke-width:1.7}
.rail .on .rc svg{fill:var(--red);stroke:var(--red)}
.rail .ra{width:48px;height:48px;border-radius:50%;overflow:hidden;border:2px solid #fff;box-shadow:0 0 0 2px var(--green-2)}
html.desk .empty{height:calc(var(--H));}
html.desk .body .pad,html.desk .body>.pad{max-width:620px;margin:0 auto}
html.desk .bar{background:#fff}
html.desk .body{background:#fff}
html.desk .full .gal{height:58%}
html.desk .sheetpanel{top:calc(58% - 22px);padding-left:max(24px,calc(50% - 310px));padding-right:max(24px,calc(50% - 310px))}
/* desktop call: split screen */
html.desk .call .media-agent{width:52%;height:100%;clip-path:none}
html.desk .call .media-agent .agentimg{transform:none}
html.desk .call .wave{display:none}
html.desk .call .prop{left:52%;top:0}
html.desk .call .inset{left:auto!important;top:auto!important;right:calc(48% + 18px);bottom:84px;width:150px;height:190px;cursor:default}
html.desk .call .prerec{top:auto;bottom:24px}
html.desk .call .ptitle{left:calc(52% + 24px);right:150px;bottom:150px!important;font-size:20px}
html.desk .call .psub{left:calc(52% + 24px);bottom:128px!important;font-size:13px}
html.desk .call .price{right:24px;bottom:136px!important;font-size:22px}
html.desk .call .prow{left:calc(52% + 18px);right:18px;bottom:80px!important}
html.desk .call .callbar{bottom:22px!important;left:52%}
html.desk .call .cbtns .rot{display:inline-flex}
html.desk .call .cbtns .por{display:none}
html.desk.focus .call .cbtns .rot{display:none}
html.desk.focus .call .cbtns .por{display:inline-flex}
html.desk .callbanner{left:50%;right:auto;width:420px;transform:translateX(-50%)}
html.desk .scrim,html.desk .toast,html.desk .viewer{position:fixed}
html.desk .scrim{z-index:80}
html.desk .sheet{position:fixed;z-index:81;left:50%;top:50%;bottom:auto;right:auto;width:480px;max-height:84vh;border-radius:18px;padding:22px 26px 24px;transform:translate(-50%,-46%) scale(.98);opacity:0;visibility:hidden;transition:transform .25s,opacity .25s,visibility 0s linear .25s}
html.desk .sheet.on{transform:translate(-50%,-50%);opacity:1;visibility:visible;transition:transform .25s,opacity .25s}
html.desk .sheet .grab{display:none}
html.desk .toast{z-index:90;bottom:28px}
html.desk .viewer{z-index:85}
html.desk .tourbtn{display:none}
html.desk .tour{display:block;position:fixed;left:16px;bottom:16px;width:300px;z-index:60;border-radius:16px;padding:14px 16px 12px;background:#fff;box-shadow:0 18px 40px -12px rgba(10,30,25,.35);transform:translateY(calc(100% + 30px));visibility:hidden;transition:transform .35s,visibility 0s linear .35s}
html.desk .tour.open{transform:none;visibility:visible;transition:transform .35s}
html.desk .drawer{display:none}

.cursor{display:none!important}
.thumbs .phwrap.noimg::after,.mi .t .phwrap.noimg::after,.qi .phwrap.noimg::after,.favcard .th .phwrap.noimg::after{font-size:0}

@media (max-width:1279px){
  html.desk .stage{left:76px;right:340px}
  html.desk .detail{width:340px}
  html.desk .topbar .search{max-width:420px}
}
@media (max-width:1079px){
  html.desk .detail{display:none}
  html.desk .stage{right:0}
}
@media (max-height:760px){
  html.desk .rail{gap:10px}
  html.desk .rail .rc,html.desk .rail .ra{width:42px;height:42px}
}
html.desk .call .fbar{top:16px}html.desk .call .flab{top:26px;left:12px}
html.desk .call .namechip{max-width:calc(52% - 28px)}
html.desk .call .prerec{left:12px}
.detail .dg .phwrap img{animation:none}
.thumbs .phwrap.noimg::after,.mi .t .phwrap.noimg::after,.qi .phwrap.noimg::after{font-size:0}
html.desk .demolbl{max-width:170px}

/* ===== /mobile on a computer: the mobile app inside a phone frame ===== */
html.framed body{background:radial-gradient(120% 90% at 50% 50%,#fbfaf6 0%,#f5f3ed 55%,#ece9e1 100%)}
html.framed .stage{display:block}
html.framed .phone,html.framed .phone.land{position:absolute;left:50%;top:50%;width:406px;max-width:none;height:796px;transform:translate(-50%,-50%) scale(var(--s));border:8px solid #1c2a25;border-radius:46px;
  box-shadow:0 30px 60px -20px rgba(30,45,38,.35),0 10px 25px -10px rgba(30,45,38,.25);transition:width .7s cubic-bezier(.6,0,.3,1),height .7s cubic-bezier(.6,0,.3,1)}
html.framed .phone.land{width:796px;height:406px}
html.framed .screen{border-radius:38px}

/* ===== Web | Mobile display switch ===== */
.modesw{display:none;padding:3px;border-radius:20px;background:#efece4;gap:2px}
.modesw button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:16px;font-size:12.5px;font-weight:600;color:#56645e;transition:background .15s,color .15s}
.modesw button:hover{color:var(--ink)}
.modesw button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.modesw svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
html.desk .topbar .modesw{display:inline-flex;margin:0 4px}
/* outside the app (phone frame, or the centred mobile column) when there's room beside it */
@media (min-width:1000px){html:not(.desk) .modesw-out{display:inline-flex;position:fixed;top:20px;right:24px;z-index:5;background:#e9e5db;box-shadow:0 4px 14px rgba(30,45,38,.14)}}
html:not(.framed):not(.desk) .modesw-out{background:#1c2a25}
html:not(.framed):not(.desk) .modesw-out button{color:#b9c4bf}
html:not(.framed):not(.desk) .modesw-out button[aria-pressed=true]{background:#fff;color:var(--ink)}

/* ===== Call banner: keep page content and sticky actions clear of it ===== */
.has-banner .body{padding-bottom:calc(130px + var(--sab))}
.has-banner .sheetpanel{padding-bottom:calc(78px + var(--sab))}

/* ===== Website polish ===== */
html.desk .card{width:var(--cardW,390px)}
html.desk .post{gap:22px}
/* the details panel belongs to the feed and the call; other pages (property, favorites, viewings…) use the full width */
html.desk:not([data-view=feed]):not([data-view=call]) .detail{display:none}
html.desk:not([data-view=feed]):not([data-view=call]) .stage{right:0}
html.desk .call .inset{width:128px;height:164px;bottom:96px}
html.desk .detail .dc h2{font-size:22px}
html.desk .topbar .search input:focus{outline:none;border-color:var(--green-2);background:#fff;box-shadow:0 0 0 3px rgba(46,94,75,.12)}

/* ===== Website sidebar ===== */
html.desk .side{display:flex;flex-direction:column;position:fixed;top:60px;left:0;bottom:0;width:248px;padding:14px 12px 16px;overflow-y:auto;border-right:1px solid #e6e1d6;background:#fbfaf7;z-index:5;scrollbar-width:thin}
.side .snav{display:flex;flex-direction:column;gap:2px}
.side .nitem{position:relative;display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border-radius:12px;font-size:14.5px;font-weight:600;color:#33433d;width:100%;text-align:left;transition:background .15s,color .15s}
.side .nitem:hover{background:#f0ede5;color:var(--ink)}
.side .nitem.on{background:var(--green);color:#fff;box-shadow:0 6px 14px -8px rgba(23,60,55,.7)}
.side .nitem svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none}
.side .cnt{margin-left:auto;min-width:22px;height:20px;padding:0 7px;border-radius:10px;background:#ebe7dd;color:#4d5b55;font-style:normal;font-size:11.5px;font-weight:700;line-height:20px;text-align:center}
.side .nitem.on .cnt{background:rgba(255,255,255,.2);color:#fff}

.side .livecall{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:10px 10px 10px 12px;border-radius:14px;background:#fbeeed;border:1px solid #f0d5d2;text-align:left;width:100%;transition:background .15s}
.side .livecall:hover{background:#f8e5e3}
.side .livecall .lc-av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--red)}
.side .livecall .lbl{min-width:0}
.side .livecall b{display:block;font-size:13px;color:#5c2622;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .livecall small{display:flex;align-items:center;gap:5px;font-size:11.5px;color:#9a5650;white-space:nowrap}
.side .livecall small i{width:7px;height:7px;border-radius:50%;background:var(--red);animation:rec 1.4s infinite}
.side .livecall .lc-go{margin-left:auto;height:28px;padding:0 11px;border-radius:14px;background:var(--red);color:#fff;font-size:11.5px;font-weight:600;line-height:28px;flex:none}

.side .shead{display:flex;align-items:center;justify-content:space-between;margin:18px 12px 6px}
.side h5{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8b938f;font-weight:700}
.side .shead span{display:flex;align-items:center;gap:5px;font-size:11.5px;color:#3a8a68}
.side .shead span::before{content:"";width:6px;height:6px;border-radius:50%;background:#3aa27a}
.side .shead .clr{font-size:12px;color:var(--green-2);text-decoration:underline;text-underline-offset:2px}

.side .aglist{display:flex;flex-direction:column;gap:2px}
.side .ag{position:relative;display:flex;align-items:center;gap:11px;min-height:48px;padding:6px 10px;border-radius:12px;width:100%;text-align:left;transition:background .15s}
.side .ag:hover{background:#f0ede5}
.side .ag.on{background:#e4eee2}
.side .ag.on::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--green-2)}
.side .ag .sa{position:relative;width:38px;height:38px;flex:none}
.side .ag .sa .phwrap{border-radius:50%}
.side .ag.off .sa .phwrap{filter:grayscale(.55);opacity:.85}
.side .ag .st{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#3aa27a;border:2px solid #fbfaf7}
.side .ag.on .st{border-color:#e4eee2}
.side .ag.off .st{background:#b9bfbc}
.side .ag .lbl{min-width:0;flex:1}
.side .ag b{display:block;font-size:13.5px;font-weight:600;color:#1f2b28;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .ag small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .livepill{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--red);padding:2px 7px;border-radius:8px;flex:none}

.side .filters{display:flex;flex-direction:column;gap:6px}
.side .frow{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px 8px 12px;border-radius:12px;border:1px solid #e6e1d6;background:#fff;text-align:left;transition:border-color .15s,background .15s}
.side .frow:hover{border-color:#cfc8b8;background:#fdfcfa}
.side .frow>svg:first-child{width:18px;height:18px;stroke:#55635d;fill:none;stroke-width:1.5;flex:none}
.side .frow .lbl{flex:1;min-width:0}
.side .frow small{display:block;font-size:10.5px;color:var(--muted)}
.side .frow b{display:block;font-size:13px;font-weight:600;color:#2a3833;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .frow .chev{width:12px;height:12px;stroke:#9aa29e;fill:none;stroke-width:1.6;flex:none}
.side .frow.act{border-color:var(--green-2);background:#f1f6f0}
.side .frow.act>svg:first-child{stroke:var(--green-2)}
.side .frow.act b{color:var(--green)}

.side .tourcard{display:flex;align-items:center;gap:12px;margin-top:16px;padding:11px 12px;border-radius:14px;background:linear-gradient(135deg,#173c37,#2e5e4b);color:#fff;text-align:left;width:100%;box-shadow:0 10px 22px -14px rgba(23,60,55,.8);transition:filter .15s}
.side .tourcard:hover{filter:brightness(1.1)}
.side .tourcard .tc-ic{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.side .tourcard .tc-ic svg{width:14px;height:14px;fill:#fff;margin-left:2px}
.side .tourcard b{display:block;font-size:13.5px}
.side .tourcard small{display:block;font-size:11.5px;opacity:.8;margin-top:1px}
.side .legal{margin:auto 4px 0;padding-top:18px;font-size:10.5px;color:#9aa29e;line-height:1.5}

/* 1024–1279px: icon rail */
@media (max-width:1279px){
  html.desk .side{width:76px;padding:14px 10px;align-items:center}
  html.desk .side .lbl,html.desk .side .shead,html.desk .side .filters,html.desk .side .legal,html.desk .side .livepill,html.desk .side .livecall .lc-go{display:none}
  html.desk .side .snav{align-items:center}
  html.desk .side .nitem{width:48px;height:44px;padding:0;justify-content:center}
  html.desk .side .cnt{position:absolute;top:2px;right:1px;min-width:17px;height:17px;line-height:17px;padding:0 4px;font-size:10px;background:var(--green);color:#fff}
  html.desk .side .nitem.on .cnt{background:#fff;color:var(--green)}
  html.desk .side .livecall{width:48px;justify-content:center;padding:7px 0;margin-top:10px}
  html.desk .side .aglist{margin-top:14px;padding-top:12px;border-top:1px solid #ebe7dd;align-items:center}
  html.desk .side .ag{width:52px;justify-content:center;padding:6px 0}
  html.desk .side .ag.on::before{left:-10px}
  html.desk .side .tourcard{width:48px;height:48px;padding:0;justify-content:center;border-radius:50%;margin-top:16px}
}

/* ===== AI agent call: live captions and a "speaking" glow ===== */
.aicap{left:12px;right:112px;bottom:calc(100% - var(--seam) + 40px);max-height:66px;overflow:hidden;padding:8px 11px;border-radius:12px;background:rgba(12,28,24,.74);color:#fff;font-size:13px;line-height:1.4;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.aicap:empty{display:none}
.aicap b{color:#9fe3c2;font-weight:700}
.aicap.client b{color:#f2d48a}
#v-call.speaking .namechip{box-shadow:0 0 0 2px #7fe0b0,0 0 18px rgba(127,224,176,.65)}
#v-call.speaking .callchip i{background:#3aa27a}
.phone.land .call .aicap{right:calc(50% + 100px);bottom:calc(46px + var(--sab));left:calc(var(--sal,0px) + 12px)}
html.desk .call .aicap{right:calc(48% + 170px);bottom:56px;max-height:88px;-webkit-line-clamp:4;font-size:14px}

/* a carousel pinned to one photo by the AI agent: label highlighted, progress bar hidden */
.film.pinned .fbar{opacity:0}
.film.pinned .flab{background:var(--green-2)}

/* AI agent: still portrait, face kept in frame */
.agentstill img{object-position:50% 20%;animation:none!important;transform:none!important}

/* ===== Zoom-style meeting UI (AI agent calls) ===== */
.zbar,.zreact,.zshare{display:none}
.call.zoom .callbar{display:none}
.call.zoom .zbar{display:flex;left:0;right:0;bottom:0;padding:8px 6px calc(8px + var(--sab));justify-content:space-around;gap:2px;background:linear-gradient(180deg,rgba(8,22,20,0),rgba(8,22,20,.85) 40%);z-index:8}
.zbar button{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:52px;padding:6px 2px;border-radius:12px;color:#e8efec;font-size:10.5px;position:relative}
.zbar button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6}
.zbar button:active,.zbar button:hover{background:rgba(255,255,255,.1)}
.zbar button.off{color:#ff8f88}
.zbar button[aria-pressed=false]#zCC{opacity:.55}
.zbar .leave{color:#fff}.zbar .leave svg{background:var(--red);border-radius:50%;padding:4px;width:30px;height:30px;stroke:#fff;margin:-4px 0}
.zdot{position:absolute;top:2px;right:10px;min-width:16px;height:16px;border-radius:8px;background:var(--red);color:#fff;font-style:normal;font-size:9.5px;line-height:16px;text-align:center;padding:0 4px}
.call.zoom .prow{bottom:calc(84px + var(--sab))}.call.zoom .ptitle{bottom:calc(146px + var(--sab))}.call.zoom .psub{bottom:calc(129px + var(--sab))}.call.zoom .price{bottom:calc(133px + var(--sab))}
.call.nocc .aicap{display:none!important}
/* connection quality */
.zq{display:none;gap:1.5px;align-items:flex-end;height:9px;margin-left:5px}.call.zoom .zq{display:inline-flex}
.zq b{width:2.5px;background:#3aa27a;border-radius:1px}.zq b:nth-child(1){height:4px}.zq b:nth-child(2){height:6.5px}.zq b:nth-child(3){height:9px}
.zq.mid b:nth-child(3){background:#c9cfcc}.zq.bad b{background:var(--red)}.zq.bad b:nth-child(n+2){background:#c9cfcc}
/* reactions */
.call.zoom .zreact.on{display:flex;left:50%;transform:translateX(-50%);bottom:calc(76px + var(--sab));z-index:9;gap:2px;padding:6px;border-radius:28px;background:rgba(255,255,255,.96);box-shadow:0 10px 26px -10px rgba(0,0,0,.45)}
.zreact button{width:42px;height:42px;border-radius:50%;font-size:23px;line-height:1}
.zreact button:hover{background:#f0ede5}
.zreact .hand{width:auto;padding:0 12px;border-radius:21px;font-size:19px;display:flex;align-items:center;gap:5px;border-left:1px solid var(--line)}.zreact .hand span{font-size:11.5px;color:var(--ink)}
.zfloat{position:absolute;inset:0;pointer-events:none;z-index:10;overflow:hidden}
.zfl{position:absolute;bottom:90px;font-size:34px;animation:zfl 2.6s ease-out forwards}
@keyframes zfl{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1;transform:translateY(-30px) scale(1.1)}100%{transform:translateY(-320px) scale(1);opacity:0}}
/* active speaker */
.inset.speaking{box-shadow:0 0 0 3px #7fe0b0}
/* screen sharing */
.call.zoom .zshare.on{display:flex;flex-direction:column;left:8px;right:8px;top:calc(var(--seam) - 6px);bottom:calc(76px + var(--sab));z-index:7;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 0 0 3px #3aa27a,0 18px 40px -14px rgba(0,0,0,.6);animation:zsh .35s cubic-bezier(.3,.8,.3,1)}
@keyframes zsh{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.zsh-h{display:flex;align-items:center;gap:7px;padding:8px 8px 8px 12px;background:#173c37;color:#fff;font-size:12px;flex:none}
.zsh-h svg{width:16px;height:16px;stroke:#7fe0b0;fill:none;stroke-width:1.6}.zsh-h span{opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zsh-h button{margin-left:auto;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:13px;flex:none}
.zsh-b{flex:1;overflow-y:auto;padding:14px;overscroll-behavior:contain}
.call.sharing .aicap{bottom:auto;top:calc(var(--seam) - 120px)}
.zk{font-size:12px;color:var(--muted);margin-bottom:6px}.zk small{font-size:10.5px}
.zbig{font-size:26px;font-weight:700;color:var(--ink);margin-bottom:10px}.zbig small{font-size:12px;font-weight:400;color:var(--muted);margin-left:6px}
.zrows>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:#55605b}.zrows b{color:var(--ink);text-align:right}
.zpay label{display:block;font-size:12px;color:#55605b;margin-top:12px}.zpay label b{float:right;color:var(--ink)}.zpay input[type=range]{width:100%;height:28px;accent-color:var(--green)}
.zpay .note,.zcmp .note,.zplan .note{margin-top:10px}
.zcmp{overflow-x:auto}.zmap{width:100%;height:190px;border:0;border-radius:10px;display:block;background:#e9ece9}.zmapc .zk{margin-top:8px}
.znear>div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:#55605b}.znear b{color:var(--ink)}
.zplan .plan{margin-bottom:8px}
/* chat & participants sheets */
.zchat{max-height:42vh;min-height:120px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 0 10px}
.zmsg{max-width:86%;padding:8px 11px;border-radius:14px;background:#f0f3f0;font-size:13px;line-height:1.4}.zmsg b{display:block;font-size:10.5px;color:var(--muted);margin-bottom:2px}
.zmsg.client{align-self:flex-end;background:var(--green);color:#fff}.zmsg.client b{color:#bfe0d1}
.znote{align-self:center;font-size:11px;color:var(--muted);text-align:center}
.zchatin{display:flex;gap:8px;align-items:center}.zchatin .inp{flex:1}
.zpeople .zp{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.zpav{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center}.zpav.you{background:#2f3d39;color:#cfd8d4;font-size:12px}
.zp b{display:block;font-size:13.5px;color:var(--ink)}.zp small{font-size:11.5px;color:var(--muted)}.zp>span:nth-child(2){flex:1;min-width:0}
.zpi svg{width:18px;height:18px;stroke:var(--green-2);fill:none;stroke-width:1.6}.zpi.off svg{stroke:var(--red)}
.zmore{display:grid;gap:8px}.zmore button{text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:13px;color:var(--ink);background:#fff}
/* landscape phones and the website: the shared screen and controls sit on the property side */
.phone.land .call.zoom .zbar,html.desk .call.zoom .zbar{left:50%;right:0}
html.desk .call.zoom .zbar{left:52%}
.phone.land .call.zoom .zshare.on{left:calc(50% + 8px);top:8px}
html.desk .call.zoom .zshare.on{left:calc(52% + 16px);right:16px;top:16px;bottom:96px}
html.desk .call.zoom .zreact.on{left:76%}
html.desk .call.sharing .aicap{top:auto}

/* ===== Broker side: same screens, broker controls ===== */
.call .zshare.on{display:flex;flex-direction:column;left:8px;right:8px;top:calc(var(--seam) - 6px);bottom:calc(76px + var(--sab));z-index:7;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 0 0 3px #3aa27a,0 18px 40px -14px rgba(0,0,0,.6)}
.phone.land .call .zshare.on{left:calc(50% + 8px);top:8px}
html.desk .call .zshare.on{left:calc(52% + 16px);right:16px;top:16px;bottom:96px}
.callbar .brk{display:none!important}.call.broker .callbar .brk{display:flex!important}
.call.broker .callbar [data-a=compare],.call.broker .cbtns [data-a=explore],.call.broker .inset .muted{display:none!important}
.bkph{position:absolute;inset:0;display:grid;place-items:center;padding:24px 110px 24px 24px;text-align:center;color:#d8e2de;font-size:13px}
.bkpill{position:absolute;left:10px;bottom:calc(14px + var(--sab));z-index:41;height:38px;padding:0 14px;border-radius:19px;background:rgba(23,60,55,.92);color:#fff;font-size:12px;display:flex;align-items:center;gap:7px;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.bkpill[hidden],.screen[data-view=call] .bkpill{display:none}
.bkpill i{width:8px;height:8px;border-radius:50%;background:#b9bfbc}.bkpill i.on{background:#7fe0b0}.bkpill b{min-width:18px;height:18px;border-radius:9px;background:var(--red);font-size:10.5px;line-height:18px;text-align:center}
.bkcard{padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;font-size:12.5px;color:var(--body)}.bkcard b{display:block;font-size:14px;color:var(--ink)}.bkcard small{display:block;color:var(--muted);margin-top:3px}.bkcard p{margin-top:5px;line-height:1.45}
.bkrow{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.bkphotos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.bkphotos button{position:relative;aspect-ratio:4/3;border-radius:9px;overflow:hidden;background:var(--mint)}.bkphotos img{width:100%;height:100%;object-fit:cover;display:block}.bkphotos span{position:absolute;left:0;right:0;bottom:0;padding:8px 4px 3px;font-size:10px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65))}

/* broker tools on the call screen */
.bkstrip{display:none}
.call.broker .bkstrip{display:block;left:8px;right:8px;top:calc(var(--seam) + 28px);z-index:6;padding:8px;border-radius:14px;background:rgba(8,22,20,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff}
.bkstrip p{font-size:11px;margin:0 0 6px 2px;opacity:.9}.bkstrip small{display:block;font-size:10.5px;margin-top:5px;opacity:.75}
.bkthumbs,.bkchips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.bkthumbs::-webkit-scrollbar,.bkchips::-webkit-scrollbar{display:none}
.bkthumbs button{position:relative;flex:0 0 76px;height:54px;border-radius:8px;overflow:hidden;background:#2f3d39}.bkthumbs img{width:100%;height:100%;object-fit:cover;display:block}.bkthumbs span{position:absolute;left:0;right:0;bottom:0;padding:6px 3px 2px;font-size:9.5px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bkchips{margin-top:6px}.bkchips button{flex:none;height:32px;padding:0 11px;border-radius:16px;background:#fff;color:var(--ink);font-size:11.5px;white-space:nowrap}
.call.broker .fbar,.call.broker .flab,.call.broker .callbar [data-a=bkTools]{display:none!important}
.phone.land .call.broker .bkstrip{left:calc(50% + 8px);top:8px}
html.desk .call.broker .bkstrip{left:calc(52% + 12px);right:12px;top:12px}

/* sign in */
.authbox{max-width:420px}.authbox .logo{display:block;margin:22px auto 10px}.authbox h2{font-size:26px;text-align:center}.authbox>.sub{font-size:13px;color:var(--muted);text-align:center;margin:6px 0 14px}
.authbox label.fld{display:block}.pwrow{position:relative}.pwrow .inp{padding-right:62px}.pwrow .link{position:absolute;right:4px;top:2px}
.auerr{min-height:18px;margin:8px 0;font-size:12.5px;color:var(--red)}.auswitch{font-size:13px;margin-top:12px}.authbox .note.center{margin-top:6px}

.tb-act .acct{height:36px;padding:0 10px;font-size:13px;font-weight:600;color:var(--ink);border-radius:18px}.tb-act .acct:hover{background:#efece4}.tb-act .acct[hidden]{display:none}

.bkstrip .bkdev{display:block;font-size:12px;font-weight:700;margin:0 0 2px 2px}

/* broker: the developer of each unit, always easy to spot */
.devtag{left:14px;top:calc(var(--seam) + 16px);display:flex;align-items:center;gap:6px;max-width:calc(50% - 8px);padding:4px 10px 4px 8px;border-radius:8px;background:#fff;color:var(--green);box-shadow:0 2px 8px rgba(0,0,0,.28)}
.devtag b{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag .lbl small.dv{display:inline-block;margin:2px 0;padding:1px 7px;border-radius:5px;background:var(--mint);color:var(--green);font-size:11px;font-weight:700}
.ag.on .lbl small.dv{background:#fff}

/* Zoom features on human calls */
.zrec{margin-left:8px;padding:1px 6px;border-radius:4px;background:var(--red);color:#fff;font-size:9.5px;font-style:normal;font-weight:700;letter-spacing:.04em}
.zrec[hidden]{display:none}
.zbar button[hidden]{display:none}
.call.zoom .zbar{z-index:30}
.zscreen{display:none;left:0;right:0;top:0;bottom:64px;z-index:25;background:#000}
.zscreen.on{display:block}
.zscreen video,.zscreen canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.zscreen video{display:none}
.zscreen.self{left:auto;right:12px;top:12px;bottom:auto;width:170px;height:96px;border-radius:8px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.45)}
.zscreen.self.vid video{display:block}.zscreen.self.vid canvas{display:none}

/* every control fits on one line: full width of the call on computers, equal shares on phones */
.call.zoom .zbar button{min-width:0;flex:1 1 0;white-space:nowrap;font-size:10px}
.call.zoom .zbar button span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
html.desk .call.zoom .zbar,.phone.land .call.zoom .zbar{left:0;right:0}
html.desk .call.zoom .prerec,.phone.land .call.zoom .prerec{top:auto;bottom:calc(70px + var(--sab))}
.zbar button.sharing{color:#7fe0b0}

/* broker tools: a labelled bar that opens on mobile, always open on the website layout */
.call.broker .bkstrip{top:calc(var(--seam) + 34px);padding:0;overflow:hidden;max-height:max(210px,calc(100% - var(--seam) - 225px));overflow-y:auto}
.bkhead{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:7px 12px;color:#fff;text-align:left}
.bkhead span{min-width:0}
.bkhead b{display:block;font-size:12.5px;font-weight:700}
.bkstrip .bkhead small{display:block;margin:1px 0 0;font-size:10.5px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bkhead svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .2s}
.bkstrip.open .bkhead svg{transform:rotate(180deg)}
.bkbody{display:none;padding:0 8px 8px}
.bkstrip.open .bkbody{display:block}
.bkchips{flex-wrap:wrap;overflow:visible}
html.desk .call.broker .bkstrip{top:12px;max-height:calc(100% - 200px)}
html.desk .bkbody{display:block}
html.desk .bkhead{pointer-events:none}
html.desk .bkhead svg{display:none}
.phone.land .call.broker .bkstrip{top:8px}

/* ===== Developer branding: on a card when its home is by a developer in BRANDS, and across the showroom (html[data-brand]) ===== */
.srrole,.srctl{display:none!important}
.card.branded .srrole,html[data-brand] .aglist .srrole{display:block!important;font-weight:700;color:var(--brand)}
.card.branded .devtag{color:var(--brand)}
.srrole-line{font-size:12px;font-weight:700;color:var(--brand,#173c37);margin:-2px 0 8px}
html[data-brand]{--green:var(--brand);--green-2:var(--brand-accent);--mint:var(--brand-soft)}
.srwrap{display:inline-flex;align-items:center;gap:8px;line-height:1}
.srmark{display:block;padding:4px 8px;border-radius:5px;background:var(--brand);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.srmark img{display:block;height:12px;width:auto}
.srlinks{display:flex;justify-content:space-between;margin:2px 0 0}
.srback{display:block;padding:4px 0;color:var(--brand);font-size:12.5px;font-weight:600}
.srside{margin:0 0 12px;padding:12px;border-radius:12px;background:var(--brand);color:#fff}
.srside small{display:block;font-size:10.5px;opacity:.8}.srside b{display:block;font-size:14px;margin:1px 0 8px}
.srside button{display:block;width:100%;margin-top:6px;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.5);color:#fff;font-size:11.5px;text-align:left}
#drawer .srside{margin:14px 12px}
.card.branded .media-agent::after,html[data-brand] .call .media-agent::after{content:var(--brand-badge,"");position:absolute;top:calc(18px + var(--sat));right:12px;z-index:3;box-sizing:content-box;min-height:16px;padding:5px 9px 5px calc(var(--brand-logo-w) + 14px);border-radius:6px;background:var(--brand) var(--brand-logo) no-repeat 8px center/var(--brand-logo-w) auto;color:#fff;font-size:10.5px;line-height:16px;font-weight:700;pointer-events:none}
html[data-controls] .card .who,html[data-controls] .card .tiny{display:none}
html[data-controls] .card .srctl{display:flex!important;gap:8px;left:16px;right:14px;bottom:calc(12px + var(--sab))}
.card.branded .pausechip{top:calc(86px + var(--sat))}
.card.branded .livechip{top:calc(120px + var(--sat))}
.srbtn{flex:1;min-width:0;height:36px;padding:0 10px;border-radius:18px;font-size:12px;font-weight:700;white-space:nowrap;border:1px solid transparent}
.srbtn.white{background:#fff;color:#141414;border-color:#d9d6ce}
.srbtn.green{background:var(--talk);color:#fff}
.srbtn.red{background:var(--schedule);color:#fff}
html[data-controls] .card .cta{background:var(--talk)}
html[data-controls] .card .cta span{color:#fff}
.srprojects{margin:6px 0 8px}
.srprojects b{display:block;font-size:12px;margin-bottom:5px}
.srchips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.srchips::-webkit-scrollbar{display:none}
.srchips button{flex:none;padding:5px 10px;border-radius:14px;border:1px solid var(--brand);color:var(--brand);font-size:11.5px;white-space:nowrap}
.srchips button[aria-pressed=true]{background:var(--brand);color:#fff}
.srside .srprojects{margin:10px 0 0}.srside .srchips{flex-wrap:wrap}
.srside .srchips button{display:inline-block;width:auto;margin:0;padding:4px 9px;border-radius:12px;border-color:rgba(255,255,255,.5);color:#fff;font-size:11px}
.srside .srchips button[aria-pressed=true]{background:#fff;color:var(--brand)}
/* the developer's logo beside Mya: dark on the white header, no box, set apart by a thin divider */
.srmark{padding:0 0 0 10px;border-radius:0;background:none;border-left:1px solid #cfcbc2;color:var(--brand)}
.srmark img{height:14px;filter:brightness(0);opacity:.9}
.card.branded .media-agent::after,html[data-brand] .call .media-agent::after{background-color:rgba(23,22,26,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* on the reels the developer's logo is the developer label itself, not an extra badge */
.card.branded .media-agent::after{content:none}
.devtag img{display:block;height:auto;filter:brightness(0);opacity:.9}
/* Emaar's paper background and gold accent, showroom only */
html.desk[data-brand] body,html.framed[data-brand] body{background:var(--brand-paper)}
html[data-brand] .srside small{color:var(--brand-gold);opacity:1}
html[data-brand] .srside b{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:.02em}
html[data-brand] .disc-h b,html[data-brand] .srprojects b{font-family:var(--serif);font-weight:400;letter-spacing:.02em}
html[data-brand] .srside button:hover{border-color:var(--brand-gold)}
html[data-brand] .srchips button[aria-pressed=true]{border-color:var(--brand-gold)}
html[data-brand] .ag.on{background:var(--brand-soft)}
/* the showroom's functional colours: developer branding never changes these */
:root{--talk:#1b7f54;--schedule:#b9453f}
html[data-controls] [data-a=connectNow],html[data-controls] #sheet [data-a=cta]{background:var(--talk);color:#fff;border-color:var(--talk)}
html[data-controls] #conBody [data-a=book],html[data-controls] #waitBody [data-a=book],html[data-controls] #sheet [data-a=confirmBook]:not(:disabled){background:var(--schedule);color:#fff;border-color:var(--schedule)}
.srbtn:hover{filter:brightness(.94)}.srbtn:active{transform:scale(.97)}
.srbtn:focus-visible,html[data-controls] .cta:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ===== Website layout: a wide two-panel card (agent | home) with calmer chrome. Website only: the phone layout is untouched ===== */
html.desk{--agentW:44%}
html.desk .post{gap:14px;padding:0 20px;box-sizing:border-box}
html.desk .card{width:auto!important;flex:1 1 auto;max-width:1040px;min-width:0;border-radius:14px;box-shadow:0 1px 2px rgba(20,30,26,.06),0 14px 34px -22px rgba(20,30,26,.4)}
/* the two panels */
html.desk .card .media-agent{left:0;top:0;bottom:0;right:auto;width:var(--agentW);height:auto}
html.desk .card .wave{display:none}
html.desk .card .prop{left:var(--agentW);right:0;top:0;bottom:0}
html.desk .card .prop::after{background:linear-gradient(180deg,rgba(8,20,18,.28) 0,rgba(8,20,18,0) 22%,rgba(8,20,18,0) 44%,rgba(8,20,18,.72) 72%,rgba(8,20,18,.94) 100%)}
html.desk .card .media-agent::before{content:"";position:absolute;inset:auto 0 0 0;height:42%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(8,20,18,0),rgba(8,20,18,.82))}
/* left panel: who, then their numbers, then the main action */
html.desk .card .namechip{left:14px;top:14px;max-width:calc(var(--agentW) - 28px);background:rgba(255,255,255,.94)}
html.desk .card .pausechip{left:14px;top:auto;bottom:128px}
html.desk .card .livechip{left:auto;right:calc(100% - var(--agentW) + 14px);top:auto;bottom:133px}
html.desk .card .demolbl{display:none}
html.desk .card .stats{left:14px;right:auto;top:auto;bottom:76px;width:calc(var(--agentW) - 28px);box-sizing:border-box;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:4px;padding:0;background:none;box-shadow:none;border-radius:0;color:#fff;height:auto}
html.desk .card .stats>div{flex:1;margin:0;padding:0;text-align:left;min-width:0}
html.desk .card .stats b{display:block;color:#fff;font-size:15px;line-height:1.1}
html.desk .card .stats span{display:block;color:rgba(255,255,255,.72);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.desk .card .cta{left:14px;right:auto;top:auto;bottom:14px;width:calc(var(--agentW) - 28px);height:50px;border-radius:25px;box-sizing:border-box}
html.desk .card .cta span{font-size:13.5px;padding:0 4px 0 0}
html.desk .card .cta i{width:38px;height:38px}
/* right panel: developer, then the home, then its actions */
html.desk .card .devtag{left:calc(var(--agentW) + 16px);top:14px;bottom:auto;max-width:none}
html.desk .card .ptitle,html.desk .card .psub,html.desk .card .prow,html.desk .card .meta,html.desk .card .who,html.desk .card .tiny,html.desk .card .srctl{left:calc(var(--agentW) + 18px)}
html.desk .card .ptitle{right:128px;font-size:19px;line-height:1.2;bottom:172px;text-shadow:none}
html.desk .card .psub{right:128px;font-size:12px;bottom:152px;text-shadow:none}
html.desk .card .price{right:18px;font-size:18px;bottom:158px;text-shadow:none}
html.desk .card .prow{right:18px}
html.desk .card .meta{right:18px;font-size:12px}
html.desk .card .srctl{right:18px}
html.desk .card .srbtn{height:38px;font-size:12.5px;border-radius:19px}
/* the actions beside the card: smaller and quieter */
html.desk .rail{gap:12px;margin-bottom:14px;flex:none;width:44px;font-size:11px}
html.desk .rail button{font-size:11px}
html.desk .rail .rc{width:38px;height:38px;background:#fff;box-shadow:0 0 0 1px #e4e0d6}
html.desk .rail .ra{width:44px;height:44px}
/* sidebar */
html.desk .side{background:#fff}
html.desk .nitem{min-height:40px;border-radius:9px;font-size:13.5px}
html.desk .nitem.on{background:var(--mint);color:var(--green);box-shadow:none}
html.desk .nitem.on svg{stroke:var(--green)}
html.desk .ag{border-radius:9px}
html.desk .frow{border-radius:9px}
html.desk .tourcard{background:#fff;color:var(--ink);box-shadow:0 0 0 1px #e4e0d6;border-radius:10px}
html.desk .tourcard .lbl b{color:var(--ink);font-weight:600}
html.desk .tourcard .lbl small{color:var(--muted)}
html.desk .tourcard .tc-ic{background:var(--green)}
html.desk .tourcard .tc-ic svg{fill:#fff}
html.desk .view,html.desk .phone,html.desk .screen{background:#f7f6f2}
/* details panel: one main action, two supporting */
html.desk .detail :has(>.srbtn){flex-wrap:wrap}
html.desk .detail .srbtn{flex:1 1 40%;height:40px;font-size:13px}
html.desk .detail .srbtn.green{order:-1;flex:1 0 100%;height:44px;font-size:14px}
/* property page: the action bar sits on its own background and never covers the content */
html.desk #fullBody{padding-bottom:96px}
html.desk #v-full .actions{background:#fff;padding:12px 16px;box-shadow:0 -1px 0 #e8e4da,0 -14px 24px -18px rgba(20,30,26,.3);box-sizing:border-box}
html.desk .card .media-agent{height:100%;clip-path:none}
/* the card always fits the window, on short laptop screens too */
html.desk .post{height:calc(100vh - 60px)}
html.desk .card{height:calc(100vh - 92px)}
html.desk .card .pausechip{left:14px;right:auto;bottom:162px}
html.desk .card .livechip{left:14px;right:auto;bottom:130px}
html.desk .card .media-agent::before{height:52%;background:linear-gradient(180deg,rgba(8,20,18,0),rgba(8,20,18,.55) 45%,rgba(8,20,18,.9))}
html.desk .card .stats span{color:rgba(255,255,255,.82)}

/* ===== Website call: the call gets the whole width, video large and the home beside it; no side panels during a call ===== */
html.desk[data-view=call] .side,html.desk[data-view=call] .detail{display:none}
html.desk[data-view=call] .stage{left:0;right:0}
html.desk .call{--callV:60%;--callP:40%}
html.desk .call .media-agent{width:var(--callV)}
html.desk .call .prop{left:var(--callV)}
html.desk .call .namechip{max-width:calc(var(--callV) - 28px)}
html.desk .call .inset{right:calc(var(--callP) + 16px);bottom:84px;width:132px;height:168px}
html.desk .call .ptitle{left:calc(var(--callV) + 22px);right:130px;bottom:142px!important;font-size:19px;text-shadow:none}
html.desk .call .psub{left:calc(var(--callV) + 22px);right:130px;bottom:122px!important;font-size:12.5px;text-shadow:none}
html.desk .call .price{right:22px;bottom:128px!important;font-size:19px;text-shadow:none}
html.desk .call .prow{left:calc(var(--callV) + 16px);right:16px;bottom:74px!important}
html.desk .call .prop::after{background:linear-gradient(180deg,rgba(8,20,18,0) 50%,rgba(8,20,18,.72) 76%,rgba(8,20,18,.95) 100%)}
html.desk .call .aicap{right:calc(var(--callP) + 160px);bottom:84px}
html.desk .call.zoom .zshare.on,html.desk .call .zshare.on{left:calc(var(--callV) + 14px);right:14px;top:14px;bottom:176px}
html.desk .call.zoom .zreact.on{left:calc(var(--callV) / 2)}
html.desk .call.broker .bkstrip{left:calc(var(--callV) + 12px);right:12px;top:12px;max-height:calc(100% - 200px)}
html.desk .call.broker .bkthumbs button{flex-basis:88px;height:58px}
html.desk .call.zoom .zbar{justify-content:center;gap:10px}
html.desk .call.zoom .zbar button{flex:0 1 84px}
html.desk .call .zscreen{bottom:67px}
html.desk .call .zscreen:not(.self){right:var(--callP)}

/* ===== Capture deterrents (js/protect.js) ===== */
html.wm-on #v-call img,html.wm-on #v-call video,html.wm-on #v-full img{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
html.wm-hide #v-call .media-agent,html.wm-hide #v-call .prop,html.wm-hide #v-call .zscreen,html.wm-hide #v-call .zshare,html.wm-hide #v-full .gal,html.wm-hide #viewer{filter:blur(28px) brightness(.55)}
@media print{html.wm-on body{visibility:hidden}}

/* ===== Website call, calm by default: the video fills the screen and the home is a small corner card ===== */
.homebtn{display:none}
html.desk .call .homebtn{display:block}
html.desk .call .inset.inset{top:16px!important;bottom:auto;right:16px;width:104px;height:132px}
html.desk .call.homeopen .inset.inset{right:calc(var(--callP) + 16px)}
html.desk .call:not(.homeopen) .media-agent{width:100%}
html.desk .call:not(.homeopen) .namechip{max-width:280px}
html.desk .call:not(.homeopen) .prop{left:auto;right:16px;top:auto;bottom:84px;width:280px;height:158px;z-index:3;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.55),0 12px 28px -12px rgba(0,0,0,.6)}
html.desk .call:not(.homeopen) .prop::after{background:linear-gradient(180deg,rgba(8,20,18,0) 35%,rgba(8,20,18,.85) 100%)}
html.desk .call:not(.homeopen) .psub,html.desk .call:not(.homeopen) .prow,html.desk .call:not(.homeopen) .bkstrip,html.desk .call:not(.homeopen) .prop .fbar,html.desk .call:not(.homeopen) .prop .flab{display:none!important}
html.desk .call:not(.homeopen) .ptitle{left:auto;right:30px;width:252px;bottom:114px!important;font-size:14px;line-height:1.25}
html.desk .call:not(.homeopen) .price{right:auto;left:calc(100% - 282px);bottom:94px!important;font-size:13px}
html.desk .call:not(.homeopen) .homebtn{right:16px;bottom:84px;width:280px;height:158px;box-sizing:border-box;border-radius:12px;z-index:5;color:#fff;font-size:11.5px;font-weight:600;display:flex;align-items:flex-start;justify-content:flex-end;padding:9px}
html.desk .call:not(.homeopen) .homebtn span{padding:4px 9px;border-radius:12px;background:rgba(10,20,18,.62)}
html.desk .call.homeopen .homebtn{right:14px;bottom:128px;z-index:6;padding:5px 11px;border-radius:14px;background:rgba(10,20,18,.62);color:#fff;font-size:11.5px;font-weight:600}
html.desk .call:not(.homeopen) .aicap{left:16px;right:312px;bottom:80px}
html.desk .call:not(.homeopen) .zscreen:not(.self){right:0}
/* portrait photos and intro videos fit whole on the wide call, never cropping the head; live Zoom video is unaffected */
html.desk .call .media-agent{background:#10201c}
html.desk .call .agentimg img,html.desk .call .agentimg video,html.desk .call .media-agent>img{object-fit:contain!important;object-position:50% 50%;animation:none!important;transform:none!important}
html.desk .call .agentimg,html.desk .call .phwrap{background:#10201c}

/* an away agent can't take a call: the main button becomes Schedule a Call, and its second copy on the card goes */
html[data-controls] .card.away .cta{background:var(--schedule)}
html[data-controls] .card.away .srctl .srbtn.red{display:none}
html[data-controls] #sheet [data-a=book]{background:var(--schedule);color:#fff;border-color:var(--schedule)}
/* phone: the longer Schedule a Call label fits inside the pill, with the arrow kept inside too */
html:not(.desk)[data-controls] .card.away .cta{padding-left:12px;padding-right:8px;box-sizing:border-box}
html:not(.desk)[data-controls] .card.away .cta span{flex:1 1 auto;min-width:0;padding:0 4px 0 0;font-size:12px;letter-spacing:0}
html:not(.desk)[data-controls] .card.away .cta i{width:40px;height:40px;flex:none}
html:not(.desk)[data-controls] .card.away .cta i svg{width:19px;height:19px}

/* website call: nothing but the call */
html.desk[data-view=call] .topbar .search,html.desk[data-view=call] .topbar .modesw,html.desk[data-view=call] .topbar .ib{visibility:hidden}
html.desk .call .cbtns .rot,html.desk .call .cbtns .por{display:none!important}
html.desk .call.homeopen .homebtn{right:14px;top:44px;bottom:auto}
html.desk .call.homeopen.zoom .zbar{right:var(--callP)}
html.desk .call.homeopen .ptitle{bottom:96px!important}
html.desk .call.homeopen .psub{bottom:76px!important}
html.desk .call.homeopen .price{bottom:82px!important}
html.desk .call.homeopen .prow{bottom:24px!important}
html.desk .call.homeopen .zshare.on{bottom:132px}