/*hover-only-on-mouse*/
/* Compass on the Lake · Balotești virtual tour — compassgroup.ro language: charcoal ground, white type, brand blue #238CCC, square buttons */
:root{
  --ground:#171717; --panel:rgba(35,31,32,.94); --panel2:#2a2627; --line:rgba(255,255,255,.14); --line2:rgba(255,255,255,.28);
  --blue:#238CCC; --blue2:#2C9BE0; --lit:#8fcdf2; --wa:#1fae55; --ink:#FFFFFF; --soft:#E9E4DC; --muted:#C9C3BA;
  --view:#8FE0C8; --possible:#FFC98F; --none:#5a5d61;
  --sans:"Assistant","Noto Sans Arabic","Arial Hebrew",Arial,sans-serif; --lat:"Poppins","Assistant",Arial,sans-serif; --hh:76px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.45 var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--lit);outline-offset:2px}
#stage{position:fixed;inset:0}
.num{font-family:var(--lat);font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.x{width:38px;height:38px;border:1px solid var(--line2);background:rgba(0,0,0,.35);color:#fff;font-size:22px;line-height:1;cursor:pointer;flex:none;display:grid;place-items:center}@media (hover:hover){.x:hover{background:var(--blue);border-color:var(--blue)}}

/* ---------- loader: cinematic arrival over the aerial render ---------- */
.loader{position:fixed;inset:0;z-index:100;overflow:hidden;background:#0b0a0a;color:#F6F2EB;display:grid;grid-template-rows:auto 1fr auto;padding-inline:clamp(16px,5vw,64px);padding-block-start:clamp(18px,4vh,40px);padding-block-end:calc(var(--footh, 44px) + 18px);transition:opacity .95s ease .1s,visibility 0s linear 1.1s}
.loader.gone{opacity:0;visibility:hidden;pointer-events:none}
.l-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.l-bg picture{display:block;width:100%;height:100%}
.l-bg img{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.16);transition:opacity 1.6s ease,transform 18s cubic-bezier(.12,.7,.2,1)}
.l-bg.in img{opacity:1;transform:scale(1.03)}
.loader.gone .l-bg img{transform:scale(1.12);transition:transform 1.2s cubic-bezier(.55,0,.2,1)}
.l-shade{position:absolute;inset:0;z-index:0;background:radial-gradient(62% 34% at 50% 50%,rgba(9,9,9,.62),rgba(9,9,9,0) 100%),linear-gradient(180deg,rgba(9,9,9,.72) 0%,rgba(9,9,9,.34) 28%,rgba(9,9,9,.46) 58%,rgba(9,9,9,.95) 100%),radial-gradient(130% 95% at 50% 42%,transparent 45%,rgba(0,0,0,.6))}
.l-top,.lw,.l-foot{position:relative;z-index:1}
.l-top{display:flex;justify-content:center}
.l-logo{width:clamp(150px,15vw,210px);height:auto;filter:drop-shadow(0 4px 18px rgba(0,0,0,.35))}
.lw{align-self:center;justify-self:center;text-align:center;display:grid;justify-items:center;gap:clamp(10px,1.8vh,18px);max-width:1000px;transition:opacity .6s ease,transform .8s ease}
.loader.gone .lw{opacity:0;transform:translateY(-14px)}
.l-eyebrow{margin:0;display:flex;align-items:center;gap:14px;font:400 12px/1 var(--lat);letter-spacing:.32em;text-transform:uppercase;color:#E7CFA8}
.l-eyebrow i{display:block;width:clamp(26px,6vw,76px);height:1px;background:linear-gradient(90deg,transparent,#E7CFA8)}
.l-eyebrow i:last-child{background:linear-gradient(90deg,#E7CFA8,transparent)}
.l-welcome{margin:0;font:300 clamp(30px,5.4vw,66px)/1.06 var(--sans);letter-spacing:.004em;text-wrap:balance;color:#fff;text-shadow:0 2px 34px rgba(0,0,0,.4)}
.l-thesis{margin:0;font:600 clamp(19px,2.3vw,28px)/1.3 var(--sans);color:#E7CFA8;text-wrap:balance;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.l-proof{margin:0;min-height:1.6em;font:400 clamp(15px,1.45vw,18px)/1.5 var(--sans);color:#F6F2EB;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.l-proof span{display:inline-block;transition:opacity .45s ease,transform .45s ease}
.l-proof span.out{opacity:0;transform:translateY(8px)}
.l-foot{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;padding-block:18px 28px}
.l-pillars{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px clamp(20px,3.6vw,52px)}
.l-pillars li{display:grid;gap:5px}
.l-pillars b{font:200 clamp(30px,3.3vw,42px)/1 var(--lat);color:#fff}
.l-pillars span{font:400 14px/1.3 var(--sans);color:rgba(246,242,235,.8);max-width:16ch}
.l-meter{display:grid;justify-items:end;gap:4px;text-align:end}
.l-count{font:200 clamp(50px,6vw,78px)/.9 var(--lat);color:#fff;display:flex;align-items:baseline;gap:4px;direction:ltr}
.l-count small{font-size:.3em;color:#E7CFA8}
#load-p{margin:0;font-size:14px;color:rgba(246,242,235,.78);min-height:1.4em}
.l-bar{position:absolute;inset-inline:0;inset-block-start:0;z-index:2;display:flex;height:2px;background:rgba(255,255,255,.16)}
.l-bar i{display:block;height:100%;width:0;background:linear-gradient(to right,#238CCC,#8fcdf2);box-shadow:0 0 14px rgba(143,205,242,.7);transition:width .35s ease}
[dir=rtl] .l-bar i{background:linear-gradient(to left,#238CCC,#8fcdf2)}
.l-top,.l-eyebrow,.l-welcome,.l-thesis,.l-proof,.l-foot{animation:lrise 1.05s cubic-bezier(.2,.7,.2,1) both}
.l-eyebrow{animation-delay:.12s}.l-welcome{animation-delay:.28s}.l-thesis{animation-delay:.55s}.l-proof{animation-delay:.8s}.l-foot{animation-delay:.45s}
.l-eyebrow i{animation:lline 1.3s cubic-bezier(.2,.7,.2,1) .35s both}
@keyframes lrise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes lline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:760px){.lw{gap:12px}.l-welcome{font-size:clamp(30px,8.4vw,40px)}.l-foot{flex-direction:column;align-items:stretch}.l-meter{order:-1;justify-items:start;text-align:start}.l-pillars{gap:12px 22px}.l-pillars b{font-size:26px}.l-pillars span{font-size:12.5px}.l-eyebrow{font-size:10px;letter-spacing:.22em;gap:10px}}
@media (max-height:560px){.l-pillars{display:none}.l-top{display:none}}
@media (prefers-reduced-motion:reduce){.l-bg img{transform:none!important;transition:opacity .6s}.l-top,.l-eyebrow,.l-welcome,.l-thesis,.l-proof,.l-foot,.l-eyebrow i{animation:none}.l-proof span{transition:none}}

/* ---------- header (compassgroup.ro) ---------- */
header.site{position:fixed;inset-block-start:0;inset-inline:0;z-index:30;height:var(--hh);display:flex;align-items:center;gap:20px;padding-inline:20px;background:rgba(35,31,32,.95);border-block-end:1px solid rgba(255,255,255,.08)}
header.site .logo{flex:none;line-height:0}
header.site .logo img{height:52px;width:auto}
.htitle{display:flex;flex-direction:column;gap:2px;min-width:0}
.htitle b{font:600 19px/1.15 var(--sans);color:#fff;letter-spacing:.01em;white-space:nowrap}
.htitle span{font:400 14px/1.2 var(--sans);color:var(--lit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.menu a,.menu button{border:0;background:none;color:#fff;font:400 16px/1 var(--sans);padding:10px 11px;text-decoration:none;cursor:pointer;position:relative;white-space:nowrap}
.menu a::after,.menu button::after{content:"";position:absolute;inset-inline:11px;inset-block-end:3px;height:2px;background:var(--blue);transform:scaleX(0);transition:transform .25s}@media (hover:hover){.menu a:hover::after,.menu button:hover::after{transform:scaleX(1)}}
.menu .m-info{color:var(--lit);font-weight:600}
.hactions{display:flex;align-items:center;gap:8px;flex:none}
/* 05.10: the language row is folded into a globe button; the list opens under it */
.lpick{position:relative}
.lp-btn{width:auto;min-width:46px;padding:0 12px;grid-auto-flow:column;gap:7px}.lp-btn svg{width:19px;height:19px}
.lp-code{font:500 13px/1 var(--lat);letter-spacing:.08em}
.langs{display:flex;border:1px solid var(--line2)}
.langs button{border:0;background:none;color:#fff;font:500 13px/1 var(--lat);letter-spacing:.08em;padding:0 9px;height:44px;cursor:pointer}
.langs button span{display:none}
.langs button[aria-pressed="true"]{background:#fff;color:#231F20}
#lp-list{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:60;flex-direction:column;min-width:190px;background:#231F20;box-shadow:0 18px 40px rgba(0,0,0,.45);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .16s cubic-bezier(.23,1,.32,1),transform .16s cubic-bezier(.23,1,.32,1),visibility 0s .16s}
[dir="rtl"] #lp-list{transform-origin:top left}
.lpick.open #lp-list{opacity:1;visibility:visible;transform:none;transition:opacity .18s cubic-bezier(.23,1,.32,1),transform .18s cubic-bezier(.23,1,.32,1),visibility 0s}
#lp-list button{display:flex;align-items:center;gap:14px;width:100%;height:44px;padding:0 14px;text-align:start}
#lp-list button b{font-weight:600;min-width:22px;opacity:.6}#lp-list button span{display:inline;font:400 15px/1 var(--f, inherit);letter-spacing:0}
#lp-list button[aria-pressed="true"] b{opacity:1}
@media (hover:hover){#lp-list button:hover{background:#3a3435}#lp-list button[aria-pressed="true"]:hover{background:#fff}}
.sq{width:46px;height:46px;display:grid;place-items:center;background:#231F20;border:1px solid var(--line2);color:#fff;text-decoration:none;cursor:pointer}@media (hover:hover){.sq:hover{background:#3a3435}}
.sq svg{width:22px;height:22px}
.cta{border:0;background:var(--blue);color:#fff;font:700 16px/1 var(--sans);padding:0 20px;height:46px;cursor:pointer}@media (hover:hover){.cta:hover{background:var(--blue2)}}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line2);background:none;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;padding:0 11px}
.burger i{display:block;height:2px;background:#fff}

/* ---------- facts: tab on the right edge + drawer ---------- */
.info-tab{position:fixed;z-index:13;right:0;top:calc(var(--hh) + 150px);writing-mode:vertical-rl;background:var(--blue);color:#fff;border:0;padding:18px 11px;font:700 16px/1 var(--sans);cursor:pointer;box-shadow:-6px 8px 24px rgba(0,0,0,.35)}
.info-tab span{display:block;transform:rotate(180deg)}
.info-tab{display:flex;align-items:center;gap:10px}
.info-tab .it-arr{writing-mode:horizontal-tb;flex:none;animation:itArr 2.4s ease-in-out infinite}
@keyframes itArr{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
.info-tab.nudge{animation:itNudge 1.3s cubic-bezier(.25,.8,.3,1)}
.info-tab.nudge::after{content:"";position:absolute;inset:0;animation:itRing 1.3s ease-out}
@keyframes itNudge{0%{transform:translateX(0)}16%{transform:translateX(-18px)}34%{transform:translateX(0)}50%{transform:translateX(-10px)}68%{transform:translateX(0)}82%{transform:translateX(-4px)}100%{transform:translateX(0)}}
@keyframes itRing{from{box-shadow:0 0 0 0 rgba(143,205,242,.75)}to{box-shadow:0 0 0 16px rgba(143,205,242,0)}}
.info-peek{position:fixed;z-index:13;right:54px;top:calc(var(--hh) + 150px);display:grid;gap:4px;text-align:start;min-width:200px;max-width:min(300px,calc(100vw - 80px));padding:12px 16px;background:var(--panel);color:#fff;border:1px solid var(--line2);box-shadow:0 16px 36px rgba(0,0,0,.42);cursor:pointer;opacity:0;transform:translateX(20px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.info-peek.on{opacity:1;transform:none}
.info-peek::after{content:"";position:absolute;right:-7px;top:24px;width:12px;height:12px;background:#2b2728;border-top:1px solid var(--line2);border-right:1px solid var(--line2);transform:rotate(45deg)}
.info-peek .pk-k{display:flex;gap:8px;align-items:center;font:600 14px/1.3 var(--sans);color:var(--lit)}
.info-peek b{font:300 30px/1.05 var(--lat);display:flex;gap:6px;align-items:baseline;direction:ltr;justify-content:flex-start}
[dir=rtl] .info-peek b{justify-content:flex-end}
.info-peek b small{font:400 14px/1 var(--sans);color:var(--soft)}@media (hover:hover){.info-peek:hover{border-color:var(--blue)}}
@media (prefers-reduced-motion:reduce){.info-tab .it-arr,.info-tab.nudge{animation:none}}@media (hover:hover){.info-tab:hover{background:var(--blue2)}}
.facts-panel{position:fixed;z-index:22;right:16px;top:calc(var(--hh) + 16px);width:min(380px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line);box-shadow:0 22px 50px rgba(0,0,0,.45);animation:slidein .35s ease}
@keyframes slidein{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.fp-head{display:flex;align-items:center;gap:10px;padding:14px 16px 4px}
.fp-head h2{margin:0;font:600 18px/1.2 var(--sans);margin-inline-end:auto}
.fp-stage{position:relative;height:236px;overflow:hidden}
.fact-card{position:absolute;inset:0;padding:8px 20px 0;opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.fact-card.on{opacity:1;transform:none;pointer-events:auto}
.fact-card .fk{font:700 15px/1.3 var(--sans);color:var(--lit);margin:0 0 6px;display:flex;gap:8px;align-items:center}
.fact-card .fk svg{width:18px;height:18px;flex:none}
.fact-card .fv{font:200 54px/1.02 var(--lat);color:#fff;display:flex;align-items:baseline;gap:8px;direction:ltr;justify-content:flex-end}
[dir="ltr"] .fact-card .fv{justify-content:flex-start}
.fact-card .fv small{font:300 20px/1 var(--lat);color:var(--soft)}
.fact-card .ft{font:400 17px/1.45 var(--sans);color:#fff;margin:10px 0 0;text-wrap:pretty}
.fact-card .fs{font:400 12.5px/1.35 var(--sans);color:var(--muted);margin:8px 0 0}
.fp-foot{display:flex;align-items:center;gap:8px;padding:8px 16px 12px}
.fp-dots{display:flex;gap:6px;flex-wrap:wrap;margin-inline-end:auto}
.fp-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.3);padding:0;cursor:pointer}
.fp-dots button[aria-selected="true"]{background:var(--blue);width:22px;border-radius:5px}
.fp-pause{border:1px solid var(--line2);background:none;color:#fff;width:34px;height:30px;cursor:pointer;font-size:11px}
.fp-bar{height:3px;background:rgba(255,255,255,.08)}
.fp-bar i{display:block;height:100%;width:0;background:var(--blue)}

/* ---------- clock ---------- */
.clock{position:fixed;z-index:12;left:16px;top:calc(var(--hh) + 16px);background:var(--panel);border:1px solid var(--line)}
.clk-main{display:flex;align-items:center;gap:12px;border:0;background:none;padding:10px 16px;cursor:pointer;width:100%;text-align:start;color:#fff}
.clk-ico{width:30px;height:30px;display:grid;place-items:center;color:#ffd79a}
.clk-ico svg{width:28px;height:28px}
.clk-txt{display:flex;flex-direction:column;gap:3px}
.clk-txt b{font:300 26px/1 var(--lat);color:#fff}
.clk-txt small{font-size:14px;color:var(--soft)}
.clk-panel{padding:4px 16px 16px;width:320px}
.clk-x{position:absolute;top:6px;left:6px;width:32px;height:32px;font-size:20px;background:rgba(0,0,0,.3);border-color:var(--line2);color:#fff}
.clk-l{display:flex;justify-content:space-between;font-size:14px;color:var(--soft);margin-bottom:6px}
.clk-panel input[type=range]{width:100%;accent-color:var(--blue);direction:ltr}
.clk-quick{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.clk-quick button{border:1px solid var(--line2);background:none;padding:7px 11px;font-size:14px;cursor:pointer;color:#fff}.clk-quick button.on{background:var(--blue);border-color:var(--blue)}@media (hover:hover){.clk-quick button:hover{background:var(--blue);border-color:var(--blue)}}
.clk-sun{font-size:13.5px;color:var(--soft);margin:10px 0 0}

/* ---------- dock ---------- */
.dock{position:fixed;inset-block-end:calc(var(--footh, 44px) + 12px);transition:transform .3s ease,opacity .22s ease;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100vw - 24px);z-index:12;display:flex;gap:4px;padding:6px;background:var(--panel);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.dock::-webkit-scrollbar{display:none}
.dock button{flex:none;border:0;background:transparent;padding:9px 13px;display:flex;flex-direction:column;align-items:center;gap:5px;font:600 14px/1.1 var(--sans);cursor:pointer;min-width:84px;color:#fff}
.dock button svg{width:22px;height:22px}
.dock button[aria-pressed="true"]{background:var(--blue)}@media (hover:hover){.dock button:hover:not([aria-pressed="true"]){background:rgba(255,255,255,.1)}}
.hint{position:fixed;top:calc(var(--hh) + 22px);left:0;right:0;margin-inline:auto;width:max-content;max-width:min(620px,calc(100vw - 32px));text-align:center;font-size:15px;color:#fff;background:rgba(23,21,22,.82);padding:9px 16px;z-index:11;pointer-events:none;margin-block:0}

/* ---------- walk HUD ---------- */
.walk{position:fixed;inset-block-end:118px;left:50%;transform:translateX(-50%);width:min(600px,calc(100vw - 24px));z-index:12;padding:10px 14px;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line)}
.walk button{width:44px;height:44px;border:1px solid var(--line2);background:#231F20;font-size:20px;cursor:pointer;flex:none;color:#fff}
.walk input[type=range]{flex:1;accent-color:var(--blue)}
.walk .where{font-size:14.5px;color:#fff;min-width:150px;text-align:center}

/* ---------- house view ---------- */
.hv{position:fixed;inset:0;z-index:14;pointer-events:none}
.hv-frame{position:absolute;inset:0;box-shadow:inset 0 0 0 26px rgba(28,26,25,.92),inset 0 0 120px 40px rgba(0,0,0,.45)}
.hv-card{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);width:min(560px,calc(100vw - 48px));background:var(--panel);border:1px solid var(--line);padding:14px 18px;pointer-events:auto;display:flex;flex-direction:column;gap:8px;text-align:center}
.hv-card b{font-size:19px}
.hv-card p{margin:0;font-size:14.5px;color:var(--soft)}

/* ---------- drawers & panels (left side) ---------- */
.drawer,.vp,.poicard{position:fixed;z-index:20;left:16px;top:calc(var(--hh) + 16px);bottom:120px;width:min(430px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 22px 50px rgba(0,0,0,.45);transform:translateX(-14px);opacity:0;transition:transform .35s ease,opacity .3s ease}
.poicard{bottom:auto;max-height:calc(100vh - var(--hh) - 140px)}
.drawer.open,.vp.open,.poicard.open{transform:none;opacity:1}
.dh{display:flex;align-items:center;gap:10px;padding:14px 16px 10px}
.dh h2{margin:0;font:700 20px/1.2 var(--sans);margin-inline-end:auto;text-wrap:balance}
.dbody{overflow-y:auto;padding:0 16px 16px;scrollbar-width:thin}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 12px}
.chips button{border:1px solid var(--line2);background:rgba(255,255,255,.04);padding:7px 12px;font-size:14.5px;cursor:pointer;color:#fff}
.chips button[aria-pressed="true"]{background:#fff;color:#231F20;border-color:#fff}
.vlist{display:flex;flex-direction:column;gap:6px}
.vrow{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer;text-align:start;width:100%;color:#fff}@media (hover:hover){.vrow:hover{background:rgba(35,140,204,.18);border-color:var(--blue)}}
.vno{width:38px;height:38px;display:grid;place-items:center;background:var(--blue);color:#fff;font:600 16px/1 var(--lat);flex:none}
.vmeta{display:flex;flex-direction:column;gap:2px;margin-inline-end:auto;min-width:0}
.vmeta b{font-size:16px}
.vmeta span{font-size:14px;color:var(--soft)}
.vprice{font:400 15px/1.2 var(--lat);white-space:nowrap;text-align:end}
.pill{display:inline-flex;align-items:center;font-size:13px;font-weight:700;padding:4px 9px;white-space:nowrap}
.pill.view{background:var(--view);color:#0f2a24}.pill.possible{background:var(--possible);color:#2a1a08}.pill.none{background:var(--none);color:#fff}
.small{font-size:14px;color:var(--soft);margin:12px 0 0;line-height:1.45}
.hero{position:relative;flex:none}
.hero img{display:block;width:100%;height:210px;object-fit:cover}
.hero .cap{position:absolute;inset-inline-start:10px;inset-block-end:10px;font-size:13px;background:rgba(0,0,0,.6);padding:4px 8px;color:#fff}
.hero .x{position:absolute;top:10px;left:10px}
.vpb{overflow-y:auto;padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}
.vph{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vph h2{margin:0;font:700 21px/1.2 var(--sans);margin-inline-end:auto}
.price{background:rgba(255,255,255,.05);border:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.price .lbl{font-size:14px;color:var(--soft)}
.price .big{font:300 34px/1.1 var(--lat);color:#fff}
.price .big small{font:400 15px/1 var(--sans);color:var(--lit);margin-inline-end:6px}
.incl b{font-size:14.5px}
.incl ul{margin:4px 0 0;padding-inline-start:18px;display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;font-size:14.5px}
.finish,.deliv{margin:0;font-size:14.5px;color:#fff}
.eoe{margin:0;font-size:13px;color:#fff;opacity:.92}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fact{border:1px solid var(--line);padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.fact span{font-size:13px;color:var(--soft)}.fact b{font-size:15.5px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn{border:1px solid var(--line2);background:rgba(255,255,255,.06);color:#fff;padding:12px 12px;font:700 15px/1.2 var(--sans);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center}@media (hover:hover){.btn:hover{background:rgba(255,255,255,.14)}}
.btn.primary{background:#fff;color:#231F20;border-color:#fff}@media (hover:hover){.btn.primary:hover{background:#e8f4fb}}
.btn.cta-b{background:var(--blue);border-color:var(--blue);color:#fff}@media (hover:hover){.btn.cta-b:hover{background:var(--blue2)}}
.btn.wa-b{background:var(--wa);border-color:var(--wa);color:#fff}
.btn.wide{width:100%;padding:14px;font-size:16px}
.legal{margin:0;font-size:13.5px;color:#fff;line-height:1.5}
.poi{width:100%;display:flex;align-items:center;gap:12px;text-align:start;background:none;border:0;border-block-end:1px solid var(--line);padding:11px 2px;cursor:pointer;color:#fff}@media (hover:hover){.poi:hover{background:rgba(255,255,255,.05)}}
.poi .ico{width:36px;height:36px;display:grid;place-items:center;background:var(--blue);flex:none}
.poi .t{display:flex;flex-direction:column;gap:2px;margin-inline-end:auto}
.poi .t b{font-size:16px}.poi .t small{font-size:13.5px;color:var(--soft)}
.poi .tm{font-size:14.5px;color:var(--lit);white-space:nowrap}
.pc-fig{margin:0;position:relative;flex:none}
.pc-fig img{display:block;width:100%;height:190px;object-fit:cover;background:#111}
.pc-fig figcaption{position:absolute;inset-inline:0;bottom:0;font-size:11.5px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);padding:14px 10px 6px}
.pc-fig figcaption a{color:#fff}
.pc-ico{width:36px;height:36px;display:grid;place-items:center;background:var(--blue);flex:none}
.pc-ro{font-size:14.5px;color:var(--soft);margin:0 0 10px}
.pc-times{display:flex;gap:8px}
.pc-times div{flex:1;border:1px solid var(--line);padding:10px}
.pc-times b{display:block;font:300 30px/1 var(--lat)}
.pc-times span{font-size:14px;color:#fff}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(6,7,8,.62);opacity:0;transition:opacity .25s}
.modal.open{opacity:1}
.mcard{position:relative;width:min(600px,100%);max-height:calc(100vh - 32px);overflow-y:auto;background:#231F20;border:1px solid var(--line2);padding:26px 24px 22px;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.mcard h2{margin:0 0 6px;font:700 24px/1.2 var(--sans);padding-right:48px;text-wrap:balance}
[dir="rtl"] .mcard h2{padding-right:48px}
.mx{position:absolute;top:12px;left:12px}
.mcard .sub{margin:0 0 16px;font-size:15.5px;color:#fff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;border:0;padding:0}
.field label,.flabel{font-size:14.5px;font-weight:700;color:#fff}
.field input,.field select,.field textarea{background:#171717;border:1px solid var(--line2);color:#fff;padding:12px;font-size:16px;width:100%}
.field textarea{min-height:84px;resize:vertical}
.field .note{font-size:13px;color:var(--soft)}
.opt{display:flex;gap:18px;flex-wrap:wrap;font-size:15.5px}
.opt input{accent-color:var(--blue)}
.result{background:rgba(35,140,204,.14);border:1px solid rgba(35,140,204,.5);padding:14px;margin:6px 0}
.result .lbl{font-size:14px;color:#fff}
.result .big{font:300 38px/1.1 var(--lat)}
.kv{display:grid;grid-template-columns:auto auto;gap:4px 16px;margin-top:8px;font-size:14.5px}
.err{color:#ffb4a0;font-size:14.5px;margin:0 0 10px}
.talk{margin:16px 0 0;font-size:16px;color:#fff}
.talk a,.link{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.disc-text{font-size:15.5px;line-height:1.6;color:#fff}

/* ---------- labels on the map ---------- */
#labels{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden;transition:opacity .7s ease}
/* while a cinematic title is on screen the place labels step back: two layers of white text
   over the same sky is what made the aerial tour feel crowded (Moti, 23.09.2026) */
body:has(.titlecard.on) #labels{opacity:.22}
.plabel{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;background:rgba(23,21,22,.9);border:1px solid rgba(255,255,255,.18);color:#fff;white-space:nowrap;pointer-events:auto;cursor:pointer;font:600 14px/1.15 var(--sans);box-shadow:0 6px 18px rgba(0,0,0,.4);will-change:transform}@media (hover:hover){.plabel:hover{border-color:var(--blue)}}
.plabel .pi{width:28px;height:28px;display:grid;place-items:center;background:var(--blue);flex:none}
.plabel .pt{display:flex;flex-direction:column;gap:2px}
.plabel small{font:400 12.5px/1 var(--sans);color:#d6ecfa}
.plabel.far small{display:none}
.plabel.site{background:var(--blue);border-color:#6cc0f0}
.plabel.site .pi{background:#fff;color:var(--blue)}
.plabel.site small{color:#fff}
.vlabel{position:absolute;left:0;top:0;font:400 14px/1 var(--lat);letter-spacing:.3em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.95);white-space:nowrap}

/* ---------- misc ---------- */
.titlecard{position:fixed;inset-inline:0;bottom:22vh;z-index:15;text-align:center;pointer-events:none;opacity:0;transition:opacity 1s;padding-inline:20px}
.titlecard.on{opacity:1}
.titlecard .k{font:400 13px/1 var(--lat);letter-spacing:.32em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.titlecard h1{margin:12px 0 0;font:800 clamp(30px,5vw,58px)/1.1 var(--sans);text-shadow:0 4px 30px rgba(0,0,0,.6);text-wrap:balance}
.skip{position:fixed;top:calc(50vh + var(--hh)/2 + 47px);bottom:auto;right:16px;z-index:16;background:rgba(23,21,22,.9);color:var(--blue2);border:1px solid var(--line2);padding:11px 18px;font:700 15px/1 var(--sans);cursor:pointer}@media (hover:hover){.skip:hover{color:#fff;background:var(--blue);border-color:var(--blue)}}
/* One quiet line. The data credits are one click away in the legal window, where they belong -
   three dense lines of source notes under a luxury tour read as clutter (Moti, 23.09.2026). */
.attrib{position:fixed;z-index:6;bottom:0;inset-inline:0;margin:0;padding:10px 18px 9px;color:#fff;background:linear-gradient(transparent,rgba(14,13,14,.72) 46%,rgba(14,13,14,.9));display:flex;column-gap:12px;row-gap:3px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;pointer-events:none}
.attrib>*{pointer-events:auto}
.fsep{width:1px;height:11px;background:rgba(255,255,255,.22);flex:none}
body:has(#loader:not(.gone)) .attrib{z-index:101;background:linear-gradient(transparent,rgba(11,10,10,.86) 40%,#0b0a0a)}
body:has(#loader:not(.gone)) .modal{z-index:102}
.disc-btn{border:0;background:none;color:rgba(255,255,255,.58);font:600 11.5px/1.35 var(--sans);letter-spacing:.015em;text-decoration:none;cursor:pointer;padding:1px 2px;transition:color .22s}.disc-btn:focus-visible{color:#fff;text-decoration:underline}@media (hover:hover){.disc-btn:hover{color:#fff;text-decoration:underline}}
a.disc-btn{display:inline-block}
/* the studio credit: its own line under the attributions, centred, the whole line clickable */
.credit{font:300 11.5px/1.35 var(--lat);letter-spacing:.045em;color:rgba(255,255,255,.58);text-decoration:none;white-space:nowrap;transition:color .22s}
.credit b{font-weight:600;letter-spacing:.02em}.credit:focus-visible{color:#E7CFA8}@media (hover:hover){.credit:hover{color:#E7CFA8}}@media (hover:hover){.credit:hover b{text-decoration:underline}}
.toast{position:fixed;top:calc(var(--hh) + 20px);left:50%;transform:translate(-50%,-10px);max-width:calc(100vw - 32px);z-index:80;background:#fff;color:#231F20;padding:11px 18px;font:600 15px/1.3 var(--sans);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.ghost{border:1px solid var(--line2);background:rgba(20,21,23,.6);font-size:15px;font-weight:700;padding:10px 16px;cursor:pointer;color:#fff}
.tour-cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tour-cta .small{margin:0 0 0 auto;color:#fff}
.tour{position:fixed;inset:0;z-index:50;background:#0B0B0C;opacity:0;transition:opacity .45s ease;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:100%;overflow:hidden}
.tour.open{opacity:1}
.tour>*{grid-column:1}
.tour-bg{position:absolute;inset:-60px;background-size:cover;background-position:center;filter:blur(40px) brightness(.36)}
.tour-stage{grid-row:1/4;position:relative;overflow:hidden;touch-action:pan-y}
.tour-kb{position:absolute;inset:0}
.tour-kb.go{animation:kb 16s ease-out forwards}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.055)}}
.tour-kb picture,.tour-kb img{display:block;width:100%;height:100%}
#tour-img{object-fit:contain;opacity:0;transition:opacity .4s ease}
#tour-img.in{opacity:1}
.tour-head{grid-row:1;position:relative;z-index:2;display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;padding-block:16px 34px;padding-inline:22px;background:linear-gradient(180deg,rgba(11,11,12,.86),rgba(11,11,12,0))}
.tour-id{margin-inline-end:auto}
.tour-id h2{margin:0;font-size:21px;font-weight:800}
.tour-room{text-align:end}.tour-room b{display:block;font-size:16px}.tour-room span{font-family:var(--lat);font-size:12px;color:var(--soft);direction:ltr;display:inline-block}
/* ---------- cookie consent: the shape people already know - a card in the bottom corner of the
   reading side that rises into view once the scene is up, so the reflex to click Accept works.
   It sits above the navigation bar and covers the joystick or compass for the second it is open,
   which is what every consent banner does (Moti, 23.09.2026). ---------- */
.cc{position:fixed;inset-block-end:calc(var(--footh, 37px) + 96px);z-index:58;width:min(374px,calc(100vw - 32px));
  background:linear-gradient(180deg,rgba(35,31,32,.98),rgba(22,20,21,.98));border:1px solid var(--line2);
  border-radius:4px;box-shadow:0 22px 60px rgba(0,0,0,.55);padding:20px 20px 18px;color:#fff;
  display:flex;flex-direction:column;gap:11px;
  transform:translateY(18px);opacity:0;pointer-events:none;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .4s ease}
[dir=ltr] .cc{left:20px}
[dir=rtl] .cc{right:20px}
.cc.in{transform:translateY(0);opacity:1;pointer-events:auto}
.cc h2{margin:0;font:700 19px/1.25 var(--sans)}
.cc .cc-t{margin:0;font:400 13.5px/1.55 var(--sans);color:rgba(255,255,255,.72)}
.cc-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:3px}
.cc-b{flex:1 1 auto;min-width:96px;border:1px solid var(--line2);background:rgba(255,255,255,.06);color:#fff;
  font:700 13.5px/1 var(--sans);padding:11px 10px;cursor:pointer;border-radius:3px;transition:background .2s,border-color .2s}@media (hover:hover){.cc-b:hover{background:rgba(255,255,255,.14)}}
.cc-b.primary{background:var(--blue);border-color:var(--blue)}@media (hover:hover){.cc-b.primary:hover{background:#2f9ade}}
.cc-b.ghost{background:none;color:rgba(255,255,255,.8)}@media (hover:hover){.cc-b.ghost:hover{background:rgba(255,255,255,.08);color:#fff}}
.cc-save{margin-top:2px;flex:none}
.cc-cats{display:flex;flex-direction:column;gap:2px;border-block:1px solid var(--line);padding-block:10px;margin-block:2px}
.cc-cat{display:flex;align-items:flex-start;gap:10px;padding:7px 2px;cursor:pointer}
.cc-cat input{margin:2px 0 0;width:17px;height:17px;accent-color:var(--blue);flex:none;cursor:pointer}
.cc-cat input:disabled{cursor:default;opacity:.55}
.cc-cat span{display:grid;gap:2px}
.cc-cat b{font:700 13.5px/1.3 var(--sans)}
.cc-cat small{font:400 12px/1.4 var(--sans);color:rgba(255,255,255,.58)}
body[data-mode="story"] .cc,body[data-mode="inside"] .cc{display:none}
@media (prefers-reduced-motion:reduce){.cc{transition:opacity .3s ease}.cc,.cc.in{transform:none}}
@media (max-width:760px){
  .cc{inset-block-end:calc(var(--footh, 44px) + 92px);width:auto;padding:16px 16px 14px}
  [dir=ltr] .cc,[dir=rtl] .cc{left:12px;right:12px}
  .cc h2{font-size:17px}.cc .cc-t{font-size:12.8px}
}
.tour-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:54px;height:54px;border-radius:50%;border:1px solid var(--line2);background:rgba(20,20,20,.55);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.tour-nav svg{width:26px;height:26px}
/* The chevron is drawn pointing inline-end and mirrored for the other one, so each arrow points
   the way it travels in both reading directions. The old ‹ › characters could not do this:
   they are bidi-mirrored, so RTL silently flipped them and both arrows pointed inward. */
[dir=rtl] .tour-nav.next svg,[dir=ltr] .tour-nav.prev svg{transform:scaleX(-1)}@media (hover:hover){.tour-nav:hover{background:rgba(35,140,204,.85)}}
/* Physical sides on purpose. The thumbnail strip runs with the language, so in Hebrew the next
   room is to the LEFT and the previous one to the RIGHT; in English it is the other way. */
[dir=rtl] .tour-nav.prev{right:16px;left:auto}[dir=rtl] .tour-nav.next{left:16px;right:auto}
[dir=ltr] .tour-nav.prev{left:16px;right:auto}[dir=ltr] .tour-nav.next{right:16px;left:auto}
.tour-foot{grid-row:3;position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;padding-block:36px 16px;padding-inline:22px;background:linear-gradient(0deg,rgba(11,11,12,.92),rgba(11,11,12,0))}
.tour-thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.tour-thumbs::-webkit-scrollbar{display:none}
.tour-thumbs button{flex:none;width:108px;aspect-ratio:16/9;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#222;cursor:pointer;opacity:.62}
.tour-thumbs button[aria-current="true"]{border-color:var(--lit);opacity:1}
.tour-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.tour-foot .chips{padding:0}

@media (max-width:1380px){.htitle span{display:none}}
@media (max-width:1180px){.menu{display:none}.burger{display:flex}
  .menu.open{display:flex;flex-direction:column;align-items:stretch;position:fixed;top:var(--hh);inset-inline:0;background:rgba(35,31,32,.98);padding:10px 16px 16px;margin:0;z-index:31}
  .menu.open a,.menu.open button{text-align:start;font-size:18px;padding:14px 6px;border-block-end:1px solid rgba(255,255,255,.08)}}
@media (max-width:820px){:root{--hh:64px}header.site{gap:8px;padding-inline:10px}header.site .logo img{height:40px}
  .htitle{flex:1;min-width:0}.htitle b{font-size:14.5px;white-space:normal;line-height:1.15}
  .sq.wa,.lpick{display:none}.menu.open .langs-m{display:flex}.sq{width:42px;height:42px}.cta{height:42px;padding:0 11px;font-size:14px}
  .clock{top:calc(var(--hh) + 10px);left:10px}.clk-txt small{display:none}.clk-txt b{font-size:20px}.clk-main{padding:7px 10px}
  .info-tab{top:calc(var(--hh) + 90px);padding:14px 9px;font-size:14px}
  .dock button{min-width:72px;font-size:13px;padding:8px 9px}
  .drawer,.vp,.poicard{left:8px;right:8px;width:auto;top:calc(var(--hh) + 8px);bottom:104px}
  .facts-panel{right:8px;left:8px;width:auto}.fp-stage{height:220px}.fact-card .fv{font-size:44px}
  .hero img{height:170px}.grid2,.row2,.facts,.incl ul{grid-template-columns:1fr}
  .plabel small{display:none}.attrib{padding:8px 12px 7px}.disc-btn,.credit{font-size:11px}.skip{font-size:14px;padding:10px 14px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.menu .langs-m{display:none;margin-top:8px}.menu.open .langs-m{display:flex;align-self:flex-start}.menu.open .langs-m button{height:44px;padding:0 16px;font-size:15px;border-block-end:0}

.htitle{flex:0 1 auto;max-width:34vw}
.htitle b{overflow:hidden;text-overflow:ellipsis}
.menu a,.menu button{font-size:15px;padding:10px 9px}
@media (max-width:1560px){.htitle span{display:none}}
@media (max-width:1440px){.menu{display:none}.burger{display:flex}
  .menu.open{display:flex;flex-direction:column;align-items:stretch;position:fixed;top:var(--hh);inset-inline:0;background:rgba(35,31,32,.98);padding:10px 16px 16px;margin:0;z-index:31}
  .menu.open a,.menu.open button{text-align:start;font-size:18px;padding:14px 6px;border-block-end:1px solid rgba(255,255,255,.08)}
  .htitle{max-width:none;flex:1}.htitle span{display:block}}
@media (max-width:980px){.htitle span{display:none}}

.gal{display:flex;gap:6px;padding:8px 16px 0;overflow-x:auto;scrollbar-width:none;flex:none}
.gal::-webkit-scrollbar{display:none}
.gal button{flex:none;width:72px;aspect-ratio:4/3;padding:0;border:2px solid transparent;background:#111;cursor:pointer;opacity:.7}
.gal button[aria-pressed="true"]{border-color:var(--blue);opacity:1}@media (hover:hover){.gal button:hover{opacity:1}}
.gal img{display:block;width:100%;height:100%;object-fit:cover}
/* ---------- cost & mortgage calculator ---------- */
.mcard.mwide{width:min(760px,100%)}
.kick{margin:0 0 6px;font:500 12px/1 var(--lat);letter-spacing:.28em;color:var(--lit)}
.seg2{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line2);margin:0 0 16px}
.seg2 button{border:0;background:none;color:#fff;padding:12px;font:700 15px/1.2 var(--sans);cursor:pointer}
.seg2 button[aria-pressed="true"]{background:var(--blue)}
.field input[type=range]{padding:0;accent-color:var(--blue);background:none;border:0}
.field label b{color:var(--lit);font-weight:600}
.kv-note{grid-column:1/-1;font-size:13.5px;color:var(--soft)}
.minfo{border:1px solid var(--line);margin:12px 0;padding:0 14px}
.minfo summary{cursor:pointer;padding:12px 0;font:700 17px/1.3 var(--sans);color:#fff}
.mtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2px 0 10px}
.mtiles div{border:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:3px}
.mtiles b{font:300 26px/1.1 var(--lat);color:#fff}
.mtiles span{font:700 14px/1.2 var(--sans);color:var(--lit)}
.mtiles p{margin:4px 0 0;font-size:13.5px;line-height:1.45;color:#fff}
.mbanks{font-size:14px;color:#fff;margin:6px 0}
.minfo h3{margin:12px 0 6px;font:700 16px/1.2 var(--sans)}
.msteps{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:5px;font-size:14.5px}
.mnotes{margin:12px 0 0;padding-inline-start:18px;font-size:14.5px;display:flex;flex-direction:column;gap:4px}
@media (max-width:820px){.mtiles{grid-template-columns:1fr}}

/* ---------- compassgroup.ro typography accents ---------- */
.fp-head>div,.dh>div{margin-inline-end:auto;min-width:0}
.fp-head .kick,.dh .kick,.vpt .kick{margin:0 0 4px}
.vpt{margin-inline-end:auto;min-width:0}.vph h2{margin:0}
.titlecard .k{color:var(--lit);font-weight:500;letter-spacing:.34em}
.titlecard h1{font-weight:800;letter-spacing:.01em}
.dock button[aria-pressed="true"]{box-shadow:inset 0 -3px 0 #fff}

/* ---------- sold ---------- */
.vrow.sold{opacity:.62}@media (hover:hover){.vrow.sold:hover{opacity:1}}
.soldtag{display:inline-block;font:700 13px/1 var(--sans);letter-spacing:.04em;padding:5px 9px;background:#A8453C;color:#fff;text-transform:uppercase}
.sold-rib{position:absolute;inset-block-start:16px;inset-inline-start:-44px;width:170px;text-align:center;transform:rotate(-38deg);background:#A8453C;color:#fff;font:700 14px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:9px 0;box-shadow:0 6px 16px rgba(0,0,0,.35);pointer-events:none}
[dir=rtl] .sold-rib{transform:rotate(38deg)}
.hero{overflow:hidden}
.sold-big{display:inline-block;font:700 26px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#A8453C;padding:8px 14px}
.soldbox{display:grid;gap:10px}.soldbox p{margin:0;font-size:15px;color:#fff;line-height:1.45}
#vp.is-sold .incl,#vp.is-sold .finish,#vp.is-sold .deliv,#vp.is-sold #vp-calc{display:none}
#vp.is-sold .lbl{display:none}
/* ---------- lakefront amenities ---------- */
.lux{border:1px solid rgba(231,207,168,.4);background:linear-gradient(135deg,rgba(231,207,168,.1),rgba(35,140,204,.06));padding:12px 14px;display:grid;gap:8px}
.lux b{font:700 15px/1.2 var(--sans);color:#E7CFA8;letter-spacing:.02em}
.lux ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:14.5px;line-height:1.35;color:#fff}
.lux li{display:flex;gap:8px;align-items:flex-start}.lux li::before{content:"";flex:none;width:6px;height:6px;margin-top:.5em;background:#E7CFA8;transform:rotate(45deg)}
.lux .small{margin:0;color:var(--soft)}
@media (max-width:520px){.lux ul{grid-template-columns:1fr}}
.gal button[data-k="live"]{position:relative}.gal button[data-k="live"]::after{content:"3D";position:absolute;inset-block-start:3px;inset-inline-start:3px;font:700 10px/1 var(--lat);background:var(--blue);color:#fff;padding:2px 4px}

/* ---------- enter the project ---------- */
.enter-btn{position:fixed;z-index:12;left:50%;transform:translateX(-50%);inset-block-end:118px;display:flex;align-items:center;gap:10px;padding:12px 22px;border:1px solid rgba(231,207,168,.6);background:linear-gradient(135deg,#238CCC,#1a6ea3);color:#fff;font:700 17px/1 var(--sans);letter-spacing:.01em;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.38);animation:enterPulse 3.4s ease-in-out infinite;white-space:nowrap}
.enter-btn svg{width:22px;height:22px;flex:none}@media (hover:hover){.enter-btn:hover{background:linear-gradient(135deg,#2C9BE0,#238CCC)}}
@keyframes enterPulse{0%,72%,100%{box-shadow:0 12px 30px rgba(0,0,0,.38),0 0 0 0 rgba(143,205,242,.5)}86%{box-shadow:0 12px 30px rgba(0,0,0,.38),0 0 0 14px rgba(143,205,242,0)}}
body[data-mode="walk"] .enter-btn,body[data-mode="house"] .enter-btn,body[data-mode="tour"] .enter-btn{display:none}

/* ---------- plots legend ---------- */
.plots-legend{position:fixed;z-index:12;top:calc(var(--hh) + 16px);left:0;right:0;margin-inline:auto;width:max-content;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 18px;max-width:min(560px,calc(100vw - 32px));padding:10px 16px;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.plots-legend .lg{display:flex;align-items:center;gap:8px;font:700 15px/1 var(--sans);color:#fff}
.plots-legend .lg i{width:18px;height:12px;border:2px solid #9fd8ff;background:rgba(35,140,204,.45)}
.plots-legend .lg.s i{border-color:#ff9a8f;background:rgba(168,69,60,.5)}
.plots-legend em{font:300 18px/1 var(--lat);font-style:normal;color:var(--soft)}
.plots-legend p{flex-basis:100%;margin:0;text-align:center;font-size:13.5px;line-height:1.4;color:var(--soft)}
body[data-mode="walk"] .plots-legend,body[data-mode="house"] .plots-legend{display:none}

/* ---------- 3D navigation pad ---------- */
.navpad{position:fixed;z-index:12;left:16px;inset-block-end:44px;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:8px;direction:ltr;transition:opacity .25s}
.np-toggle{display:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);color:#fff;cursor:pointer;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.np-toggle svg{width:24px;height:24px}
.np-toggle[aria-expanded="true"]{background:var(--blue);border-color:var(--blue)}
.np-body{display:flex;gap:10px;align-items:center;padding:10px;background:var(--panel);border:1px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.navpad[data-open="false"] .np-body{display:none}
.np-dpad{display:grid;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px);gap:4px}
.np-f{grid-column:2;grid-row:1}.np-l{grid-column:1;grid-row:2}.np-h{grid-column:2;grid-row:2}.np-r{grid-column:3;grid-row:2}.np-d{grid-column:2;grid-row:3}
.np-side{display:grid;grid-template-columns:repeat(2,36px);grid-auto-rows:36px;gap:4px}
.np-b,.np-side button{display:grid;place-items:center;padding:0;border:1px solid var(--line2);background:#231F20;color:#fff;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.np-b svg,.np-side svg{width:18px;height:18px;pointer-events:none}@media (hover:hover){.np-b:hover,.np-side button:hover{border-color:var(--blue)}}
.np-b.on,.np-side button.on{background:var(--blue);border-color:var(--blue)}
.np-h{color:var(--lit)}
body:has(.drawer:not([hidden])) .navpad,body:has(#vp:not([hidden])) .navpad,body:has(#poicard:not([hidden])) .navpad,body[data-mode="tour"] .navpad{opacity:0;pointer-events:none}
@media (max-width:1320px){.navpad{inset-block-end:118px}}

/* ---------- phones ---------- */
@media (max-width:820px){
  .navpad{left:10px;inset-block-end:108px}
  .np-toggle{display:grid}
  .np-dpad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px)}
  .np-side{grid-template-columns:repeat(2,42px);grid-auto-rows:42px}
  .enter-btn{inset-block-end:112px;font-size:15px;padding:11px 16px;left:auto;right:12px;transform:none}
  .enter-btn svg{width:19px;height:19px}
  .walk{inset-block-end:100px;left:auto;right:10px;transform:none;width:calc(100vw - 84px);padding:8px 10px;gap:8px}
  .walk .where{display:none}
  .plots-legend{top:calc(var(--hh) + 64px);padding:8px 12px;gap:4px 14px}
  .plots-legend p{font-size:12px}
  body:has(#vp:not([hidden])) .enter-btn,body:has(.drawer:not([hidden])) .enter-btn,body:has(#poicard:not([hidden])) .enter-btn,body:has(.navpad[data-open="true"]) .enter-btn{display:none}
  body:has(#vp:not([hidden])) .plots-legend,body:has(.drawer:not([hidden])) .plots-legend{display:none}
  .drawer,.vp,.poicard{top:34vh;bottom:92px;border-radius:14px 14px 0 0}
  .hint{top:calc(var(--hh) + 64px);font-size:13.5px}
}
@media (max-width:600px){
  .htitle{display:none}
  header.site{justify-content:space-between}
  .hactions{gap:6px}
  .dock{left:0;right:0;transform:none;max-width:none;width:auto;inset-block-end:calc(var(--footh, 34px) + 8px);gap:0;padding:4px;border-inline:0;scroll-snap-type:x mandatory;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
  .dock button{min-width:66px;padding:7px 6px;font-size:11.5px;gap:4px;scroll-snap-align:start}
  .dock button svg{width:21px;height:21px}
  .attrib{padding:7px 8px 6px;column-gap:9px}
  .disc-btn,.credit{font-size:9.8px}.credit{letter-spacing:.03em}
  .drawer,.vp,.poicard{left:0;right:0;bottom:84px}
  .navpad{inset-block-end:98px}
  .enter-btn{inset-block-end:102px}
  .walk{inset-block-end:92px}
  .skip{right:12px}
  .clock{top:calc(var(--hh) + 8px)}
}

@media (max-width:820px){body:has(#vp:not([hidden])) .info-peek,body:has(.drawer:not([hidden])) .info-peek{display:none}}
@media (max-width:460px){.l-eyebrow{font-size:9px;letter-spacing:.14em;gap:8px}.l-eyebrow span{white-space:nowrap}.l-eyebrow i{width:18px}}
[dir=ltr] #w-back,[dir=ltr] #w-fwd{transform:scaleX(-1)}

/* ---------- joystick (transparent, opens from the bottom left) ---------- */
.joy{position:fixed;z-index:12;left:16px;inset-block-end:118px;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:10px;direction:ltr;transition:opacity .25s}
.joy-toggle{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.7);background:rgba(20,20,22,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.joy-toggle svg{width:26px;height:26px}
.joy-toggle[aria-expanded="true"]{background:rgba(35,140,204,.75);border-color:#8fcdf2}
.joy-body{display:flex;align-items:flex-end;gap:14px;animation:joyIn .28s ease both}
.joy[data-open="false"] .joy-body{display:none}
@keyframes joyIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.stick{position:relative;border-radius:50%;border:2px solid rgba(255,255,255,.72);background:radial-gradient(circle,rgba(255,255,255,.12),rgba(255,255,255,.03) 70%);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;box-shadow:0 8px 24px rgba(0,0,0,.18),inset 0 0 18px rgba(0,0,0,.12)}
.stick.move{width:132px;height:132px}.stick.look{width:96px;height:96px}
.stick::before{content:"";position:absolute;inset:14%;border-radius:50%;border:1px dashed rgba(255,255,255,.35)}
.stick .knob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(220,230,238,.75));box-shadow:0 4px 12px rgba(0,0,0,.35);transition:transform .18s ease;pointer-events:none}
.stick.look .knob{width:38px;height:38px;margin:-19px 0 0 -19px}
.stick.on{cursor:grabbing;border-color:#8fcdf2}.stick.on .knob{transition:none;background:radial-gradient(circle at 35% 30%,#fff,#8fcdf2)}
.stick .st-l{position:absolute;left:0;right:0;top:-20px;text-align:center;font:700 12px/1 var(--sans);color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8);letter-spacing:.04em}
.stick:focus-visible{outline:2px solid #8fcdf2;outline-offset:3px}
.joy-col{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.joy-col button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding:0;border:1.5px solid rgba(255,255,255,.7);background:rgba(20,20,22,.22);color:#fff;cursor:pointer;touch-action:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.joy-col button svg{width:18px;height:18px;pointer-events:none}.joy-col button.on{background:rgba(35,140,204,.7);border-color:#8fcdf2}@media (hover:hover){.joy-col button:hover{background:rgba(35,140,204,.7);border-color:#8fcdf2}}
body:has(.drawer:not([hidden])) .joy,body:has(#vp:not([hidden])) .joy,body:has(#poicard:not([hidden])) .joy,body[data-mode="tour"] .joy{opacity:0;pointer-events:none}
@media (max-width:1320px){.joy{inset-block-end:118px}}

/* ---------- enter the project, in the main bar ---------- */
.dock button.d-enter{background:linear-gradient(135deg,rgba(35,140,204,.28),rgba(231,207,168,.18));box-shadow:inset 0 0 0 1px rgba(231,207,168,.55);color:#fff}
.dock button.d-enter svg{color:#E7CFA8}@media (hover:hover){.dock button.d-enter:hover{background:linear-gradient(135deg,rgba(35,140,204,.45),rgba(231,207,168,.25))}}
.dock button.d-enter[aria-pressed="true"]{background:var(--blue)}

/* ---------- help button + first-visit guide ---------- */
.help-btn{position:absolute;left:calc(100% + 8px);top:0;width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);color:#fff;font:700 18px/1 var(--lat);cursor:pointer}@media (hover:hover){.help-btn:hover{background:var(--blue);border-color:var(--blue)}}
.wiz{position:fixed;inset:0;z-index:60}
.wz-hole{position:fixed;border-radius:12px;box-shadow:0 0 0 200vmax rgba(8,8,9,.62);outline:2px solid #E7CFA8;outline-offset:0;transition:left .35s ease,top .35s ease,width .35s ease,height .35s ease;pointer-events:none}
.wz-card{position:fixed;background:#231F20;border:1px solid rgba(231,207,168,.45);box-shadow:0 22px 50px rgba(0,0,0,.5);padding:18px 18px 16px;color:#fff;transition:top .35s ease,left .35s ease;max-width:calc(100vw - 24px)}
.wz-card .kick{color:#E7CFA8;margin:0 0 6px}
.wz-card h2{margin:0 0 8px;font:700 21px/1.25 var(--sans);padding-inline-end:40px}
.wz-text{margin:0 0 14px;font-size:15.5px;line-height:1.55;color:#fff}
.wz-x{position:absolute;top:10px;left:10px;width:34px;height:34px}
.wz-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wz-dots{display:flex;gap:6px}.wz-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3)}.wz-dots i.on{background:#E7CFA8;width:20px;border-radius:4px}
.wz-nav{display:flex;gap:8px}.wz-nav .btn{min-width:84px;padding:10px 14px}
.wz-nav .btn:disabled{opacity:.4;cursor:default}
body.wiz-on .titlecard,body.wiz-on .info-peek,body.wiz-on .hint{opacity:0!important}
@media (prefers-reduced-motion:reduce){.wz-hole,.wz-card{transition:none}.joy-body{animation:none}}

/* ---------- phones: joystick and guide ---------- */
@media (max-width:820px){
  .joy{left:10px;inset-block-end:100px}
  .stick.move{width:120px;height:120px}.stick.look{width:88px;height:88px}
  .joy-toggle{width:50px;height:50px}
  .help-btn{width:34px;height:34px;font-size:16px}
}
@media (max-width:600px){ .joy{inset-block-end:94px} }

/* ---------- inside a lakefront house ---------- */
.inside{position:fixed;z-index:13;top:calc(var(--hh) + 14px);left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100vw - 24px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;padding:10px 14px;background:var(--panel);border:1px solid rgba(231,207,168,.45);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.inside b{font:700 16px/1.2 var(--sans);color:#fff}
.in-floors{display:flex;border:1px solid var(--line2)}
.in-floors button{border:0;background:none;color:#fff;font:600 14px/1 var(--sans);padding:10px 12px;cursor:pointer}
.in-floors button[aria-pressed="true"]{background:var(--blue)}@media (hover:hover){.in-floors button:hover:not([aria-pressed="true"]){background:rgba(255,255,255,.1)}}
.inside .btn{padding:9px 12px}
.fade{position:fixed;inset:0;z-index:40;background:#0b0a0a;opacity:0;pointer-events:none;transition:opacity .28s ease}
.fade.on{opacity:1}
body[data-mode="inside"] .clock,body[data-mode="inside"] .info-tab,body[data-mode="inside"] .info-peek{display:none}
@media (max-width:600px){.inside{top:calc(var(--hh) + 8px);padding:8px 10px;gap:8px}.inside b{flex-basis:100%;text-align:center;font-size:14px}.in-floors button{padding:9px 9px;font-size:13px}}
body[data-mode="inside"] .hint{top:calc(var(--hh) + 86px)}
@media (max-width:600px){body[data-mode="inside"] .hint{top:calc(var(--hh) + 120px)}}

/* ---------- compass, road shields and direction letters ---------- */
.compass{position:fixed;z-index:12;right:16px;inset-block-end:118px;width:60px;height:60px;padding:0;border:0;background:none;cursor:pointer;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:50%}
.compass svg{width:60px;height:60px;display:block;transition:transform .08s linear;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
body[data-mode="tour"] .compass{display:none}
.rlabel{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;background:rgba(20,20,22,.78);border:1px solid var(--rc);color:#fff;font:600 12.5px/1 var(--sans);white-space:nowrap;pointer-events:none;direction:ltr}
.rlabel b{background:var(--rc);color:#111;padding:3px 6px;font:800 12px/1 var(--lat)}
.dlabel{position:absolute;left:0;top:0;font:800 30px/1 var(--lat);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8),0 0 2px #000;letter-spacing:.06em;pointer-events:none;white-space:nowrap}
@media (max-width:820px){.compass{right:10px;inset-block-end:150px;width:50px;height:50px}.compass svg{width:50px;height:50px}.dlabel{font-size:22px}}

/* ---------- the film: letterbox, caption, sound and progress ---------- */
.film{position:fixed;inset:0;z-index:30;pointer-events:none}
.film::before,.film::after{content:"";position:absolute;left:0;right:0;height:9vh;background:#0b0a0a;transition:height .5s ease}
.film::before{top:0}.film::after{bottom:0}
.film-cap{position:absolute;left:0;right:0;bottom:calc(9vh + 34px);margin-inline:auto;width:max-content;max-width:min(760px,calc(100vw - 48px));text-align:center;padding:0 12px}
.film-cap .k{margin:0 0 6px;font:600 11.5px/1 var(--lat);letter-spacing:.3em;text-transform:uppercase;color:#e9d9bd;opacity:.9}
.film-cap h2{margin:0;font:300 clamp(22px,3.4vw,38px)/1.25 var(--sans);color:#fff;text-shadow:0 4px 26px rgba(0,0,0,.6);text-wrap:balance}
.film-cap.in .k,.film-cap.in h2{animation:capIn .9s ease both}
@keyframes capIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.film-ctl{position:absolute;right:18px;bottom:calc(9vh + 16px);display:flex;gap:8px;align-items:center;pointer-events:auto}
.film-ctl .btn{padding:9px 14px;background:rgba(0,0,0,.45)}
#film-sound{width:40px;height:40px;border:1px solid var(--line2);background:rgba(0,0,0,.45);color:#fff;cursor:pointer;display:grid;place-items:center}
#film-sound[aria-pressed="false"] .w1,#film-sound[aria-pressed="false"] .w2{opacity:.18}
.film-bar{position:absolute;left:0;right:0;bottom:9vh;height:3px;background:rgba(255,255,255,.14)}
.film-bar i{display:block;height:100%;width:0;background:var(--blue)}
body[data-mode="story"] .dock,body[data-mode="story"] .joy,body[data-mode="story"] .clock,body[data-mode="story"] .info-tab,
body[data-mode="story"] .info-peek,body[data-mode="story"] .compass,body[data-mode="story"] .attrib,body[data-mode="story"] .hint,
body[data-mode="story"] header.site,body[data-mode="story"] #labels{opacity:0;pointer-events:none;transition:opacity .4s ease}

/* ---------- inside a house: floor map, rooms, floors ---------- */
.inside{position:fixed;z-index:14;top:calc(var(--hh) + 14px);right:16px;left:auto;bottom:auto;margin:0;width:308px;max-width:calc(100vw - 24px);display:block;background:var(--panel);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45);padding:12px}
.in-head{display:flex;align-items:center;gap:8px}
.in-head b{font:700 15.5px/1.25 var(--sans);color:#fff;flex:1}
.in-area{font:300 15px/1 var(--lat);color:var(--soft)}
.in-head .x{width:30px;height:30px;font-size:18px}
.in-map{position:relative;margin:10px 0 8px;background:#12171b;border:1px solid var(--line)}
.in-map canvas{display:block;width:100%;height:190px;cursor:crosshair}
.in-tip{position:absolute;left:0;right:0;bottom:0;padding:5px 8px;background:linear-gradient(transparent,rgba(10,12,14,.85));font:600 12px/1.3 var(--sans);color:var(--soft);text-align:center;pointer-events:none}
.in-rooms{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.in-rooms button{border:1px solid var(--line2);background:rgba(255,255,255,.05);color:#fff;font:600 13px/1 var(--sans);padding:8px 10px;cursor:pointer}.in-rooms button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue)}@media (hover:hover){.in-rooms button:hover{background:var(--blue);border-color:var(--blue)}}
.inside .in-floors{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr}
.in-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.in-open{position:fixed;z-index:14;top:calc(var(--hh) + 14px);right:16px;border:1px solid var(--line2);background:var(--panel);color:#fff;font:700 14px/1 var(--sans);padding:11px 14px;cursor:pointer}
body[data-mode="inside"] .compass,body[data-mode="inside"] .attrib{display:none}
@media (max-width:820px){
  .inside{top:auto;bottom:0;left:0;right:0;width:auto;max-width:none;border-inline:0;border-block-end:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));max-height:56vh;overflow:auto}
  .in-map canvas{height:150px}
  .in-open{top:auto;bottom:16px;right:12px}
  body[data-mode="inside"] .joy{inset-block-end:auto;top:calc(var(--hh) + 10px)}
  body[data-mode="inside"] .dock{display:none}
}

/* ---------- floor plans in the card ---------- */
.plan-wrap{background:#F6F2EA;border:1px solid var(--line);margin:0 0 10px}
.plan-wrap canvas{display:block;width:100%;height:min(46vh,420px)}
.pln-floors{grid-template-columns:1fr 1fr 1fr;margin-bottom:12px}
.pln-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:8px;font:600 13px/1 var(--sans);color:var(--soft)}
.pln-legend span{display:flex;align-items:center;gap:6px}
.pln-legend i{width:16px;height:10px;background:#888;display:block}
.pln-legend i.wall{background:#2B2F33}.pln-legend i.glass{background:#3FA9DA}.pln-legend i.door{background:#E4573F}
.pln-legend i.core{background:#E4DCCB}.pln-legend i.terr{background:#EAE3D6}
@media (max-width:600px){.plan-wrap canvas{height:min(40vh,320px)}.pln-floors{grid-template-columns:1fr;}.pln-floors button{padding:10px}}

/* ---------- compare ---------- */
.cmpbar{position:fixed;z-index:21;left:0;right:0;inset-block-end:116px;margin-inline:auto;width:max-content;max-width:calc(100vw - 24px);display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--panel);border:1px solid var(--line);box-shadow:0 14px 30px rgba(0,0,0,.4)}
.cmpbar span{font:700 14px/1 var(--sans);color:#fff}
.cmpbar .btn{padding:9px 13px}
.cmp-wrap{overflow-x:auto}
.cmp-tbl{border-collapse:collapse;width:100%;font-size:14px}
.cmp-tbl th,.cmp-tbl td{border-bottom:1px solid var(--line);padding:9px 8px;text-align:start;vertical-align:top}
.cmp-tbl thead th{font:800 15px/1.2 var(--sans);color:#fff;white-space:nowrap}
.cmp-tbl tbody th{font:600 13.5px/1.3 var(--sans);color:var(--muted);white-space:nowrap}
.cmp-tbl td{color:#fff;white-space:nowrap}
.cmp-tbl .win{color:#8FE0C8;font-weight:700}
.cmp-tbl .go{width:100%;margin-top:2px}
.vrow .cmpb{border:1px solid var(--line2);background:rgba(255,255,255,.05);color:#fff;width:30px;height:30px;font:700 16px/1 var(--lat);cursor:pointer;flex:none}
.vrow .cmpb[aria-pressed="true"]{background:var(--blue);border-color:var(--blue)}
.stock{margin:0 0 10px;font:700 14px/1.3 var(--sans);color:var(--soft)}
.stock b{color:#fff;font-family:var(--lat);font-weight:600}

/* ---------- delivery phases in the plots legend ---------- */
.plots-legend .seg2.pm{margin:0 0 8px;flex-basis:100%}
.plots-legend .seg2.pm button{padding:8px;font-size:13.5px}
.plots-legend .lg.h i{border-color:#ffd79a;background:rgba(201,138,46,.5)}
#lg-phases{flex-basis:100%}
.ph-row{display:flex;align-items:center;gap:8px;font:600 14px/1.5 var(--sans);color:#fff}
.ph-row i{width:18px;height:12px;flex:none;border:1px solid rgba(255,255,255,.5)}
.ph-row small{color:var(--soft);font-weight:400}
#lg-ph-note{margin:6px 0 0;font-size:12.5px;color:var(--muted);text-align:center}

/* ---------- weather + gyro ---------- */
.wx-l{margin-top:12px}
.clk-quick.wx button.on{background:var(--blue);border-color:var(--blue)}
#np-gyro[aria-pressed="true"]{background:var(--blue);border-color:var(--blue)}
.vrow-w{display:flex;gap:6px;align-items:stretch}
.vrow-w .vrow{flex:1;min-width:0}
.drawer.cmp{width:min(640px,calc(100vw - 32px))}
#plans .kick,#plans h2{padding-inline-end:52px}
@media (max-width:820px){.drawer.cmp{width:auto}}
.clk-temp{font:300 24px/1 var(--lat);color:var(--soft);margin-inline-start:2px;align-self:center}
@media (max-width:820px){.clk-temp{font-size:19px}}

/* ---------- navigation pad: brand blue, and it asks to be noticed until it is opened ---------- */
.joy-toggle{position:relative;background:none;border:2px solid var(--blue2);color:var(--blue2);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.joy-toggle svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}@media (hover:hover){.joy-toggle:hover{background:rgba(35,140,204,.18);border-color:var(--lit);color:var(--lit)}}
.joy-toggle[aria-expanded="true"]{background:none;border-color:var(--lit);color:var(--lit)}
.joy-toggle.nudge{animation:joyNudge 1.9s cubic-bezier(.25,.8,.3,1)}
.joy-toggle.nudge::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--blue2);animation:joyRing 1.9s ease-out;pointer-events:none}
@keyframes joyNudge{0%,100%{transform:none}10%{transform:translateX(9px) scale(1.12)}26%{transform:translateX(-7px) scale(1.07)}42%{transform:translateX(7px) scale(1.09)}58%{transform:translateX(-5px) scale(1.04)}74%{transform:translateX(4px) scale(1.02)}88%{transform:translateX(-2px)}}
@keyframes joyRing{0%{opacity:.95;transform:scale(1)}45%{opacity:.35;transform:scale(1.6)}55%{opacity:.8;transform:scale(1.05)}100%{opacity:0;transform:scale(2)}}
.joy-peek{position:absolute;left:62px;bottom:9px;padding:8px 12px;background:var(--panel);border:1px solid var(--blue);color:#fff;font:700 13.5px/1 var(--sans);white-space:nowrap;max-width:44vw;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateX(-8px);transition:opacity .3s ease,transform .3s ease;pointer-events:none;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.joy-peek.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.joy-toggle.nudge,.joy-toggle.nudge::after{animation:none}}

/* short screens: the skip button moves beside the compass instead of on top of it */
@media (max-height:600px){.skip{top:auto!important;bottom:100px;right:84px}}
.clk-temp.is-live{color:#fff;position:relative;padding-inline-end:12px}
.clk-temp.is-live::after{content:"";position:absolute;inset-block-start:3px;inset-inline-end:0;width:7px;height:7px;border-radius:50%;background:#5FBE8C;box-shadow:0 0 0 0 rgba(95,190,140,.6);animation:liveDot 2.6s ease-out infinite}
@keyframes liveDot{0%{box-shadow:0 0 0 0 rgba(95,190,140,.6)}70%{box-shadow:0 0 0 7px rgba(95,190,140,0)}100%{box-shadow:0 0 0 0 rgba(95,190,140,0)}}
.clk-temp{cursor:help}

/* ---------- printable one-page villa sheet ---------- */
.sheet{position:fixed;inset:0;z-index:300;background:#fff;color:#1b1b1c;overflow:auto;padding:26px 30px;font-family:var(--sans)}
.sh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;border-bottom:2px solid #231F20;padding-bottom:14px}
.sh-logo{height:34px;width:auto;background:#171717;padding:9px 14px}
.sh-id{display:flex;align-items:center;gap:14px}
.sh-no{font:200 46px/1 var(--lat);color:#238CCC}
.sh-kick{margin:0;font:600 11px/1 var(--lat);letter-spacing:.24em;color:#6b6b6b}
.sh-id h1{margin:4px 0 0;font:800 24px/1.1 var(--sans);color:#171717}
.sh-img{width:100%;height:auto;margin:16px 0;border:1px solid #ddd}
.sh-cols{display:grid;grid-template-columns:1.25fr .9fr;gap:24px}
.sh-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;align-content:start}
.sh-facts div{border-bottom:1px solid #e6e3de;padding-bottom:7px}
.sh-facts span{display:block;font-size:12px;color:#6b6b6b}
.sh-facts b{font:700 17px/1.2 var(--sans)}
.sh-price{border:1px solid #231F20;padding:16px}
.sh-lbl{margin:0;font-size:12px;color:#6b6b6b}
.sh-big{margin:2px 0 10px;font:300 34px/1 var(--lat);color:#171717}
.sh-incl{margin:0;padding-inline-start:18px;font-size:13px;line-height:1.7;color:#333}
.sh-fin{margin:10px 0 0;font-size:12px;color:#555;line-height:1.5}
.sh-foot{margin-top:18px;border-top:1px solid #d9d5ce;padding-top:12px}
.sh-foot p{margin:0 0 6px;font-size:12px;color:#555;line-height:1.5}
.sh-legal{font-size:10.5px;color:#777}
.sh-when{font-family:var(--lat);font-size:10.5px;color:#999}
@media print{
  body>*{display:none!important}
  body>.sheet{display:block!important;position:static;padding:0}
  .sh-img{break-inside:avoid}
  @page{size:A4;margin:14mm}
}
.plots-legend .seg2.pm3{grid-template-columns:1fr 1fr 1fr}
.sun-scale{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center}
.sun-b{display:flex;align-items:center;gap:7px;font:600 13.5px/1 var(--sans);color:#fff}
.sun-b i{width:16px;height:11px;display:block;border:1px solid rgba(255,255,255,.45)}
#lg-sun-note{flex-basis:100%;margin:7px 0 0;font-size:12.5px;color:var(--muted);text-align:center}
.vp-sun{margin:12px 0 0;padding:12px 14px;background:rgba(242,180,76,.12);border-inline-start:3px solid #F2B44C;font:400 15px/1.5 var(--sans);color:#fff}
.vp-sun b{font-weight:800;margin-inline-end:6px}
.vp-sun small{display:block;margin-top:5px;font-size:12.5px;color:var(--muted)}

/* ---- architect's drawing sheets in the villa card ---- */
.dwg-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.dwg-tabs button{flex:0 0 auto;padding:7px 11px;border-radius:9px;font-size:12.5px;line-height:1.1}
.dwg-wrap{position:relative;background:#f4f2ee;border:1px solid rgba(0,0,0,.1);border-radius:12px;overflow:auto;max-height:min(62vh,640px);display:flex;align-items:center;justify-content:center}
.dwg-wrap img{display:block;width:100%;height:auto;max-width:none}
@media (max-width:760px){.dwg-wrap{max-height:52vh}.dwg-wrap img{width:180%}}

/* ---- room schedule under the marketing floor plan ---- */
.pln-rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px 18px;margin:12px 0 4px;padding:0;list-style:none}
.pln-rooms li{display:flex;justify-content:space-between;gap:10px;padding:6px 2px;border-bottom:1px solid rgba(255,255,255,.12);font-size:13px}
.pln-rooms li span{color:rgba(255,255,255,.74)}
.pln-rooms li b{font-variant-numeric:tabular-nums;color:#fff}
.pln-rooms li.tot{border-bottom:none;border-top:2px solid rgba(255,255,255,.3);margin-top:4px;font-weight:700}
.pln-rooms li.tot span{color:#fff}

/* ---- fold the bottom bar away: the lakefront villas want the full frame ---- */
/* open: a slim grab handle sitting flush on the dock. away: a labelled pill that keeps calling. */
.dock-tab{position:fixed;inset-block-end:100px;left:0;right:0;margin-inline:auto;width:70px;height:22px;z-index:13;
  display:flex;align-items:center;justify-content:center;gap:7px;background:var(--panel);border:1px solid var(--line);border-block-end:0;
  border-start-start-radius:12px;border-start-end-radius:12px;
  color:#fff;cursor:pointer;padding:0;white-space:nowrap;
  transition:inset-block-end .34s cubic-bezier(.22,.61,.36,1),width .3s ease,height .3s ease,background .22s,border-color .3s,box-shadow .3s,color .22s}
.dock-tab .dt-arr{width:0;height:15px;opacity:0;transition:width .25s ease,opacity .2s ease,transform .34s ease}
.dock-tab .dt-grip{width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.55);transition:background .22s,width .25s ease,opacity .2s}
.dock-tab .dt-l{display:none;font:700 13px/1 var(--sans);letter-spacing:.01em}@media (hover:hover){.dock-tab:hover{background:rgba(255,255,255,.14)}}@media (hover:hover){.dock-tab:hover .dt-grip{background:#E7CFA8;width:32px}}

body.dock-off .dock{transform:translateY(170%);opacity:0;pointer-events:none}
body.dock-off .dock-tab{width:max-content;height:36px;padding-inline:18px;border-radius:18px;border:1px solid rgba(231,207,168,.55);
  background:linear-gradient(180deg,rgba(35,31,32,.97),rgba(24,21,22,.97));color:#E7CFA8;
  animation:dockCall 9s cubic-bezier(.33,.9,.35,1) infinite}
body.dock-off .dock-tab .dt-grip{width:0;opacity:0}
body.dock-off .dock-tab .dt-arr{width:15px;opacity:1;transform:rotate(180deg)}
body.dock-off .dock-tab .dt-l{display:block}body.dock-off .dock-tab:focus-visible{animation:none;transform:translateY(-3px);
  background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.45)}@media (hover:hover){body.dock-off .dock-tab:hover{animation:none;transform:translateY(-3px);
  background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.45)}}

/* a long, calm cycle: one small lift, one ring that opens and fades, then rest */
@keyframes dockCall{
  0%{transform:translateY(0);box-shadow:0 6px 18px rgba(0,0,0,.38),0 0 0 0 rgba(231,207,168,.35)}
  5%{transform:translateY(-8px);box-shadow:0 14px 26px rgba(0,0,0,.46),0 0 0 0 rgba(231,207,168,.35)}
  11%{transform:translateY(0);box-shadow:0 6px 18px rgba(0,0,0,.38),0 0 0 0 rgba(231,207,168,.35)}
  26%{box-shadow:0 6px 18px rgba(0,0,0,.38),0 0 0 12px rgba(231,207,168,0)}
  50%{transform:translateY(-3px)}
  100%{transform:translateY(0);box-shadow:0 6px 18px rgba(0,0,0,.38),0 0 0 0 rgba(231,207,168,0)}
}
@media (prefers-reduced-motion:reduce){body.dock-off .dock-tab{animation:none}@media (hover:hover){body.dock-off .dock-tab:hover{transform:none}}}

body[data-mode="inside"] .dock-tab,body[data-mode="story"] .dock-tab{display:none}
@media (max-width:760px){.dock-tab{width:76px;height:24px}body.dock-off .dock-tab{width:max-content;height:38px}}

/* Arabic (04.10.2026): letter-spacing breaks the joined Arabic script, so it is off for Arabic text; Latin spans keep lang="en" and stay spaced. */
:lang(ar){letter-spacing:normal!important}
/* Russian (04.10.2026): Assistant and Poppins have no Cyrillic, so Russian pages set text in Noto Sans (same sizes; Latin digits in --lat stay Poppins). */
:root:lang(ru){--sans:"Noto Sans","Assistant",Arial,sans-serif;--lat:"Poppins","Noto Sans",Arial,sans-serif}

/* ---------------- accessibility menu (js/a11y.js, 04.10.2026) — same options as the site's toolbar ---------------- */
.a11y-tab{position:fixed;z-index:115;left:0;top:calc(var(--hh) + 150px);width:46px;height:52px;display:grid;place-items:center;padding:0;border:0;border-radius:0 16px 16px 0;background:#6497CE;color:#fff;cursor:pointer;box-shadow:6px 8px 24px rgba(0,0,0,.35)}
.a11y-tab svg{width:28px;height:28px}.a11y-tab[aria-expanded="true"]{background:#1E7AB9}@media (hover:hover){.a11y-tab:hover{background:#1E7AB9}}
.a11y-tab.active::after{content:"";position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:#FFD400}
.a11y-tab:focus-visible,.a11y-panel :focus-visible{outline:3px solid #FFD400;outline-offset:2px}
.a11y-panel{position:fixed;z-index:116;left:56px;top:calc(var(--hh) + 12px);width:320px;max-width:calc(100vw - 68px);max-height:calc(100% - var(--hh) - 24px);overflow:auto;background:#fff;color:#1b1b1c;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.45);font:400 16px/1.35 var(--sans)}
.a11y-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:#333;color:#fff;border-radius:14px 14px 0 0;position:sticky;top:0}
.a11y-head h2{margin:0;font-size:18px;font-weight:700}
.a11y-x{width:36px;height:36px;border:0;background:none;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.a11y-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px}
.a11y-opt{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px 12px;border:2px solid #e4e6ea;border-radius:10px;background:#f5f6f8;color:#1b1b1c;font:600 14.5px/1.25 var(--sans);text-align:center;cursor:pointer}
.a11y-opt svg{width:26px;height:26px;color:#1E7AB9}
.a11y-sw{position:relative;width:38px;height:20px;border-radius:99px;background:#c9cdd3;transition:background .2s}
.a11y-sw::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.a11y-opt[aria-pressed="true"]{border-color:#1E7AB9;background:#e8f2fa}
.a11y-opt[aria-pressed="true"] .a11y-sw{background:#1E7AB9}
.a11y-opt[aria-pressed="true"] .a11y-sw::before{transform:translateX(18px)}
.a11y-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 14px 14px;font-size:14.5px}
.a11y-foot a{color:#1E7AB9}
.a11y-reset{border:0;background:none;padding:6px 0;color:#1b1b1c;font:600 14.5px var(--sans);text-decoration:underline;cursor:pointer}
@media (pointer:coarse),(max-width:819px){.a11y-tab{top:calc(var(--hh) + 90px);width:40px;height:46px}.a11y-tab svg{width:24px;height:24px}.a11y-panel{left:12px;width:auto;right:12px;max-width:none;top:calc(var(--hh) + 8px)}}
/* the effects; the menu itself stays as it is so it can always be switched back */
html.a11y-keyboard :focus{outline:3px solid #FFD400!important;outline-offset:2px!important}
html.a11y-noanim *,html.a11y-noanim *::before,html.a11y-noanim *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-contrast{--panel:#000;--panel2:#000;--line:#fff;--line2:#fff;--soft:#fff;--muted:#fff;--ground:#000}
html.a11y-contrast body > :not(#stage):not(#labels):not(.a11y-tab):not(.a11y-panel) :is(p,span,b,small,li,label,h1,h2,h3,td,th){color:#fff!important;text-shadow:none!important}
html.a11y-contrast :is(.drawer,.vp,.mcard,.poicard,.dock,.walk,.clock,.plots-legend,.facts-panel,.cc,.wz-card,.inside,.cmpbar,header.site){background:#000!important;border-color:#fff!important}
html.a11y-contrast body > :not(.a11y-panel) a{color:#FFD400!important}
/* text only (p, headings, list items, labels, buttons): zooming whole fixed panels pushes them past the screen edge on phones */
html.a11y-incfont body > :not(#stage):not(#labels):not(.a11y-panel) :is(p,h1,h2,h3,li,label,summary,td,th,small,.btn,.chips button,.dock span,.hint){zoom:1.15}
html.a11y-decfont body > :not(#stage):not(#labels):not(.a11y-panel) :is(p,h1,h2,h3,li,label,summary,td,th,small,.btn,.chips button,.dock span,.hint){zoom:.9}
html.a11y-readable body *:not(svg):not(svg *){font-family:Arial,"Arial Hebrew","Noto Sans Arabic",sans-serif!important;letter-spacing:normal!important}
html.a11y-titles body > :not(.a11y-panel) :is(h1,h2,h3){outline:2px dashed #FFD400!important;outline-offset:4px;text-decoration:underline 3px #FFD400;text-underline-offset:5px}
html.a11y-links body > :not(.a11y-panel):not(.a11y-tab) :is(a,button){text-decoration:underline!important;outline:2px solid #FFD400!important;outline-offset:1px}

/* ---------- 05.10.2026 · Emil Kowalski review fixes ---------- */
/* the joystick always sits above the bottom bar (its top is measured in ui.js: --docktop) */
.joy{inset-block-end:calc(var(--docktop, 104px) + 24px)!important}
body[data-mode="inside"] .joy{inset-block-end:auto!important}
/* the guide card: a 44px close button that no longer sits on the "1 / 6" counter; a disabled Back looks disabled */
.wz-x{width:44px;height:44px;top:6px;left:6px}
.wz-card .kick{padding-left:48px;min-height:22px}
#wz-back:disabled{opacity:.4;cursor:default}
/* the guide and the cookie card never show together; the cookie card steps aside while a list or panel is open */
body.wiz-on .cc{visibility:hidden}
body:has(#finder:not([hidden])) .cc,body:has(.drawer:not([hidden])) .cc,body:has(#vp:not([hidden])) .cc{opacity:0;pointer-events:none}
/* "Book a meeting" and the town-facts tab: white text on a deeper blue, 4.78:1 (was 3.69:1 on #238CCC) */
.cta,.info-tab{background:#1A78B4}
@media (hover:hover){@media (hover:hover){.cta:hover{background:#166A9F}}}
/* the meeting card fits the visible screen on iPhone (the toolbar no longer cuts its bottom) */
.mcard{max-height:calc(100dvh - 32px)}
/* touch targets of 44px without changing any text */
.help-btn{width:44px;height:44px}
.cc-b{min-height:44px}
#dock-tab{min-height:44px}
.attrib a,.attrib button{display:inline-flex;align-items:center;min-height:32px}
/* press feedback on every button of the tour */
:is(.cta,.btn,.sq,.cc-b,.help-btn,.dock button,.joy-toggle,.joy-col button,.langs button,.x):active{scale:.96}

/* 05.10: the film "a day at home" — the film's own clock and the closing card */
.film-clock{position:absolute;top:calc(9vh + 18px);inset-inline-start:22px;display:flex;align-items:baseline;gap:10px;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.55)}
.film-clock b{font:200 clamp(26px,3.2vw,40px)/1 var(--lat);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.film-clock span{font:600 11.5px/1 var(--lat);letter-spacing:.3em;color:#e9d9bd;opacity:.9}
.film-end{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;opacity:0;transform:translateY(8px);transition:opacity 1.4s cubic-bezier(.23,1,.32,1),transform 1.4s cubic-bezier(.23,1,.32,1)}
.film-end img{width:min(300px,62vw);height:auto;filter:drop-shadow(0 6px 30px rgba(0,0,0,.5))}
.film-end p{margin:6px 0 0;font:300 clamp(26px,4vw,46px)/1.15 var(--sans);color:#fff;text-shadow:0 4px 26px rgba(0,0,0,.6)}
.film-end small{font:600 12px/1.4 var(--lat);letter-spacing:.24em;text-transform:uppercase;color:#e9d9bd}
.film.ending .film-end{opacity:1;transform:none}
.film.ending .film-cap,.film.ending .film-clock{opacity:0;transition:opacity .8s ease}
@media (max-width:760px){.film-clock{top:calc(9vh + 12px);inset-inline-start:16px}.film-cap{bottom:calc(9vh + 74px)}}
@media (prefers-reduced-motion:reduce){.film-end{transition:opacity .4s linear;transform:none}}
.capture .film *,.capture .film::before,.capture .film::after{animation:none!important;transition:none!important}
:lang(he) .film-cap .k,:lang(ar) .film-cap .k{letter-spacing:0;font-size:14px;font-family:inherit}

/* ---------- 06.10.2026 · Emil check 2 ---------- */
/* the language button grows with its code (EN/HE...) instead of letting it spill onto the phone button */
.sq.lp-btn{width:auto;min-width:46px}
/* the compass sits on the same line as the joystick, above the bottom bar, so it never covers the first dock item on phones */
.compass{inset-block-end:calc(var(--docktop, 104px) + 24px)!important}
.credit b{margin-left:.25em}